// scenes2.jsx — Staychain explainer scenes 5–9.

// ── Scene 5 — Smart Contract = Digital Escrow (38–53) ────────────────────────
function Scene5() {
  const checks = ['Payment received', 'Booking confirmed', 'Stay completed', 'Host paid automatically'];
  return (
    <Scene start={38} end={53} bg={C.cream}>
      {({ localTime: t }) => {
        const lit = t > 2.6;
        const checkTimes = [3.0, 4.6, 6.2, 7.8];
        // coin into box: 1.0 -> 2.4
        const cin = seg(t, 1.0, 2.4, ease.easeInOutCubic);
        // coins out to host: 9.0 -> 10.6
        const cout = seg(t, 9.0, 10.8, ease.easeInOutCubic);
        const oldIn = seg(t, 11.4, 12.2, ease.easeOutCubic);
        const cross = seg(t, 13.0, 13.8, ease.easeOutQuad);
        const boxX = 960, boxY = 470;
        return (
          <>
            {/* You (left) */}
            <div style={{ position:'absolute', left:300, top:boxY, transform:'translate(-50%,-50%)' }}>
              <Avatar size={130} color={C.coral} label="You" />
            </div>
            {/* Host (right) */}
            <div style={{ position:'absolute', left:1620, top:boxY, transform:'translate(-50%,-50%)' }}>
              <Avatar size={130} color={C.teal} label="Host" />
            </div>
            {/* coin sliding IN from left */}
            {cin > 0 && cin < 1 && (
              <div style={{ position:'absolute', top:boxY-30, left: 380 + cin*340, transform:'translateY(-50%)', opacity:1-cin*0.2 }}>
                <Coin size={70} label="USDC" color="#2775CA" dark="#1E5C9E" text="#fff" />
              </div>
            )}
            {/* coin sliding OUT to right */}
            {cout > 0 && (
              <div style={{ position:'absolute', top:boxY-30, left: 1180 + cout*340, transform:'translateY(-50%)', opacity:cout<1?1:0 }}>
                <Coin size={70} label="USDC" color="#2775CA" dark="#1E5C9E" text="#fff" />
              </div>
            )}
            {/* lockbox center with checklist */}
            <div style={{ position:'absolute', left:boxX, top:boxY, transform:'translate(-50%,-50%)' }}>
              <Lockbox size={620} lit={lit}>
                <div style={{ position:'absolute', inset:0, paddingTop:120, display:'flex', flexDirection:'column',
                  alignItems:'flex-start', justifyContent:'center', gap:26, paddingLeft:70 }}>
                  {checks.map((c,i) => <CheckRow key={i} label={c} done={t > checkTimes[i]} />)}
                </div>
                <div style={{ position:'absolute', top:36, left:70, fontFamily:F.mono, fontWeight:700,
                  fontSize:22, color:C.teal, letterSpacing:'0.04em' }}>SMART CONTRACT</div>
              </Lockbox>
            </div>
            {/* old way mini-panel, crossed out */}
            <div style={{ position:'absolute', right:70, top:150, width:330, opacity:oldIn,
              transform:`translateY(${(1-oldIn)*20}px)` }}>
              <div style={{ background:C.white, borderRadius:18, padding:'20px 24px',
                boxShadow:'0 12px 28px rgba(0,0,0,0.08)', position:'relative',
                border:`2px solid ${C.line}` }}>
                <div style={{ fontFamily:F.sans, fontWeight:700, fontSize:20, color:C.ink2, marginBottom:10 }}>The old way</div>
                <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                  <div style={{ fontSize:44 }}>🧑‍💼</div>
                  <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:19, color:C.ink2 }}>
                    A company holds your money, takes a cut, pays out days later.
                  </div>
                </div>
                {/* cross-out */}
                <svg width="100%" height="100%" viewBox="0 0 330 120" preserveAspectRatio="none"
                  style={{ position:'absolute', inset:0 }}>
                  <line x1="20" y1="100" x2={20 + 290*cross} y2={20 + (100-20)*(1-cross)}
                    stroke={C.red} strokeWidth="7" strokeLinecap="round" opacity={cross>0?0.85:0} />
                </svg>
              </div>
            </div>
            <Caption y={880} max={1500}>
              A smart contract is a <b style={{color:C.teal}}>digital lockbox with rules</b> — it releases payment to the host automatically.
            </Caption>
          </>
        );
      }}
    </Scene>
  );
}

