// Scenes 6-10 for Yohann Escher hero motion.

// ── SCENE 6: Automation flow (17 - 20.5s) ─────────────────────────────────
function Scene6() {
  const { localTime } = useSprite();

  const steps = [
    { label: 'Novo Lead',    sub: 'site → form',     icon: Icons.user,  x: 200,  y: 540 },
    { label: 'Análise IA',   sub: 'qualifica intent', icon: Icons.spark, x: 500,  y: 540 },
    { label: 'CRM',          sub: 'organiza pipeline', icon: Icons.flow, x: 800,  y: 540 },
    { label: 'Mensagem',     sub: 'gerada e enviada',  icon: Icons.msg,   x: 1100, y: 540 },
    { label: 'Follow-up',    sub: 'agendado',          icon: Icons.cal,   x: 1400, y: 540 },
    { label: 'Métrica',      sub: 'mede e ajusta',     icon: Icons.chart, x: 1700, y: 540 },
  ];

  // Pulse traveling along the chain
  const pulseT = (localTime % 3.0) / 3.0; // 0..1 across the whole chain
  const activeIdx = Math.floor(pulseT * steps.length);
  const stepProgress = (pulseT * steps.length) - activeIdx;

  return (
    <React.Fragment>
      {/* connectors */}
      {steps.slice(0, -1).map((s, i) => {
        const next = steps[i + 1];
        const isActive = i === activeIdx;
        return (
          <ConnectLine key={i}
            x1={s.x + 80} y1={s.y} x2={next.x - 80} y2={next.y}
            start={0.4 + i * 0.08} drawDur={0.4}
            color={i < activeIdx ? 'rgba(255,107,26,0.55)' : YE.borderStrong}
            width={i <= activeIdx ? 1.8 : 1}
          />
        );
      })}

      {/* Pulse dot */}
      {(() => {
        if (localTime < 1.0) return null;
        const cur = steps[activeIdx];
        const nxt = steps[Math.min(steps.length - 1, activeIdx + 1)];
        const px = cur.x + (nxt.x - cur.x) * stepProgress;
        const py = cur.y;
        return (
          <div style={{
            position: 'absolute', left: px, top: py,
            transform: 'translate(-50%, -50%)',
            width: 12, height: 12, borderRadius: '50%',
            background: YE.orange,
            boxShadow: `0 0 20px 4px ${YE.orangeGlow}`,
          }}/>
        );
      })()}

      {/* Step cards */}
      {steps.map((s, i) => {
        const delay = 0.1 + i * 0.1;
        const localT = Math.max(0, localTime - delay);
        const enter = Easing.easeOutCubic(clamp(localT / 0.5, 0, 1));
        const isActive = i === activeIdx && localTime > 1.0;
        const wasReached = i <= activeIdx && localTime > 1.0;

        return (
          <div key={i} style={{
            position: 'absolute', left: s.x, top: s.y,
            transform: `translate(-50%, -50%) scale(${0.85 + 0.15 * enter}) ${isActive ? 'translateY(-6px)' : ''}`,
            opacity: enter,
            width: 160,
            transition: 'transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)',
          }}>
            <div style={{
              padding: '14px 12px',
              background: isActive ? 'linear-gradient(180deg, #2A201A, #1B1816)' : YE.card,
              border: `1px solid ${isActive || wasReached ? 'rgba(255,107,26,0.5)' : YE.border}`,
              borderRadius: 16,
              boxShadow: isActive
                ? `0 16px 40px rgba(255,107,26,0.25), 0 0 0 1px rgba(255,107,26,0.2)`
                : '0 8px 24px rgba(0,0,0,0.35)',
              textAlign: 'center',
              position: 'relative',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 9,
                background: isActive ? YE.orange : 'rgba(255,107,26,0.12)',
                color: isActive ? '#1a0d05' : YE.orange,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 8px',
              }}>{s.icon}</div>
              <div style={{ fontFamily: SANS, fontSize: 13, fontWeight: 600, color: YE.cream, marginBottom: 2 }}>
                {s.label}
              </div>
              <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.1em', color: YE.textMuted, textTransform: 'uppercase' }}>
                {s.sub}
              </div>
              {wasReached && !isActive && (
                <div style={{
                  position: 'absolute', top: -8, right: -8,
                  width: 22, height: 22, borderRadius: '50%',
                  background: YE.orange, color: '#1a0d05',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: `0 0 12px ${YE.orangeGlow}`,
                }}>{Icons.check}</div>
              )}
            </div>
          </div>
        );
      })}

      {/* Stats card */}
      <Sprite start={2.0} end={3.5}>
        <StatChip x={960} y={760} label="tempo manual" value="-35%"/>
      </Sprite>

      <Eyebrow y={140}>Cena 06 — Automação</Eyebrow>
      <SceneCaption y={920}>
        Processos deixam de depender do <Em>improviso</Em>.
      </SceneCaption>
    </React.Fragment>
  );
}

