// scenes1.jsx — Staychain explainer scenes 1–4.

// ── Scene 1 — The Problem (0–10) ──────────────────────────────────────────────
function Scene1() {
  const mids = [
    { label: 'Platform' }, { label: 'Payments' }, { label: 'Bank' }, { label: 'FX' },
  ];
  return (
    <Scene start={0} end={10} bg={C.cream}>
      {({ localTime: t }) => {
        const smile = 1 - seg(t, 4.2, 6.5); // smile fades
        const fee = Math.round(seg(t, 2, 7) * 20);
        return (
          <>
            {/* divider */}
            <div style={{ position:'absolute', left:960, top:120, bottom:230, width:2,
              background:C.line, opacity:0.7 }} />
            {/* LEFT — traveler + villa */}
            <div style={{ position:'absolute', left:0, top:0, width:960, height:1080,
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:46 }}>
              <Reveal t={t} a={0.4} b={1.1} y={30}>
                <div style={{ display:'flex', alignItems:'center', gap:40 }}>
                  <div style={{ position:'relative' }}>
                    <Avatar size={150} color={C.coral} />
                    {/* mouth: smile -> flat */}
                    <svg width={60} height={30} viewBox="0 0 60 30"
                      style={{ position:'absolute', left:'50%', top:96, transform:'translateX(-50%)' }}>
                      <path d={`M8 ${14 - smile*6} Q30 ${14 + smile*14} 52 ${14 - smile*6}`}
                        fill="none" stroke={C.white} strokeWidth="5" strokeLinecap="round" />
                    </svg>
                  </div>
                  <PropertyCard w={300} title="Sunny Villa" price="$210" grad={0} tag="★ 4.96" />
                </div>
              </Reveal>
              <Reveal t={t} a={1.0} b={1.6}>
                <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:30, color:C.ink2 }}>
                  Found the perfect place.
                </div>
              </Reveal>
            </div>
            {/* RIGHT — the tangle of middlemen */}
            <div style={{ position:'absolute', left:960, top:0, width:960, height:1080,
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:30 }}>
              <Reveal t={t} a={1.6} b={2.2}>
                <div style={{ fontFamily:F.sans, fontWeight:700, fontSize:26, color:C.coralDk,
                  letterSpacing:'0.08em', textTransform:'uppercase' }}>Behind the screen</div>
              </Reveal>
              <div style={{ display:'flex', gap:22 }}>
                {mids.map((m, i) => {
                  const a = 2.0 + i * 0.5;
                  const drop = seg(t, a + 0.3, a + 0.9, ease.easeInQuad);
                  return (
                    <Reveal key={i} t={t} a={a} b={a + 0.5} y={26} scale={0.8}>
                      <div style={{ position:'relative', width:150, height:200,
                        background:C.white, borderRadius:20, boxShadow:C.line+' 0 0 0 2px, 0 14px 30px rgba(0,0,0,0.08)',
                        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'flex-end',
                        padding:18, gap:10 }}>
                        {/* dropping coin into pocket */}
                        <div style={{ position:'absolute', top: -30 + drop * 70, left:'50%',
                          transform:'translateX(-50%)', opacity: drop > 0 && drop < 1 ? 1 : (drop>=1?0:0) }}>
                          <Coin size={52} label="$" />
                        </div>
                        <svg width={66} height={66} viewBox="0 0 100 100">
                          <rect x="18" y="34" width="64" height="46" rx="8" fill={C.cream2} stroke={C.grey} strokeWidth="3" />
                          <path d="M30 34 V26 a20 20 0 0 1 40 0 V34" fill="none" stroke={C.grey} strokeWidth="4" />
                        </svg>
                        <div style={{ fontFamily:F.sans, fontWeight:700, fontSize:22, color:C.ink2 }}>{m.label}</div>
                        <div style={{ fontFamily:F.mono, fontWeight:700, fontSize:20, color:C.coral }}>−$</div>
                      </div>
                    </Reveal>
                  );
                })}
              </div>
              {/* fee counter */}
              <Reveal t={t} a={3.4} b={4.0}>
                <div style={{ display:'flex', alignItems:'baseline', gap:14, marginTop:26 }}>
                  <span style={{ fontFamily:F.sans, fontWeight:600, fontSize:30, color:C.ink2 }}>Fees so far</span>
                  <span style={{ fontFamily:F.sans, fontWeight:800, fontSize:88, color:C.coralDk,
                    letterSpacing:'-0.03em', fontVariantNumeric:'tabular-nums' }}>{fee}%</span>
                </div>
              </Reveal>
            </div>
            <Caption y={930}>Every booking today passes through <b style={{color:C.coralDk}}>3–5 middlemen.</b></Caption>
          </>
        );
      }}
    </Scene>
  );
}