// ── Scene 6 — Receipt lives on-chain (53–63) ─────────────────────────────────
function Scene6() {
  // node positions for distributed network
  const nodes = [
    [360, 300], [620, 560], [400, 720], [1020, 250], [1300, 470],
    [1180, 730], [1560, 320], [1500, 640], [820, 360],
  ];
  return (
    <Scene start={53} end={63} bg={C.cream}>
      {({ localTime: t }) => {
        const receiptIn = seg(t, 0.3, 1.2, ease.easeOutBack);
        const floatUp = seg(t, 1.6, 3.0, ease.easeInOutCubic);
        const spread = seg(t, 3.0, 5.4, ease.easeOutCubic);
        // central position -> network center
        const cx = 960, cy = 470;
        return (
          <>
            {/* network lines */}
            <svg width={1920} height={1080} style={{ position:'absolute', inset:0, opacity: spread*0.5 }}>
              {nodes.map((n,i) => nodes.slice(i+1).map((m,j) => {
                const d = Math.hypot(n[0]-m[0], n[1]-m[1]);
                if (d > 520) return null;
                return <line key={i+'-'+j} x1={n[0]} y1={n[1]} x2={m[0]} y2={m[1]}
                  stroke={C.teal} strokeWidth="2" opacity="0.35" />;
              }))}
            </svg>
            {/* nodes + receipt copies */}
            {nodes.map((n,i) => {
              const appear = seg(t, 3.2 + i*0.22, 3.8 + i*0.22, ease.easeOutBack);
              return (
                <React.Fragment key={i}>
                  <div style={{ position:'absolute', left:n[0], top:n[1], transform:'translate(-50%,-50%)',
                    width:16, height:16, borderRadius:'50%', background:C.teal, opacity:spread,
                    boxShadow:`0 0 0 6px ${C.tealSoft}` }} />
                  <div style={{ position:'absolute', left:n[0], top:n[1]-44, transform:`translate(-50%,-50%) scale(${appear})`,
                    opacity:appear }}>
                    <MiniReceipt />
                  </div>
                </React.Fragment>
              );
            })}
            {/* the original receipt: appears center, floats into network */}
            <div style={{ position:'absolute', left:cx, top: cy - floatUp*40,
              transform:`translate(-50%,-50%) scale(${receiptIn * (1 - spread*0.55)})`,
              opacity: 1 - spread*0.6 }}>
              <div style={{ background:C.white, borderRadius:22, padding:'34px 40px',
                boxShadow:`0 24px 60px rgba(44,140,132,0.25), 0 0 0 3px ${C.tealSoft}`,
                fontFamily:F.sans, width:360 }}>
                <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
                  <Shield size={40} color={C.teal} />
                  <div style={{ fontWeight:800, fontSize:26, color:C.ink }}>Booking Receipt</div>
                </div>
                <Row k="Stay" v="Sunny Villa" />
                <Row k="Paid" v="$210.00 USDC" />
                <Row k="Status" v="Confirmed ✓" />
                <div style={{ fontFamily:F.mono, fontSize:15, color:C.teal, marginTop:14, wordBreak:'break-all' }}>0x9f3a…c742</div>
              </div>
            </div>
            <Caption y={900} max={1500}>
              Your receipt is saved <b style={{color:C.teal}}>on-chain</b> — permanent, transparent, and can't be altered by anyone. Not even Staychain.
            </Caption>
          </>
        );
      }}
    </Scene>
  );
}
function Row({ k, v }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', padding:'6px 0',
      fontFamily:F.sans, fontSize:20 }}>
      <span style={{ color:C.ink2, fontWeight:600 }}>{k}</span>
      <span style={{ color:C.ink, fontWeight:800 }}>{v}</span>
    </div>
  );
}
function MiniReceipt() {
  return (
    <div style={{ width:70, height:50, background:C.white, borderRadius:9,
      boxShadow:`0 6px 16px rgba(0,0,0,0.12), 0 0 0 2px ${C.tealSoft}`,
      display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Shield size={26} color={C.teal} />
    </div>
  );
}

// ── Scene 7 — Benefits lineup (63–75) ────────────────────────────────────────
function Scene7() {
  return (
    <Scene start={63} end={75} bg={C.cream}>
      {({ localTime: t }) => {
        const items = [
          { a:0.2, render:(p)=> <BenefitFees p={p} /> , title:'Lower fees' },
          { a:3.0, render:(p)=> <BenefitFx p={p} />, title:'No currency exchange' },
          { a:6.0, render:(p)=> <BenefitChargeback p={p} />, title:'No chargebacks' },
          { a:9.0, render:(p)=> <BenefitInstant p={p} />, title:'Instant settlement' },
        ];
        return (
          <>
            <div style={{ position:'absolute', left:960, top:130, transform:'translateX(-50%)',
              fontFamily:F.sans, fontWeight:800, fontSize:54, color:C.ink, letterSpacing:'-0.03em' }}>
              Why it's better
            </div>
            <div style={{ position:'absolute', left:0, right:0, top:300, display:'flex',
              justifyContent:'center', gap:40 }}>
              {items.map((it,i) => {
                const inP = seg(t, it.a, it.a+0.7, ease.easeOutBack);
                const active = t >= it.a;
                const localP = seg(t, it.a+0.3, it.a+2.6, ease.easeInOutCubic);
                return (
                  <div key={i} style={{ width:400, height:520, background:C.white, borderRadius:28,
                    boxShadow: active ? '0 24px 50px rgba(0,0,0,0.10)' : '0 10px 24px rgba(0,0,0,0.05)',
                    border:`2px solid ${C.line}`, opacity: 0.35 + inP*0.65,
                    transform:`translateY(${(1-inP)*40}px) scale(${0.94+inP*0.06})`,
                    display:'flex', flexDirection:'column', alignItems:'center', padding:'46px 30px', gap:30 }}>
                    <div style={{ height:230, display:'flex', alignItems:'center', justifyContent:'center' }}>
                      {it.render(active ? localP : 0)}
                    </div>
                    <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:32, color:C.ink, textAlign:'center',
                      letterSpacing:'-0.02em' }}>{it.title}</div>
                  </div>
                );
              })}
            </div>
            <Caption y={910}>Lower fees. No exchange. No chargebacks. <b style={{color:C.coral}}>Instant.</b></Caption>
          </>
        );
      }}
    </Scene>
  );
}
function BenefitFees({ p }) {
  const pct = Math.round(20 - p*15); // 20 -> 5
  const h = 200 * (pct/20);
  return (
    <div style={{ display:'flex', alignItems:'flex-end', gap:24, height:230 }}>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10 }}>
        <div style={{ width:90, height:h, background:`linear-gradient(${C.coral},${C.coralDk})`,
          borderRadius:'12px 12px 0 0', transition:'none' }} />
        <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:40, color:C.coral }}>{pct}%</div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {[0,1,2].map(i => <Coin key={i} size={44} label="$" style={{ opacity: p>0.5?1:0,
          transform:`translateY(${(1-p)*40}px)` }} />)}
      </div>
    </div>
  );
}
function BenefitFx({ p }) {
  const x = -90 + p*180;
  return (
    <div style={{ position:'relative', width:300, height:180, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
      <div style={{ fontSize:72 }}>🇺🇸</div>
      <div style={{ position:'absolute', left:'50%', top:'50%', transform:`translate(${x-30}px,-50%)` }}>
        <Coin size={70} label="USDC" color="#2775CA" dark="#1E5C9E" text="#fff" />
      </div>
      <div style={{ fontSize:72 }}>🇯🇵</div>
    </div>
  );
}
function BenefitChargeback({ p }) {
  return (
    <div style={{ position:'relative', width:200, height:220, display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Shield size={150} color={C.teal} glow={p*18} />
      <svg width={220} height={90} viewBox="0 0 220 90" style={{ position:'absolute', top:30 }}>
        <text x="110" y="50" textAnchor="middle" fontFamily="'Manrope'" fontWeight="800" fontSize="26"
          fill={C.red} opacity={p>0.3?0.9:0}>DISPUTE</text>
        <line x1="30" y1="60" x2="190" y2="20" stroke={C.red} strokeWidth="6" strokeLinecap="round"
          opacity={seg(p,0.4,0.9)} />
      </svg>
    </div>
  );
}
function BenefitInstant({ p }) {
  const ang = p*1440;
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:18 }}>
      <div style={{ width:140, height:140, borderRadius:'50%', border:`8px solid ${C.coral}`,
        position:'relative', background:C.cream }}>
        <div style={{ position:'absolute', left:'50%', top:'50%', width:6, height:50, background:C.coral,
          borderRadius:6, transform:`translate(-50%,-100%) rotate(${ang}deg)`, transformOrigin:'bottom center' }} />
        <div style={{ position:'absolute', left:'50%', top:'50%', width:6, height:36, background:C.ink,
          borderRadius:6, transform:`translate(-50%,-100%) rotate(${ang*0.6}deg)`, transformOrigin:'bottom center' }} />
      </div>
      <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:34, color:C.teal }}>30 seconds</div>
      <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:22, color:C.ink2, position:'relative' }}>
        <span style={{ opacity:0.6 }}>3–5 business days</span>
        <div style={{ position:'absolute', left:0, right:0, top:'50%', height:4, background:C.red,
          borderRadius:4, transform:`scaleX(${seg(p,0.4,0.9)})`, transformOrigin:'left' }} />
      </div>
    </div>
  );
}

