// scenes-5.jsx — DeftForge scene 5: logo reveal + CTA
// 25.0 → 32.0s (7s)

// Beat plan:
//  0.0 → 0.6s   spark mark assembles from a single point of light at center
//  0.6 → 1.2s   wordmark types/slides in next to the mark
//  1.2 → 2.5s   hold; subtle ember pulse
//  2.5 → 3.5s   tagline fades in below ("custom ai automation, deftly built.")
//  3.5 → 4.8s   CTA pill emerges
//  4.8 → 7.0s   hold; founders' emails appear at bottom; closing breath
function Scene5LogoReveal() {
  const { localTime } = useSprite();

  // Mark assembly
  const markT = clamp(localTime / 0.7, 0, 1);
  const markScale = lerp(0.2, 1.0, Easing.easeOutBack(markT));
  const markOpacity = Easing.easeOutCubic(markT);

  // Wordmark slides in from right of mark
  const wordT = clamp((localTime - 0.5) / 0.7, 0, 1);
  const wordOpacity = Easing.easeOutCubic(wordT);
  const wordX = lerp(-30, 0, Easing.easeOutCubic(wordT));

  // Tagline
  const taglineT = clamp((localTime - 2.2) / 0.7, 0, 1);

  // CTA
  const ctaT = clamp((localTime - 3.3) / 0.6, 0, 1);

  // Emails
  const emailT = clamp((localTime - 4.6) / 0.5, 0, 1);

  // Subtle ember pulse on mark after assembly
  const pulse = localTime > 1.0
    ? 0.6 + 0.4 * (Math.sin((localTime - 1.0) * 1.8) * 0.5 + 0.5)
    : 0;

  // Background ember halo that breathes
  const haloI = Math.min(1, markT) * (0.4 + 0.2 * (Math.sin(localTime * 1.2) * 0.5 + 0.5));

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: COLORS.bg,
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      {/* Background ember halo */}
      <ForgeGlow x={960} y={500} radius={600} intensity={haloI} />

      {/* Initial spark flash on mark assembly */}
      {localTime < 0.7 && (
        <Sparks
          count={20}
          originX={960}
          originY={500}
          intensity={1 - markT}
          color={COLORS.ember}
        />
      )}

      {/* Logo lockup — centered */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, top: 360,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 36,
        }}>
          {/* Mark */}
          <div style={{
            transform: `scale(${markScale})`,
            opacity: markOpacity,
            filter: localTime > 0.7
              ? `drop-shadow(0 0 ${24 + pulse * 18}px ${COLORS.ember}aa)`
              : `drop-shadow(0 0 ${markT * 40}px ${COLORS.ember})`,
          }}>
            <DFMark size={120} color={COLORS.fg} ember={COLORS.ember} />
          </div>

          {/* Wordmark */}
          <div style={{
            opacity: wordOpacity,
            transform: `translateX(${wordX}px)`,
          }}>
            <DFWordmark size={130} color={COLORS.fg} ember={COLORS.ember} weight={700} />
          </div>
        </div>
      </div>

      {/* Tagline */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, top: 580,
        textAlign: 'center',
        fontFamily: FONT_SANS,
        fontWeight: 400,
        fontSize: 32,
        color: COLORS.dim,
        letterSpacing: '-0.01em',
        opacity: taglineT,
        transform: `translateY(${lerp(12, 0, Easing.easeOutCubic(taglineT))}px)`,
      }}>
        Custom AI automation, deftly built.
      </div>

      {/* CTA pill */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, top: 680,
        display: 'flex',
        justifyContent: 'center',
        opacity: ctaT,
        transform: `translateY(${lerp(20, 0, Easing.easeOutBack(ctaT))}px)`,
      }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 16,
          padding: '20px 32px',
          background: COLORS.ember,
          color: '#1a0a04',
          borderRadius: 999,
          fontFamily: FONT_SANS,
          fontWeight: 600,
          fontSize: 28,
          letterSpacing: '-0.01em',
          boxShadow: `0 0 60px ${COLORS.ember}55`,
        }}>
          Book a 30-min consult
          <span style={{
            fontFamily: FONT_MONO,
            fontSize: 26,
            transform: `translateX(${(localTime - 4.0) > 0 ? Math.sin(localTime * 4) * 4 : 0}px)`,
          }}>→</span>
        </div>
      </div>

      {/* Founders' emails — bottom */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 70,
        display: 'flex',
        justifyContent: 'center',
        gap: 48,
        opacity: emailT,
        transform: `translateY(${lerp(8, 0, Easing.easeOutCubic(emailT))}px)`,
        fontFamily: FONT_MONO,
        fontSize: 18,
        color: COLORS.dim,
        letterSpacing: '0.02em',
      }}>
        <span>steven@deftforge.ai</span>
        <span style={{ color: COLORS.faint }}>·</span>
        <span>ryan@deftforge.ai</span>
      </div>

      {/* Top corner: small "presented by" */}
      <div style={{
        position: 'absolute',
        left: 80, top: 80,
        fontFamily: FONT_MONO,
        fontSize: 13,
        color: COLORS.dim,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        opacity: clamp(localTime / 0.5, 0, 1),
      }}>
        deftforge · 2026
      </div>

      <Grain opacity={0.05} />
    </div>
  );
}

Object.assign(window, { Scene5LogoReveal });