// 60-second hero film. Tight, punchy, marketing-grade.
// 6 scenes, ~10s each. Total: 60s.
//
//  0–8s    : Cold open — "1 July 2026" with countdown, then problem statement
//  8–18s   : Pain — three obligations stacking up
//  18–32s  : Solution reveal — AMLify dashboard zooms in, readiness ring fills, TTR banner pops
//  32–46s  : Three pillars carousel — Programme / Screening / TTR
//  46–55s  : Why AMLify — Australian-built, deadline-aware, Ami citation
//  55–60s  : Logo + CTA close
//
// Uses Sprite/Stage from animations.jsx and primitives + dashboard from sibling files.

const { Sprite, useSprite, useTime, Easing, clamp, animate, interpolate,
  FadeIn, FadeInAt, ProgressRing, Pill, Card, Eyebrow, GlowOrbs, LogoLockup,
  Caption, DashboardView, ReadinessCard, TTRBanner,
  BRAND, BRAND_700, BRAND_50, ACCENT, ACCENT_50,
  SLATE_900, SLATE_500, SLATE_400, SLATE_200, SLATE_50, EMERALD, RED,
  FONT, MONO } = window;


// ── Scene 1 (0–8s): Cold open ─────────────────────────────────────────────
function Scene1ColdOpen() {
  return (
    <Sprite start={0} end={8.2}>
      {({ localTime }) => {
        // Background pulse: dark navy with subtle teal/amber orbs
        const dateOpacity = clamp(animate({ start: 0.3, end: 1.2, ease: Easing.easeOutCubic })(localTime), 0, 1);
        const exitOpacity = 1 - clamp((localTime - 7) / 1.2, 0, 1);

        // Big numeric "01.07.2026" with countdown ticking down
        // Show fixed date + a calculated days-until counter that animates
        const daysUntil = Math.round(interpolate([1.5, 4.5], [62, 62])(localTime)); // hold

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(160deg,#0c1222,#0f172a 60%,#020617)',
            color: '#fff', fontFamily: FONT,
            opacity: exitOpacity,
          }}>
            <GlowOrbs tealOpacity={0.22} amberOpacity={0.18}/>

            {/* Date */}
            <div style={{
              position: 'absolute', left: 0, right: 0, top: 220,
              textAlign: 'center',
              opacity: dateOpacity,
              transform: `translateY(${(1 - dateOpacity) * 12}px)`,
            }}>
              <div style={{
                fontFamily: MONO, fontSize: 14,
                color: '#5eead4', letterSpacing: '0.3em',
                textTransform: 'uppercase', marginBottom: 22,
              }}>
                AUSTRAC · TRANCHE 2 COMMENCEMENT
              </div>
              <div style={{
                fontSize: 200, fontWeight: 800, letterSpacing: '-0.045em',
                lineHeight: 0.95,
                background: 'linear-gradient(180deg,#fff,#94a3b8)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>
                1 July 2026
              </div>
            </div>

            {/* Subline that fades in */}
            <FadeInAt x={0} y={620} delay={2.6} dur={0.7} dy={14} style={{ width: '100%', textAlign: 'center' }}>
              <div style={{ fontSize: 30, fontWeight: 500, color: '#cbd5e1', letterSpacing: '-0.015em' }}>
                Conveyancers, accountants, real-estate agents and TCSPs become reporting entities.
              </div>
            </FadeInAt>

            <FadeInAt x={0} y={700} delay={4.2} dur={0.6} dy={10} style={{ width: '100%', textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 600, color: '#5eead4', letterSpacing: '-0.005em' }}>
                Same obligations as a bank. Same deadlines.
              </div>
            </FadeInAt>

            {/* Countdown chip top-right */}
            <FadeInAt x={1660} y={50} delay={1.4} dur={0.5}>
              <div style={{
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.12)',
                borderRadius: 999,
                padding: '8px 14px',
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: MONO, fontSize: 12, color: '#e2e8f0',
                backdropFilter: 'blur(20px)',
              }}>
                <div style={{ width: 7, height: 7, borderRadius: '50%', background: ACCENT,
                  boxShadow: `0 0 8px ${ACCENT}`,
                  animation: 'pulse 2s ease-in-out infinite' }}/>
                T-MINUS 62 BUSINESS DAYS
              </div>
            </FadeInAt>
          </div>
        );
      }}
    </Sprite>
  );
}


