/* HTD Growth — Wrapped story, Share landing funnel, Platform surfaces */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel, toast } = window.HTDUI;
  const F = window.HTD_FIX;

  // ---------- SEASON WRAPPED (auto-advancing story) ----------
  function Wrapped() {
    const nav = useNav(); const W = F.wrapped;
    const [i, setI] = useState(0);
    useEffect(() => {
      const t = setTimeout(() => setI(n => Math.min(n + 1, W.slides.length - 1)), 2600);
      return () => clearTimeout(t);
    }, [i]);
    const s = W.slides[i];
    const last = i === W.slides.length - 1;
    return (
      <div className="pushview grid-bg" style={{ position:'absolute', inset:0, zIndex:50, background:'var(--void)', display:'flex', flexDirection:'column' }}
        onClick={()=> last ? null : setI(n=>n+1)}>
        <div style={{ display:'flex', gap:5, padding:'58px 16px 0' }}>
          {W.slides.map((_,j)=>(
            <div key={j} style={{ flex:1, height:3, borderRadius:2, background: j<=i?'var(--acid)':'var(--hairline-2)' }} />))}
        </div>
        <div className="row between" style={{ padding:'12px 16px 0' }}>
          <span className="label-mono acid">{W.season} WRAPPED</span>
          <button className="iconbtn" onClick={(e)=>{ e.stopPropagation(); nav.pop(); }}><Icon name="x" size={20} /></button>
        </div>
        <div key={i} className="screen-enter" style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 34px' }}>
          <div className="label-mono" style={{ letterSpacing:3 }}>{s.k}</div>
          <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize: s.v.length>4?52:110, lineHeight:.9, color:'var(--acid)',
            margin:'14px 0', textTransform:'uppercase', textShadow:'0 0 40px var(--acid-glow)' }}>{s.v}</div>
          <div className="muted" style={{ fontSize:15 }}>{s.sub}</div>
        </div>
        <div style={{ padding:'0 20px 40px' }}>
          {last
            ? <button className="btn-primary" onClick={(e)=>{ e.stopPropagation(); nav.pop(); nav.push('ShareStudio'); }}>SHARE YOUR SEASON<span className="sub">#PROVEIT</span></button>
            : <div className="label-mono" style={{ textAlign:'center', color:'var(--steel)' }}>TAP TO CONTINUE</div>}
        </div>
      </div>
    );
  }

  // ---------- SHARE LANDING (the link your card points to) ----------
  function ShareLanding() {
    const nav = useNav();
    return (
      <div className="pushview" style={{ position:'absolute', inset:0, zIndex:50, background:'#0c0d0c', display:'flex', flexDirection:'column' }}>
        {/* faux mobile-safari chrome */}
        <div style={{ padding:'56px 14px 10px', background:'#161716', borderBottom:'1px solid rgba(255,255,255,0.08)' }}>
          <div className="row" style={{ gap:10 }}>
            <button className="iconbtn" onClick={()=>nav.pop()}><Icon name="back" size={20} /></button>
            <div style={{ flex:1, height:34, borderRadius:9, background:'#0a0b0a', border:'1px solid rgba(255,255,255,0.08)',
              display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
              <Icon name="lock" size={11} color="var(--steel)" />
              <span className="num-mono" style={{ fontSize:12, color:'var(--bone-muted)' }}>htd.app/p/x92k4</span>
            </div>
          </div>
        </div>
        <div className="screen-body grid-bg" style={{ padding:'18px 20px 40px' }}>
          <div className="label-mono acid" style={{ letterSpacing:3 }}>VERIFIED PROOF · HARD THINGS DAILY</div>
          <div className="display-xl" style={{ fontSize:32, margin:'10px 0 4px' }}>DANIEL K. PROVED IT.</div>
          <div className="muted" style={{ fontSize:13.5 }}>RUN 10K FASTED · proof confidence HIGH</div>
          <Panel glow style={{ marginTop:16 }}>
            <div className="row" style={{ gap:0 }}>
              {[['10.02 KM','DISTANCE'],['4:58 /KM','PACE'],['49:52','TIME']].map(([v,l],i)=>(
                <div key={l} style={{ flex:1, borderLeft: i?'1px solid var(--hairline)':'none', paddingLeft: i?12:0 }}>
                  <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:19 }}>{v}</div>
                  <div className="label-mono" style={{ marginTop:4 }}>{l}</div></div>))}
            </div>
          </Panel>
          <Panel style={{ marginTop:12 }}>
            <div className="label-mono" style={{ marginBottom:8 }}>THE CALLOUT</div>
            <div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:17, lineHeight:1.25 }}>Think you can hold 4:58s fasted? Run the same mission. Prove it.</div>
          </Panel>
          <button className="btn-primary" style={{ marginTop:18 }} onClick={()=>toast('OPENS APP STORE · DEEP LINK CARRIES THE DUEL')}>
            ACCEPT THE MISSION<span className="sub">GET HTD · JOIN 1.2M ATHLETES</span></button>
          <button className="btn-ghost" style={{ marginTop:10 }} onClick={()=>toast('OPENS IN APP · DEEP LINK')}>I HAVE THE APP</button>
          <div className="label-mono" style={{ textAlign:'center', marginTop:18, color:'var(--steel)' }}>EVERY SHARE LINK IS AN ACQUISITION FUNNEL</div>
        </div>
      </div>
    );
  }

  // ---------- PLATFORM SURFACES (widget / watch / island) ----------
  function Surfaces() {
    return (
      <PushView title="HTD EVERYWHERE">
        <div className="muted" style={{ fontSize:13, marginTop:8, lineHeight:1.5 }}>
          Habit surface area for the RN build — the trigger lives outside the app icon.</div>

        <SectionLabel>LOCK-SCREEN WIDGET</SectionLabel>
        <div style={{ borderRadius:18, padding:16, background:'linear-gradient(160deg,#1b1d19,#0b0c0a)', border:'1px solid var(--hairline-2)' }}>
          <div className="row between">
            <div className="row" style={{ gap:9 }}>
              <div style={{ width:34, height:34, borderRadius:8, background:'#0a0d0a', border:'1px solid var(--border-active)', display:'grid', placeItems:'center' }}>
                <Icon name="flame" size={17} color="var(--acid)" /></div>
              <div><div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:15 }}>RUN 10K FASTED</div>
                <div className="label-mono">DROPS 05:00 · 18 DAY STREAK</div></div>
            </div>
            <span className="label-mono acid">5:42:18</span>
          </div>
        </div>

        <SectionLabel>DYNAMIC ISLAND · LIVE MISSION</SectionLabel>
        <div style={{ display:'grid', placeItems:'center', padding:'6px 0' }}>
          <div className="row between" style={{ width:300, height:42, borderRadius:21, background:'#000', border:'1px solid rgba(255,255,255,0.1)', padding:'0 16px' }}>
            <div className="row" style={{ gap:8 }}>
              <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--acid)', boxShadow:'0 0 8px var(--acid)' }} />
              <span className="label-mono" style={{ color:'var(--bone)' }}>MISSION LIVE</span></div>
            <span className="num-mono" style={{ fontSize:13, color:'var(--acid)' }}>18:52 · 7.2K</span>
          </div>
        </div>

        <SectionLabel>WATCH · START FROM THE WRIST</SectionLabel>
        <div style={{ display:'grid', placeItems:'center', padding:'8px 0' }}>
          <div style={{ width:170, height:200, borderRadius:42, background:'linear-gradient(150deg,#23251f,#0a0b09)', border:'2px solid #000',
            boxShadow:'0 14px 34px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.07)', display:'flex', flexDirection:'column',
            alignItems:'center', justifyContent:'center', gap:8, position:'relative' }}>
            <div style={{ position:'absolute', right:-6, top:54, width:6, height:34, borderRadius:3, background:'#1a1c18' }} />
            <div className="label-mono" style={{ fontSize:7.5 }}>TODAY'S MISSION</div>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:17, textAlign:'center', lineHeight:1 }}>RUN 10K<br/>FASTED</div>
            <div style={{ width:84, padding:'8px 0', borderRadius:16, background:'var(--acid)', color:'#0a1400', textAlign:'center',
              fontFamily:'var(--display)', fontWeight:700, fontSize:12, letterSpacing:1 }}>START</div>
            <div className="label-mono" style={{ fontSize:7.5, color:'var(--acid)' }}>HR + GPS AUTO-PROOF</div>
          </div>
        </div>

        <SectionLabel>HOME-SCREEN WIDGET · STREAK</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div style={{ aspectRatio:'1', borderRadius:22, background:'linear-gradient(160deg,#141710,#080907)', border:'1px solid var(--hairline-2)',
            padding:14, display:'flex', flexDirection:'column' }}>
            <Icon name="flame" size={18} color="var(--acid)" />
            <div style={{ marginTop:'auto' }}>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:38, lineHeight:.9, color:'var(--acid)' }}>18</div>
              <div className="label-mono" style={{ marginTop:4 }}>DAY STREAK</div></div>
          </div>
          <div style={{ aspectRatio:'1', borderRadius:22, background:'linear-gradient(160deg,#141710,#080907)', border:'1px solid var(--hairline-2)',
            padding:14, display:'flex', flexDirection:'column' }}>
            <Icon name="shield" size={18} color="var(--bone-muted)" />
            <div style={{ marginTop:'auto' }}>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:22, lineHeight:1 }}>9/12</div>
              <div className="label-mono" style={{ marginTop:4 }}>CREW DONE TODAY</div></div>
          </div>
        </div>
      </PushView>
    );
  }

  window.HTDMoments = { Wrapped, ShareLanding, Surfaces };
})();