// Scene 2 — Logo reveal. A beat of calm after the chaos.
// ObraPlanner wordmark scales up, the tagline drops in under it.

function SceneLogo({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const appearT = clamp(localTime / 0.6, 0, 1);
        const appear = Easing.easeOutBack(appearT);

        const lineT = clamp((localTime - 0.7) / 0.5, 0, 1);
        const line = Easing.easeOutCubic(lineT);

        const taglineT = clamp((localTime - 1.1) / 0.5, 0, 1);
        const tagline = Easing.easeOutCubic(taglineT);

        const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
        const exitY = -40 * Easing.easeInCubic(exitT);
        const exitOp = 1 - Easing.easeInCubic(exitT);

        // Subtle ambient pulse
        const pulse = 1 + Math.sin(localTime * 2) * 0.005;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: `radial-gradient(50% 50% at 50% 50%, ${OP_COLORS.surface} 0%, ${OP_COLORS.bg} 70%)`,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            opacity: exitOp,
            transform: `translateY(${exitY}px)`,
          }}>
            {/* Concentric rings */}
            <Rings localTime={localTime} />

            <div style={{
              transform: `scale(${0.85 + 0.15 * appear}) scale(${pulse})`,
              opacity: appearT,
              display: 'flex', alignItems: 'center', gap: 24,
              fontFamily: SANS, fontWeight: 700,
              letterSpacing: '-0.035em',
              color: OP_COLORS.text,
              fontSize: 128,
              position: 'relative', zIndex: 2,
            }}>
              <LogoMark size={140} glow />
              <div>
                <span>Obra</span>
                <span style={{
                  background: `linear-gradient(90deg, ${OP_COLORS.blueLight}, ${OP_COLORS.greenLight})`,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                }}>Planner</span>
              </div>
            </div>

            {/* Divider line */}
            <div style={{
              width: 120 * line,
              height: 2,
              background: `linear-gradient(90deg, transparent, ${OP_COLORS.blueLight}, transparent)`,
              marginTop: 38,
              opacity: line,
            }} />

            <div style={{
              marginTop: 24,
              fontFamily: SANS, fontSize: 22,
              color: OP_COLORS.textDim,
              letterSpacing: '0.28em', textTransform: 'uppercase',
              fontWeight: 500,
              opacity: tagline,
              transform: `translateY(${(1 - tagline) * 16}px)`,
            }}>
              Sistema de gestión de obras
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

function Rings({ localTime }) {
  return (
    <>
      {[0, 1, 2].map((i) => {
        const delay = i * 0.5;
        const t = Math.max(0, (localTime - delay) % 2.2) / 2.2;
        const size = 200 + t * 800;
        const op = (1 - t) * 0.35;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: '50%', top: '50%',
            width: size, height: size,
            marginLeft: -size / 2, marginTop: -size / 2,
            border: `1px solid ${OP_COLORS.blueLight}`,
            borderRadius: '50%',
            opacity: op,
            pointerEvents: 'none',
          }} />
        );
      })}
    </>
  );
}

Object.assign(window, { SceneLogo });