// scenes-b.jsx · Os Dois Ciclos, Os Dois Lobos (tabela), O Fecho

// ════════════════════ CENA 4 · OS DOIS CICLOS ════════════════════
function Scene4() {
  return (
    <Sprite start={28.5} end={40.6}>
      <Kicker top={332} size={26}>O Mapa dos Dois Ciclos</Kicker>
      <Sprite start={28.9} end={40.6}>
        <Line top={388} font={FORJA.monumental} size={74} color={FORJA.bege}
              uppercase ls="-0.02em" rise={22} entry={0.55}>
          A mesma força,
          {'\n'}dois sentidos.
        </Line>
      </Sprite>

      <Sprite start={29.4} end={40.6}>
        <Cycle cx={540} cy={902} color={FORJA.vermelho} dim
               kind="CICLO" name="VICIOSO"
               nodes={['Confusão', 'Inação', 'Frustração']} reverse />
      </Sprite>
      <Sprite start={30.3} end={40.6}>
        <Cycle cx={540} cy={1452} color={FORJA.amarelo}
               kind="CICLO" name="VIRTUOSO"
               nodes={['Clareza', 'Ação', 'Realização']} />
      </Sprite>
    </Sprite>
  );
}

function Cycle({ cx, cy, color, dim = false, kind, name, nodes, reverse = false }) {
  const { localTime, duration } = useSprite();
  const t = useTime();
  const reveal = Easing.easeOutBack(clamp(localTime / 0.9, 0, 1));
  const ex = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const op = clamp(localTime / 0.5, 0, 1) * (1 - ex);

  const S = 560, C = S / 2, R = 150, LR = 206;
  const rot = (reverse ? -1 : 1) * t * 24;
  const tint = dim ? 0.62 : 1;
  const nodeAng = [-90, 30, 150];

  // chevrons de fluxo (movimento)
  const chevs = [0, 1, 2].map(k => rot + k * 120 + 60);

  return (
    <div style={{
      position: 'absolute', left: cx - C, top: cy - C, width: S, height: S,
      opacity: op, transform: `scale(${0.9 + 0.1 * reveal})`, transformOrigin: 'center',
    }}>
      {/* halo */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at center, ${dim ? 'rgba(139,0,0,0.16)' : 'rgba(246,195,36,0.14)'} 0%, transparent 58%)`,
      }} />
      <svg width={S} height={S} viewBox={`0 0 ${S} ${S}`} style={{ position: 'absolute', inset: 0 }}>
        {/* anel base */}
        <circle cx={C} cy={C} r={R} fill="none" stroke={color} strokeOpacity={0.32 * tint}
                strokeWidth="2" strokeDasharray="3 9" />
        <circle cx={C} cy={C} r={R - 14} fill="none" stroke={color} strokeOpacity={0.14 * tint} strokeWidth="1" />

        {/* chevrons de fluxo */}
        <g>
          {chevs.map((deg, k) => {
            const a = deg * Math.PI / 180;
            const x = C + Math.cos(a) * R, y = C + Math.sin(a) * R;
            const tang = deg + (reverse ? -90 : 90);
            return (
              <g key={k} transform={`translate(${x.toFixed(1)},${y.toFixed(1)}) rotate(${tang})`}>
                <path d="M-9 -10 L9 0 L-9 10" fill="none" stroke={color} strokeOpacity={0.92 * tint}
                      strokeWidth="3.6" strokeLinecap="round" strokeLinejoin="round" />
              </g>
            );
          })}
        </g>

        {/* nós */}
        {nodeAng.map((deg, k) => {
          const a = deg * Math.PI / 180;
          const x = C + Math.cos(a) * R, y = C + Math.sin(a) * R;
          return (
            <g key={k}>
              <circle cx={x} cy={y} r="9" fill={FORJA.preto} stroke={color} strokeOpacity={tint} strokeWidth="2.5" />
              <circle cx={x} cy={y} r="3.5" fill={color} fillOpacity={tint} />
            </g>
          );
        })}
      </svg>

      {/* rótulos dos nós */}
      {nodes.map((label, k) => {
        const a = nodeAng[k] * Math.PI / 180;
        const x = C + Math.cos(a) * LR, y = C + Math.sin(a) * LR;
        return (
          <div key={k} style={{
            position: 'absolute', left: x, top: y, transform: 'translate(-50%,-50%)',
            fontFamily: FORJA.sagrada, fontSize: 30, color: dim ? '#C7A28C' : FORJA.bege,
            whiteSpace: 'nowrap', letterSpacing: '0.04em',
            textShadow: dim ? '0 0 14px rgba(139,0,0,0.5)' : '0 0 16px rgba(246,195,36,0.4)',
          }}>
            {label}
          </div>
        );
      })}

      {/* hub central */}
      <div style={{
        position: 'absolute', left: C, top: C, transform: 'translate(-50%,-50%)',
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: FORJA.sagrada, fontSize: 15, letterSpacing: '0.34em',
          color: dim ? '#A87766' : FORJA.bronzeC, marginBottom: 4,
        }}>{kind}</div>
        <div style={{
          fontFamily: FORJA.sagrada, fontWeight: 800, fontSize: 38, color,
          letterSpacing: '0.06em', textShadow: dim ? 'none' : FORJA.glowAmberSoft,
        }}>{name}</div>
      </div>
    </div>
  );
}

// ════════════════════ CENA 5 · OS DOIS LOBOS ════════════════════
const PARES = [
  ['Usa desculpas', 'Usa IA'],
  ['Culpa os outros', 'Assume responsabilidade'],
  ['Entrega o mínimo', 'Entrega mais que o esperado'],
  ['Sonha pequeno', 'Sonha grande'],
  ['Vê falhas', 'Vê oportunidades'],
  ['Reclama', 'Gera resultados'],
];

function Scene5() {
  return (
    <Sprite start={40.2} end={50.6}>
      <Kicker top={296} size={25}>O Conto dos Dois Lobos</Kicker>
      <Sprite start={40.5} end={50.6}>
        <Line top={350} font={FORJA.monumental} size={66} color={FORJA.amarelo}
              uppercase ls="-0.02em" glow={FORJA.glowAmberSoft} rise={20} entry={0.5}>
          Vence o que você alimenta
        </Line>
      </Sprite>

      <Tabela />
    </Sprite>
  );
}

function Tabela() {
  const { localTime } = useSprite();
  const headOp = Easing.easeOutCubic(clamp((localTime - 0.7) / 0.5, 0, 1));
  const Y0 = 612, PITCH = 150;
  const lineH = Easing.easeOutCubic(clamp((localTime - 0.8) / 1.2, 0, 1));

  return (
    <React.Fragment>
      {/* cabeçalho */}
      <div style={{ position: 'absolute', left: 70, width: 430, top: 540, textAlign: 'right', opacity: headOp,
        fontFamily: FORJA.sagrada, fontSize: 30, letterSpacing: '0.18em', color: '#9C8A74', textTransform: 'uppercase' }}>
        Medíocre
      </div>
      <div style={{ position: 'absolute', right: 70, width: 430, top: 540, textAlign: 'left', opacity: headOp,
        fontFamily: FORJA.sagrada, fontSize: 30, letterSpacing: '0.18em', color: FORJA.amarelo, textTransform: 'uppercase',
        textShadow: FORJA.glowAmberSoft }}>
        <span style={{ fontWeight: 700 }}>∞</span> Lendário
      </div>

      {/* divisa central de fogo */}
      <div style={{
        position: 'absolute', left: 540, top: 588, transform: 'translateX(-50%)',
        width: 3, height: (PARES.length * PITCH - 30) * lineH,
        background: `linear-gradient(180deg, ${FORJA.amarelo}, ${FORJA.vermelho}, ${FORJA.brasa})`,
        boxShadow: '0 0 16px 3px rgba(230,57,70,0.45)', opacity: 0.85,
      }} />

      {PARES.map((p, i) => (
        <LoboRow key={i} i={i} m={p[0]} l={p[1]} y={Y0 + i * PITCH} />
      ))}
    </React.Fragment>
  );
}

function LoboRow({ i, m, l, y }) {
  const { localTime } = useSprite();
  const t0 = 1.1 + i * 0.42;
  const a = Easing.easeOutCubic(clamp((localTime - t0) / 0.5, 0, 1));
  const sx = (1 - a) * 46;

  return (
    <React.Fragment>
      {/* medíocre */}
      <div style={{
        position: 'absolute', left: 70, width: 432, top: y, textAlign: 'right',
        opacity: a, transform: `translateX(${-sx}px)`,
        fontFamily: FORJA.operacional, fontSize: 40, color: '#9C8A74', lineHeight: 1.16,
      }}>
        {m}
      </div>
      {/* nó na divisa */}
      <div style={{
        position: 'absolute', left: 540, top: y + 22, transform: `translate(-50%,-50%) scale(${a})`,
        width: 12, height: 12, borderRadius: '50%', background: FORJA.amarelo,
        boxShadow: '0 0 12px 2px rgba(246,195,36,0.7)',
      }} />
      {/* lendário */}
      <div style={{
        position: 'absolute', right: 70, width: 432, top: y, textAlign: 'left',
        opacity: a, transform: `translateX(${sx}px)`,
        fontFamily: FORJA.operacional, fontSize: 40, color: FORJA.bege, fontWeight: 500, lineHeight: 1.16,
        textShadow: '0 0 18px rgba(246,195,36,0.18)',
      }}>
        {l}
      </div>
    </React.Fragment>
  );
}

// ════════════════════ CENA 6 · O FECHO · A VIGÍLIA ════════════════════
function Scene6() {
  return (
    <Sprite start={50.0} end={57.0}>
      {/* ampulheta do fundador, sutil */}
      <Sprite start={50.2} end={57.0}>
        <FechoFundo />
      </Sprite>

      <Sprite start={50.5} end={57.0}>
        <Infinito />
      </Sprite>

      <Sprite start={50.6} end={57.0}>
        <Line top={1010} font={FORJA.monumental} size={92} color={FORJA.bege}
              uppercase ls="-0.02em" glow={FORJA.glowBege} rise={26} entry={0.6}>
          A escolha é diária.
        </Line>
      </Sprite>

      <Sprite start={52.1} end={57.0}>
        <Line top={1190} font={FORJA.sagrada} size={56} color={FORJA.amarelo}
              ls="0.08em" glow={FORJA.glowAmber} rise={20} entry={0.6}>
          Mantenha-se vigilante.
        </Line>
      </Sprite>

      <Sprite start={53.6} end={57.0}>
        <Filete top={1340} color={FORJA.bronze} w={120} />
        <Line top={1378} font={FORJA.sagrada} size={30} color={FORJA.bronzeC}
              ls="0.30em" uppercase rise={12} entry={0.6}>
          Forja Lendár[IA]
        </Line>
      </Sprite>
    </Sprite>
  );
}

function FechoFundo() {
  const { localTime } = useSprite();
  const op = Easing.easeOutCubic(clamp(localTime / 1.6, 0, 1));
  const pulse = 0.5 + 0.5 * Math.sin(localTime * 0.7);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', opacity: op, pointerEvents: 'none' }}>
      {/* clarão de brasa subindo, foco no ∞ */}
      <div style={{
        position: 'absolute', left: '50%', top: 820, transform: 'translate(-50%,-50%)',
        width: 1000, height: 1000,
        background: `radial-gradient(circle at center, rgba(246,195,36,${0.10 + pulse * 0.04}) 0%, rgba(139,0,0,0.10) 34%, transparent 64%)`,
        filter: 'blur(6px)',
      }} />
      <div style={{
        position: 'absolute', left: '50%', bottom: -320, transform: 'translateX(-50%)',
        width: 1300, height: 760,
        background: `radial-gradient(ellipse at center, rgba(139,0,0,${0.26 + pulse * 0.08}) 0%, transparent 62%)`,
        filter: 'blur(8px)',
      }} />
    </div>
  );
}

function Infinito() {
  const { localTime } = useSprite();
  const bloom = Easing.easeOutBack(clamp(localTime / 1.0, 0, 1));
  const pulse = 0.5 + 0.5 * Math.sin(localTime * 1.8);
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, top: 740, textAlign: 'center' }}>
      <div style={{
        position: 'absolute', left: '50%', top: 0, transform: 'translate(-50%,-10%)',
        width: 620, height: 360,
        background: `radial-gradient(ellipse at center, rgba(246,195,36,${0.14 + pulse * 0.06}) 0%, transparent 64%)`,
        filter: 'blur(4px)',
      }} />
      <span style={{
        position: 'relative', fontFamily: FORJA.sagrada, fontWeight: 700, fontSize: 230,
        color: FORJA.amarelo, textShadow: FORJA.glowAmber, lineHeight: 1,
        display: 'inline-block', transform: `scale(${bloom})`,
      }}>
        ∞
      </span>
    </div>
  );
}

Object.assign(window, { Scene4, Scene5, Scene6 });