// scenes.jsx
// All 5 scenes of the Terracode partnership video.
// Canvas is 1080 x 1920 (portrait 9:16). Total runtime: 59s.

const W = 1080;
const H = 1920;

// ═══ SCENE 1 — HOOK (0–6s) ══════════════════════════════════════════════════
function Scene1Hook() {
  return (
    <Sprite start={0} end={6.2}>
      {({ localTime }) => (
        <>
          {/* pure black backdrop with a single growing glow */}
          <div style={{ position: 'absolute', inset: 0, background: T.ink }}/>
          <div style={{
            position: 'absolute',
            left: '50%', top: 760,
            width: 1400, height: 1100,
            marginLeft: -700, marginTop: -550,
            background: `radial-gradient(circle, rgba(245,108,4,${0.18 * clamp(localTime / 2, 0, 1)}) 0%, transparent 60%)`,
            pointerEvents: 'none',
          }}/>

          {/* Vertical accent line on left edge */}
          <LocalSprite start={0.1} end={6.2}>
            {({ localTime: lt }) => {
              const t = clamp(lt / 0.7, 0, 1);
              return (
                <div style={{
                  position: 'absolute',
                  left: 40, top: 200,
                  width: 2,
                  height: `${t * 1520}px`,
                  background: `linear-gradient(180deg, ${T.orange}, transparent)`,
                  boxShadow: `0 0 12px rgba(245,108,4,0.6)`,
                }}/>
              );
            }}
          </LocalSprite>

          {/* Top-left eyebrow */}
          <div style={{
            position: 'absolute', top: 90, left: 80,
            fontFamily: T.mono, fontSize: 22, color: T.mute,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <LocalSprite start={0.3} end={6.2}>
              {({ localTime: lt }) => (
                <div style={{ opacity: clamp(lt / 0.5, 0, 1), display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 8, height: 8, borderRadius: 4, background: T.orange, boxShadow: `0 0 12px ${T.orange}` }}/>
                  <span>// 2026 partnership reveal</span>
                </div>
              )}
            </LocalSprite>
          </div>

          {/* Top-right status pill — flashing "1 CRITICAL" */}
          <div style={{ position: 'absolute', top: 86, right: 80 }}>
            <LocalSprite start={0.5} end={6.2}>
              {({ localTime: lt }) => {
                const opacity = clamp(lt / 0.4, 0, 1);
                const blink = 0.55 + 0.45 * Math.abs(Math.sin(lt * 4));
                return (
                  <div style={{
                    opacity,
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    padding: '8px 14px',
                    border: `1px solid rgba(230,58,58,0.6)`,
                    background: 'rgba(230,58,58,0.08)',
                    borderRadius: 999,
                    fontFamily: T.mono, fontSize: 18,
                    color: T.red,
                    letterSpacing: '0.16em',
                    textTransform: 'uppercase',
                    boxShadow: `0 0 ${16 * blink}px rgba(230,58,58,${0.4 * blink})`,
                  }}>
                    <div style={{ width: 8, height: 8, borderRadius: 4, background: T.red, opacity: blink, boxShadow: `0 0 8px ${T.red}` }}/>
                    1 critical
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* TERRACODE logo — top section, above headline */}
          <div style={{
            position: 'absolute',
            left: 0, right: 0,
            top: 280,
            display: 'flex', justifyContent: 'center',
          }}>
            <LocalSprite start={0.4} end={6.2}>
              <TerracodeLogo size={88} pulse glow />
            </LocalSprite>
          </div>

          {/* Orange line cuts across — sits just above headline */}
          <LocalSprite start={0.2} end={6.2}>
            <OrangeLine y={520} thickness={4} glowStrength={1.2} />
          </LocalSprite>

          {/* HEADLINE — mid */}
          <div style={{
            position: 'absolute',
            left: 80, right: 80,
            top: 600,
          }}>
            <LocalSprite start={0.8} end={6.2}>
              {({ localTime: lt }) => {
                // Slam in
                const t = clamp(lt / 0.55, 0, 1);
                const eased = Easing.easeOutExpo(t);
                const blur = (1 - eased) * 10;
                // Subtle horizontal glitch on the word "broken"
                const glitch = Math.sin(lt * 18) * (lt > 1.5 && lt < 4.5 ? 1 : 0) * 1.5;
                return (
                  <div style={{
                    transform: `translateY(${(1 - eased) * 24}px)`,
                    opacity: t,
                    filter: `blur(${blur}px)`,
                    fontFamily: T.display,
                    fontSize: 118,
                    fontWeight: 700,
                    color: T.white,
                    letterSpacing: '-0.035em',
                    lineHeight: 1.04,
                  }}>
                    <div>Is your business</div>
                    <div>running on</div>
                    <div style={{ marginTop: 4 }}>
                      <span style={{
                        color: T.orange,
                        textShadow: `0 0 32px rgba(245,108,4,0.55)`,
                        display: 'inline-block',
                        transform: `translateX(${glitch}px)`,
                      }}>broken</span>
                      {' '}tech?
                    </div>
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* Subhead — clearly separated from headline */}
          <div style={{
            position: 'absolute',
            left: 80, right: 80,
            top: 1180,
          }}>
            <LocalSprite start={2.4} end={6.2}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.7, 0, 1);
                const eased = Easing.easeOutCubic(t);
                return (
                  <div style={{
                    opacity: t,
                    transform: `translateY(${(1 - eased) * 16}px)`,
                    fontFamily: T.body,
                    fontSize: 40,
                    fontWeight: 400,
                    color: T.mute,
                    letterSpacing: '-0.005em',
                    lineHeight: 1.3,
                    maxWidth: 820,
                  }}>
                    Most businesses don't realize it<br/>until it's too late.
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* Decorative diagnostic line — bottom data strip */}
          <div style={{ position: 'absolute', left: 80, right: 80, top: 1500 }}>
            <LocalSprite start={3.4} end={6.2}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.6, 0, 1);
                const pills = [
                  { label: 'IT TEAM',     status: 'MISSING' },
                  { label: 'STRATEGY',    status: 'NONE' },
                  { label: 'SECURITY',    status: 'EXPOSED' },
                ];
                return (
                  <div style={{
                    opacity: t,
                    transform: `translateY(${(1 - t) * 10}px)`,
                    display: 'flex', gap: 14, flexWrap: 'nowrap',
                  }}>
                    {pills.map((p, i) => {
                      const flash = Math.abs(Math.sin((lt + i * 0.4) * 2.2));
                      return (
                        <div key={i} style={{
                          flex: 1,
                          padding: '14px 16px',
                          border: `1px solid rgba(230,58,58,${0.3 + 0.3 * flash})`,
                          background: `rgba(230,58,58,${0.06 + 0.04 * flash})`,
                          borderRadius: 10,
                          fontFamily: T.mono,
                          fontSize: 16,
                          letterSpacing: '0.14em',
                          textTransform: 'uppercase',
                          display: 'flex',
                          flexDirection: 'column',
                          gap: 4,
                        }}>
                          <div style={{ color: T.mute, fontSize: 13 }}>{p.label}</div>
                          <div style={{ color: T.red, fontWeight: 600 }}>{p.status}</div>
                        </div>
                      );
                    })}
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* Tagline below pills */}
          <div style={{
            position: 'absolute',
            left: 0, right: 0,
            top: 1720,
            textAlign: 'center',
          }}>
            <LocalSprite start={3.9} end={6.2}>
              {({ localTime: lt }) => (
                <div style={{
                  opacity: clamp(lt / 0.5, 0, 1),
                  fontFamily: T.mono, fontSize: 20, color: T.mute,
                  letterSpacing: '0.28em', textTransform: 'uppercase',
                }}>
                  Digital Infrastructure Engineering
                </div>
              )}
            </LocalSprite>
          </div>

          {/* Exit fade for scene */}
          <LocalSprite start={5.6} end={6.2}>
            {({ localTime: lt, duration }) => (
              <div style={{
                position: 'absolute', inset: 0,
                background: T.ink,
                opacity: clamp(lt / duration, 0, 1),
                pointerEvents: 'none',
              }}/>
            )}
          </LocalSprite>
        </>
      )}
    </Sprite>
  );
}

// ═══ SCENE 2 — THE PAIN (6–17s) ═════════════════════════════════════════════
function Scene2Pain() {
  // Items appear staggered; shatter near the end
  const items = [
    { label: 'No real IT team',          appear: 1.3 },
    { label: 'Freelancers who vanish',   appear: 1.85 },
    { label: 'Zero AI strategy',         appear: 2.4 },
    { label: 'Cybersecurity gaps',       appear: 2.95 },
    { label: 'Tech costs eating margin', appear: 3.5 },
  ];
  const shatterAt = 8.4; // local to scene

  return (
    <Sprite start={6.0} end={17.0}>
      {({ localTime: sl }) => (
        <>
          <Backdrop tone="deep" />

          {/* Section eyebrow */}
          <div style={{ position: 'absolute', top: 200, left: 80, right: 80 }}>
            <LocalSprite start={0.3} end={9.0}>
              {({ localTime: lt }) => (
                <div style={{
                  opacity: clamp(lt / 0.4, 0, 1) * (1 - clamp((lt - 8.4) / 0.4, 0, 1)),
                  fontFamily: T.mono, fontSize: 24, color: T.orange,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  display: 'flex', alignItems: 'center', gap: 14,
                }}>
                  <div style={{ width: 28, height: 2, background: T.orange }}/>
                  The cost of getting it wrong
                </div>
              )}
            </LocalSprite>
          </div>

          {/* Headline */}
          <div style={{ position: 'absolute', top: 260, left: 80, right: 80 }}>
            <LocalSprite start={0.5} end={9.0}>
              <SlamHeadline start={0.1} dur={0.5} size={92} weight={700} letterSpacing="-0.03em">
                <div>Right now,</div>
                <div>your business is</div>
                <div style={{ color: T.orange }}>bleeding.</div>
              </SlamHeadline>
            </LocalSprite>
          </div>

          {/* Pain items */}
          {items.map((it, i) => (
            <PainItem
              key={i}
              label={it.label}
              start={it.appear}
              y={840 + i * 160}
              shatterAt={shatterAt + i * 0.05}
            />
          ))}

          {/* Glitch frame during shatter */}
          <LocalSprite start={shatterAt} end={shatterAt + 0.6}>
            {({ localTime: lt, duration }) => {
              const t = clamp(lt / duration, 0, 1);
              return (
                <>
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: 'rgba(245,108,4,0.04)',
                    mixBlendMode: 'screen',
                    opacity: 1 - t,
                  }}/>
                  {[0,1,2,3,4].map(k => {
                    const yPos = ((k * 173 + lt * 1100) % H);
                    return (
                      <div key={k} style={{
                        position: 'absolute',
                        left: 0, right: 0,
                        top: yPos,
                        height: 2 + (k % 3),
                        background: T.orange,
                        opacity: 0.18 * (1 - t),
                        mixBlendMode: 'screen',
                      }}/>
                    );
                  })}
                </>
              );
            }}
          </LocalSprite>

          {/* Orange wipe transition */}
          <LocalSprite start={9.4} end={11.0}>
            <OrangeWipe direction="right" />
          </LocalSprite>
        </>
      )}
    </Sprite>
  );
}

// ═══ SCENE 3 — THE SOLUTION (17–32s) ════════════════════════════════════════
function Scene3Solution() {
  return (
    <Sprite start={17.0} end={32.5}>
      {({ localTime: sl }) => (
        <>
          <Backdrop tone="bright" />

          {/* Eyebrow */}
          <div style={{ position: 'absolute', top: 170, left: 80, right: 80 }}>
            <LocalSprite start={0.2} end={15.0}>
              {({ localTime: lt }) => (
                <div style={{
                  opacity: clamp(lt / 0.4, 0, 1),
                  fontFamily: T.mono, fontSize: 24, color: T.orange,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  display: 'flex', alignItems: 'center', gap: 14,
                }}>
                  <div style={{ width: 28, height: 2, background: T.orange }}/>
                  Meet your tech team
                </div>
              )}
            </LocalSprite>
          </div>

          {/* Headline drops from top */}
          <div style={{ position: 'absolute', top: 220, left: 80, right: 80 }}>
            <LocalSprite start={0.3} end={15.0}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.7, 0, 1);
                const eased = Easing.easeOutBack(t);
                return (
                  <div style={{
                    transform: `translateY(${(1 - eased) * -60}px)`,
                    opacity: t,
                    fontFamily: T.display,
                    fontSize: 118,
                    fontWeight: 700,
                    color: T.white,
                    letterSpacing: '-0.04em',
                    lineHeight: 0.98,
                  }}>
                    <div>Terra<span style={{ color: T.orange }}>code.</span></div>
                    <div style={{ fontSize: 58, color: T.mute, fontWeight: 500, marginTop: 14, letterSpacing: '-0.02em' }}>
                      Your dedicated tech team.
                    </div>
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* Tagline word-by-word */}
          <div style={{ position: 'absolute', top: 600, left: 80, right: 80 }}>
            <LocalSprite start={2.0} end={15.0}>
              <WordReveal
                words={['Software.', 'Hardware.', 'AI.', 'Cybersecurity.']}
                start={0}
                stagger={0.18}
                perWordDur={0.35}
                size={58}
                weight={700}
                color={T.white}
                lineGap={8}
                highlightIdx={[2, 3]}
              />
              <div style={{ marginTop: 16 }}/>
              <WordReveal
                words={['At', 'the', 'cost', 'of', 'one', 'IT', 'employee.']}
                start={1.2}
                stagger={0.08}
                perWordDur={0.32}
                size={38}
                weight={500}
                color={T.mute}
                lineGap={4}
              />
            </LocalSprite>
          </div>

          {/* Divider */}
          <LocalSprite start={3.6} end={15.0}>
            {({ localTime: lt }) => {
              const t = clamp(lt / 0.6, 0, 1);
              return (
                <div style={{
                  position: 'absolute',
                  top: 870, left: 80,
                  width: `${t * 920}px`,
                  height: 1,
                  background: `linear-gradient(90deg, ${T.orange}, transparent)`,
                  opacity: 0.6,
                }}/>
              );
            }}
          </LocalSprite>

          {/* Stat counters */}
          <LocalSprite start={4.0} end={15.0}>
            <StatCounter value={2}  suffix="+" label="Years"             start={0.0}  dur={1.0} size={148} x={300} y={910} />
            <StatCounter value={15} suffix="+" label="Projects Delivered" start={0.25} dur={1.2} size={148} x={780} y={910} />
          </LocalSprite>

          {/* "What we do" eyebrow */}
          <LocalSprite start={6.0} end={15.0}>
            {({ localTime: lt }) => (
              <div style={{
                position: 'absolute',
                top: 1180, left: 80,
                opacity: clamp(lt / 0.4, 0, 1),
                fontFamily: T.mono, fontSize: 22, color: T.orange,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{ width: 28, height: 2, background: T.orange }}/>
                What we do
              </div>
            )}
          </LocalSprite>

          {/* Service tiles — 3 columns × 2 rows, fits in 1920 */}
          <LocalSprite start={6.3} end={15.0}>
            {({ localTime: lt }) => {
              const tiles = [
                { i: Icons.software, label: 'Business\nSoftware' },
                { i: Icons.ai,       label: 'AI\nSolutions'      },
                { i: Icons.web,      label: 'Web\nApps'          },
                { i: Icons.mobile,   label: 'Mobile\nApps'       },
                { i: Icons.cloud,    label: 'Cloud\nOps'         },
                { i: Icons.ux,       label: 'UX\nDesign'         },
              ];
              const cols = 3, rows = 2;
              const gap = 16;
              const colW = (W - 160 - gap * (cols - 1)) / cols;
              const colH = 270;
              const startY = 1250;
              return (
                <>
                  {tiles.map((t, idx) => {
                    const col = idx % cols;
                    const row = Math.floor(idx / cols);
                    const x = 80 + col * (colW + gap);
                    const y = startY + row * (colH + gap);
                    return (
                      <ServiceTile
                        key={idx}
                        icon={t.i}
                        label={t.label}
                        start={0.2 + idx * 0.09}
                        x={x} y={y}
                        width={colW} height={colH}
                      />
                    );
                  })}
                </>
              );
            }}
          </LocalSprite>

          {/* Exit fade */}
          <LocalSprite start={14.6} end={15.5}>
            {({ localTime: lt, duration }) => (
              <div style={{
                position: 'absolute', inset: 0,
                background: T.ink,
                opacity: clamp(lt / duration, 0, 1),
                pointerEvents: 'none',
              }}/>
            )}
          </LocalSprite>
        </>
      )}
    </Sprite>
  );
}

// ═══ SCENE 4 — PACKAGES (32–49s) ════════════════════════════════════════════
function PackageCard({ tier, subtitle, oldPrice, newPrice, suffix, bullets, badge, start, y, gold }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - start) / 0.65, 0, 1);
  const eased = Easing.easeOutCubic(t);
  const cardW = 920;
  const cardH = 420;
  const cardX = (W - cardW) / 2;

  const breath = gold ? 0.7 + 0.3 * Math.abs(Math.sin(localTime * 1.6)) : 0;

  return (
    <div style={{
      position: 'absolute',
      left: cardX, top: y,
      width: cardW, height: cardH,
      transform: `translateY(${(1 - eased) * 80}px)`,
      opacity: t,
      borderRadius: 24,
      background: gold
        ? `linear-gradient(180deg, rgba(217,164,65,0.06), rgba(20,20,20,0.6))`
        : 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))',
      border: gold ? `1.5px solid rgba(217,164,65,0.6)` : `1px solid rgba(255,255,255,0.10)`,
      boxShadow: gold ? `0 0 ${48 * breath}px rgba(217,164,65,${0.35 * breath}), 0 0 ${120 * breath}px rgba(217,164,65,${0.18 * breath})` : 'none',
      padding: '28px 36px',
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
      backdropFilter: 'blur(8px)',
      overflow: 'hidden',
    }}>
      {/* Top row */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          fontFamily: T.mono,
          fontSize: 22,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: gold ? T.gold : T.mute,
        }}>{tier}</div>
        {badge ? (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px',
            background: gold ? `linear-gradient(90deg, ${T.gold}, ${T.goldGlow})` : 'rgba(245,108,4,0.18)',
            color: gold ? T.ink : T.orange,
            fontFamily: T.mono,
            fontSize: 18,
            fontWeight: 600,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            borderRadius: 999,
          }}>
            <span style={{ fontSize: 16 }}>★</span>{badge}
          </div>
        ) : null}
      </div>

      {/* Subtitle */}
      {subtitle ? (
        <div style={{
          fontFamily: T.body,
          fontSize: 22,
          color: T.mute,
          fontWeight: 400,
          letterSpacing: '-0.005em',
          marginTop: -2,
        }}>{subtitle}</div>
      ) : null}

      {/* Price */}
      <div style={{ position: 'relative', height: 90 }}>
        <PriceReveal
          oldPrice={oldPrice}
          newPrice={newPrice}
          suffix={suffix}
          start={0.4}
          x={0} y={8}
          big
        />
      </div>

      {/* Bullets */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 0 }}>
        {bullets.map((b, i) => {
          const bt = clamp((localTime - start - 0.85 - i * 0.07) / 0.35, 0, 1);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 16,
              opacity: bt,
              transform: `translateX(${(1 - bt) * -14}px)`,
              fontFamily: T.body, fontSize: 26, fontWeight: 500,
              color: T.white, letterSpacing: '-0.005em',
              lineHeight: 1.2,
            }}>
              <div style={{ width: 8, height: 8, borderRadius: 4, background: gold ? T.gold : T.orange, flexShrink: 0, boxShadow: `0 0 8px ${gold ? T.gold : T.orange}` }}/>
              {b}
            </div>
          );
        })}
      </div>

      {/* Corner accent */}
      <div style={{
        position: 'absolute',
        top: -1, right: -1,
        width: 64, height: 64,
        borderTop: gold ? `1.5px solid ${T.gold}` : `1px solid ${T.orange}`,
        borderRight: gold ? `1.5px solid ${T.gold}` : `1px solid ${T.orange}`,
        borderTopRightRadius: 24,
        opacity: 0.7,
      }}/>
    </div>
  );
}

