// scenes-a.jsx · Gancho, Tese (divisa), Os 3 Pilares

// ════════════════════ CENA 1 · O GANCHO ════════════════════
function Scene1() {
  return (
    <Sprite start={0} end={6.4}>
      {/* clarão por trás da palavra */}
      <Sprite start={1.4} end={6.4}>
        <GanchoGlow />
      </Sprite>
      <Sprite start={1.1} end={6.4}>
        <Line top={742} font={FORJA.operacional} size={56} color={FORJA.bege}
              style={{ fontStyle: 'italic' }} entry={0.7} ls="0.01em">
          O que é ser
        </Line>
      </Sprite>
      <Sprite start={1.9} end={6.4}>
        <Line top={838} font={FORJA.monumental} size={156} color={FORJA.amarelo}
              glow={FORJA.glowAmber} uppercase ls="-0.02em" rise={40} entry={0.8} scaleIn>
          LENDÁRIO?
        </Line>
      </Sprite>
      <Sprite start={3.2} end={6.4}>
        <Filete top={1058} color={FORJA.bronze} w={150} />
      </Sprite>
    </Sprite>
  );
}

function GanchoGlow() {
  const { localTime } = useSprite();
  const bloom = Easing.easeOutCubic(clamp(localTime / 1.6, 0, 1));
  const pulse = 0.5 + 0.5 * Math.sin(localTime * 2.2);
  return (
    <div style={{
      position: 'absolute', left: '50%', top: 940, transform: 'translate(-50%,-50%)',
      width: 900, height: 520,
      background: `radial-gradient(ellipse at center, rgba(246,195,36,${0.18 * bloom + pulse * 0.05}) 0%, rgba(139,0,0,0.10) 38%, transparent 68%)`,
      filter: 'blur(6px)', pointerEvents: 'none',
    }} />
  );
}

// ════════════════════ CENA 2 · A TESE ════════════════════
function Scene2() {
  return (
    <React.Fragment>
      <Sprite start={6.2} end={10.6}>
        <Line top={770} font={FORJA.monumental} size={104} color={FORJA.bege}
              uppercase ls="-0.02em" glow={FORJA.glowBege} rise={34} entry={0.6}>
          Não é
          {'\n'}talento.
        </Line>
      </Sprite>
      <Sprite start={8.4} end={10.7}>
        <Line top={1080} font={FORJA.monumental} size={120} color={FORJA.amarelo}
              uppercase ls="-0.02em" glow={FORJA.glowAmber} rise={40} entry={0.55} scaleIn>
          É direção.
        </Line>
      </Sprite>

      {/* a divisa bipolar */}
      <Sprite start={10.7} end={16.6}>
        <BipolarSplit />
      </Sprite>
    </React.Fragment>
  );
}

function BipolarSplit() {
  const { localTime, duration } = useSprite();
  const halves = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));
  const lineP = Easing.easeOutCubic(clamp((localTime - 0.45) / 1.1, 0, 1));
  const cross = Easing.easeOutBack(clamp((localTime - 1.2) / 0.6, 0, 1));
  const exitStart = duration - 0.55;
  const op = 1 - clamp((localTime - exitStart) / 0.55, 0, 1);
  const MID = 958;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: op, pointerEvents: 'none' }}>
      {/* tinta da sombra (topo) */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 0, height: MID,
        background: `linear-gradient(180deg, rgba(139,0,0,${0.20 * halves}) 0%, rgba(139,0,0,${0.05 * halves}) 70%, transparent 100%)`,
      }} />
      {/* tinta da luz (base) */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: MID, bottom: 0,
        background: `linear-gradient(0deg, rgba(246,195,36,${0.13 * halves}) 0%, rgba(246,195,36,${0.03 * halves}) 75%, transparent 100%)`,
      }} />

      {/* MEDÍOCRE */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 560, textAlign: 'center',
        opacity: halves, transform: `translateY(${(1 - halves) * -26}px)`,
        fontFamily: FORJA.monumental, fontSize: 118, color: '#C7AE8C',
        textTransform: 'uppercase', letterSpacing: '-0.02em',
        textShadow: FORJA.glowRed,
      }}>
        MEDÍOCRE
      </div>

      {/* LENDÁRIO ∞ */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 1180, textAlign: 'center',
        opacity: halves, transform: `translateY(${(1 - halves) * 26}px)`,
        fontFamily: FORJA.monumental, fontSize: 118, color: FORJA.amarelo,
        textTransform: 'uppercase', letterSpacing: '-0.02em',
        textShadow: FORJA.glowAmber,
      }}>
        LENDÁRIO <span style={{ fontFamily: FORJA.sagrada, fontWeight: 700 }}>∞</span>
      </div>

      {/* a divisa de fogo */}
      <div className="fire-divisa" style={{
        position: 'absolute', top: MID - 3, left: '50%', transform: 'translateX(-50%)',
        width: 1040 * lineP, height: 6, borderRadius: 3,
        background: 'linear-gradient(90deg, transparent, #F6C324 14%, #E63946 50%, #8B0000 86%, transparent)',
        boxShadow: '0 0 26px 6px rgba(230,57,70,0.55), 0 0 60px 14px rgba(139,0,0,0.4)',
        animation: 'fireFlicker 1.6s ease-in-out infinite',
      }} />

      {/* o × no centro */}
      <div style={{
        position: 'absolute', left: '50%', top: MID, transform: `translate(-50%,-50%) scale(${cross})`,
        fontFamily: FORJA.sagrada, fontWeight: 700, fontSize: 92, color: FORJA.bege,
        textShadow: '0 0 24px rgba(139,0,0,0.8)',
      }}>
        ×
      </div>

      {/* legenda */}
      <div style={{
        position: 'absolute', left: 80, right: 80, top: 1560, textAlign: 'center',
        opacity: clamp((localTime - 1.6) / 0.8, 0, 1) * op,
        fontFamily: FORJA.operacional, fontStyle: 'italic', fontSize: 46,
        color: FORJA.bege, lineHeight: 1.3,
      }}>
        Todos carregamos os dois lobos.
        {'\n'}Vence o que você alimenta.
      </div>
    </div>
  );
}

