/* Typic showcase — scenes + orchestrator. Depends on animations.jsx + demo-components.jsx. */

// ── bilingual copy source ────────────────────────────────────
const LANG = {
  en: {
    cap1:'1 · Add photos + keywords',
    cap2:'2 · AI writes your post',
    cap3:'3 · Publish to LinkedIn',
    hint:'What happened today?',
    keywords:'just sold · 3-bed on Maple St · over asking',
    chips:['just sold','over asking','6 days on market'],
    tone:['Confident','Warm','Concise'],
    company:'Marlene Holm',
    metaNew:'New post',
    writing:'Writing your post',
    posts:[
      'SOLD — and $40K over asking 🔑 Six days on the market for this 3-bed bungalow on Maple Street. The right home meets the right buyer when the story is told well. Who is next?',
      'Keys handed over today 🏡 This charming 3-bed on Maple Street found its family in under a week — and closed over asking. Grateful to clients who trusted the process.',
      'Just sold. 3-bed bungalow, 6 days, over asking. Maple Street has new owners. Thinking of selling? Let us talk.'
    ],
    connect:'Connected to LinkedIn',
    publish:'Publish to LinkedIn',
    published:'Published',
    postedBy:'Posted by Typic · now',
    onbrand:'On-brand',
    tagline:'Professional storytelling made simple.',
    cta:'Get started',
  },
  da: {
    cap1:'1 · Tilføj billeder + nøgleord',
    cap2:'2 · AI skriver dit opslag',
    cap3:'3 · Udgiv til LinkedIn',
    hint:'Hvad skete der i dag?',
    keywords:'lige solgt · 3-vær. villa · over udbudspris',
    chips:['lige solgt','over udbudspris','6 dage på markedet'],
    tone:['Selvsikker','Varm','Kort'],
    company:'Marlene Holm',
    metaNew:'Nyt opslag',
    writing:'Skriver dit opslag',
    posts:[
      'SOLGT — og 250.000 over udbudsprisen 🔑 Seks dage på markedet for denne 3-værelses villa på Birkevej. Det rette hjem møder den rette køber, når historien fortælles rigtigt. Hvem er den næste?',
      'Nøglerne er overdraget i dag 🏡 Denne charmerende 3-værelses på Birkevej fandt sin familie på under en uge — og solgte over udbudsprisen. Tak til kunder, der stolede på processen.',
      'Lige solgt. 3-vær. villa, 6 dage, over udbudspris. Birkevej har nye ejere. Overvejer du at sælge? Lad os tale sammen.'
    ],
    connect:'Forbundet til LinkedIn',
    publish:'Udgiv til LinkedIn',
    published:'Udgivet',
    postedBy:'Slået op af Typic · nu',
    onbrand:'I tonen',
    tagline:'Professionel historiefortælling gjort enkel.',
    cta:'Kom i gang',
  }
};

// generic professional-network glyph (NOT the LinkedIn logo)
function NetIcon({ size=22, color='#fff', bg=CO.accent }){
  return (
    <span style={{width:size, height:size, borderRadius:5, background:bg, display:'grid',
      placeItems:'center', flex:'none'}}>
      <span style={{fontFamily:CO.disp, fontWeight:800, fontSize:size*0.6, color}}>in</span>
    </span>
  );
}

// ── COMPOSE CARD (hook + step 1) ─────────────────────────────
const CARD = { x:580, y:160, w:760, h:690 };