function Scene4Packages() {
  return (
    <Sprite start={32.0} end={44.0}>
      {({ localTime: sl }) => (
        <>
          <Backdrop tone="deep" />

          {/* Eyebrow */}
          <div style={{ position: 'absolute', top: 140, left: 80, right: 80 }}>
            <LocalSprite start={0.2} end={11.5}>
              {({ localTime: lt }) => (
                <div style={{
                  opacity: clamp(lt / 0.4, 0, 1),
                  fontFamily: T.mono, fontSize: 24, color: T.orange,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  display: 'flex', alignItems: 'center', gap: 14,
                }}>
                  <div style={{ width: 28, height: 2, background: T.orange }}/>
                  Partnership tiers
                </div>
              )}
            </LocalSprite>
          </div>

          <div style={{ position: 'absolute', top: 198, left: 80, right: 80 }}>
            <LocalSprite start={0.4} end={11.5}>
              <SlamHeadline start={0.1} dur={0.5} size={96} weight={700} letterSpacing="-0.035em">
                <div>Built for</div>
                <div>where you<span style={{ color: T.orange }}>'re</span></div>
                <div>going.</div>
              </SlamHeadline>
            </LocalSprite>
          </div>

          {/* Cards */}
          <LocalSprite start={1.2} end={11.5}>
            <PackageCard
              tier="Founder Growth"
              subtitle="For startup founders & early-stage businesses"
              oldPrice="$299"
              newPrice="$199"
              suffix="/mo"
              start={0.0}
              y={580}
              bullets={[
                'Full digital ecosystem deployment',
                'Software, hardware, AI & security',
                'Business analysis & solution design',
                'Startup-friendly upfront pricing',
              ]}
            />
            <PackageCard
              tier="Gold Partner"
              subtitle="Ideal for scaling businesses"
              oldPrice="$699"
              newPrice="$459"
              suffix="/mo"
              badge="Most Popular"
              start={0.35}
              y={1010}
              gold
              bullets={[
                'Everything in Founder',
                'Proprietary security solutions',
                'In-house R&D products & devices',
                'Ongoing optimization & upgrades',
              ]}
            />
            <PackageCard
              tier="Elite Partner"
              subtitle="Built for enterprises & large-scale ops"
              oldPrice="$1,299"
              newPrice="$799+"
              suffix="/mo"
              start={0.7}
              y={1440}
              bullets={[
                'Everything in Gold',
                'Enterprise infrastructure design',
                'Full business system re-engineering',
                'Long-term strategic partnership',
              ]}
            />
          </LocalSprite>

          {/* Exit fade */}
          <LocalSprite start={11.5} end={12.0}>
            {({ localTime: lt, duration }) => (
              <div style={{
                position: 'absolute', inset: 0,
                background: T.ink,
                opacity: clamp(lt / duration, 0, 1),
                pointerEvents: 'none',
              }}/>
            )}
          </LocalSprite>
        </>
      )}
    </Sprite>
  );
}