// ── Scene 2 — What if no middlemen? (10–18) ──────────────────────────────────
function Scene2() {
  return (
    <Scene start={10} end={18} bg={C.cream}>
      {({ localTime: t }) => {
        const dissolve = seg(t, 0.2, 1.6, ease.easeInCubic); // middlemen fade
        const line = seg(t, 1.4, 2.6, ease.easeOutCubic);
        const pulse = 0.5 + 0.5 * Math.sin((t - 2.6) * 3.2);
        const shieldIn = seg(t, 2.4, 3.2, ease.easeOutBack);
        const ax = 360, bx = 1560, midx = 960, cy = 470;
        return (
          <>
            {/* traveler & host */}
            <div style={{ position:'absolute', left:ax, top:cy, transform:'translate(-50%,-50%)' }}>
              <Avatar size={150} color={C.coral} label="You" />
            </div>
            <div style={{ position:'absolute', left:bx, top:cy, transform:'translate(-50%,-50%)' }}>
              <Avatar size={150} color={C.teal} label="Host" />
            </div>
            {/* fading middlemen blocks */}
            <div style={{ position:'absolute', left:midx, top:cy, transform:'translate(-50%,-50%)',
              display:'flex', gap:24, opacity: 1 - dissolve,
              filter:`blur(${dissolve*8}px)` }}>
              {[0,1,2].map(i => (
                <div key={i} style={{ width:120, height:150, background:C.white, borderRadius:18,
                  boxShadow:'0 10px 24px rgba(0,0,0,0.08)', transform:`translateY(${dissolve*-40*(i-1)}px) scale(${1-dissolve*0.3})` }} />
              ))}
            </div>
            {/* direct line */}
            <div style={{ position:'absolute', left:ax+90, top:cy-3, height:6, borderRadius:99,
              width:(bx-ax-180)*line, background:C.teal, opacity:0.9 }} />
            {/* shield in middle */}
            <div style={{ position:'absolute', left:midx, top:cy, transform:`translate(-50%,-50%) scale(${shieldIn})` }}>
              <div style={{ background:C.cream, borderRadius:'50%', padding:24 }}>
                <Shield size={120} color={C.teal} glow={shieldIn * (10 + pulse*16)} />
              </div>
            </div>
            <Caption y={770} max={1200}>What if you could pay your host <b style={{color:C.teal}}>directly</b> —</Caption>
            <Caption y={840} max={1200} sub={false}>safely and instantly?</Caption>
          </>
        );
      }}
    </Scene>
  );
}

// ── Scene 3 — Meet Staychain (18–26) ─────────────────────────────────────────
function Scene3() {
  const pills = ['Tropical Villa', 'Beachfront', 'Cabins', 'Treehouses'];
  const cards = [
    { title:'Tropical Villa', price:'$210', grad:0, tag:'★ 4.96', dates:'Jul 4–9' },
    { title:'Beach House', price:'$340', grad:1, tag:'Superhost', dates:'Aug 1–6' },
    { title:'Pine Cabin', price:'$155', grad:2, tag:'★ 4.9', dates:'Sep 2–7' },
  ];
  return (
    <Scene start={18} end={26} bg={C.cream}>
      {({ localTime: t }) => (
        <>
          <Reveal t={t} a={0.2} b={1.0} y={36} style={{ position:'absolute', left:960, top:150, transform:'translateX(-50%)' }}>
            <Wordmark size={92} />
          </Reveal>
          {/* browse UI */}
          <div style={{ position:'absolute', left:960, top:330, transform:'translateX(-50%)',
            width:1500, display:'flex', flexDirection:'column', gap:40 }}>
            <Reveal t={t} a={1.0} b={1.6} y={24}>
              <div style={{ display:'flex', gap:18, justifyContent:'center' }}>
                {pills.map((p,i) => <Pill key={i} label={p} active={i===0} />)}
              </div>
            </Reveal>
            <div style={{ display:'flex', gap:40, justifyContent:'center' }}>
              {cards.map((c,i) => (
                <Reveal key={i} t={t} a={1.6 + i*0.25} b={2.2 + i*0.25} y={40} scale={0.92}>
                  <PropertyCard w={400} {...c} />
                </Reveal>
              ))}
            </div>
          </div>
          <Caption y={930}>Staychain looks like <b>any booking app you already know.</b></Caption>
        </>
      )}
    </Scene>
  );
}