function ComposeScene({ L }){
  const t = useTime();
  const o = ramp(t, 0.3, 1.1, 11.6, 12.4);
  if (o <= 0.001) return null;
  const inP = track(t,0.3,1.1,Easing.easeOutBack);
  const exitP = track(t,11.6,12.4,Easing.easeInCubic);
  const bob = Math.sin(t*1.1)*5;
  const scale = (0.95+0.05*inP) * (1 - 0.05*exitP);

  // photo fills
  const tiles = [0,1,2,3,4,5].map(i=>{
    const s = 3.0 + i*0.22;
    return track(t, s, s+0.55, Easing.easeOutBack);
  });
  const hintO = ramp(t,0.9,1.4,2.9,3.4);
  const typing = t>=5.3 && t<8.1;
  const kwText = typed(L.keywords, t, 5.5, 7.9);
  const showChips = t>=8.1;
  const caret = (Math.floor(t*1.6)%2===0);
  const genO = ramp(t,8.5,9.0, 9.7,10.0); // button hides when writing starts
  const writeO = ramp(t,9.9,10.3, 11.8,12.2);

  return (
    <div style={{position:'absolute', left:CARD.x, top:CARD.y, width:CARD.w, height:CARD.h,
      opacity:o, transform:`translateY(${bob}px) scale(${scale})`, transformOrigin:'50% 40%',
      background:'#fff', borderRadius:26, padding:40, boxSizing:'border-box',
      boxShadow:'0 40px 90px -30px rgba(0,0,0,0.6)', fontFamily:CO.body}}>

      {/* header */}
      <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:22}}>
        <Avatar size={46} text="MH" />
        <div style={{lineHeight:1.15}}>
          <div style={{fontFamily:CO.disp, fontWeight:700, fontSize:22, color:CO.ink}}>{L.company}</div>
          <div style={{fontFamily:CO.mono, fontSize:14, color:CO.slate}}>{L.metaNew}</div>
        </div>
        <span style={{marginLeft:'auto', fontFamily:CO.mono, fontSize:13, color:CO.accentD,
          background:CO.tint, border:'1px solid #DCE4F8', borderRadius:999, padding:'6px 12px'}}>Draft</span>
      </div>

      {/* photo grid */}
      <div style={{position:'relative', display:'grid', gridTemplateColumns:'repeat(3,1fr)',
        gap:16, marginBottom:22}}>
        {tiles.map((f,i)=>(<PhotoTile key={i} fill={f} label={i===4 ? '+5' : null} />))}
        {/* empty-state hint */}
        {hintO>0.01 && <div style={{position:'absolute', inset:0, display:'grid', placeItems:'center',
          opacity:hintO, color:CO.slate, fontFamily:CO.disp, fontWeight:600, fontSize:30}}>{L.hint}</div>}
      </div>

      {/* keyword field */}
      <div style={{minHeight:64, borderRadius:14, border:'1.5px solid '+CO.line, background:CO.mist,
        padding:'0 18px', display:'flex', alignItems:'center', flexWrap:'wrap', gap:9}}>
        {!showChips && <span style={{fontFamily:CO.mono, fontSize:19,
          color: kwText? CO.ink : CO.slate}}>
          {kwText || L.hint}{(typing||t<5.3)&&caret ? <span style={{color:CO.accent}}>|</span> : ''}
        </span>}
        {showChips && L.chips.map((c,i)=>{
          const cs = track(t, 8.1+i*0.16, 8.5+i*0.16, Easing.easeOutBack);
          return <Chip key={i} scale={0.6+0.4*cs} opacity={cs}>{c}</Chip>;
        })}
      </div>

      {/* generate button */}
      {genO>0.01 && <div style={{position:'absolute', left:0, right:0, bottom:34,
        display:'flex', justifyContent:'center', opacity:genO}}>
        <Btn pressed={t>=9.6 && t<=9.95}>✦ {LANG._gen ? '' : ''}{ /* label set below */ }
          <span style={{marginLeft:0}}>{currentGenerateLabel(L)}</span></Btn>
      </div>}

      {/* writing overlay (shimmer + sparkles + label) */}
      {writeO>0.01 && <div style={{position:'absolute', inset:0, borderRadius:26, overflow:'hidden',
        opacity:writeO, pointerEvents:'none'}}>
        <div style={{position:'absolute', inset:0, background:'rgba(255,255,255,0.55)'}}/>
        <div style={{position:'absolute', top:0, bottom:0, width:'45%',
          left:`${-45 + track(t,10.0,12.0,Easing.easeInOutSine)*145}%`,
          background:'linear-gradient(100deg, transparent, rgba(46,91,255,0.18), transparent)'}}/>
        <Sparkles t={t} start={10.0} end={12.2} />
        <div style={{position:'absolute', inset:0, display:'grid', placeItems:'center'}}>
          <div style={{display:'flex', alignItems:'center', gap:12,
            fontFamily:CO.disp, fontWeight:700, fontSize:28, color:CO.accentD}}>
            <span style={{fontSize:26}}>✦</span>{L.writing}{'.'.repeat(1+Math.floor((t*3)%3))}
          </div>
        </div>
      </div>}
    </div>
  );
}
function currentGenerateLabel(L){ return L===LANG.da ? 'Generér opslag' : 'Generate post'; }

