/* HTD Catalog Layer — seasonal challenge catalog shelves + App Store kit */
(function () {
  const { useState } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel, toast } = window.HTDUI;
  const F = window.HTD_FIX;

  // ---------- SEASONAL CATALOG (rendered inside Challenge Hub DISCOVER) ----------
  function CatalogShelves() {
    const nav = useNav();
    const [cat, setCat] = useState('ALL');
    const C = F.challenges;
    return (
      <div>
        {/* category shelf filter */}
        <div className="seg" style={{ flexWrap:'wrap', marginTop:12 }}>
          {C.categories.map(c => (
            <button key={c} className={'seg-item'+(cat===c?' active':'')} onClick={()=>setCat(c)}>{c}</button>))}
        </div>

        {/* monthly flagship calendar */}
        <SectionLabel>SEASON CALENDAR · A FLAGSHIP EVERY MONTH</SectionLabel>
        <div style={{ display:'flex', gap:10, overflowX:'auto', paddingBottom:6, scrollbarWidth:'none' }}>
          {C.calendar.map((m) => (
            <button key={m.code} onClick={()=>nav.push('ChallengeDetail')} style={{ flex:'0 0 218px', textAlign:'left', cursor:'pointer',
              borderRadius:'var(--r-lg)', overflow:'hidden', padding:14, position:'relative',
              border:'1px solid '+(m.state==='LIVE'?'var(--border-active)':'var(--hairline-2)'),
              background:'linear-gradient(155deg,#151a0f,#070806 75%)',
              boxShadow: m.state==='LIVE'?'0 0 18px -10px var(--acid-glow)':'none' }}>
              <div className="row between">
                <span className="label-mono" style={{ color: m.state==='LIVE'?'var(--acid)':'var(--steel)' }}>{m.code}</span>
                <span className="label-mono" style={{ color: m.state==='LIVE'?'var(--danger)':'var(--steel)' }}>{m.state==='LIVE'?'● LIVE':m.state}</span>
              </div>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:24, lineHeight:.95, margin:'12px 0 4px' }}>{m.name}</div>
              <div className="label-mono acid" style={{ fontSize:8.5 }}>{m.tagline}</div>
              <div className="muted" style={{ fontSize:11.5, marginTop:8 }}>{m.sub}</div>
              <div className="label-mono" style={{ marginTop:10 }}>{m.joined} ATHLETES</div>
            </button>))}
        </div>

        {/* beginner ladder */}
        <SectionLabel>THE LADDER · START WHERE YOU ARE</SectionLabel>
        <Panel pad={false}>
          {C.ladders.map(([code, name, sub, flagship], i) => (
            <button key={code} onClick={()=>nav.push('ChallengeDetail')} className="row between" style={{ width:'100%', padding:'13px 14px',
              background: flagship?'rgba(152,255,16,0.04)':'none', border:'none', cursor:'pointer', textAlign:'left',
              borderBottom: i<C.ladders.length-1?'1px solid var(--hairline)':'none' }}>
              <div className="row" style={{ gap:12 }}>
                <span className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:15, width:54, color: flagship?'var(--acid)':'var(--bone)' }}>{code}</span>
                <div><div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:14.5, color: flagship?'var(--acid)':'var(--bone)' }}>{name}</div>
                  <div className="label-mono" style={{ marginTop:2, textTransform:'none', letterSpacing:.4 }}>{sub}</div></div>
              </div>
              <Icon name="chevronRight" size={16} color="var(--steel)" />
            </button>))}
        </Panel>

        {/* skill arcs */}
        <SectionLabel>SKILL ARCS · FINISH A THING</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9 }}>
          {C.skillArcs.filter(a=>cat==='ALL'||a[1]===cat).map(([name, tag, sub, ic]) => (
            <button key={name} onClick={()=>nav.push('ChallengeDetail')} style={{ textAlign:'left', cursor:'pointer', padding:13,
              background:'var(--panel)', border:'1px solid var(--hairline)', borderRadius:'var(--r)', display:'flex', flexDirection:'column', gap:9, minHeight:104 }}>
              <Icon name={ic} size={20} color="var(--acid)" />
              <div style={{ marginTop:'auto' }}>
                <div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:14, lineHeight:1.1 }}>{name}</div>
                <div className="label-mono" style={{ marginTop:4 }}>{tag}</div>
                <div className="muted" style={{ fontSize:11, marginTop:3 }}>{sub}</div>
              </div>
            </button>))}
        </div>

        {/* partner contract */}
        <SectionLabel>PARTNER · THE TWO-MAN CONTRACT</SectionLabel>
        <Panel glow>
          <div className="row between" style={{ marginBottom:8 }}>
            <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:17 }}>{C.partner.name}</span>
            <Icon name="crew" size={18} color="var(--acid)" /></div>
          <div className="muted" style={{ fontSize:12.5, lineHeight:1.5 }}>{C.partner.sub}</div>
          <div className="label-mono amber-c" style={{ marginTop:10 }}>{C.partner.rule}</div>
          <button className="btn-ghost" style={{ marginTop:12 }} onClick={()=>toast('CONTRACT SENT · AWAITING THEIR SIGNATURE')}>SEND A CONTRACT</button>
        </Panel>
      </div>
    );
  }

  // ---------- APP STORE KIT ----------
  function AppIcon({ size }) {
    // reuse the brand mark (clipped slash, not a strikethrough) on a store squircle
    const Mark = window.HTDAuth.HTDMark;
    return (
      <div style={{ borderRadius:size*0.225, overflow:'hidden', boxShadow:'0 10px 26px rgba(0,0,0,0.55)' }}>
        <Mark size={size} />
      </div>
    );
  }

  function StoreKit() {
    const K = F.storeKit;
    return (
      <PushView title="APP STORE KIT">
        <SectionLabel style={{ marginTop:8 }}>APP ICON · SQUIRCLE GRID</SectionLabel>
        <Panel><div className="row" style={{ gap:18, alignItems:'flex-end', justifyContent:'center' }}>
          <AppIcon size={96} /><AppIcon size={64} /><AppIcon size={44} /><AppIcon size={28} />
        </div>
        <div className="label-mono" style={{ textAlign:'center', marginTop:12 }}>READS AT EVERY SIZE · NO WORDMARK NEEDED</div></Panel>

        <SectionLabel>STORE SCREENSHOTS · THE SIX</SectionLabel>
        <div style={{ display:'flex', gap:10, overflowX:'auto', paddingBottom:8, scrollbarWidth:'none' }}>
          {K.shots.map(([head, sub], i) => (
            <div key={i} style={{ flex:'0 0 168px', borderRadius:14, border:'1px solid var(--hairline-2)', overflow:'hidden',
              background:'linear-gradient(165deg,#11150d,#060705 70%)', display:'flex', flexDirection:'column', minHeight:300 }}>
              <div style={{ padding:'14px 12px 10px' }}>
                <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:16, lineHeight:1.02, textTransform:'uppercase' }}>{head}</div>
                <div className="muted" style={{ fontSize:9.5, marginTop:6, lineHeight:1.4 }}>{sub}</div>
              </div>
              {/* mini device */}
              <div style={{ margin:'auto 18px -34px', flex:1, minHeight:150, borderRadius:'18px 18px 0 0', background:'#0a0c09',
                border:'1px solid rgba(255,255,255,0.09)', borderBottom:'none', padding:'10px 8px 0', display:'flex', flexDirection:'column', gap:5 }}>
                <div style={{ height:5, width:'42%', borderRadius:2, background:'var(--acid)', opacity:.9 }} />
                <div style={{ height:9, width:'82%', borderRadius:2, background:'rgba(244,241,232,0.85)' }} />
                <div style={{ height:9, width:'64%', borderRadius:2, background:'rgba(244,241,232,0.55)' }} />
                <div style={{ flex:1, borderRadius:6, marginTop:4, background:'repeating-linear-gradient(135deg, rgba(152,255,16,0.05) 0 8px, transparent 8px 16px)', border:'1px solid var(--hairline)' }} />
                <div style={{ height:18, borderRadius:5, background:'var(--acid)', marginBottom:8 }} />
              </div>
            </div>))}
        </div>
        <div className="label-mono" style={{ textAlign:'center', marginTop:6 }}>{K.sub}</div>

        <SectionLabel>FEATURE BANNER</SectionLabel>
        <div style={{ borderRadius:'var(--r-lg)', border:'1px solid var(--border-active)', overflow:'hidden', position:'relative',
          background:'linear-gradient(150deg,#141a0d,#060705 75%)', padding:'20px 18px', boxShadow:'0 0 24px -12px var(--acid-glow)' }}>
          <div className="row" style={{ gap:14, alignItems:'center' }}>
            <AppIcon size={52} />
            <div style={{ minWidth:0 }}>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:18, lineHeight:1, whiteSpace:'nowrap' }}>HARD THINGS DAILY</div>
              <div className="label-mono acid" style={{ marginTop:6 }}>DISCIPLINE · PROOF · FREEDOM</div>
            </div>
          </div>
          <div className="display-lg" style={{ fontSize:17, marginTop:14, color:'var(--bone-muted)' }}>NO ONE IS COMING. <span className="acid">EARN YOUR FREEDOM.</span></div>
        </div>
      </PushView>
    );
  }

  window.HTDCatalog = { CatalogShelves, StoreKit };
})();