// ── Scene 4 — Digital Dollars (26–38) ────────────────────────────────────────
function Scene4() {
  return (
    <Scene start={26} end={38} bg={C.cream}>
      {({ localTime: t }) => {
        const usdcIn = seg(t, 0.3, 1.1, ease.easeOutBack);
        const eqIn = seg(t, 1.3, 2.0);
        // crypto coins bounce wildly; usdc stays still
        const btcY = Math.sin(t * 5.5) * 38;
        const ethY = Math.sin(t * 4.2 + 1) * 46;
        const showCrypto = seg(t, 2.4, 3.0);
        const phaseTwo = seg(t, 6.2, 6.9); // move to wallet half
        const tap = t > 8.4 ? seg(t, 8.4, 8.8, ease.easeOutQuad) : 0;
        const connected = t > 9.0;
        return (
          <>
            {/* LEFT cluster: USDC stable vs crypto bouncing */}
            <div style={{ position:'absolute', left: 540 - phaseTwo*40, top:430, transform:'translate(-50%,-50%)',
              opacity: 1 - phaseTwo*0.0 }}>
              <div style={{ display:'flex', alignItems:'center', gap:36 }}>
                <div style={{ transform:`scale(${usdcIn})`, display:'flex', flexDirection:'column', alignItems:'center', gap:14 }}>
                  <Coin size={210} label="USDC" color="#2775CA" dark="#1E5C9E" text="#fff" sub="$1.00" />
                  <div style={{ fontFamily:F.sans, fontWeight:700, fontSize:26, color:C.teal }}>perfectly still</div>
                </div>
                <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:24,
                  opacity:showCrypto }}>
                  <div style={{ display:'flex', gap:26 }}>
                    <div style={{ transform:`translateY(${btcY}px)` }}>
                      <Coin size={110} label="BTC" color="#F7931A" dark="#C56E08" text="#fff" />
                    </div>
                    <div style={{ transform:`translateY(${ethY}px)` }}>
                      <Coin size={110} label="ETH" color="#8A92B2" dark="#5B628A" text="#fff" />
                    </div>
                  </div>
                  <div style={{ fontFamily:F.sans, fontWeight:700, fontSize:24, color:C.ink2 }}>bouncing around</div>
                </div>
              </div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:16, marginTop:30,
                opacity:eqIn, fontFamily:F.sans, fontWeight:800, fontSize:48, color:C.ink, whiteSpace:'nowrap' }}>
                <span style={{ color:'#1E5C9E' }}>1 USDC</span>
                <span style={{ color:C.ink2 }}>=</span>
                <span>$1.00</span>
                <span style={{ fontSize:26, color:C.teal, fontWeight:700, marginLeft:8 }}>always</span>
              </div>
            </div>
            {/* RIGHT: wallet on phone (slides in for phase two) */}
            <div style={{ position:'absolute', left:1420, top:440, transform:`translate(-50%,-50%) scale(${0.9})`,
              opacity:phaseTwo }}>
              <Phone width={360}>
                <div style={{ padding:'70px 28px 0', display:'flex', flexDirection:'column', alignItems:'center', gap:24 }}>
                  <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:28, color:C.ink }}>Your Wallet</div>
                  <Coin size={120} label="USDC" color="#2775CA" dark="#1E5C9E" text="#fff" sub="$1.00" />
                  <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:44, color:C.ink }}>$420.00</div>
                  <div style={{ position:'relative', width:'100%' }}>
                    <div style={{ width:'100%', padding:'20px 0', borderRadius:18, textAlign:'center',
                      background: connected ? C.green : C.ink, color:C.white,
                      fontFamily:F.sans, fontWeight:800, fontSize:26,
                      transform:`scale(${1 - tap*0.05 + (connected?0.03:0)})` }}>
                      {connected ? '✓ Connected' : 'Connect Wallet'}
                    </div>
                    {/* finger */}
                    {tap > 0 && !connected && (
                      <div style={{ position:'absolute', right:60, top:30, fontSize:54,
                        transform:`translateY(${-(1-tap)*30}px)` }}>👆</div>
                    )}
                  </div>
                  <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:19, color:C.ink2, textAlign:'center' }}>
                    Like Apple Pay — but for digital dollars
                  </div>
                </div>
              </Phone>
            </div>
            <Caption y={840} max={1300}>
              You pay in <b style={{color:'#1E5C9E'}}>USDC</b> — a digital dollar.
              <span style={{ display:'block', fontSize:34, fontWeight:500, color:C.ink2, marginTop:10 }}>
                1 USDC always equals $1. No volatility.
              </span>
            </Caption>
          </>
        );
      }}
    </Scene>
  );
}

Object.assign(window, { Scene1, Scene2, Scene3, Scene4 });