// ════════════════════ CENA 3 · OS 3 PILARES ════════════════════
const PILARES = [
  { num: 'I',   a: 'Inteligência', b: '& Autoconhecimento' },
  { num: 'II',  a: 'Impacto',      b: '& Arte' },
  { num: 'III', a: 'Inteligência', b: 'Artificial' },
];

function Scene3() {
  return (
    <React.Fragment>
      {/* pilares */}
      <Sprite start={16.2} end={22.7}>
        <Kicker top={392} size={28}>Os Três Pilares</Kicker>
        <Sprite start={16.7} end={22.7}>
          <Line top={452} font={FORJA.monumental} size={84} color={FORJA.bege}
                uppercase ls="-0.02em" rise={24} entry={0.55}>
            O que sustenta o ouro
          </Line>
        </Sprite>
        <PilaresRow />
      </Sprite>

      {/* revelação IA */}
      <Sprite start={22.7} end={29.0}>
        <IAReveal />
      </Sprite>
    </React.Fragment>
  );
}

function PilaresRow() {
  return (
    <React.Fragment>
      {PILARES.map((p, i) => <Pilar key={i} i={i} data={p} />)}
    </React.Fragment>
  );
}

function Pilar({ i, data }) {
  const { localTime, duration } = useSprite();
  const delay = 0.9 + i * 0.5;
  const rise = Easing.easeOutCubic(clamp((localTime - delay) / 0.85, 0, 1));
  const ex = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const op = rise * (1 - ex);
  const ty = (1 - rise) * 80;

  const cx = 270 + i * 270; // centros: 270, 540, 810
  const W = 250;

  return (
    <div style={{
      position: 'absolute', left: cx - W / 2, top: 700, width: W,
      textAlign: 'center', opacity: op, transform: `translateY(${ty}px)`,
    }}>
      {/* triângulo (Visão / Ação / Legado em traço) */}
      <svg width="48" height="44" viewBox="0 0 40 36" style={{ display: 'block', margin: '0 auto 18px' }}>
        <path d="M20 4 L37 32 L3 32 Z" fill="none" stroke={FORJA.amarelo} strokeWidth="1.4" strokeDasharray="2 4" />
      </svg>
      {/* numeral */}
      <div style={{
        fontFamily: FORJA.sagrada, fontWeight: 800, fontSize: 72, color: FORJA.amarelo,
        textShadow: FORJA.glowAmberSoft, lineHeight: 1,
      }}>
        {data.num}
      </div>
      {/* coluna / fuste */}
      <div style={{
        width: 2, height: 250, margin: '24px auto 22px',
        background: `linear-gradient(180deg, ${FORJA.bronze} 0%, rgba(154,125,86,0.15) 100%)`,
      }} />
      {/* título com iniciais I·A em destaque */}
      <div style={{ fontFamily: FORJA.sagrada, fontSize: 30, lineHeight: 1.32, color: FORJA.bege }}>
        <div><span style={{ color: FORJA.amarelo }}>{data.a.charAt(0)}</span>{data.a.slice(1)}</div>
        <div style={{ fontSize: 24, color: FORJA.bronzeC, marginTop: 4 }}>{data.b}</div>
      </div>
    </div>
  );
}

function IAReveal() {
  const { localTime, duration } = useSprite();
  const bloom = Easing.easeOutBack(clamp(localTime / 0.9, 0, 1));
  const pulse = 0.5 + 0.5 * Math.sin(localTime * 2.4);
  const ex = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const op = 1 - ex;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: op }}>
      <Sprite start={0.1} end={6.3}>
        <Kicker top={560} size={26}>As iniciais formam</Kicker>
      </Sprite>
      {/* clarão */}
      <div style={{
        position: 'absolute', left: '50%', top: 880, transform: 'translate(-50%,-50%)',
        width: 760, height: 560,
        background: `radial-gradient(ellipse at center, rgba(246,195,36,${0.16 + pulse * 0.06}) 0%, transparent 66%)`,
        filter: 'blur(4px)',
      }} />
      {/* IA */}
      <div style={{
        position: 'absolute', left: '50%', top: 880, transform: `translate(-50%,-50%) scale(${bloom})`,
        fontFamily: FORJA.monumental, fontSize: 360, color: FORJA.amarelo,
        letterSpacing: '-0.04em', textShadow: FORJA.glowAmber, lineHeight: 1,
      }}>
        IA
      </div>
      <Sprite start={1.0} end={6.3}>
        <Line top={1240} font={FORJA.operacional} size={48} color={FORJA.bege}
              style={{ fontStyle: 'italic' }} rise={22} entry={0.6}>
          A inteligência é a base de tudo.
        </Line>
      </Sprite>
    </div>
  );
}

Object.assign(window, { Scene1, Scene2, Scene3 });