/* global React, ReactDOM, LunaMascot, PortariaScene */

const { useEffect, useState, useRef, useCallback } = React;

/* ─────────────────── Hook: auto-playing timeline ───────────────────
 * Plays from 0→1 over `duration` ms. Starts when section becomes visible.
 * Exposes progress + controls.
 */
function useTimeline(ref, duration = 26000) {
  const [progress, setProgress] = useState(0);
  const [playing, setPlaying] = useState(false);
  const [hasAutoStarted, setHasAutoStarted] = useState(false);

  // Auto-start when scrolled into view
  useEffect(() => {
    const el = ref.current;
    if (!el || hasAutoStarted) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && e.intersectionRatio > 0.45 && !hasAutoStarted) {
            setHasAutoStarted(true);
            setPlaying(true);
          }
        });
      },
      { threshold: [0, 0.25, 0.5, 0.75, 1] }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [ref, hasAutoStarted]);

  // Animation loop
  useEffect(() => {
    if (!playing) return;
    let cancelled = false;
    // start so that current progress maps to "now"
    const startedAt = performance.now() - progress * duration;
    const tick = (now) => {
      if (cancelled) return;
      const elapsed = now - startedAt;
      if (elapsed >= duration) {
        setProgress(1);
        setPlaying(false);
        return;
      }
      setProgress(elapsed / duration);
      requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playing]);

  const toggle = useCallback(() => {
    setPlaying((p) => {
      if (!p && progress >= 1) setProgress(0);
      return !p;
    });
  }, [progress]);
  const restart = useCallback(() => { setProgress(0); setPlaying(true); }, []);
  const scrubTo = useCallback((t) => { setProgress(Math.max(0, Math.min(1, t))); setPlaying(false); }, []);

  return { progress, playing, toggle, restart, scrubTo };
}

/* ─────────────────── Phase captions ─────────────────── */
const PHASES = [
  { from: 0.00, to: 0.10, step: '01 / 06', title: 'Toda portaria começa o dia em silêncio.',         sub: 'Um porteiro, uma cancela e uma decisão a cada veículo que chega.' },
  { from: 0.10, to: 0.32, step: '02 / 06', title: 'Aí o movimento aperta.',                         sub: 'Moradores, visitantes, entregas e prestadores chegam ao mesmo tempo. A fila cresce e a decisão tem que ser rápida.' },
  { from: 0.32, to: 0.50, step: '03 / 06', title: 'O porteiro sozinho não dá conta.',                sub: 'Reconhecer placas, conferir cadastros, atender o interfone — tudo em segundos, com pressão de quem está esperando.' },
  { from: 0.50, to: 0.72, step: '04 / 06', title: 'É aí que a Luna chega.',                          sub: 'Um sistema de visão computacional acoplado à câmera da portaria — sem trocar equipamentos, sem obra.' },
  { from: 0.72, to: 0.82, step: '05 / 06', title: 'Câmera conectada ao porteiro.',                   sub: 'A Luna lê a placa, consulta o cadastro do condomínio e devolve a decisão antes do carro parar de fato.' },
  { from: 0.82, to: 1.00, step: '06 / 06', title: 'O fluxo volta — agora com retaguarda.',           sub: 'O porteiro continua no comando. A Luna só acelera, sinaliza riscos e registra tudo.' },
];

function getPhase(p) {
  return PHASES.find((ph) => p >= ph.from && p < ph.to) || PHASES[PHASES.length - 1];
}

/* ─────────────────── Nav ─────────────────── */
function Nav() {
  return (
    <nav className="nav">
      <a className="brand" href="#top">
        <span className="dot" />
        Luna
      </a>
      <div className="links">
        <a href="#como-funciona">Como funciona</a>
        <a href="#recursos">Recursos</a>
        <a href="#numeros">Números</a>
        <a href="#contato">Contato</a>
      </div>
      <a className="cta" href="#contato">Falar com a Luna</a>
    </nav>
  );
}