// ── Scene 2 (8–18s): The pain stacking up ─────────────────────────────────
function Scene2Pain() {
  return (
    <Sprite start={8} end={18.2}>
      {({ localTime }) => {
        const exitOp = 1 - clamp((localTime - 9) / 1.2, 0, 1);
        const obligations = [
          { icon: 'L_FileText', title: 'AML/CTF programme', sub: 'Part A risk assessment + Part B customer ID — independently reviewed annually', delay: 0.4 },
          { icon: 'L_UserCheck', title: 'Customer due diligence', sub: 'Sanctions, PEP, beneficial ownership — on every customer, every matter', delay: 1.4 },
          { icon: 'L_Timer', title: '10-business-day deadline', sub: 'TTRs over $10,000 cash. Suspicious matters in 3 days. The clock starts on day one.', delay: 2.4 },
        ];
        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: '#fafaf9', color: SLATE_900, fontFamily: FONT,
            opacity: exitOp,
            padding: '90px 120px',
          }}>
            <FadeIn dur={0.5}>
              <div style={{ fontFamily: MONO, fontSize: 13, color: ACCENT, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                What 1 July 2026 means for your practice
              </div>
              <div style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.025em', marginTop: 16, maxWidth: 1100, lineHeight: 1.05 }}>
                Three obligations. Statutory penalties for missing any of them.
              </div>
            </FadeIn>

            <div style={{
              position: 'absolute', left: 120, right: 120, top: 380,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            }}>
              {obligations.map((o, i) => {
                const Ico = window[o.icon];
                return (
                  <FadeIn key={i} delay={o.delay} dur={0.55} y={20}>
                    <Card padding={28} style={{ minHeight: 280 }}>
                      <div style={{
                        width: 56, height: 56, borderRadius: 14,
                        background: BRAND_50, color: BRAND,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        <Ico size={28} strokeWidth={2}/>
                      </div>
                      <div style={{ fontSize: 26, fontWeight: 700, marginTop: 22, letterSpacing: '-0.02em' }}>{o.title}</div>
                      <div style={{ fontSize: 17, color: SLATE_500, marginTop: 12, lineHeight: 1.5 }}>{o.sub}</div>
                    </Card>
                  </FadeIn>
                );
              })}
            </div>

            {/* Pile-up callout */}
            <FadeInAt x={120} y={780} delay={3.6} dur={0.5}>
              <div style={{
                fontSize: 22, fontWeight: 600, color: SLATE_900,
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <window.L_AlertTriangle size={22} color={ACCENT}/>
                A 50-page programme. 124 customers. 10-business-day windows. Manually?
              </div>
            </FadeInAt>
          </div>
        );
      }}
    </Sprite>
  );
}


// ── Scene 3 (18–32s): Dashboard reveal ────────────────────────────────────
function Scene3DashboardReveal() {
  return (
    <Sprite start={18} end={32.2}>
      {({ localTime }) => {
        // Dashboard zooms in from below, then we highlight the readiness ring.
        const enter = clamp(animate({ start: 0, end: 1.3, ease: Easing.easeOutCubic })(localTime), 0, 1);
        const exitOp = 1 - clamp((localTime - 13) / 1.2, 0, 1);

        // Ring fills 0→87 over seconds 1.5–3.5
        const ringPct = interpolate([1.4, 4], [0, 87], Easing.easeOutCubic)(localTime);

        // Highlight TTR after 7s
        const showHighlightTTR = localTime > 7.5 && localTime < 12;
        const showHighlightReadiness = localTime > 4.2 && localTime < 7.5;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg,#f8fafc,#fff)',
            fontFamily: FONT, color: SLATE_900,
            opacity: exitOp,
          }}>
            {/* Dashboard frame, scaled */}
            <div style={{
              position: 'absolute',
              left: '50%', top: '50%',
              transform: `translate(-50%, -50%) scale(${0.86 + enter * 0.04})`,
              transformOrigin: 'center',
              width: 1640, height: 920,
              opacity: enter,
            }}>
              <DashboardViewWithOverrides ringPct={ringPct} highlightReadiness={showHighlightReadiness} highlightTTR={showHighlightTTR}/>
              <div style={{
                position: 'absolute',
                left: 1, top: 37,
                width: 241,
                bottom: 1,
                background: '#0c1222',
                borderBottomLeftRadius: 13,
                pointerEvents: 'none',
              }}/>
            </div>

            {/* Top eyebrow */}
            <FadeInAt x={0} y={56} delay={0.4} dur={0.5} style={{ width: '100%', textAlign: 'center' }}>
              <div style={{ fontFamily: MONO, fontSize: 14, color: BRAND, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                Your AMLify dashboard
              </div>
            </FadeInAt>

            {/* Floating captions that move with story beats */}
            {showHighlightReadiness && (
              <Sprite start={4.2} end={7.5}>
                <Caption position="bottom" tone="dark">
                  <window.L_ShieldCheck size={18} color="#5eead4"/>
                  87% ready for AUSTRAC. One step left.
                </Caption>
              </Sprite>
            )}
            {showHighlightTTR && (
              <Sprite start={7.5} end={12}>
                <Caption position="bottom" tone="dark">
                  <window.L_Sparkles size={18} color="#5eead4"/>
                  TTR auto-drafted from a $24,500 cash deposit. 9 business days on the clock.
                </Caption>
              </Sprite>
            )}
          </div>
        );
      }}
    </Sprite>
  );
}

function DashboardViewWithOverrides({ ringPct, highlightReadiness, highlightTTR }) {
  // Custom render — we want the ring to be controllable from outside.
  const TopRight = (
    <div style={{
      background: BRAND_50, color: BRAND_700,
      padding: '6px 12px', borderRadius: 999,
      fontSize: 11.5, fontWeight: 600,
      display: 'flex', alignItems: 'center', gap: 6,
      border: '1px solid #99f6e4',
    }}>
      <window.L_Sparkles size={12} strokeWidth={2}/>
      Ask <i>Ami</i>
    </div>
  );

  return (
    <window.DashboardFrame
      activeNav="Dashboard"
      topTitle="Good morning, Sarah"
      topSubtitle="Wednesday, 13 May 2026 · 9 business days to next deadline"
      topRight={TopRight}
    >
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        <window.StatCard icon="L_Users" label="Customers" value="124" sublabel="+8 this week" tone="brand"/>
        <window.StatCard icon="L_Activity" label="Transactions (30d)" value="1,847" sublabel="3 flagged" tone="brand"/>
        <window.StatCard icon="L_FileText" label="Reports filed" value="6" sublabel="2 pending" tone="warn"/>
        <window.StatCard icon="L_ShieldCheck" label="Audit log entries" value="1,284" sublabel="Chain verified" tone="success"/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 16 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <ControlledReadinessCard percent={ringPct} highlight={highlightReadiness}/>
          <TTRBanner highlight={highlightTTR}/>
        </div>
        <window.ActivityFeed/>
      </div>
    </window.DashboardFrame>
  );
}

function ControlledReadinessCard({ percent, highlight }) {
  // Same layout as ReadinessCard but accepts live percent without delay.
  const items = [
    { label: 'AML/CTF programme published', threshold: 20 },
    { label: 'Compliance Officer nominated', threshold: 36 },
    { label: 'Customer base imported (124)', threshold: 55 },
    { label: 'Sanctions screening complete', threshold: 75 },
    { label: 'Independent reviewer assigned', threshold: 110 },
  ];
  return (
    <Card padding={24} style={{
      boxShadow: highlight ? `0 0 0 2px ${BRAND}, 0 12px 40px -10px rgba(13,148,136,0.35)` : 'none',
      transition: 'box-shadow 200ms',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: SLATE_500, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            AUSTRAC readiness
          </div>
          <div style={{ fontSize: 18, fontWeight: 700, color: SLATE_900, marginTop: 6, letterSpacing: '-0.015em' }}>
            You're on track for 1 July 2026
          </div>
        </div>
        <Pill tone="brand" icon={<window.L_ShieldCheck size={11} strokeWidth={2.5}/>}>On track</Pill>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28, marginTop: 18 }}>
        <ProgressRing size={108} stroke={10} value={percent} sublabel="ready"/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((it, i) => {
            const done = percent >= it.threshold;
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: done ? SLATE_900 : SLATE_500, transition: 'color 150ms' }}>
                {done ? (
                  <window.L_CheckCircle2 size={14} color={EMERALD} strokeWidth={2.25}/>
                ) : (
                  <window.L_Circle size={14} color={SLATE_400} strokeWidth={1.75}/>
                )}
                <span>{it.label}</span>
              </div>
            );
          })}
        </div>
      </div>
    </Card>
  );
}


