// intro.jsx — cinematic auto-play opener
// Beats timeline (ms, scaled by props.speed):
//   400  void+grid in        | b1
//   800  confidential tag    | b2
//   1500 corner stats        | b3
//   1800 (sweep beam L→R)    | b4 logo fade-in
//   2400 logo pulse ring     | b5
//   3000 (pulse FX)          | b6
//   3400 stamp "2.0"         | b7
//   3800 (sweep yellow)      | b8
//   4400 headline words      | b9
//   5400 sub line            | b10
//   6800 — hold              | b11
//   7800 done                | b12

const { useState, useEffect, useRef } = React;

function Intro({ onDone, speed = 1 }){
  const [beat, setBeat] = useState(0);
  const [done, setDone] = useState(false);
  const startedRef = useRef(false);

  useEffect(() => {
    if (startedRef.current) return;
    startedRef.current = true;
    const beats = [400, 800, 1500, 1800, 2400, 3000, 3400, 3800, 4400, 5400, 6800, 7800];
    const timers = [];
    beats.forEach((ms, i) => {
      timers.push(setTimeout(() => {
        setBeat(i + 1);
        if (window.FX){
          if (i === 3) window.FX.sweep({ y: window.innerHeight*0.5, duration: 1200, color: 'rgba(78,179,196,0.6)' });
          if (i === 5) window.FX.pulse({ x: window.innerWidth*0.5, y: window.innerHeight*0.5, duration: 1300, color: 'rgba(26,142,162,0.55)' });
          if (i === 7) window.FX.sweep({ y: window.innerHeight*0.5, duration: 900, color: 'rgba(251,176,59,0.35)' });
        }
        if (i === 11){ setDone(true); if (onDone) onDone(); }
      }, ms / speed));
    });
    return () => timers.forEach(clearTimeout);
  }, [speed]);

  function skip(){ setDone(true); if (onDone) onDone(); }

  const beatClasses = Array.from({length: 12}, (_, i) => beat >= i+1 ? `b${i+1}` : '').filter(Boolean).join(' ');

  return (
    <div className={`intro ${beatClasses} ${done ? "intro-out" : ""}`} aria-hidden={done}>
      <style>{`
        .intro{
          position: fixed; inset: 0; z-index: 40;
          background-color: #02060A;
          background-image: radial-gradient(ellipse at 50% 60%, rgba(0,49,58,.6) 0%, rgba(2,6,10,1) 70%);
          display: grid; place-items: center; overflow: hidden;
          transition: opacity 900ms var(--ease-out);
        }
        .intro.intro-out{ opacity: 0; pointer-events: none; }
        .intro-vignette{
          position:absolute; inset:0; pointer-events:none;
          background:
            radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.6), transparent 50%),
            radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.7), transparent 55%);
        }
        .grid-bg{
          position:absolute; inset:0;
          background-image:
            linear-gradient(rgba(78,179,196,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(78,179,196,.05) 1px, transparent 1px);
          background-size: 80px 80px;
          mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
          -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
          opacity: 0; transition: opacity 1400ms var(--ease-out);
        }
        .intro.b1 .grid-bg{ opacity: 1; }
        .intro-stage{ position: relative; z-index: 2; display:flex; flex-direction:column; align-items:center; gap: 28px; width: min(900px, 92vw); text-align: center; }

        .v-tag{
          position: absolute; top: 24px; left: 50%; transform: translateX(-50%) translateY(-6px);
          display:inline-flex; align-items:center; gap:8px;
          padding: 6px 12px; border-radius: 999px;
          background: rgba(14,26,29,.6); border: 1px solid var(--border);
          color: var(--fg-3); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
          opacity: 0; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
          backdrop-filter: blur(8px);
        }
        .intro.b2 .v-tag{ opacity: 1; transform: translateX(-50%) translateY(0); }
        .v-tag .pip{ width:6px; height:6px; border-radius:50%; background: var(--brand-4); box-shadow: 0 0 8px var(--brand-4); }

        .stats{
          position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
          display:flex; gap: 28px; color: var(--fg-4); font-size: 11px; letter-spacing: .12em;
          text-transform: uppercase; font-variant-numeric: tabular-nums;
          opacity: 0; transition: opacity 700ms var(--ease-out);
        }
        .intro.b3 .stats{ opacity: 1; }
        .stats .dot{ color: var(--brand-4); }

        .logo-stack{
          position: relative; width: 96px; height: 96px;
          opacity: 0; transform: scale(.85);
          transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
          filter: drop-shadow(0 0 30px rgba(26,142,162,.6));
        }
        .intro.b4 .logo-stack{ opacity: 1; transform: scale(1); }
        .logo-stack img{ width:100%; height:100%; display:block; }
        .logo-ring{
          position:absolute; inset:-22px; border-radius: 50%;
          border:1px solid rgba(78,179,196,.35); opacity: 0;
        }
        .intro.b5 .logo-ring{ opacity: 1; animation: ringExpand 1.6s var(--ease-out); }
        @keyframes ringExpand{
          0%   { transform: scale(.6); opacity: 0; }
          50%  { opacity: 1; }
          100% { transform: scale(1.7); opacity: 0; }
        }

        .stamp-2{
          font-family: var(--font-display); font-weight: 800;
          letter-spacing: -0.04em; font-size: clamp(96px, 18vw, 240px); line-height: 1;
          background: linear-gradient(180deg, #F2F9FB 0%, #4EB3C4 60%, #006173 100%);
          -webkit-background-clip: text; background-clip: text; color: transparent;
          opacity: 0; transform: translateY(20px) scale(.92);
          transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out);
          position: relative;
        }
        .intro.b7 .stamp-2{ opacity: 1; transform: translateY(0) scale(1); }
        .stamp-2 .ver{
          position: absolute; top: 8px; right: -48px;
          font-size: 12px; letter-spacing: .2em; color: var(--brand-4);
          -webkit-text-fill-color: var(--brand-4); font-weight: 600;
        }

        .headline{
          font-family: var(--font-display); font-weight: 500;
          font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -0.01em;
          color: var(--fg-1); margin-top: 8px; min-height: 1.4em;
        }
        .headline .word{
          display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(6px);
          transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
          margin-right: .3em;
        }
        .intro.b9 .headline .word{ opacity: 1; transform: translateY(0); filter: blur(0); }
        .headline .word.accent{ color: var(--brand-4); }

        .sub{
          font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
          color: var(--fg-3); opacity: 0;
          transition: opacity 700ms var(--ease-out);
        }
        .intro.b10 .sub{ opacity: 1; }
        .sub .dot{ color: var(--accent); margin: 0 8px; }

        .brackets{ position:absolute; inset: 40px; pointer-events:none; opacity: 0; transition: opacity 1000ms var(--ease-out); }
        .intro.b1 .brackets{ opacity: .55; }
        .brackets::before, .brackets::after,
        .brackets > span::before, .brackets > span::after{
          content:''; position: absolute; width: 28px; height: 28px;
          border: 1px solid rgba(196,230,236,.25);
        }
        .brackets::before{ top:0; left:0; border-right:none; border-bottom:none; }
        .brackets::after{ top:0; right:0; border-left:none; border-bottom:none; }
        .brackets > span::before{ bottom:0; left:0; border-right:none; border-top:none; }
        .brackets > span::after{ bottom:0; right:0; border-left:none; border-top:none; }

        .skip{
          position: absolute; right: 28px; bottom: 24px; z-index: 3;
          background: transparent; border: none; color: var(--fg-3);
          font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
          font-family: var(--font-sans); cursor: pointer; padding: 8px 12px;
          border-radius: 8px; transition: color 200ms;
        }
        .skip:hover{ color: var(--fg-1); }

        .ticks{
          position: absolute; left: 50%; transform: translateX(-50%);
          display:flex; gap: 5px; color: var(--brand-4);
          opacity: 0; transition: opacity 600ms var(--ease-out);
        }
        .ticks.top{ top: 86px; } .ticks.bot{ bottom: 84px; }
        .intro.b1 .ticks{ opacity: .45; }
        .ticks span{ width:1px; height:8px; background: currentColor; display:block; }
        .ticks span:nth-child(odd){ height: 14px; }
      `}</style>

      <div className="intro-vignette" />
      <div className="grid-bg" />
      <div className="brackets"><span></span></div>

      <div className="v-tag">
        <span className="pip"></span>
        <span>Confidencial · Equipe SolarMarket</span>
      </div>

      <div className="ticks top">
        {Array.from({length: 13}).map((_, i) => <span key={i}></span>)}
      </div>
      <div className="ticks bot">
        {Array.from({length: 13}).map((_, i) => <span key={i}></span>)}
      </div>

      <div className="intro-stage">
        <div className="logo-stack">
          <span className="logo-ring"></span>
          <img src="assets/logo-solarmarket-mark.png" alt="" />
        </div>

        <div className="stamp-2">
          2.0
          <span className="ver">VER · BR</span>
        </div>

        <div className="headline">
          {["Algo", "grande", "está", "sendo"].map((w, i) => (
            <span key={i} className="word" style={{ transitionDelay: `${i*90}ms` }}>{w}</span>
          ))}
          <span className="word accent" style={{ transitionDelay: `${4*90}ms` }}>construído.</span>
        </div>

        <div className="sub">
          <span>SolarMarket</span> <span className="dot">·</span> <span>O novo ecossistema</span>
        </div>
      </div>

      <div className="stats">
        <span>SYS · 02</span>
        <span className="dot">·</span>
        <span>RIO DE JANEIRO</span>
        <span className="dot">·</span>
        <span>BUILD 2026</span>
      </div>

      <button className="skip" onClick={skip}>Pular intro →</button>
    </div>
  );
}