// ── Scene 8 — How it feels (75–85) ───────────────────────────────────────────
function Scene8() {
  const steps = ['Browse', 'Book', 'Stay'];
  return (
    <Scene start={75} end={85} bg={C.cream}>
      {({ localTime: t }) => {
        // phase screens
        const phase = t < 2.4 ? 0 : t < 4.6 ? 1 : t < 6.6 ? 2 : 3;
        const tapBook = seg(t, 3.4, 3.9, ease.easeOutQuad);
        const confirm = seg(t, 4.8, 5.5, ease.easeOutBack);
        const notif = seg(t, 6.8, 7.5, ease.easeOutCubic);
        return (
          <>
            {/* progress steps */}
            <div style={{ position:'absolute', left:960, top:140, transform:'translateX(-50%)',
              display:'flex', gap:30, alignItems:'center' }}>
              {steps.map((s,i) => {
                const on = (phase>=1 && i===0)||(phase>=2&&i===1)||(phase>=3&&i===2)|| (phase>i);
                return (
                  <React.Fragment key={i}>
                    {i>0 && <div style={{ width:50, height:3, background:C.line }} />}
                    <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:30,
                      color: on ? C.coral : C.ink2, opacity: on?1:0.5 }}>{s}</div>
                  </React.Fragment>
                );
              })}
            </div>
            {/* phone */}
            <div style={{ position:'absolute', left:660, top:600, transform:'translate(-50%,-50%)' }}>
              <Phone width={360}>
                <div style={{ position:'absolute', inset:0, paddingTop:64 }}>
                  {phase===0 && (
                    <div style={{ padding:'10px 20px', display:'flex', flexDirection:'column', gap:18 }}>
                      <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:24, color:C.ink, padding:'0 4px' }}>Tropical Villas</div>
                      <PropertyCard w={320} title="Sunny Villa" price="$210" grad={0} tag="★ 4.96" />
                      <PropertyCard w={320} title="Palm Retreat" price="$280" grad={3} tag="Superhost" />
                    </div>
                  )}
                  {phase===1 && (
                    <div style={{ padding:'10px 20px', display:'flex', flexDirection:'column', gap:18, position:'relative' }}>
                      <PropertyCard w={320} title="Sunny Villa" price="$210" grad={0} tag="★ 4.96" />
                      <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:18, color:C.ink2, padding:'0 4px' }}>Jul 4–9 · 2 guests</div>
                      <div style={{ padding:'18px 0', borderRadius:16, textAlign:'center', background:C.coral,
                        color:C.white, fontFamily:F.sans, fontWeight:800, fontSize:26,
                        transform:`scale(${1-tapBook*0.06})` }}>Book — $210</div>
                      {tapBook>0 && <div style={{ position:'absolute', right:90, bottom:30, fontSize:54,
                        transform:`translateY(${-(1-tapBook)*26}px)` }}>👆</div>}
                    </div>
                  )}
                  {phase===2 && (
                    <div style={{ padding:'40px 24px', display:'flex', flexDirection:'column', alignItems:'center', gap:30, height:'100%', justifyContent:'center' }}>
                      <CheckBurst size={170} p={confirm} />
                      <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:30, color:C.ink, textAlign:'center' }}>Booked!</div>
                      <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:20, color:C.ink2 }}>Paid $210 USDC · one tap</div>
                    </div>
                  )}
                  {phase===3 && (
                    <div style={{ position:'absolute', inset:0,
                      background:'linear-gradient(160deg,#7FD4E8 0%,#A8E6CF 55%,#F4E2A0 100%)',
                      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'flex-end', paddingBottom:60, gap:20 }}>
                      <div style={{ position:'absolute', top:90, right:50, width:70, height:70, borderRadius:'50%',
                        background:'rgba(255,255,255,0.9)' }} />
                      <Avatar size={120} color={C.coral} />
                      <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:28, color:C.ink,
                        background:'rgba(255,255,255,0.85)', padding:'8px 20px', borderRadius:99 }}>You've arrived 🌴</div>
                    </div>
                  )}
                </div>
              </Phone>
            </div>
            {/* host notification */}
            <div style={{ position:'absolute', left:1320, top:520, transform:'translate(-50%,-50%)',
              opacity:notif, width:420 }}>
              <div style={{ display:'flex', alignItems:'center', gap:18, marginBottom:24 }}>
                <Avatar size={90} color={C.teal} />
                <div style={{ fontFamily:F.sans, fontWeight:700, fontSize:24, color:C.ink2 }}>Your host</div>
              </div>
              <div style={{ background:C.white, borderRadius:20, padding:'22px 26px',
                boxShadow:'0 18px 44px rgba(0,0,0,0.12)', display:'flex', alignItems:'center', gap:18,
                transform:`translateX(${(1-notif)*30}px)` }}>
                <div style={{ width:54, height:54, borderRadius:14, background:C.green,
                  display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <svg viewBox="0 0 24 24" width={30} height={30}><path d="M5 13l4 4L19 7" fill="none"
                    stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <div>
                  <div style={{ fontFamily:F.sans, fontWeight:800, fontSize:24, color:C.ink }}>Payment received</div>
                  <div style={{ fontFamily:F.sans, fontWeight:600, fontSize:19, color:C.ink2 }}>$210.00 USDC · instant</div>
                </div>
              </div>
            </div>
            <Caption y={998}><b>Browse. Book. Stay.</b> That's it.</Caption>
          </>
        );
      }}
    </Scene>
  );
}