// ── POST CARD (used in variations + publish) ─────────────────
function PostCard({ L, idx, reactions=false, likes=0 }){
  return (
    <div style={{width:660, background:'#fff', borderRadius:20, padding:26, boxSizing:'border-box',
      boxShadow:'0 30px 70px -28px rgba(11,18,32,0.6)', fontFamily:CO.body}}>
      <div style={{display:'flex', alignItems:'center', gap:13, marginBottom:16}}>
        <Avatar size={46} text="MH" />
        <div style={{lineHeight:1.15, minWidth:0}}>
          <div style={{fontFamily:CO.disp, fontWeight:700, fontSize:21, color:CO.ink}}>{L.company}</div>
          <div style={{fontFamily:CO.mono, fontSize:13, color:CO.slate}}>{L.postedBy}</div>
        </div>
        <span style={{marginLeft:'auto', fontFamily:CO.mono, fontSize:12, color:CO.accentD,
          background:CO.tint, border:'1px solid #DCE4F8', borderRadius:999, padding:'5px 11px', whiteSpace:'nowrap'}}>{L.onbrand}</span>
      </div>
      <div style={{fontSize:21, lineHeight:1.5, color:'#15202B', marginBottom:16,
        minHeight:96}}>{L.posts[idx]}</div>
      <div style={{borderRadius:12, overflow:'hidden'}}><PhotoTileWide /></div>
      {reactions && <div style={{display:'flex', alignItems:'center', gap:22, marginTop:16,
        fontSize:16, color:CO.slate, fontFamily:CO.body, fontWeight:600}}>
        <span style={{display:'flex', alignItems:'center', gap:7, color:CO.accentD}}>▲ {likes}</span>
        <span>32</span>
        <span style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:8, color:'#1F9B5B', fontWeight:700}}>
          ✓ {L.published}</span>
      </div>}
    </div>
  );
}
function PhotoTileWide(){
  return (
    <div style={{position:'relative', width:'100%', height:150,
      background:'linear-gradient(135deg,#1b2742,#0e1626)'}}>
      <div style={{position:'absolute', inset:0,
        background:'repeating-linear-gradient(45deg, rgba(124,155,255,0.10) 0 9px, transparent 9px 18px)'}}/>
    </div>
  );
}

