// hook-scenes.jsx — 30s hook video, light bg + sage green (matches portfolio)
// 7 scenes: Problem → Stats → Comparison → Manifesto → System glimpse → Outcomes → CTA

// ═══════════════════════════════════════════════════════════════
// Helpers
// ═══════════════════════════════════════════════════════════════
const easeOut = (t) => 1 - Math.pow(1 - t, 3);
const easeOutBack = (t) => {
  const c1 = 1.70158, c3 = c1 + 1;
  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
};
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
const progress = (t, start, dur) => clamp((t - start) / dur, 0, 1);
const lerp = (t, a, b, ease = easeOut) => a + (b - a) * ease(t);
const countUp = (t, target, decimals = 0) => (target * t).toFixed(decimals);

// Palette — matches portfolio
const C = {
  bg: '#fafaf9',
  ink: '#1a1a1a',
  muted: '#555',
  mono: '#888',
  border: '#e5e5e5',
  sage: '#5f8575',
  sageDark: '#3d6352',
  sageLight: '#c8d7cf',
  sageTint: '#eef5f1',
};

// ═══════════════════════════════════════════════════════════════
// SCENE 1 (0-4s): Big "$99" punch + tool breakdown
// ═══════════════════════════════════════════════════════════════
function Scene1({ time }) {
  const appearP = progress(time, 0.4, 0.6);
  const exitP = progress(time, 3.6, 0.4);
  const masterOpacity = (1 - exitP);

  const scale = lerp(appearP, 0.5, 1.0, easeOutBack);

  const subP = progress(time, 1.0, 0.5);
  const footP = progress(time, 1.6, 0.5);
  const breakdownP = progress(time, 2.2, 0.6);

  const tools = [
    { name: 'Claude Code', cost: '$20' },
    { name: 'Apollo.io', cost: '$49' },
    { name: 'Cursor', cost: '$20' },
    { name: 'Resend', cost: '$10' },
  ];

  return (
    <div className="scene" style={{ flexDirection: 'column', opacity: masterOpacity }}>
      <div className="mono" style={{
        fontSize: '20px',
        letterSpacing: '5px',
        color: C.mono,
        marginBottom: '20px',
        textTransform: 'uppercase',
        opacity: footP,
        transform: `translateY(${lerp(footP, -10, 0, easeOut)}px)`,
        fontWeight: 700,
      }}>
        2026 · Q2 · Cost Per Unique Lead
      </div>

      <div className="big-num" style={{
        fontSize: '380px',
        color: C.ink,
        transform: `scale(${scale})`,
        opacity: appearP,
        letterSpacing: '-0.06em',
        fontWeight: 900,
        lineHeight: 0.9,
      }}>
        <span style={{ color: C.sage, fontSize: '0.55em', verticalAlign: 'top', marginRight: '8px', fontWeight: 700 }}>$</span>0.49
      </div>

      <div style={{
        fontSize: '22px',
        color: C.muted,
        marginTop: '24px',
        opacity: subP,
        transform: `translateY(${lerp(subP, 20, 0, easeOut)}px)`,
        fontWeight: 500,
      }}>
        <strong style={{ color: C.ink, fontWeight: 700 }}>Unique 리드 1건</strong> · 월 800명 · 3-touch 시퀀스 · tools + API 포함
      </div>

      {/* Breakdown: 월 $395 total ÷ 800 unique leads */}
      <div style={{
        marginTop: '48px',
        display: 'flex',
        gap: '28px',
        alignItems: 'center',
        opacity: breakdownP,
        transform: `translateY(${lerp(breakdownP, 20, 0, easeOut)}px)`,
        fontFamily: 'SF Mono, Menlo, monospace',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
          <div style={{ fontSize: '11px', letterSpacing: '2px', color: C.mono, textTransform: 'uppercase', fontWeight: 700 }}>
            월 총 운영비
          </div>
          <div style={{ fontSize: '26px', color: C.ink, fontWeight: 800 }}>$395</div>
          <div style={{ fontSize: '10px', color: C.mono, letterSpacing: '0.5px' }}>$338 고정 + $57 사용량</div>
        </div>
        <div style={{ fontSize: '28px', color: C.mono, fontWeight: 300 }}>÷</div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
          <div style={{ fontSize: '11px', letterSpacing: '2px', color: C.mono, textTransform: 'uppercase', fontWeight: 700 }}>
            월 Unique 리드
          </div>
          <div style={{ fontSize: '26px', color: C.ink, fontWeight: 800 }}>800명</div>
          <div style={{ fontSize: '10px', color: C.mono, letterSpacing: '0.5px' }}>이메일 2,400통 · 3-touch</div>
        </div>
        <div style={{ fontSize: '28px', color: C.mono, fontWeight: 300 }}>=</div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
          <div style={{ fontSize: '11px', letterSpacing: '2px', color: C.sage, textTransform: 'uppercase', fontWeight: 700 }}>
            리드당
          </div>
          <div style={{ fontSize: '26px', color: C.sageDark, fontWeight: 800 }}>$0.49</div>
          <div style={{ fontSize: '10px', color: C.sage, letterSpacing: '0.5px' }}>이메일 1통 $0.16</div>
        </div>
      </div>
    </div>
  );
}



// ═══════════════════════════════════════════════════════════════
// SCENE 2 (4-9s): Week 1 FUNNEL — 계단식 사다리꼴 funnel + 우측 annotations
// ═══════════════════════════════════════════════════════════════
function Scene2({ time }) {
  const local = time - 4.0;
  const exitP = progress(time, 8.5, 0.5);
  const masterOpacity = (1 - exitP);

  const headerP = progress(local, 0, 0.3);

  // Funnel stages — 6,200 ICP candidates → 287 sent → 109 open → 12 reply → 8 meetings
  const stages = [
    {
      label: '전체 TAM',
      val: 6200,
      delay: 0.2,
      pct: 1.0,
      annotation: 'TAM base',
      annotationSub: 'Apollo + Claude 웹 리서치 교차 조회',
      drop: null,
    },
    {
      label: 'ICP 매칭',
      val: 287,
      delay: 0.6,
      pct: 287 / 6200,
      annotation: '↓ 4.6%',
      annotationSub: '지역·규모·시그널 6축 자동 채점 (A2 Scoring)',
      drop: '−5,913 ICP 미달',
    },
    {
      label: '발송',
      val: 287,
      delay: 1.0,
      pct: 287 / 6200,
      annotation: '100% 발송',
      annotationSub: 'Agent C1 Send · 4개 도메인 분산',
      drop: null,
    },
    {
      label: 'Open',
      val: 109,
      delay: 1.4,
      pct: 109 / 6200,
      annotation: '↓ 38% open',
      annotationSub: '업계 평균 20–25%',
      drop: '−178 unopened',
    },
    {
      label: 'Reply',
      val: 12,
      delay: 1.8,
      pct: 12 / 6200,
      annotation: '↓ 11% reply',
      annotationSub: '업계 평균 1–3% · C3 Classifier',
      drop: '−97 미반응',
    },
    {
      label: 'Meeting',
      val: 8,
      delay: 2.2,
      pct: 8 / 6200,
      annotation: '↓ 67% positive',
      annotationSub: 'D3 Alert → Calendar 자동 예약',
      drop: '−4 negative/OOO',
      hero: true,
    },
  ];

  const funnelW = 820;
  const stageH = 82;
  const funnelH = stageH * stages.length;
  const minW = 60;
  const funnelCx = funnelW / 2;

  // V-funnel: exaggerate lower stages by clamping values with sqrt-based easing
  // giving the classic cold-email funnel silhouette (wide top, pointed bottom)
  const n = stages.length;
  const widths = stages.map((s, i) => {
    const t = i / (n - 1);
    // cubic ease-in: stays wide longer, then quickly narrows
    const eased = 1 - Math.pow(t, 0.65);
    return minW + (funnelW - minW) * eased;
  });

  return (
    <div className="scene" style={{ flexDirection: 'column', opacity: masterOpacity, alignItems: 'center' }}>
      <div className="mono" style={{
        fontSize: '20px',
        letterSpacing: '5px',
        color: C.mono,
        marginBottom: '14px',
        textTransform: 'uppercase',
        opacity: headerP,
        transform: `translateY(${lerp(headerP, -10, 0, easeOut)}px)`,
        fontWeight: 700,
      }}>
        Week 1 · 2026.04.20—04.26 · Real Funnel
      </div>

      <div style={{
        fontSize: '38px',
        color: C.ink,
        fontWeight: 800,
        letterSpacing: '-0.02em',
        marginBottom: '28px',
        opacity: headerP,
        transform: `translateY(${lerp(headerP, 10, 0, easeOut)}px)`,
      }}>
        6,200 후보가 <span style={{ color: C.sage }}>8건의 미팅</span>으로 좁혀지는 과정
      </div>

      <div style={{ display: 'flex', gap: '48px', alignItems: 'flex-start' }}>
        {/* LEFT: SVG funnel */}
        <svg width={funnelW + 360} height={funnelH + 40} style={{ overflow: 'visible' }}>
          {stages.map((s, i) => {
            const p = progress(local, s.delay, 0.5);
            const countP = progress(local, s.delay, 0.9);
            const wTop = i === 0 ? widths[i] : widths[i - 1];
            const wBot = widths[i];

            const y = i * stageH + 20;
            const cx = funnelW / 2 + 180;
            const topLeft = cx - wTop / 2;
            const topRight = cx + wTop / 2;
            const botLeft = cx - wBot / 2;
            const botRight = cx + wBot / 2;

            const points = `${topLeft},${y} ${topRight},${y} ${botRight},${y + stageH} ${botLeft},${y + stageH}`;

            const rawVal = Number(countUp(countP, s.val, 0));
            const displayVal = rawVal.toLocaleString();

            const fill = s.hero
              ? C.sage
              : i === 0
                ? C.sageTint
                : `oklch(${0.96 - i * 0.015} 0.012 160)`;

            return (
              <g key={i} style={{ opacity: p }}>
                <polygon
                  points={points}
                  fill={fill}
                  stroke="none"
                />
                {/* Thin divider between stages (except first) */}
                {i > 0 && (
                  <line
                    x1={topLeft}
                    y1={y}
                    x2={topRight}
                    y2={y}
                    stroke="#fff"
                    strokeWidth={2}
                  />
                )}
                {/* Label LEFT (outside funnel) — always at funnel's left edge */}
                <text
                  x={cx - funnelW / 2 - 16}
                  y={y + stageH / 2 + 5}
                  fill={s.hero ? C.sageDark : C.ink}
                  fontSize={14}
                  fontWeight={700}
                  textAnchor="end"
                  fontFamily="SF Mono, Menlo, monospace"
                  style={{ letterSpacing: '1.5px', textTransform: 'uppercase' }}
                >
                  {s.label}
                </text>
                {/* Value RIGHT (outside funnel) — always at funnel's right edge */}
                <text
                  x={cx + funnelW / 2 + 16}
                  y={y + stageH / 2 + 10}
                  fill={s.hero ? C.sageDark : C.ink}
                  fontSize={s.hero ? 34 : 28}
                  fontWeight={900}
                  textAnchor="start"
                  style={{ letterSpacing: '-0.02em' }}
                >
                  {displayVal}
                </text>
              </g>
            );
          })}
        </svg>

        {/* RIGHT: Annotations aligned to funnel stages */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          height: `${funnelH + 40}px`,
          paddingTop: '20px',
        }}>
          {stages.map((s, i) => {
            const p = progress(local, s.delay + 0.15, 0.5);
            return (
              <div
                key={i}
                style={{
                  display: 'flex',
                  alignItems: 'flex-start',
                  gap: '14px',
                  opacity: p,
                  transform: `translateX(${lerp(p, -10, 0, easeOut)}px)`,
                  height: `${stageH}px`,
                }}
              >
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '8px', flexShrink: 0 }}>
                  <div style={{
                    width: '10px',
                    height: '10px',
                    borderRadius: '50%',
                    background: s.hero ? C.sage : '#fff',
                    border: `2px solid ${s.hero ? C.sageDark : C.mono}`,
                  }} />
                  {i < stages.length - 1 && (
                    <div style={{
                      width: '1px',
                      flex: 1,
                      background: C.border,
                      marginTop: '4px',
                    }} />
                  )}
                </div>
                <div style={{ paddingTop: '3px' }}>
                  <div style={{
                    fontSize: '17px',
                    fontWeight: 800,
                    color: s.hero ? C.sageDark : C.ink,
                    letterSpacing: '-0.01em',
                    marginBottom: '3px',
                  }}>
                    {s.annotation}
                  </div>
                  <div style={{
                    fontSize: '13px',
                    color: C.muted,
                    fontWeight: 500,
                    lineHeight: 1.4,
                    maxWidth: '280px',
                  }}>
                    {s.annotationSub}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{
        marginTop: '20px',
        fontSize: '16px',
        color: C.muted,
        opacity: progress(local, 3.2, 0.5),
        fontWeight: 500,
      }}>
        업계 평균 cold email 미팅 전환율 <strong style={{ color: C.ink }}>0.5–1%</strong> · Shin's system <strong style={{ color: C.sage }}>2.8%</strong> <span style={{ color: C.sage, fontWeight: 800 }}>(3–5×)</span>
      </div>
    </div>
  );
}



// ═══════════════════════════════════════════════════════════════
// SCENE 3 (9-14s): Industry comparison — $2000 vs $30 + breakdown
// ═══════════════════════════════════════════════════════════════
function Scene3({ time }) {
  const local = time - 9.0;
  const exitP = progress(time, 13.5, 0.5);
  const masterOpacity = (1 - exitP);

  const headerP = progress(local, 0, 0.3);
  const bar1P = progress(local, 0.3, 1.0);
  const bar2P = progress(local, 1.4, 1.0);
  const breakdownP = progress(local, 2.4, 0.5);
  const multP = progress(local, 3.0, 0.5);

  const industryMax = 2000;
  const shinCost = 12;
  const maxWidth = 1200;

  const industryBarW = maxWidth * bar1P;
  const shinBarW = (maxWidth * (shinCost / industryMax)) * bar2P;

  const industryVal = Math.round(industryMax * bar1P);
  const shinVal = Math.round(shinCost * bar2P);

  return (
    <div className="scene" style={{ flexDirection: 'column', opacity: masterOpacity, alignItems: 'center' }}>
      <div className="mono" style={{
        fontSize: '20px',
        letterSpacing: '5px',
        color: C.mono,
        marginBottom: '16px',
        textTransform: 'uppercase',
        opacity: headerP,
        fontWeight: 700,
      }}>
        Cost per meeting · 2026 Industry Data
      </div>

      <div style={{
        fontSize: '42px',
        color: C.ink,
        fontWeight: 800,
        letterSpacing: '-0.02em',
        marginBottom: '48px',
        opacity: headerP,
        transform: `translateY(${lerp(headerP, 10, 0, easeOut)}px)`,
      }}>
        미팅 <span style={{ color: C.sage }}>1건</span> 당 드는 돈을 비교하면
      </div>

      <div style={{ width: `${maxWidth}px`, display: 'flex', flexDirection: 'column', gap: '28px' }}>
        {/* Industry bar */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', alignItems: 'baseline' }}>
            <span className="mono" style={{ letterSpacing: '3px', textTransform: 'uppercase', fontSize: '16px', color: C.muted, fontWeight: 700 }}>
              Industry Avg · SDR 1명 + Apollo + Outreach
            </span>
            <span className="big-num" style={{ fontSize: '28px', color: C.ink, fontWeight: 800 }}>
              ${industryVal.toLocaleString()}
            </span>
          </div>
          <div style={{ height: '52px', width: `${maxWidth}px`, background: '#f0ede8', borderRadius: '4px', overflow: 'hidden', position: 'relative', border: `1px solid ${C.border}` }}>
            <div style={{
              height: '100%',
              width: `${industryBarW}px`,
              background: 'repeating-linear-gradient(90deg, rgba(26,26,26,0.18) 0 8px, rgba(26,26,26,0.08) 8px 16px)',
            }} />
          </div>
          <div style={{
            fontSize: '13px',
            color: C.mono,
            marginTop: '8px',
            fontFamily: 'SF Mono, Menlo, monospace',
            opacity: bar1P,
          }}>
            인건비 $1,600 + 도구 $300 + 리스트 $100 = <strong style={{ color: C.ink }}>$2,000</strong> per meeting
          </div>
        </div>

        {/* Shin bar */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', alignItems: 'baseline' }}>
            <span className="mono" style={{ letterSpacing: '3px', textTransform: 'uppercase', fontSize: '16px', color: C.sageDark, fontWeight: 800 }}>
              Shin's System · 18 Agents + $395/mo (tools + API)
            </span>
            <span className="big-num" style={{ fontSize: '36px', color: C.sage, fontWeight: 900 }}>
              ${shinVal}
            </span>
          </div>
          <div style={{ height: '52px', width: `${maxWidth}px`, background: C.sageTint, borderRadius: '4px', overflow: 'hidden', border: `1px solid ${C.sageLight}` }}>
            <div style={{
              height: '100%',
              width: `${shinBarW}px`,
              background: C.sage,
              boxShadow: '0 0 24px rgba(95, 133, 117, 0.4)',
            }} />
          </div>
          <div style={{
            fontSize: '13px',
            color: C.sageDark,
            marginTop: '8px',
            fontFamily: 'SF Mono, Menlo, monospace',
            opacity: bar2P,
            fontWeight: 600,
          }}>
            $395/월 ÷ 32 미팅/월 = <strong>$12 per meeting</strong> · 인건비 $0
          </div>
        </div>
      </div>

      {/* Multiplier pop */}
      <div style={{
        marginTop: '40px',
        opacity: multP,
        transform: `scale(${lerp(multP, 0.6, 1.0, easeOutBack)})`,
        textAlign: 'center',
        display: 'flex',
        alignItems: 'center',
        gap: '28px',
      }}>
        <div className="big-num" style={{
          fontSize: '96px',
          color: C.ink,
          letterSpacing: '-0.04em',
          fontWeight: 900,
          whiteSpace: 'nowrap',
          lineHeight: 1,
        }}>
          <span style={{ color: C.sage }}>166</span>
          <span style={{ fontSize: '0.6em', color: C.sage, marginLeft: '10px', fontWeight: 700 }}>×</span>
        </div>
        <div style={{ textAlign: 'left' }}>
          <div className="mono" style={{
            fontSize: '15px',
            letterSpacing: '3px',
            color: C.sageDark,
            textTransform: 'uppercase',
            fontWeight: 800,
          }}>
            Cost Efficiency
          </div>
          <div style={{
            fontSize: '15px',
            color: C.muted,
            marginTop: '4px',
            fontWeight: 500,
          }}>
            더 적게 쓰고, 더 많이 미팅
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCENE 4 (14-18s): Manifesto — with richer sub-details
// ═══════════════════════════════════════════════════════════════
function Scene4({ time }) {
  const local = time - 14.0;
  const exitP = progress(time, 17.5, 0.5);
  const masterOpacity = (1 - exitP);

  const lines = [
    { text: '혼자.',          sub: '1 Operator',      detail: 'No eng · no designer · no ops',  delay: 0.0 },
    { text: '2주.',            sub: '14 Days Build',   detail: 'Prototype → Production',         delay: 0.4 },
    { text: '18개 에이전트.',  sub: '18 AI Agents',    detail: '5 teams · parallel execution',   delay: 0.8, accent: true },
    { text: 'Claude Code.',   sub: 'Anthropic',       detail: 'Everything built in chat',       delay: 1.2 },
  ];

  const headerP = progress(local, 0, 0.3);

  return (
    <div className="scene" style={{ flexDirection: 'column', opacity: masterOpacity, gap: '18px', alignItems: 'flex-start', paddingLeft: '180px', paddingRight: '180px', justifyContent: 'center' }}>

      <div className="mono" style={{
        fontSize: '18px',
        letterSpacing: '5px',
        color: C.mono,
        textTransform: 'uppercase',
        marginBottom: '24px',
        opacity: headerP,
        fontWeight: 800,
      }}>
        How it was built
      </div>

      {lines.map((l, i) => {
        const p = progress(local, l.delay, 0.4);
        const ty = lerp(p, 30, 0, easeOut);

        return (
          <div key={i} style={{
            opacity: p,
            transform: `translateY(${ty}px)`,
            display: 'flex',
            alignItems: 'baseline',
            gap: '36px',
          }}>
            <div className="big-num" style={{
              fontSize: '100px',
              color: l.accent ? C.sage : C.ink,
              fontWeight: 900,
              letterSpacing: '-0.04em',
              lineHeight: 1,
              width: '900px',
              flexShrink: 0,
              whiteSpace: 'nowrap',
            }}>
              {l.text}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
              <div className="mono" style={{
                fontSize: '15px',
                letterSpacing: '3px',
                color: l.accent ? C.sageDark : C.ink,
                textTransform: 'uppercase',
                fontWeight: 800,
              }}>
                {l.sub}
              </div>
              <div style={{
                fontSize: '14px',
                color: C.muted,
                fontWeight: 500,
                letterSpacing: '0.2px',
              }}>
                {l.detail}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCENE 5 (18-23s): System glimpse — 5 teams with agent examples
// ═══════════════════════════════════════════════════════════════
function Scene5({ time }) {
  const local = time - 18.0;
  const exitP = progress(time, 22.5, 0.5);
  const masterOpacity = (1 - exitP);

  const headerP = progress(local, 0, 0.3);

  const teams = [
    { name: 'DATA',     num: '03', desc: 'ICP · 수집 · 스코어링',   agents: ['A1 ICP Builder', 'A2 Scraper', 'A3 Enrich'],      delay: 0.3 },
    { name: 'COPY',     num: '04', desc: '개인화 · 번역 · 품질',    agents: ['B1 Personalize', 'B2 Translate', 'B3 QA', '+1'], delay: 0.55 },
    { name: 'DELIVERY', num: '04', desc: '발송 · 답장 분류',        agents: ['C1 Send', 'C2 Warm-up', 'C3 Classify', '+1'],    delay: 0.8 },
    { name: 'ENGAGE',   num: '04', desc: '행동 점수 · Hot Lead',     agents: ['D1 Score', 'D2 Tier', 'D3 Alert', '+1'],         delay: 1.05 },
    { name: 'OPS',      num: '03', desc: 'Nurture · 리포팅',         agents: ['E1 Nurture', 'E2 Report', 'E3 Monitor'],         delay: 1.3 },
  ];

  return (
    <div className="scene" style={{ flexDirection: 'column', opacity: masterOpacity, alignItems: 'center' }}>
      <div className="mono" style={{
        fontSize: '20px',
        letterSpacing: '5px',
        color: C.mono,
        marginBottom: '20px',
        textTransform: 'uppercase',
        opacity: headerP,
        fontWeight: 700,
      }}>
        5 Teams · 18 Agents · One System
      </div>

      <div style={{
        fontSize: '52px',
        color: C.ink,
        fontWeight: 800,
        letterSpacing: '-0.02em',
        marginBottom: '56px',
        opacity: headerP,
        transform: `translateY(${lerp(headerP, 20, 0, easeOut)}px)`,
        textAlign: 'center',
        whiteSpace: 'nowrap',
      }}>
        내부는 <span style={{ color: C.sage }}>이렇게</span> 돌아갑니다
      </div>

      <div style={{ display: 'flex', gap: '22px', flexWrap: 'nowrap' }}>
        {teams.map((t, i) => {
          const p = progress(local, t.delay, 0.5);
          return (
            <div key={i} style={{
              width: '282px',
              padding: '28px 22px',
              background: '#fff',
              border: `1px solid ${C.border}`,
              borderTop: `3px solid ${C.sage}`,
              borderRadius: '4px',
              opacity: p,
              transform: `translateY(${lerp(p, 40, 0, easeOut)}px) scale(${lerp(p, 0.9, 1.0, easeOut)})`,
              display: 'flex',
              flexDirection: 'column',
              minHeight: '340px',
            }}>
              <div className="mono" style={{
                fontSize: '11px',
                letterSpacing: '2px',
                color: C.sage,
                fontWeight: 800,
                marginBottom: '12px',
              }}>
                TEAM 0{i+1}
              </div>
              <div style={{
                fontSize: '24px',
                color: C.ink,
                fontWeight: 800,
                letterSpacing: '-0.5px',
                marginBottom: '8px',
              }}>
                {t.name}
              </div>
              <div style={{
                fontSize: '13px',
                color: C.muted,
                lineHeight: 1.5,
                marginBottom: '18px',
                fontWeight: 500,
              }}>
                {t.desc}
              </div>

              {/* Agent list — flex grow to push footer to bottom */}
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '5px',
                paddingTop: '14px',
                borderTop: `1px dashed ${C.border}`,
                marginBottom: '14px',
                flex: 1,
              }}>
                {t.agents.map((a, ai) => (
                  <div key={ai} style={{
                    fontSize: '11.5px',
                    color: a.startsWith('+') ? C.mono : C.ink,
                    fontFamily: 'SF Mono, Menlo, monospace',
                    fontWeight: a.startsWith('+') ? 500 : 600,
                    letterSpacing: '0.2px',
                  }}>
                    {a}
                  </div>
                ))}
              </div>

              <div style={{
                fontFamily: 'SF Mono, Menlo, monospace',
                fontSize: '11px',
                color: C.sage,
                fontWeight: 800,
                paddingTop: '10px',
                borderTop: `1px solid ${C.border}`,
                letterSpacing: '2px',
              }}>
                {t.num} AGENTS
              </div>
            </div>
          );
        })}
      </div>

      {/* Footnote */}
      <div style={{
        marginTop: '40px',
        fontSize: '16px',
        color: C.muted,
        opacity: progress(local, 2.0, 0.4),
        fontWeight: 500,
      }}>
        모든 에이전트는 <strong style={{ color: C.ink }}>Claude Code로 작성</strong>되고, <strong style={{ color: C.ink }}>24/7 병렬 실행</strong>됩니다.
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCENE 6 (23-27s): Outcomes — 4 rows incl. speed + response
// ═══════════════════════════════════════════════════════════════
function Scene6({ time }) {
  const local = time - 23.0;
  const exitP = progress(time, 26.5, 0.5);
  const masterOpacity = (1 - exitP);

  const headerP = progress(local, 0, 0.3);

  const outcomes = [
    {
      delay: 0.3,
      before: '2주',
      after: '4시간',
      beforeLabel: 'Manual research',
      afterLabel: 'Automated pipeline',
      metric: 'ICP · 리드 수집',
    },
    {
      delay: 0.55,
      before: '$2,000',
      after: '$12',
      beforeLabel: 'Industry avg',
      afterLabel: 'Shin\'s system',
      metric: 'Cost per meeting',
    },
    {
      delay: 0.8,
      before: '4–6시간',
      after: '< 5분',
      beforeLabel: 'Human SDR reply',
      afterLabel: 'Agent C3 Classify',
      metric: 'Reply → Hot Lead 분류',
    },
    {
      delay: 1.05,
      before: '1명',
      after: '18 Agents',
      beforeLabel: 'SDR headcount',
      afterLabel: 'Parallel execution',
      metric: 'Execution bandwidth',
    },
  ];

  return (
    <div className="scene" style={{ flexDirection: 'column', opacity: masterOpacity, alignItems: 'center' }}>
      <div className="mono" style={{
        fontSize: '20px',
        letterSpacing: '5px',
        color: C.mono,
        marginBottom: '16px',
        textTransform: 'uppercase',
        opacity: headerP,
        fontWeight: 700,
      }}>
        Before / After · Real numbers
      </div>

      <div style={{
        fontSize: '44px',
        color: C.ink,
        fontWeight: 800,
        letterSpacing: '-0.02em',
        marginBottom: '40px',
        opacity: headerP,
        transform: `translateY(${lerp(headerP, 10, 0, easeOut)}px)`,
      }}>
        결과는 <span style={{ color: C.sage }}>숫자로</span>.
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', width: '1400px' }}>
        {outcomes.map((o, i) => {
          const p = progress(local, o.delay, 0.5);
          return (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '340px 1fr 1fr',
              gap: '40px',
              alignItems: 'center',
              padding: '22px 32px',
              background: '#fff',
              border: `1px solid ${C.border}`,
              borderRadius: '4px',
              opacity: p,
              transform: `translateX(${lerp(p, -30, 0, easeOut)}px)`,
            }}>
              <div className="mono" style={{
                fontSize: '13px',
                letterSpacing: '2px',
                color: C.ink,
                fontWeight: 800,
                textTransform: 'uppercase',
              }}>
                {o.metric}
              </div>
              <div>
                <div className="mono" style={{ fontSize: '10.5px', letterSpacing: '2px', color: C.mono, fontWeight: 700, marginBottom: '4px', textTransform: 'uppercase' }}>
                  {o.beforeLabel}
                </div>
                <div className="big-num" style={{
                  fontSize: '46px',
                  color: C.muted,
                  fontWeight: 800,
                  textDecoration: 'line-through',
                  textDecorationColor: 'rgba(85,85,85,0.4)',
                  letterSpacing: '-0.02em',
                }}>
                  {o.before}
                </div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: '10.5px', letterSpacing: '2px', color: C.sage, fontWeight: 800, marginBottom: '4px', textTransform: 'uppercase' }}>
                  {o.afterLabel} <span style={{ color: C.ink }}>→</span>
                </div>
                <div className="big-num" style={{
                  fontSize: '46px',
                  color: C.sage,
                  fontWeight: 900,
                  letterSpacing: '-0.02em',
                }}>
                  {o.after}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCENE 7 (27-30s): CTA
// ═══════════════════════════════════════════════════════════════
function Scene7({ time }) {
  const local = time - 27.0;

  const p1 = progress(local, 0.0, 0.4);
  const p2 = progress(local, 0.5, 0.5);
  const p3 = progress(local, 1.1, 0.5);
  const p4 = progress(local, 1.6, 0.4);
  const p5 = progress(local, 2.0, 0.4);

  return (
    <div className="scene" style={{ flexDirection: 'column', gap: '32px' }}>
      <div className="mono" style={{
        fontSize: '22px',
        letterSpacing: '6px',
        color: C.mono,
        textTransform: 'uppercase',
        opacity: p1,
        transform: `translateY(${lerp(p1, -10, 0, easeOut)}px)`,
        fontWeight: 800,
      }}>
        B2B GTM Automation System
      </div>

      <div className="big-num" style={{
        fontSize: '96px',
        color: C.ink,
        letterSpacing: '-0.03em',
        lineHeight: 1.05,
        textAlign: 'center',
        opacity: p2,
        transform: `translateY(${lerp(p2, 20, 0, easeOut)}px)`,
        maxWidth: '1400px',
        fontWeight: 900,
      }}>
        전체 시스템은<br/><span className="sage">포트폴리오</span>에 있습니다
      </div>

      {/* What's inside hints */}
      <div style={{
        display: 'flex',
        gap: '48px',
        opacity: progress(local, 0.9, 0.5),
        transform: `translateY(${lerp(progress(local, 0.9, 0.5), 20, 0, easeOut)}px)`,
        marginTop: '-8px',
      }}>
        {[
          '18 Agents 전체 목록',
          '실제 Week 1 데이터',
          'ROI 계산기',
          '시스템 아키텍처',
        ].map((t, i) => (
          <div key={i} className="mono" style={{
            fontSize: '13px',
            letterSpacing: '2px',
            color: C.mono,
            textTransform: 'uppercase',
            fontWeight: 700,
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
          }}>
            <span style={{ color: C.sage, fontWeight: 900 }}>◆</span> {t}
          </div>
        ))}
      </div>

      <div className="mono" style={{
        fontSize: '15px',
        letterSpacing: '3px',
        color: C.mono,
        marginTop: '40px',
        opacity: p5,
        fontWeight: 700,
        textTransform: 'uppercase',
      }}>
        SHIN · B2B GTM Operator · Seoul 2026
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// Main Scene Router — 30s timeline
// ═══════════════════════════════════════════════════════════════
function HookVideo({ time }) {
  if (time < 4.0)      return <Scene1 time={time} />;
  if (time < 9.0)      return <Scene2 time={time} />;
  if (time < 14.0)     return <Scene3 time={time} />;
  if (time < 18.0)     return <Scene4 time={time} />;
  if (time < 23.0)     return <Scene5 time={time} />;
  if (time < 27.0)     return <Scene6 time={time} />;
  return <Scene7 time={time} />;
}

// Expose globally for hook-main.jsx
window.HookVideo = HookVideo;