// ── Scene 4 (32–46s): Three pillars ───────────────────────────────────────
function Scene4Pillars() {
  return (
    <Sprite start={32} end={46.2}>
      {({ localTime }) => {
        const exitOp = 1 - clamp((localTime - 13) / 1.2, 0, 1);
        const pillars = [
          {
            window: [0, 4.6],
            icon: 'L_FileText',
            title: 'Programme drafted in minutes',
            sub: 'Answer 9 short questions. Ami drafts both Part A and Part B against your real risk profile.',
            stat: '9 questions →',
            stat2: 'Defensible programme',
            visual: 'programme',
          },
          {
            window: [4.5, 9.1],
            icon: 'L_UserCheck',
            title: 'Customers screened on creation',
            sub: 'DFAT, UN Security Council, OFAC SDN, and PEP databases — automatically.',
            stat: '4 lists screened',
            stat2: '< 800ms per customer',
            visual: 'screening',
          },
          {
            window: [9.0, 13.7],
            icon: 'L_Timer',
            title: 'Transactions watched, deadlines counted',
            sub: 'Cash over $10,000 → AMLify drafts the TTR with the customer pre-filled. Calendar tracks the 10 business days.',
            stat: 'Auto-drafted TTRs',
            stat2: '10-bd countdown',
            visual: 'ttr',
          },
        ];

        return (
          <div style={{ position: 'absolute', inset: 0, background: '#0c1222', fontFamily: FONT, color: '#fff', opacity: exitOp }}>
            <GlowOrbs tealOpacity={0.16} amberOpacity={0.1}/>
            {pillars.map((p, i) => {
              const [s, e] = p.window;
              const visible = localTime >= s && localTime <= e;
              if (!visible) return null;
              const local = localTime - s;
              const enterT = clamp(local / 0.5, 0, 1);
              const exitT = clamp((local - (e - s - 0.4)) / 0.4, 0, 1);
              const op = enterT * (1 - exitT);
              const Ico = window[p.icon];
              return (
                <div key={i} style={{
                  position: 'absolute', inset: 0,
                  display: 'grid', gridTemplateColumns: '1fr 1fr',
                  alignItems: 'center', gap: 60, padding: '0 120px',
                  opacity: op,
                  transform: `translateY(${(1 - enterT) * 12 - exitT * 10}px)`,
                }}>
                  {/* Left: copy */}
                  <div>
                    <div style={{
                      fontFamily: MONO, fontSize: 13, color: '#5eead4',
                      letterSpacing: '0.15em', textTransform: 'uppercase',
                    }}>
                      Pillar {i + 1} of 3
                    </div>
                    <div style={{
                      width: 64, height: 64, borderRadius: 16,
                      background: 'rgba(94,234,212,0.12)', color: '#5eead4',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      marginTop: 24,
                    }}>
                      <Ico size={32} strokeWidth={2}/>
                    </div>
                    <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.025em', marginTop: 22, lineHeight: 1.05 }}>
                      {p.title}
                    </div>
                    <div style={{ fontSize: 22, color: '#cbd5e1', marginTop: 18, lineHeight: 1.45, maxWidth: 600 }}>
                      {p.sub}
                    </div>
                    <div style={{ display: 'flex', gap: 24, marginTop: 36 }}>
                      <Pill tone="dark" size="lg">{p.stat}</Pill>
                      <Pill tone="dark" size="lg">{p.stat2}</Pill>
                    </div>
                  </div>

                  {/* Right: visual */}
                  <div style={{
                    aspectRatio: '4/3',
                    background: 'rgba(255,255,255,0.04)',
                    border: '1px solid rgba(255,255,255,0.08)',
                    borderRadius: 22, padding: 32,
                    backdropFilter: 'blur(8px)',
                  }}>
                    <PillarVisual kind={p.visual} t={local}/>
                  </div>
                </div>
              );
            })}
          </div>
        );
      }}
    </Sprite>
  );
}