window.Intro = Intro;

// ===========================================================
// Gate — the pre-intro CTA the user must click to begin.
// Doubles as a first-gesture handler for audio.
// ===========================================================
function Gate({ onOpen }){
  const [pressed, setPressed] = useState(false);
  const [closing, setClosing] = useState(false);

  function go(){
    if (closing) return;
    setPressed(true);
    // FX flourish on click
    if (window.FX){
      window.FX.pulse({ x: window.innerWidth*0.5, y: window.innerHeight*0.5, duration: 1400, color: 'rgba(251,176,59,0.55)' });
      window.FX.sweep({ y: window.innerHeight*0.5, duration: 1100, color: 'rgba(251,176,59,0.45)' });
    }
    setTimeout(() => setClosing(true), 350);
    setTimeout(() => onOpen && onOpen(), 1100);
  }

  return (
    <div className={`gate ${closing ? 'gate-out' : ''} ${pressed ? 'gate-pressed' : ''}`}>
      <style>{`
        .gate{
          position: fixed; inset: 0; z-index: 45;
          background-color: #02060A;
          background-image: radial-gradient(ellipse at 50% 50%, rgba(0,49,58,.55) 0%, rgba(2,6,10,1) 70%);
          display: grid; place-items: center;
          overflow: hidden;
          transition: opacity 700ms var(--ease-out);
        }
        .gate-out{ opacity: 0; pointer-events: none; }
        .gate-grid{
          position:absolute; inset:0;
          background-image:
            linear-gradient(rgba(78,179,196,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(78,179,196,.05) 1px, transparent 1px);
          background-size: 80px 80px;
          mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 65%);
          -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 65%);
        }
        .gate-vignette{
          position:absolute; inset:0; pointer-events:none;
          background:
            radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.55), transparent 50%),
            radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.65), transparent 55%);
        }
        .gate-stage{
          position: relative; z-index: 2;
          display: flex; flex-direction: column; align-items: center; gap: 36px;
          text-align: center;
          padding: 0 24px;
        }
        .gate-mark{
          width: 56px; height: 56px;
          filter: drop-shadow(0 0 24px rgba(78,179,196,.6));
          opacity: 0; transform: translateY(-6px);
          animation: gateIn 800ms var(--ease-out) 100ms forwards;
        }
        .gate-eyebrow{
          display: inline-flex; align-items: center; gap: 10px;
          font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
          color: var(--fg-3); font-weight: 600;
          opacity: 0; transform: translateY(6px);
          animation: gateIn 800ms var(--ease-out) 280ms forwards;
        }
        .gate-eyebrow .pip{
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 10px var(--accent);
          animation: pipPulse 1.6s var(--ease-in-out) infinite;
        }
        @keyframes pipPulse{
          0%,100% { transform: scale(1); opacity: 1; }
          50%     { transform: scale(.6); opacity: .55; }
        }
        .gate-title{
          font-family: var(--font-display); font-weight: 600;
          font-size: clamp(20px, 2.2vw, 26px);
          letter-spacing: -0.01em;
          color: var(--fg-2);
          max-width: 22ch;
          opacity: 0; transform: translateY(8px);
          animation: gateIn 900ms var(--ease-out) 440ms forwards;
        }
        .gate-title em{
          font-style: normal;
          background: linear-gradient(180deg, #FFFFFF 0%, #4EB3C4 100%);
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        @keyframes gateIn{
          to { opacity: 1; transform: translateY(0); }
        }

        /* The button */
        .gate-cta{
          position: relative;
          border: none; cursor: pointer;
          font-family: var(--font-display); font-weight: 700;
          font-size: clamp(15px, 1.3vw, 17px);
          letter-spacing: .02em;
          color: #1A0E00;
          background: linear-gradient(180deg, #FFD27A 0%, #FBB03B 60%, #E69100 100%);
          padding: 18px 32px 18px 36px;
          border-radius: 999px;
          display: inline-flex; align-items: center; gap: 14px;
          box-shadow:
            0 0 0 8px rgba(251,176,59,.10),
            0 0 50px rgba(251,176,59,.45),
            0 20px 40px -10px rgba(0,0,0,.5);
          transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), filter 220ms;
          opacity: 0; transform: translateY(14px) scale(.94);
          animation: gateCtaIn 900ms var(--ease-out) 700ms forwards, ctaPulse 2.6s var(--ease-in-out) 1.8s infinite;
        }
        @keyframes gateCtaIn{
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes ctaPulse{
          0%,100% { box-shadow: 0 0 0 8px rgba(251,176,59,.10), 0 0 50px rgba(251,176,59,.45), 0 20px 40px -10px rgba(0,0,0,.5); }
          50%     { box-shadow: 0 0 0 14px rgba(251,176,59,.16), 0 0 80px rgba(251,176,59,.70), 0 20px 40px -10px rgba(0,0,0,.5); }
        }
        .gate-cta:hover{
          transform: translateY(-1px) scale(1.02);
          filter: brightness(1.06);
        }
        .gate-cta:active{ transform: translateY(0) scale(.99); }

        .gate-cta .cta-arrow{
          width: 22px; height: 22px; border-radius: 50%;
          background: rgba(26,14,0,.18);
          display: inline-flex; align-items: center; justify-content: center;
          transition: transform 220ms var(--ease-out), background 220ms;
        }
        .gate-cta:hover .cta-arrow{ background: rgba(26,14,0,.28); transform: translateX(2px); }
        .gate-cta .cta-arrow svg{ width: 12px; height: 12px; }

        .gate-pressed .gate-cta{
          animation: ctaBurst 900ms var(--ease-out) forwards;
        }
        @keyframes ctaBurst{
          0%   { transform: scale(1); filter: brightness(1); }
          30%  { transform: scale(.96); }
          60%  { transform: scale(1.06); filter: brightness(1.4); box-shadow: 0 0 0 40px rgba(251,176,59,.0), 0 0 120px rgba(251,176,59,.8), 0 20px 40px -10px rgba(0,0,0,.5); }
          100% { transform: scale(1.18); opacity: 0; filter: brightness(1.6); }
        }
        .gate-pressed .gate-stage > *:not(.gate-cta){ opacity: 0; transition: opacity 400ms var(--ease-out); }

        .gate-hint{
          font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
          color: var(--fg-4);
          opacity: 0; animation: gateIn 900ms var(--ease-out) 1100ms forwards;
        }

        /* Corner brackets */
        .gate-brackets{ position:absolute; inset: 40px; pointer-events:none; opacity: .55; }
        .gate-brackets::before, .gate-brackets::after,
        .gate-brackets > span::before, .gate-brackets > span::after{
          content:''; position: absolute; width: 28px; height: 28px;
          border: 1px solid rgba(196,230,236,.25);
        }
        .gate-brackets::before{ top:0; left:0; border-right:none; border-bottom:none; }
        .gate-brackets::after{ top:0; right:0; border-left:none; border-bottom:none; }
        .gate-brackets > span::before{ bottom:0; left:0; border-right:none; border-top:none; }
        .gate-brackets > span::after{ bottom:0; right:0; border-left:none; border-top:none; }
      `}</style>

      <div className="gate-grid"></div>
      <div className="gate-vignette"></div>
      <div className="gate-brackets"><span></span></div>

      <div className="gate-stage">
        <img className="gate-mark" src="assets/logo-solarmarket-mark.png" alt="" />
        <span className="gate-eyebrow">
          <span className="pip"></span>
          <span>SolarMarket · 2.0</span>
        </span>
        <h1 className="gate-title">O que você conhece<br/><em>está prestes a evoluir.</em></h1>

        <button className="gate-cta" type="button" onClick={go}>
          <span>Conhecer a 2.0</span>
          <span className="cta-arrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </span>
        </button>

      </div>
    </div>
  );
}

window.Gate = Gate;