// ═══ SCENE 5 — CTA CLOSE (49–59s) ═══════════════════════════════════════════
function Scene5CTA() {
  return (
    <Sprite start={44.0} end={54.0}>
      {({ localTime: sl }) => (
        <>
          <div style={{ position: 'absolute', inset: 0, background: T.ink }}/>
          <div style={{
            position: 'absolute', inset: 0,
            background: `radial-gradient(60% 50% at 50% 45%, rgba(245,108,4,0.22) 0%, rgba(245,108,4,0.03) 45%, transparent 70%)`,
          }}/>

          {/* particle burst */}
          <LocalSprite start={0.0} end={10.5}>
            <ParticleField count={70} hue={T.orange} />
          </LocalSprite>

          {/* Headline */}
          <div style={{
            position: 'absolute',
            top: 460, left: 80, right: 80,
            textAlign: 'center',
          }}>
            <LocalSprite start={0.3} end={10.5}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.6, 0, 1);
                const eased = Easing.easeOutBack(t);
                return (
                  <div style={{
                    transform: `scale(${0.92 + 0.08 * eased})`,
                    opacity: t,
                    fontFamily: T.display,
                    fontSize: 108,
                    fontWeight: 700,
                    color: T.white,
                    letterSpacing: '-0.035em',
                    lineHeight: 1.02,
                  }}>
                    Your tech team<br/>is <span style={{ color: T.orange, textShadow: `0 0 32px rgba(245,108,4,0.55)` }}>ready.</span>
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* Sub */}
          <div style={{
            position: 'absolute',
            top: 740, left: 80, right: 80,
            textAlign: 'center',
          }}>
            <LocalSprite start={1.4} end={10.5}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.5, 0, 1);
                return (
                  <div style={{
                    opacity: t,
                    transform: `translateY(${(1 - t) * 14}px)`,
                    fontFamily: T.body,
                    fontSize: 38,
                    color: T.mute,
                    fontWeight: 400,
                  }}>
                    Let's build something that lasts.
                  </div>
                );
              }}
            </LocalSprite>
          </div>

          {/* Contact block */}
          <div style={{
            position: 'absolute',
            top: 900, left: 0, right: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          }}>
            {[
              { icon: '🌐', text: 'terracodedev.com',             start: 2.1 },
              { icon: '✉',  text: 'operations@terracodedev.com',  start: 2.4 },
              { icon: '☏',  text: '+94 704 260 300',              start: 2.7 },
            ].map((c, i) => (
              <LocalSprite key={i} start={c.start} end={10.5}>
                {({ localTime: lt }) => {
                  const t = clamp(lt / 0.4, 0, 1);
                  const eased = Easing.easeOutCubic(t);
                  return (
                    <div style={{
                      opacity: t,
                      transform: `translateY(${(1 - eased) * 12}px)`,
                      display: 'flex', alignItems: 'center', gap: 18,
                      fontFamily: T.mono, fontSize: 32,
                      color: T.white,
                      letterSpacing: '0.02em',
                      padding: '10px 24px',
                      border: `1px solid rgba(255,255,255,0.06)`,
                      borderRadius: 999,
                      background: 'rgba(255,255,255,0.02)',
                    }}>
                      <span style={{ color: T.orange, fontSize: 26, lineHeight: 1 }}>{c.icon}</span>
                      <span>{c.text}</span>
                    </div>
                  );
                }}
              </LocalSprite>
            ))}
          </div>

          {/* CTA button */}
          <div style={{
            position: 'absolute',
            top: 1260, left: 0, right: 0,
            display: 'flex', justifyContent: 'center',
          }}>
            <LocalSprite start={3.4} end={10.5}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.5, 0, 1);
                const eased = Easing.easeOutBack(t);
                const pulse = 1 + 0.025 * Math.sin(lt * 3.4);
                const glow = 0.6 + 0.4 * Math.abs(Math.sin(lt * 3.4));
                return (
                  <button
                    onClick={() => window.open('https://wa.me/94704260300?text=Hi%20Terracode%2C%20I%27d%20like%20to%20book%20a%20partnership%20call.', '_blank')}
                    style={{
                    transform: `scale(${(0.9 + 0.1 * eased) * pulse})`,
                    opacity: t,
                    padding: '28px 48px',
                    background: `linear-gradient(180deg, ${T.orangeBright}, ${T.orangeDeep})`,
                    border: 'none',
                    borderRadius: 999,
                    color: T.white,
                    fontFamily: T.display,
                    fontWeight: 600,
                    fontSize: 38,
                    letterSpacing: '-0.01em',
                    cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', gap: 16,
                    boxShadow: `0 0 ${36 * glow}px rgba(245,108,4,${0.55 * glow}), 0 0 ${100 * glow}px rgba(245,108,4,${0.25 * glow}), inset 0 1px 0 rgba(255,255,255,0.3)`,
                  }}>
                    Book a Partnership Call
                    <span style={{ fontSize: 32 }}>→</span>
                  </button>
                );
              }}
            </LocalSprite>
          </div>

          {/* Logo lockup */}
          <div style={{
            position: 'absolute',
            top: 1540, left: 0, right: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          }}>
            <LocalSprite start={5.0} end={10.5}>
              {({ localTime: lt }) => {
                const t = clamp(lt / 0.5, 0, 1);
                const eased = Easing.easeOutBack(t);
                return (
                  <>
                    <div style={{
                      transform: `scale(${0.92 + 0.08 * eased})`,
                      opacity: t,
                    }}>
                      <LocalSprite start={0} end={10.5}>
                        <TerracodeLogo size={88} pulse glow />
                      </LocalSprite>
                    </div>
                    <div style={{
                      opacity: clamp((lt - 0.3) / 0.5, 0, 1),
                      fontFamily: T.mono, fontSize: 22,
                      color: T.mute,
                      letterSpacing: '0.28em', textTransform: 'uppercase',
                      marginTop: 4,
                    }}>
                      Digital Infrastructure Engineering
                    </div>
                  </>
                );
              }}
            </LocalSprite>
          </div>
        </>
      )}
    </Sprite>
  );
}

Object.assign(window, {
  Scene1Hook, Scene2Pain, Scene3Solution, Scene4Packages, Scene5CTA,
  W, H,
});