/* ─────────────────── Hero ─────────────────── */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-left">
        <div className="hero-eyebrow">
          <span className="pulse" />
          Sistema online · v1.4
        </div>

        <h1>
          A IA que fica<br/>
          ao lado<br/>
          do <em>porteiro.</em>
        </h1>

        <p className="lead">
          A Luna é uma assistente de visão computacional para portarias de condomínio.
          Ela reconhece o carro antes do interfone tocar e devolve ao porteiro a decisão de abrir, parar ou conferir — em segundos.
        </p>

        <div className="hero-actions">
          <a className="btn btn-primary" href="#contato">
            Pedir uma demonstração
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a className="btn btn-ghost" href="#como-funciona">Ver como funciona</a>
        </div>

        <div style={{ display: 'flex', gap: 24, marginTop: 16, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase' }}>
          <span>≈ 0,4 s por placa</span>
          <span>·</span>
          <span>+47 condomínios</span>
          <span>·</span>
          <span>0 obra na portaria</span>
        </div>
      </div>

      <div className="hero-right">
        <div className="hero-corner" style={{ top: 12, left: 12 }}>
          <span className="bar" /> mascote · idle
        </div>
        <div className="hero-corner" style={{ bottom: 12, right: 12 }}>
          UNIT-L01 <span className="bar" />
        </div>

        <div className="hero-luna-stage">
          <LunaMascot size={320} state="idle" />
          <div className="luna-shadow" />
        </div>
      </div>

      <div className="hero-scroll-hint">
        <div>Veja a Luna em ação</div>
        <div className="line" />
      </div>
    </section>
  );
}