// ── RESULT SCENE (variations → select → publish) ─────────────
function ResultScene({ L }){
  const t = useTime();
  const o = ramp(t, 11.9, 12.4, 22.9, 23.4);
  if (o <= 0.001) return null;

  // tone row
  const toneO = ramp(t, 12.2, 12.8, 22.9, 23.3);
  // fan-in per card (order: center first, then sides)
  const fan = [
    track(t, 12.4, 13.4, Easing.easeOutBack), // center
    track(t, 12.7, 13.7, Easing.easeOutBack), // left
    track(t, 13.0, 14.0, Easing.easeOutBack), // right
  ];
  const sel = track(t, 15.2, 16.0, Easing.easeInOutCubic);     // selection collapse
  const ringO = ramp(t, 15.5, 15.9, 22.8, 23.3);
  const up = track(t, 16.4, 17.2, Easing.easeInOutCubic)*60;   // move selected up
  const likes = Math.round(track(t, 19.9, 22.0, Easing.easeOutCubic)*248);
  const published = t >= 19.0;

  const baseLeft = 960-330, baseTop = 244;

  // side card transforms (fade out on select)
  const sideStyle = (dir, f) => {
    const tx = dir*92*(1+0.5*sel);
    const ty = 34 + sel*40;
    const rot = dir*7;
    const op = f * (1-sel);
    return { transform:`translate(${tx}px, ${ty - up*0}px) rotate(${rot}deg) scale(${0.84+0.16*f})`,
      opacity:op };
  };

  return (
    <div style={{position:'absolute', inset:0, opacity:o}}>
      {/* tone selector */}
      <div style={{position:'absolute', left:'50%', top:186, transform:'translateX(-50%)',
        display:'flex', gap:10, opacity:toneO}}>
        {L.tone.map((tn,i)=>{
          const cs = track(t, 12.3+i*0.1, 12.7+i*0.1, Easing.easeOutBack);
          return <Chip key={i} active={i===0} scale={0.7+0.3*cs} opacity={cs}>{tn}</Chip>;
        })}
      </div>

      {/* left + right variation cards */}
      <div style={{position:'absolute', left:baseLeft, top:baseTop, transformOrigin:'50% 30%',
        zIndex:2, ...sideStyle(-1, fan[1])}}><PostCard L={L} idx={1} /></div>
      <div style={{position:'absolute', left:baseLeft, top:baseTop, transformOrigin:'50% 30%',
        zIndex:2, ...sideStyle(1, fan[2])}}><PostCard L={L} idx={2} /></div>

      {/* center (selected) card */}
      <div style={{position:'absolute', left:baseLeft, top:baseTop, zIndex:3,
        transformOrigin:'50% 30%',
        transform:`translateY(${-up}px) scale(${(0.86+0.14*fan[0])*(1+0.03*sel)})`,
        opacity:fan[0]}}>
        <div style={{position:'relative', borderRadius:20}}>
          {/* selection ring */}
          <div style={{position:'absolute', inset:-5, borderRadius:24, pointerEvents:'none',
            border:'3px solid '+CO.accent, opacity:ringO,
            boxShadow:'0 0 0 6px rgba(46,91,255,0.12)'}}/>
          <PostCard L={L} idx={0} reactions={published} likes={likes} />
        </div>
      </div>

      {/* connect + publish controls (below card) */}
      <PublishControls L={L} t={t} up={up} />

      {/* success sparkles */}
      <Sparkles t={t} start={19.0} end={20.4} />
    </div>
  );
}

function PublishControls({ L, t, up }){
  const connO = ramp(t, 17.0, 17.5, 22.7, 23.2);
  const pubO  = ramp(t, 17.4, 17.9, 22.7, 23.2);
  const cardBottom = 244 - up + 470; // approx selected card bottom
  const published = t >= 19.0;
  return (
    <React.Fragment>
      {/* connected chip */}
      <div style={{position:'absolute', left:'50%', top:cardBottom+26, transform:'translateX(-50%)',
        opacity:connO, display:'flex', alignItems:'center', gap:10,
        background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.16)',
        borderRadius:999, padding:'9px 16px'}}>
        <NetIcon size={22} />
        <span style={{fontFamily:CO.mono, fontSize:16, color:'#DCE4F2'}}>{L.connect}</span>
      </div>
      {/* publish button / success */}
      <div style={{position:'absolute', left:'50%', top:cardBottom+82, transform:'translateX(-50%)',
        opacity:pubO}}>
        {!published
          ? <Btn pressed={t>=18.7 && t<=19.0}><NetIcon size={22} color="#fff" bg="rgba(255,255,255,0.25)" /> {L.publish}</Btn>
          : <span style={{display:'inline-flex', alignItems:'center', gap:11,
              fontFamily:CO.disp, fontWeight:700, fontSize:21, padding:'15px 26px', borderRadius:999,
              background:'#1F9B5B', color:'#fff',
              transform:`scale(${0.9+0.1*track(t,19.0,19.4,Easing.easeOutBack)})`,
              boxShadow:'0 12px 26px -10px rgba(31,155,91,0.7)'}}>
              ✓ {L.published}</span>}
      </div>
    </React.Fragment>
  );
}