function StatChip({ x, y, label, value }) {
  const { localTime, duration } = useSprite();
  const enter = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%, -50%) scale(${enter})`,
      opacity: enter,
      padding: '12px 22px',
      background: 'rgba(25,28,30,0.92)',
      border: `1px solid rgba(255,107,26,0.35)`,
      borderRadius: 999,
      boxShadow: `0 12px 40px rgba(255,107,26,0.18)`,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.18em', color: YE.textMuted, textTransform: 'uppercase' }}>{label}</span>
      <span style={{ fontFamily: SANS, fontSize: 22, fontWeight: 700, color: YE.orange, letterSpacing: '-0.02em' }}>{value}</span>
    </div>
  );
}

// ── SCENE 7: Marketing as system (20.5 - 24s) ─────────────────────────────
function Scene7() {
  const { localTime } = useSprite();

  return (
    <React.Fragment>
      {/* Landing page mock - left */}
      <Mock_LandingPage x={250} y={500} delay={0.1}/>

      {/* Funnel center */}
      <Mock_Funnel x={750} y={500} delay={0.4}/>

      {/* CRM right */}
      <Mock_CRM x={1300} y={500} delay={0.7}/>

      {/* connecting flow */}
      <CurveConnect x1={420} y1={500} x2={650} y2={500} start={1.2} drawDur={0.5}
        color="rgba(255,107,26,0.45)" pulse pulseDelay={1.6} pulseDur={1.8}/>
      <CurveConnect x1={870} y1={500} x2={1140} y2={500} start={1.4} drawDur={0.5}
        color="rgba(255,107,26,0.45)" pulse pulseDelay={1.9} pulseDur={1.8}/>

      <Eyebrow y={140}>Cena 07 — Marketing como sistema</Eyebrow>
      <SceneCaption y={870}>
        Marketing inteligente não é só <Em>conteúdo</Em>.
      </SceneCaption>
      <div style={{
        position: 'absolute', left: '50%', top: 940,
        transform: 'translateX(-50%)',
        fontFamily: SANS, fontSize: 18, color: YE.textMuted,
        opacity: clamp((localTime - 1.5) / 0.6, 0, 1),
      }}>
        É sistema, dados e automação trabalhando juntos.
      </div>
    </React.Fragment>
  );
}

function Mock_LandingPage({ x, y, delay = 0 }) {
  const { localTime } = useSprite();
  const localT = Math.max(0, localTime - delay);
  const enter = Easing.easeOutCubic(clamp(localT / 0.5, 0, 1));

  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%, -50%) scale(${0.88 + 0.12 * enter})`,
      opacity: enter,
      width: 340, height: 380,
      background: YE.card,
      border: `1px solid ${YE.border}`,
      borderRadius: 22,
      padding: 18,
      boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
    }}>
      <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.2em', color: YE.textMuted, textTransform: 'uppercase', marginBottom: 14 }}>
        ● ● ●  &nbsp; landing.yohann.com
      </div>
      <div style={{ fontFamily: SANS, fontSize: 18, fontWeight: 600, color: YE.cream, lineHeight: 1.2, marginBottom: 6, letterSpacing: '-0.01em' }}>
        Sistemas que <span style={{ fontFamily: SERIF, fontStyle: 'italic', color: YE.orange }}>convertem</span>.
      </div>
      <div style={{ fontFamily: SANS, fontSize: 11, color: YE.textMuted, marginBottom: 14, lineHeight: 1.5 }}>
        Estratégia, automação e IA conectadas em uma mesma arquitetura.
      </div>
      <div style={{
        height: 90, borderRadius: 12,
        background: 'linear-gradient(135deg, #2a201a, #1a1715)',
        border: `1px solid ${YE.border}`,
        marginBottom: 12,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.2em', color: YE.textMuted, textTransform: 'uppercase' }}>
          hero · motion · loop
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
        <div style={{ flex: 1, height: 36, borderRadius: 999, background: YE.orange, color: '#1a0d05',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: SANS, fontSize: 12, fontWeight: 600 }}>
          Agendar conversa
        </div>
        <div style={{ width: 80, height: 36, borderRadius: 999,
          border: `1px solid ${YE.borderStrong}`, color: YE.cream,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: SANS, fontSize: 11, fontWeight: 500 }}>
          Ver mais
        </div>
      </div>
      <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.16em', color: YE.orange, textTransform: 'uppercase' }}>
        ↑ {Math.round(34 + Math.sin(localTime * 2) * 2)}% conversão
      </div>
    </div>
  );
}