/* ─────────────────── Cinematic auto-playing scene ─────────────────── */
function Cinematic() {
  const ref = useRef(null);
  const { progress, playing, toggle, restart, scrubTo } = useTimeline(ref, 26000);
  const phase = getPhase(progress);
  const phaseIdx = PHASES.indexOf(phase);

  // HUD telemetry that changes with phase
  const queueLen = (() => {
    if (progress < 0.10) return 0;
    if (progress < 0.32) return Math.min(5, Math.floor((progress - 0.10) / 0.045) + 1);
    if (progress < 0.45) return 5;
    if (progress < 0.78) return 0;
    return Math.floor(1 + (Math.sin(progress * 70) + 1));
  })();

  const avgWait = (() => {
    if (progress < 0.10) return '0:00';
    if (progress < 0.45) return `${Math.floor(lerp(0, 4, (progress - 0.10) / 0.32))}:${String(Math.floor(lerp(0, 58, (progress - 0.10) / 0.32))).padStart(2, '0')}`;
    if (progress < 0.78) return '—';
    return '0:08';
  })();

  const sysStatus = progress < 0.50 ? 'OFFLINE' : progress < 0.72 ? 'CONECTANDO' : 'ATIVO';

  // scrubber click → seek
  const scrubRef = useRef(null);
  const handleScrub = (e) => {
    const r = scrubRef.current.getBoundingClientRect();
    const t = (e.clientX - r.left) / r.width;
    scrubTo(t);
  };

  return (
    <section className="cinematic" ref={ref}>
      <div className="stage">
        <PortariaScene progress={progress} />

        {/* HUD left */}
        <div className="stage-hud">
          <div className="row"><span className="label">setor</span><span className="val">PORTARIA · NORTE</span></div>
          <div className="row"><span className="label">data</span><span className="val">SÁB 21·MAI · 18:42</span></div>
          <div className="row">
            <span className="label">sistema</span>
            <span className="pip" style={{ background: sysStatus === 'ATIVO' ? '#5fd29a' : sysStatus === 'CONECTANDO' ? '#f4c34d' : '#E74C3C' }} />
            <span className="val">{sysStatus}</span>
          </div>
        </div>

        {/* HUD right */}
        <div className="stage-hud-right">
          <div>fila atual: <span style={{ color: queueLen > 3 ? '#E74C3C' : queueLen > 0 ? '#f4c34d' : '#5fd29a' }}>{queueLen}</span></div>
          <div>espera média: <span style={{ color: 'var(--ink-0)' }}>{avgWait}</span></div>
          <div>câmera-01: <span style={{ color: progress > 0.72 ? '#5fd29a' : '#E74C3C' }}>{progress > 0.72 ? '◉ rec' : '○ off'}</span></div>
        </div>

        {/* Caption */}
        <div className="stage-caption" key={phaseIdx}>
          <div className="step">{phase.step}</div>
          <div className="title">{phase.title}</div>
          <div className="sub">{phase.sub}</div>
        </div>

        {/* Playback controls */}
        <div className="stage-controls">
          <button onClick={toggle} aria-label={playing ? 'Pausar' : 'Tocar'}>
            {playing ? (
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
            ) : (
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5 L7 19 L19 12 Z"/></svg>
            )}
          </button>

          <div className="stage-scrub" ref={scrubRef} onClick={handleScrub}>
            <div className="fill" style={{ width: `${progress * 100}%` }} />
            {PHASES.map((ph, i) => (
              <span
                key={i}
                className={`marker ${progress >= ph.from ? 'passed' : ''}`}
                style={{ left: `${ph.from * 100}%` }}
              />
            ))}
            <div className="head" style={{ left: `${progress * 100}%` }} />
          </div>

          <span style={{ minWidth: 48, textAlign: 'right' }}>
            {String(Math.floor(progress * 26)).padStart(2, '0')}s
          </span>

          <button className="secondary" onClick={restart} aria-label="Recomeçar">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

const lerp = (a, b, t) => a + (b - a) * t;

/* ─────────────────── Como funciona ─────────────────── */
function ComoFunciona() {
  return (
    <section className="section" id="como-funciona">
      <div className="eyebrow">como funciona</div>
      <h2>Três passos. Zero obra na portaria.</h2>
      <p className="lede">
        A Luna se conecta à câmera que o condomínio já tem. Em uma manhã, a portaria passa a ler placas, consultar cadastros e sugerir decisões — sem trocar equipamento, sem tirar o porteiro do comando.
      </p>

      <div className="howitworks">
        <div className="step-card">
          <div className="step-num">01</div>
          <div className="tag">instalação</div>
          <h4>Conectamos à câmera existente</h4>
          <p>Nosso técnico aponta a câmera para a entrada e plugga a Luna ao circuito atual do condomínio. Sem obra, sem cabo novo passando pela laje.</p>
        </div>
        <div className="step-card">
          <div className="step-num">02</div>
          <div className="tag">cadastro</div>
          <h4>Carregamos o cadastro do prédio</h4>
          <p>Placas de moradores, frota de serviço, lista de visitantes recorrentes. A Luna aprende quem é quem em menos de uma semana.</p>
        </div>
        <div className="step-card">
          <div className="step-num">03</div>
          <div className="tag">rotina</div>
          <h4>O porteiro segue no comando</h4>
          <p>A Luna sugere — autorizar, reter para conferência, alertar. O porteiro confirma com um toque. Tudo fica registrado em vídeo e log.</p>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── Recursos ─────────────────── */
function Recursos() {
  const items = [
    { num: 'F1', title: 'Leitura de placa em tempo real', desc: 'Reconhecimento de placas Mercosul e modelo antigo, mesmo com chuva, sol baixo ou farol aceso.' },
    { num: 'F2', title: 'Cadastro vivo de moradores', desc: 'Painel para a administração liberar visitantes, frota fixa e prestadores recorrentes sem ligar para a portaria.' },
    { num: 'F3', title: 'Decisão sugerida ao porteiro', desc: 'A tela do porteiro recebe verde, amarelo ou vermelho. A palavra final continua humana.' },
    { num: 'F4', title: 'Log auditável de cada entrada', desc: 'Vídeo, placa, horário e quem autorizou — pronto para conferência de síndico ou seguradora.' },
    { num: 'F5', title: 'Alerta de carro suspeito', desc: 'Placa fora do cadastro, veículo rondando o quarteirão ou tentativa de entrada em horário incomum disparam aviso imediato.' },
    { num: 'F6', title: 'Integra com o que já existe', desc: 'Funciona com câmeras IP da maioria dos fornecedores e interfones digitais. Sem amarração com fabricante.' },
  ];
  return (
    <section className="section" id="recursos">
      <div className="eyebrow">recursos</div>
      <h2>O que a Luna entrega na portaria.</h2>

      <div className="features">
        {items.map((it) => (
          <div className="feature" key={it.num}>
            <div className="num">{it.num}</div>
            <h3>{it.title}</h3>
            <p>{it.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ─────────────────── Numbers ─────────────────── */
function Numeros() {
  return (
    <section className="section" id="numeros" style={{ paddingTop: 80 }}>
      <div className="eyebrow">números do piloto</div>
      <h2>Menos fila. Menos chamada. Mais registro.</h2>
      <p className="lede">Resultados médios após 60 dias em condomínios residenciais de médio porte (entre 80 e 240 unidades).</p>

      <div className="metrics">
        <div className="metric">
          <div className="big"><em>−68%</em></div>
          <div className="lbl">tempo médio de espera na cancela em horário de pico</div>
        </div>
        <div className="metric">
          <div className="big"><em>0,4s</em></div>
          <div className="lbl">para ler a placa e cruzar com o cadastro do condomínio</div>
        </div>
        <div className="metric">
          <div className="big"><em>+47</em></div>
          <div className="lbl">condomínios já em operação no Sul e Sudeste do país</div>
        </div>
        <div className="metric">
          <div className="big"><em>100%</em></div>
          <div className="lbl">das entradas registradas em vídeo, com placa e horário</div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── CTA ─────────────────── */
function CTA() {
  const [sent, setSent] = useState(false);
  return (
    <section className="cta-section" id="contato">
      <div className="cta-card">
        <div>
          <div className="eyebrow">próximo passo</div>
          <h3>Quer ver a Luna na sua portaria?</h3>
          <p>Marcamos uma visita técnica de 40 minutos. Mapeamos a câmera atual, o fluxo da entrada e devolvemos uma proposta sob medida — sem compromisso e sem trocar nada do que já está instalado.</p>

          <div style={{ display: 'flex', gap: 24, marginTop: 24, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase' }}>
            <div>
              <div style={{ color: 'var(--ink-1)' }}>+55 (51) 99999·0000</div>
              <div>seg–sex · 9h–18h</div>
            </div>
            <div>
              <div style={{ color: 'var(--ink-1)' }}>ola@luna.cam</div>
              <div>resposta em até 4h úteis</div>
            </div>
          </div>
        </div>

        <form className="cta-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          {sent ? (
            <div style={{ padding: '20px 0', textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--display)', fontSize: 22, marginBottom: 8 }}>Recebido. ✓</div>
              <div style={{ color: 'var(--ink-1)', fontSize: 14 }}>A Luna te chama no próximo dia útil.</div>
            </div>
          ) : (
            <React.Fragment>
              <div>
                <label>nome do condomínio</label>
                <input type="text" placeholder="Ed. Solar das Acácias" required />
              </div>
              <div>
                <label>seu nome</label>
                <input type="text" placeholder="Como te chamamos" required />
              </div>
              <div>
                <label>whatsapp</label>
                <input type="tel" placeholder="(51) 9 9999 0000" required />
              </div>
              <button type="submit">Quero a visita técnica →</button>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

/* ─────────────────── Footer ─────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div>© 2026 · Luna Portaria Inteligente</div>
      <div>Curitiba · PR</div>
      <div>v1.4 · build 240521</div>
    </footer>
  );
}

/* ─────────────────── App ─────────────────── */
function App() {
  return (
    <React.Fragment>
      <div className="bg-grid" />
      <div className="bg-noise" />
      <Nav />
      <Hero />
      <Cinematic />
      <ComoFunciona />
      <Recursos />
      <Numeros />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);