// ── PAYOFF ───────────────────────────────────────────────────
function PayoffScene({ L }){
  const t = useTime();
  const o = ramp(t, 23.3, 23.9, 26.4, 27.0);
  if (o <= 0.001) return null;
  const tagP = track(t, 23.5, 24.3, Easing.easeOutCubic);
  const ctaP = track(t, 24.2, 24.9, Easing.easeOutBack);
  const markP = track(t, 23.3, 24.0, Easing.easeOutBack);
  return (
    <div style={{position:'absolute', inset:0, opacity:o, display:'flex',
      flexDirection:'column', alignItems:'center', justifyContent:'center', gap:30}}>
      {/* logo mark */}
      <div style={{display:'flex', alignItems:'center', gap:16, opacity:markP,
        transform:`translateY(${(1-markP)*16}px)`}}>
        <span style={{width:62, height:62, borderRadius:'28%', background:CO.accent, position:'relative',
          display:'grid', placeItems:'center', boxShadow:'0 12px 30px -10px rgba(46,91,255,0.8)'}}>
          <span style={{fontFamily:CO.disp, fontWeight:800, fontSize:34, color:'#fff', letterSpacing:'-0.05em', transform:'translateY(-2px)'}}>T</span>
          <span style={{position:'absolute', bottom:'23%', width:'34%', height:'9%', borderRadius:2, background:'#fff', opacity:0.92}}/>
        </span>
        <span style={{fontFamily:CO.disp, fontWeight:800, fontSize:46, color:'#fff', letterSpacing:'-0.035em'}}>
          typic<span style={{color:CO.accent}}>.</span></span>
      </div>
      {/* tagline */}
      <div style={{fontFamily:CO.disp, fontWeight:700, fontSize:52, color:'#fff', textAlign:'center',
        letterSpacing:'-0.025em', maxWidth:1100, lineHeight:1.08,
        opacity:tagP, transform:`translateY(${(1-tagP)*18}px)`}}>{L.tagline}</div>
      {/* cta */}
      <div style={{opacity:ctaP, transform:`scale(${0.85+0.15*ctaP})`, marginTop:6}}>
        <Btn>{L.cta} →</Btn>
      </div>
      <div style={{fontFamily:CO.mono, fontSize:20, color:CO.sky, opacity:ctaP, marginTop:2}}>typic.me</div>
    </div>
  );
}

// ── Cursors ──────────────────────────────────────────────────
function Cursors(){
  const t = useTime();
  // generate-tap cursor
  if (t>=8.5 && t<=10.3){
    const x = interpolate([8.5,9.5,10.3],[740,948,1010])(t);
    const y = interpolate([8.5,9.5,10.3],[600,770,860])(t);
    const op = ramp(t,8.5,8.9,9.95,10.3);
    return <Cursor x={x} y={y} pressed={t>=9.6 && t<=9.9} opacity={op} />;
  }
  // publish-tap cursor
  if (t>=17.8 && t<=19.7){
    const x = interpolate([17.8,18.6,19.7],[1080,960,905])(t);
    const y = interpolate([17.8,18.6,19.7],[600,818,880])(t);
    const op = ramp(t,17.8,18.1,19.2,19.7);
    return <Cursor x={x} y={y} pressed={t>=18.7 && t<=19.0} opacity={op} />;
  }
  return null;
}

// ── Timecode tagger (for commenting) ─────────────────────────
function TimecodeTagger(){
  const t = useTime();
  React.useEffect(()=>{
    const root = document.getElementById('demo-root');
    if (root) root.setAttribute('data-screen-label', 'Typic demo · '+t.toFixed(0)+'s');
  }, [Math.floor(t)]);
  return null;
}

// ── Orchestrator ─────────────────────────────────────────────
function TypicDemo(){
  const params = new URLSearchParams(location.search);
  const L = params.get('lang')==='da' ? LANG.da : LANG.en;
  return (
    <React.Fragment>
      <Backdrop />
      <ComposeScene L={L} />
      <ResultScene L={L} />
      <PayoffScene L={L} />
      <Cursors />
      <Caption n="1" text={L.cap1} start={3.2} end={8.9} />
      <Caption n="2" text={L.cap2} start={9.2} end={16.2} />
      <Caption n="3" text={L.cap3} start={16.6} end={22.9} />
      <TimecodeTagger />
    </React.Fragment>
  );
}

Object.assign(window, { LANG, NetIcon, ComposeScene, PostCard, ResultScene, PayoffScene, Cursors, TypicDemo });