function Mock_Funnel({ x, y, delay = 0 }) {
  const { localTime } = useSprite();
  const localT = Math.max(0, localTime - delay);
  const enter = Easing.easeOutCubic(clamp(localT / 0.5, 0, 1));

  const stages = [
    { label: 'Visitas',  count: 4280, w: 240, delay: 0.2 },
    { label: 'Leads',    count: 612,  w: 200, delay: 0.5 },
    { label: 'Qualificados', count: 287, w: 160, delay: 0.8 },
    { label: 'Propostas', count: 96, w: 120, delay: 1.1 },
    { label: 'Fechados',  count: 38,  w: 80,  delay: 1.4 },
  ];

  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%, -50%) scale(${0.88 + 0.12 * enter})`,
      opacity: enter,
      width: 280, height: 380,
      background: 'linear-gradient(180deg, #202325, #181B1D)',
      border: `1px solid ${YE.borderStrong}`,
      borderRadius: 22,
      padding: 18,
      boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
    }}>
      <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.22em', color: YE.orange, textTransform: 'uppercase', marginBottom: 4,
        display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: YE.orange,
          boxShadow: `0 0 8px ${YE.orange}` }}/>
        Funil
      </div>
      <div style={{ fontFamily: SANS, fontSize: 16, fontWeight: 600, color: YE.cream, marginBottom: 16, letterSpacing: '-0.01em' }}>
        Conversão por etapa
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
        {stages.map((s, i) => {
          const sT = Math.max(0, localTime - delay - s.delay);
          const sEnter = Easing.easeOutCubic(clamp(sT / 0.5, 0, 1));
          const w = s.w * sEnter;
          return (
            <div key={i} style={{
              width: w, height: 38,
              background: i === stages.length - 1
                ? 'linear-gradient(90deg, #FF6B1A, #E9580C)'
                : `rgba(255,107,26,${0.18 + i * 0.12})`,
              border: `1px solid rgba(255,107,26,${0.3 + i * 0.1})`,
              borderRadius: 8,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '0 10px',
              opacity: sEnter,
            }}>
              <span style={{ fontFamily: SANS, fontSize: 11, fontWeight: 500, color: i === stages.length - 1 ? '#1a0d05' : YE.cream }}>
                {s.label}
              </span>
              <span style={{ fontFamily: MONO, fontSize: 10, color: i === stages.length - 1 ? '#1a0d05' : YE.cream,
                fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>
                {Math.round(s.count * sEnter)}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Mock_CRM({ x, y, delay = 0 }) {
  const { localTime } = useSprite();
  const localT = Math.max(0, localTime - delay);
  const enter = Easing.easeOutCubic(clamp(localT / 0.5, 0, 1));

  const cols = [
    { label: 'Novo',     count: 24, color: 'rgba(255,255,255,0.15)' },
    { label: 'Contato',  count: 16, color: 'rgba(255,107,26,0.35)' },
    { label: 'Proposta', count: 9,  color: 'rgba(255,107,26,0.6)' },
    { label: 'Fechado',  count: 4,  color: YE.orange },
  ];

  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%, -50%) scale(${0.88 + 0.12 * enter})`,
      opacity: enter,
      width: 360, height: 380,
      background: YE.card,
      border: `1px solid ${YE.border}`,
      borderRadius: 22,
      padding: 18,
      boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.2em', color: YE.textMuted, textTransform: 'uppercase' }}>CRM</div>
          <div style={{ fontFamily: SANS, fontSize: 15, fontWeight: 600, color: YE.cream, letterSpacing: '-0.01em' }}>Pipeline</div>
        </div>
        <div style={{ fontFamily: MONO, fontSize: 10, color: YE.orange,
          padding: '4px 10px', background: 'rgba(255,107,26,0.12)', borderRadius: 999,
          border: '1px solid rgba(255,107,26,0.3)' }}>
          53 ativos
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
        {cols.map((c, i) => {
          const cT = Math.max(0, localTime - delay - 0.3 - i * 0.1);
          const cEnter = Easing.easeOutCubic(clamp(cT / 0.4, 0, 1));
          return (
            <div key={i} style={{ opacity: cEnter, transform: `translateY(${(1 - cEnter) * 8}px)` }}>
              <div style={{
                fontFamily: MONO, fontSize: 9, letterSpacing: '0.16em',
                color: YE.textMuted, textTransform: 'uppercase', marginBottom: 6,
                display: 'flex', alignItems: 'center', gap: 4,
              }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: c.color }}/>
                {c.label}
              </div>
              {Array.from({ length: Math.min(4, c.count) }).map((_, j) => (
                <div key={j} style={{
                  height: 36,
                  background: YE.cardLight,
                  border: `1px solid ${YE.border}`,
                  borderRadius: 8, marginBottom: 4,
                  padding: '6px 8px',
                  display: 'flex', flexDirection: 'column', justifyContent: 'center',
                }}>
                  <div style={{ height: 5, width: '70%', background: 'rgba(255,255,255,0.18)', borderRadius: 2, marginBottom: 3 }}/>
                  <div style={{ height: 4, width: '45%', background: c.color, borderRadius: 2, opacity: 0.7 }}/>
                </div>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── SCENE 8: AI as decision layer (24 - 27.5s) ────────────────────────────
function Scene8() {
  const { localTime } = useSprite();
  const cx = 960, cy = 520;

  const actions = [
    { label: 'interpreta', angle: -90 },
    { label: 'recomenda',  angle: -45 },
    { label: 'prioriza',   angle: 0 },
    { label: 'resume',     angle: 45 },
    { label: 'escreve',    angle: 90 },
    { label: 'analisa',    angle: 135 },
    { label: 'organiza',   angle: 180 },
    { label: 'aprende',    angle: 225 },
  ];

  const t = useTime();
  const breath = 1 + 0.04 * Math.sin(localTime * 1.6);

  return (
    <React.Fragment>
      <Glow x={cx} y={cy} size={700} opacity={0.55}/>

      {/* Orbit ring */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        <circle cx={cx} cy={cy} r={290} fill="none" stroke="rgba(255,107,26,0.18)" strokeWidth="1" strokeDasharray="2 6"
          style={{ transform: `rotate(${t * 8}deg)`, transformOrigin: `${cx}px ${cy}px` }}/>
        <circle cx={cx} cy={cy} r={210} fill="none" stroke="rgba(255,107,26,0.12)" strokeWidth="1"/>
      </svg>

      {/* Action chips on orbit */}
      {actions.map((a, i) => {
        const delay = 0.4 + i * 0.08;
        const localT = Math.max(0, localTime - delay);
        const enter = Easing.easeOutCubic(clamp(localT / 0.5, 0, 1));
        const rad = (a.angle + t * 6) * Math.PI / 180;
        const r = 290;
        const x = cx + Math.cos(rad) * r;
        const y = cy + Math.sin(rad) * r;
        return (
          <div key={i} style={{
            position: 'absolute', left: x, top: y,
            transform: `translate(-50%, -50%) scale(${enter})`,
            opacity: enter * 0.9,
            padding: '6px 12px',
            background: YE.card,
            border: `1px solid ${YE.border}`,
            borderRadius: 999,
            fontFamily: SERIF, fontStyle: 'italic',
            fontSize: 14, color: YE.orangeSoft,
            whiteSpace: 'nowrap',
          }}>
            {a.label}
          </div>
        );
      })}

      {/* Central AI nucleus */}
      <div style={{
        position: 'absolute', left: cx, top: cy,
        transform: `translate(-50%, -50%) scale(${breath})`,
      }}>
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          width: 200, height: 200,
          marginLeft: -100, marginTop: -100,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${YE.orangeGlow}, transparent 70%)`,
          filter: 'blur(20px)',
        }}/>
        <div style={{
          width: 140, height: 140,
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #FF6B1A, #C13B00)',
          border: `2px solid rgba(255,180,120,0.4)`,
          boxShadow: `0 0 40px ${YE.orangeGlow}, inset 0 0 20px rgba(255,255,255,0.1)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column',
        }}>
          <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.24em', color: 'rgba(26,13,5,0.7)', textTransform: 'uppercase' }}>
            CAMADA
          </div>
          <div style={{ fontFamily: SANS, fontSize: 22, fontWeight: 700, color: '#1a0d05', letterSpacing: '-0.01em' }}>
            IA Aplicada
          </div>
        </div>
      </div>

      {/* "Próxima melhor ação" insight card */}
      <Sprite start={1.6} end={3.5}>
        <NextActionCard x={1500} y={780}/>
      </Sprite>

      <Eyebrow y={140}>Cena 08 — Inteligência aplicada</Eyebrow>
      <SceneCaption y={920}>
        IA não substitui direção. <Em>Amplifica quem tem método.</Em>
      </SceneCaption>
    </React.Fragment>
  );
}

function NextActionCard({ x, y }) {
  const { localTime } = useSprite();
  const enter = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%, -50%) scale(${0.85 + 0.15 * enter})`,
      opacity: enter,
      width: 280,
      padding: 16,
      background: 'rgba(25,28,30,0.95)',
      backdropFilter: 'blur(8px)',
      border: '1px solid rgba(255,107,26,0.4)',
      borderRadius: 18,
      boxShadow: '0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,26,0.15)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
        <span style={{ color: YE.orange, display: 'flex' }}>{Icons.spark}</span>
        <span style={{ fontFamily: MONO, fontSize: 9, letterSpacing: '0.2em', color: YE.orange, textTransform: 'uppercase' }}>
          Próxima melhor ação
        </span>
      </div>
      <div style={{ fontFamily: SANS, fontSize: 14, color: YE.cream, lineHeight: 1.4, marginBottom: 10, letterSpacing: '-0.005em' }}>
        Lead "Mariana C." está pronta para proposta. Score 92.
      </div>
      <div style={{
        padding: '6px 10px', background: 'rgba(255,107,26,0.12)',
        border: '1px solid rgba(255,107,26,0.3)', borderRadius: 999,
        fontFamily: SANS, fontSize: 11, color: YE.orange, fontWeight: 500,
        display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: YE.orange,
          boxShadow: `0 0 6px ${YE.orange}` }}/>
        agendar follow-up →
      </div>
    </div>
  );
}

// ── SCENE 9: Results dashboard (27.5 - 31s) ───────────────────────────────
function Scene9() {
  const { localTime } = useSprite();

  const metrics = [
    { label: 'Conversão',         value: 42,  prefix: '+', suffix: '%', delay: 0.3 },
    { label: 'Leads organizados', value: 128, prefix: '+', suffix: '',  delay: 0.5 },
    { label: 'Tempo operacional', value: 35,  prefix: '-', suffix: '%', delay: 0.7 },
    { label: 'ROI no funil',      value: 3.2, prefix: '',  suffix: 'x', decimals: 1, delay: 0.9 },
    { label: 'Propostas ativas',  value: 87,  prefix: '',  suffix: '',  delay: 1.1 },
    { label: 'Processos visíveis',value: 100, prefix: '',  suffix: '%', delay: 1.3 },
  ];

  return (
    <React.Fragment>
      <Glow x={960} y={520} size={900} opacity={0.4}/>

      <div style={{
        position: 'absolute', left: '50%', top: 520,
        transform: 'translate(-50%, -50%)',
        width: 1500,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {metrics.map((m, i) => (
            <MetricCard key={i} {...m}/>
          ))}
        </div>

        {/* Big chart */}
        <div style={{
          marginTop: 16,
          padding: 24,
          background: 'linear-gradient(180deg, #202325, #181B1D)',
          border: `1px solid ${YE.borderStrong}`,
          borderRadius: 22,
          boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <div>
              <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.22em', color: YE.textMuted, textTransform: 'uppercase' }}>Performance</div>
              <div style={{ fontFamily: SANS, fontSize: 18, fontWeight: 600, color: YE.cream, letterSpacing: '-0.01em' }}>
                Últimos 90 dias
              </div>
            </div>
            <div style={{
              fontFamily: MONO, fontSize: 11, color: YE.orange,
              padding: '6px 12px', borderRadius: 999,
              background: 'rgba(255,107,26,0.12)', border: '1px solid rgba(255,107,26,0.3)',
            }}>
              ↑ trending
            </div>
          </div>
          <BigChart/>
        </div>
      </div>

      <Eyebrow y={140}>Cena 09 — Resultado real</Eyebrow>
      <SceneCaption y={920}>
        Resultado real nasce quando a operação ganha <Em>forma</Em>.
      </SceneCaption>
    </React.Fragment>
  );
}

function MetricCard({ label, value, prefix = '', suffix = '', decimals = 0, delay = 0 }) {
  const { localTime } = useSprite();
  const localT = Math.max(0, localTime - delay);
  const enter = Easing.easeOutCubic(clamp(localT / 0.5, 0, 1));
  const count = Easing.easeOutCubic(clamp(localT / 1.4, 0, 1));
  const v = value * count;

  return (
    <div style={{
      opacity: enter,
      transform: `translateY(${(1 - enter) * 14}px)`,
      padding: 22,
      background: YE.card,
      border: `1px solid ${YE.border}`,
      borderRadius: 18,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: 'linear-gradient(90deg, transparent, rgba(255,107,26,0.6), transparent)',
      }}/>
      <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.2em', color: YE.textMuted, textTransform: 'uppercase', marginBottom: 8 }}>
        {label}
      </div>
      <div style={{
        fontFamily: SANS, fontSize: 56, fontWeight: 700,
        color: YE.cream, letterSpacing: '-0.03em',
        fontVariantNumeric: 'tabular-nums',
        display: 'flex', alignItems: 'baseline', gap: 4,
      }}>
        <span style={{ color: YE.orange, fontSize: 36 }}>{prefix}</span>
        {v.toFixed(decimals)}
        <span style={{ color: YE.orange, fontSize: 36 }}>{suffix}</span>
      </div>
    </div>
  );
}

function BigChart() {
  const { localTime } = useSprite();
  const t = clamp(localTime / 1.8, 0, 1);
  const eased = Easing.easeOutCubic(t);

  // Generate path
  const w = 1400, h = 140;
  const n = 40;
  const pts = [];
  for (let i = 0; i < n; i++) {
    const x = (i / (n - 1)) * w;
    const trend = h - (i / n) * h * 0.75;
    const noise = Math.sin(i * 0.6) * 8 + Math.cos(i * 0.3) * 4;
    const y = clamp(trend + noise, 8, h - 4);
    pts.push({ x, y });
  }

  // Reveal up to eased fraction
  const revealN = Math.floor(eased * n);
  const path = pts.slice(0, Math.max(2, revealN)).map((p, i) =>
    `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`
  ).join(' ');
  const fillPath = path + ` L ${pts[Math.max(1, revealN - 1)].x} ${h} L 0 ${h} Z`;

  return (
    <svg width="100%" height={h + 20} viewBox={`0 -10 ${w} ${h + 20}`} style={{ display: 'block' }}>
      <defs>
        <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(255,107,26,0.4)"/>
          <stop offset="100%" stopColor="rgba(255,107,26,0)"/>
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0.25, 0.5, 0.75].map(g => (
        <line key={g} x1={0} y1={h * g} x2={w} y2={h * g} stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
      ))}
      <path d={fillPath} fill="url(#chartFill)"/>
      <path d={path} stroke={YE.orange} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"
        style={{ filter: `drop-shadow(0 0 4px ${YE.orangeGlow})` }}/>
      {revealN > 0 && (
        <circle cx={pts[Math.max(0, revealN - 1)].x} cy={pts[Math.max(0, revealN - 1)].y} r={5} fill={YE.orange}
          style={{ filter: `drop-shadow(0 0 8px ${YE.orange})` }}/>
      )}
    </svg>
  );
}

// ── SCENE 10: Closing positioning (31 - 35s) ─────────────────────────────
function Scene10() {
  const { localTime } = useSprite();
  const cx = 960, cy = 540;

  const enter = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));
  const phase2 = clamp((localTime - 0.8) / 0.6, 0, 1);
  const phase3 = clamp((localTime - 1.6) / 0.6, 0, 1);
  const ctaPhase = clamp((localTime - 2.2) / 0.6, 0, 1);

  const t = useTime();
  const orbit = t * 12;

  return (
    <React.Fragment>
      <Glow x={cx} y={cy} size={1100} opacity={0.5}/>

      {/* Soft orbital cards */}
      {[0, 60, 120, 180, 240, 300].map((angle, i) => {
        const rad = (angle + orbit) * Math.PI / 180;
        const r = 420;
        const x = cx + Math.cos(rad) * r;
        const y = cy + Math.sin(rad) * r * 0.55;
        const labels = ['Estratégia', 'Sistemas', 'Automação', 'IA', 'Marketing', 'Dados'];
        const cardEnter = Easing.easeOutCubic(clamp((localTime - 0.3 - i * 0.06) / 0.5, 0, 1));
        return (
          <div key={i} style={{
            position: 'absolute', left: x, top: y,
            transform: `translate(-50%, -50%) scale(${cardEnter})`,
            opacity: cardEnter * 0.7,
            padding: '6px 14px',
            background: YE.card,
            border: `1px solid ${YE.border}`,
            borderRadius: 999,
            fontFamily: SANS, fontSize: 12, fontWeight: 500,
            color: YE.textMuted,
            whiteSpace: 'nowrap',
          }}>
            {labels[i]}
          </div>
        );
      })}

      {/* Central radial star */}
      <div style={{
        position: 'absolute', left: cx, top: cy - 80,
        transform: `translate(-50%, -50%) scale(${enter})`,
        opacity: enter,
      }}>
        <svg width="80" height="80" viewBox="0 0 80 80" style={{ filter: `drop-shadow(0 0 12px ${YE.orangeGlow})` }}>
          <g style={{ transform: `rotate(${t * 20}deg)`, transformOrigin: '40px 40px' }}>
            {[0, 45, 90, 135].map(a => (
              <line key={a}
                x1={40 + Math.cos((a) * Math.PI / 180) * 28}
                y1={40 + Math.sin((a) * Math.PI / 180) * 28}
                x2={40 + Math.cos((a + 180) * Math.PI / 180) * 28}
                y2={40 + Math.sin((a + 180) * Math.PI / 180) * 28}
                stroke={YE.orange} strokeWidth="2" strokeLinecap="round"/>
            ))}
            <circle cx="40" cy="40" r="6" fill={YE.orange}/>
          </g>
        </svg>
      </div>

      {/* Headline */}
      <div style={{
        position: 'absolute', left: '50%', top: cy + 20,
        transform: 'translate(-50%, 0)',
        textAlign: 'center', width: 1500,
      }}>
        <div style={{
          opacity: phase2,
          transform: `translateY(${(1 - phase2) * 18}px)`,
          fontFamily: SANS, fontSize: 78, fontWeight: 600,
          color: YE.cream, letterSpacing: '-0.03em',
          lineHeight: 1.05, marginBottom: 20,
        }}>
          Estratégia <span style={{ color: YE.orange }}>+</span> Sistemas <span style={{ color: YE.orange }}>+</span> IA
        </div>
        <div style={{
          opacity: phase3,
          transform: `translateY(${(1 - phase3) * 14}px)`,
          fontFamily: SERIF, fontStyle: 'italic',
          fontSize: 42, fontWeight: 400,
          color: YE.orangeSoft, letterSpacing: '0',
          lineHeight: 1.2,
        }}>
          para transformar operação em <span style={{ color: YE.orange }}>resultado real.</span>
        </div>
      </div>

      {/* CTA */}
      <div style={{
        position: 'absolute', left: '50%', top: 920,
        transform: `translate(-50%, ${(1 - ctaPhase) * 14}px) scale(${0.92 + 0.08 * ctaPhase})`,
        opacity: ctaPhase,
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '14px 28px',
        background: YE.orange,
        color: '#1a0d05',
        borderRadius: 999,
        fontFamily: SANS, fontSize: 16, fontWeight: 600,
        letterSpacing: '-0.005em',
        boxShadow: `0 0 ${20 + 12 * Math.sin(t * 2)}px ${YE.orangeGlow}, 0 12px 40px rgba(255,107,26,0.3)`,
      }}>
        Agendar conversa
        <span style={{ display: 'inline-flex' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 5l7 7-7 7"/>
          </svg>
        </span>
      </div>

      <Eyebrow y={140}>Cena 10 — Posicionamento</Eyebrow>
    </React.Fragment>
  );
}

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