function PillarVisual({ kind, t }) {
  if (kind === 'programme') {
    const lines = [
      'Part A · Risk assessment',
      '1. Customer types',
      '2. Geographic exposure',
      '3. Product / service risk',
      '4. Delivery channels',
      '5. Trigger events',
      'Part B · Customer ID procedures',
      '6. Identification standards',
      '7. KYC for individuals',
      '8. KYC for non-individuals',
      '9. Beneficial owner check',
    ];
    const visibleCount = Math.floor(clamp(t / 0.32, 0, lines.length));
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT, color: '#fff' }}>
        <div style={{ fontSize: 12, color: '#5eead4', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
          AML/CTF programme · v0.1 (draft)
        </div>
        <div style={{ marginTop: 16, flex: 1, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: MONO, fontSize: 14 }}>
          {lines.slice(0, visibleCount).map((line, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              opacity: 1, color: line.startsWith('Part') ? '#5eead4' : '#cbd5e1',
              fontWeight: line.startsWith('Part') ? 700 : 400,
              animation: 'fadeUp 280ms ease-out both',
            }}>
              {!line.startsWith('Part') && <window.L_Check size={14} color={EMERALD} strokeWidth={2.5}/>}
              {line}
            </div>
          ))}
          {visibleCount < lines.length && (
            <div style={{ display: 'inline-block', width: 8, height: 16, background: '#5eead4', marginTop: 4, animation: 'blink 1s steps(2) infinite' }}/>
          )}
        </div>
      </div>
    );
  }
  if (kind === 'screening') {
    const lists = [
      { name: 'DFAT consolidated list', delay: 0 },
      { name: 'UN Security Council', delay: 0.6 },
      { name: 'OFAC SDN', delay: 1.2 },
      { name: 'PEP database', delay: 1.8 },
    ];
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT, color: '#fff' }}>
        <div style={{ fontSize: 12, color: '#5eead4', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
          Screening · Patel Holdings Pty Ltd
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 }}>
          {lists.map((l, i) => {
            const cleared = t > l.delay + 0.5;
            const checking = t > l.delay && !cleared;
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.08)',
                padding: '14px 18px', borderRadius: 12,
                opacity: t > l.delay - 0.2 ? 1 : 0.3,
                transition: 'opacity 200ms',
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: cleared ? 'rgba(16,185,129,0.18)' : checking ? 'rgba(94,234,212,0.18)' : 'rgba(148,163,184,0.12)',
                  color: cleared ? '#34d399' : checking ? '#5eead4' : '#64748b',
                }}>
                  {cleared ? <window.L_Check size={14} strokeWidth={3}/> :
                    checking ? <div style={{ width: 10, height: 10, borderRadius: '50%', border: '2px solid #5eead4', borderTopColor: 'transparent', animation: 'spin 0.6s linear infinite' }}/> :
                    <window.L_Circle size={14}/>}
                </div>
                <div style={{ flex: 1, fontSize: 15, fontWeight: 500 }}>{l.name}</div>
                <div style={{ fontFamily: MONO, fontSize: 12, color: cleared ? '#34d399' : '#64748b' }}>
                  {cleared ? 'CLEAR' : checking ? '...' : 'queued'}
                </div>
              </div>
            );
          })}
        </div>
        {t > 2.6 && (
          <div style={{
            background: 'rgba(16,185,129,0.12)',
            border: '1px solid rgba(16,185,129,0.4)',
            borderRadius: 10, padding: '10px 14px',
            fontSize: 13, fontWeight: 600, color: '#34d399',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <window.L_ShieldCheck size={16} strokeWidth={2.25}/>
            All lists clear — CDD complete in 0.8s
          </div>
        )}
      </div>
    );
  }
  if (kind === 'ttr') {
    // Show a transaction record + auto-drafted TTR + countdown
    const showTTR = t > 0.8;
    const showCountdown = t > 2.0;
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT, color: '#fff', gap: 12 }}>
        <div style={{ fontSize: 12, color: '#5eead4', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
          Transactions
        </div>
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.08)',
          padding: 16, borderRadius: 12, fontFamily: MONO, fontSize: 12.5,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', color: '#94a3b8' }}>
            <span>TXN-2026-0048</span>
            <span style={{ color: ACCENT }}>13 May 2026 · 09:42</span>
          </div>
          <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', fontSize: 16, color: '#fff' }}>
            <span>John Smith · Cash deposit</span>
            <span style={{ fontWeight: 700 }}>$24,500.00 AUD</span>
          </div>
          <div style={{ marginTop: 10, fontSize: 11.5, color: ACCENT, display: 'flex', alignItems: 'center', gap: 6 }}>
            <window.L_AlertTriangle size={12}/>
            Threshold breach detected → TTR required
          </div>
        </div>

        {showTTR && (
          <div style={{
            background: 'linear-gradient(135deg, rgba(217,119,6,0.18), rgba(217,119,6,0.06))',
            border: '1px solid rgba(217,119,6,0.4)',
            padding: 16, borderRadius: 12,
            animation: 'fadeUp 320ms ease-out both',
          }}>
            <div style={{ fontSize: 12, color: '#fcd34d', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
              ✱ Auto-drafted by Ami
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 8, color: '#fff' }}>
              TTR-2026-0048 · ready for review
            </div>
            <div style={{ fontSize: 13, color: '#fde68a', marginTop: 6 }}>
              Customer details, ABN, amount and source pre-filled from the matter.
            </div>
          </div>
        )}

        {showCountdown && (
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(10,1fr)', gap: 6, marginTop: 'auto',
          }}>
            {Array.from({ length: 10 }).map((_, i) => {
              const elapsed = Math.floor((t - 2.0) * 1.6);
              const used = i < elapsed;
              const onClock = i === elapsed;
              return (
                <div key={i} style={{
                  height: 36, borderRadius: 6,
                  background: used ? 'rgba(220,38,38,0.4)' : onClock ? ACCENT : 'rgba(255,255,255,0.06)',
                  border: '1px solid ' + (onClock ? '#fbbf24' : 'rgba(255,255,255,0.08)'),
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontFamily: MONO, color: used || onClock ? '#fff' : '#64748b',
                  fontWeight: 700,
                  transition: 'background 200ms',
                }}>
                  bd{i + 1}
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  }
  return null;
}


// ── Scene 5 (46–55s): Why AMLify ──────────────────────────────────────────
function Scene5Why() {
  return (
    <Sprite start={46} end={55.2}>
      {({ localTime }) => {
        const exitOp = 1 - clamp((localTime - 8) / 1.2, 0, 1);
        const items = [
          { icon: 'L_Shield', title: 'Australian-built and hosted', sub: 'Sydney region. Encrypted at rest.', delay: 0.2 },
          { icon: 'L_Lock', title: 'Tamper-evidence built in', sub: 'SHA-256 hash-chained audit log, 7-year retention.', delay: 0.7 },
          { icon: 'L_Timer', title: 'Deadline-aware', sub: 'AEST business-day math. 3 / 10 bd windows.', delay: 1.2 },
          { icon: 'L_Brain', title: 'Ami knows the Act', sub: 'Grounded in the AML/CTF Act + Rules. Citations, not hallucinations.', delay: 1.7 },
        ];
        return (
          <div style={{ position: 'absolute', inset: 0, background: '#fafaf9', color: SLATE_900, fontFamily: FONT, opacity: exitOp, padding: '70px 120px' }}>
            <FadeIn dur={0.5}>
              <div style={{ fontFamily: MONO, fontSize: 13, color: BRAND, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                Why AMLify
              </div>
              <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.025em', marginTop: 12, maxWidth: 1300, lineHeight: 1.05 }}>
                Built for the Australian Tranche 2 reality.
              </div>
            </FadeIn>
            <div style={{ position: 'absolute', left: 120, right: 120, top: 320, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
              {items.map((it, i) => {
                const Ico = window[it.icon];
                return (
                  <FadeIn key={i} delay={it.delay} dur={0.5} y={20}>
                    <Card padding={26} style={{ minHeight: 240 }}>
                      <div style={{ width: 48, height: 48, borderRadius: 12, background: BRAND_50, color: BRAND,
                        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Ico size={22} strokeWidth={2}/>
                      </div>
                      <div style={{ fontSize: 19, fontWeight: 700, marginTop: 18, letterSpacing: '-0.015em', lineHeight: 1.2 }}>{it.title}</div>
                      <div style={{ fontSize: 14, color: SLATE_500, marginTop: 8, lineHeight: 1.5 }}>{it.sub}</div>
                    </Card>
                  </FadeIn>
                );
              })}
            </div>
            <FadeInAt x={0} y={780} delay={2.6} style={{ width: '100%', textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 600, color: SLATE_500 }}>
                Not a global tool with Australia bolted on. Built for the Act.
              </div>
            </FadeInAt>
          </div>
        );
      }}
    </Sprite>
  );
}


// ── Scene 6 (55–60s): Logo + CTA ──────────────────────────────────────────
function Scene6CTA() {
  return (
    <Sprite start={55} end={60}>
      {({ localTime }) => {
        const enter = clamp(animate({ start: 0, end: 0.7, ease: Easing.easeOutCubic })(localTime), 0, 1);
        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(160deg,#0c1222,#0f172a 50%,#020617)',
            color: '#fff', fontFamily: FONT,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 32,
          }}>
            <GlowOrbs tealOpacity={0.2} amberOpacity={0.14}/>

            <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 12}px) scale(${0.96 + enter * 0.04})` }}>
              <LogoLockup size={72}/>
            </div>

            <FadeIn delay={0.6} dur={0.6}>
              <div style={{ fontSize: 52, fontWeight: 800, letterSpacing: '-0.025em', textAlign: 'center', maxWidth: 1200, lineHeight: 1.1 }}>
                Get AML/CTF compliant in 30 minutes.
              </div>
            </FadeIn>

            <FadeIn delay={1.2} dur={0.5}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{
                  background: BRAND, color: '#fff',
                  padding: '16px 28px', borderRadius: 12,
                  fontSize: 17, fontWeight: 600,
                  display: 'flex', alignItems: 'center', gap: 10,
                  boxShadow: '0 12px 30px -6px rgba(13,148,136,0.6)',
                }}>
                  Start free trial — 14 days, no card
                  <window.L_ArrowRight size={18} strokeWidth={2.5}/>
                </div>
                <div style={{
                  color: '#cbd5e1', fontSize: 15.5, fontWeight: 600,
                  textDecoration: 'underline', textUnderlineOffset: 4,
                }}>
                  Or watch the full tour
                </div>
              </div>
            </FadeIn>

            <FadeIn delay={1.6}>
              <div style={{ fontFamily: MONO, fontSize: 14, color: '#5eead4', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                amlify.au · 1 July 2026 begins
              </div>
            </FadeIn>
          </div>
        );
      }}
    </Sprite>
  );
}


function HeroFilm60() {
  return (
    <>
      <Scene1ColdOpen/>
      <Scene2Pain/>
      <Scene3DashboardReveal/>
      <Scene4Pillars/>
      <Scene5Why/>
      <Scene6CTA/>
    </>
  );
}

window.HeroFilm60 = HeroFilm60;