// ── Scene 9 — Closing (85–92) ────────────────────────────────────────────────
function Scene9() {
  return (
    <Scene start={85} end={92} bg={C.cream} fadeOut={0.8}>
      {({ localTime: t }) => {
        const logoIn = seg(t, 0.3, 1.2, ease.easeOutBack);
        const link = seg(t, 1.2, 2.4, ease.easeInOutCubic);
        const tagIn = seg(t, 1.8, 2.6, ease.easeOutCubic);
        const subIn = seg(t, 2.6, 3.3);
        const gap = (1 - link) * 70;
        return (
          <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column',
            alignItems:'center', justifyContent:'center', gap:34 }}>
            {/* chain links connecting */}
            <div style={{ display:'flex', alignItems:'center', transform:`scale(${logoIn})`, marginBottom:6 }}>
              <svg width={260} height={110} viewBox="0 0 260 110" style={{ overflow:'visible' }}>
                <g transform={`translate(${-gap},0)`}>
                  <rect x="40" y="32" width="100" height="46" rx="23" fill="none" stroke={C.coral} strokeWidth="14" />
                </g>
                <g transform={`translate(${gap},0)`}>
                  <rect x="120" y="32" width="100" height="46" rx="23" fill="none" stroke={C.teal} strokeWidth="14" />
                </g>
              </svg>
            </div>
            <div style={{ transform:`scale(${logoIn})` }}>
              <Wordmark size={120} />
            </div>
            <div style={{ opacity:tagIn, transform:`translateY(${(1-tagIn)*16}px)`,
              fontFamily:F.sans, fontWeight:600, fontSize:46, color:C.ink2, letterSpacing:'-0.02em' }}>
              on-chain stays.
            </div>
            <div style={{ opacity:subIn, fontFamily:F.sans, fontWeight:700, fontSize:30, color:C.coral,
              marginTop:10, letterSpacing:'0.02em' }}>
              staychainapp.com
            </div>
          </div>
        );
      }}
    </Scene>
  );
}

Object.assign(window, { Scene5, Scene6, Scene7, Scene8, Scene9 });