// Nav + Hero
function Nav() {
  const [open, setOpen] = useState(false);

  function close() { setOpen(false); }

  return (
    <>
      <nav className="nav">
        <div className="shell nav-inner">
          <a href="#top" className="logo" onClick={close}>
            <img src="assets/img/logo-icon.png" className="logo-mark" width="36" height="36" alt="Nexalyze" />
            <span className="logo-text"><span className="n">Nex</span><span className="tail">alyze</span></span>
          </a>
          <ul>
            <li><a className="link" href="#services">Serviços</a></li>
            <li><a className="link" href="#method">Método</a></li>
            <li><a className="link" href="#portfolio">Portfólio</a></li>
            <li><a className="link" href="#results">Resultados</a></li>
            <li><a className="link" href="#contact">Contato</a></li>
          </ul>
          <div className="nav-cta">
            <a className="btn btn-ghost" href="#method">Como trabalhamos</a>
            <a className="btn btn-primary" href="https://wa.me/5579988595156" target="_blank" rel="noopener noreferrer">Conversar <span aria-hidden>→</span></a>
            <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label={open ? "Fechar menu" : "Abrir menu"} aria-expanded={open}>
              <span className={"nav-burger-icon" + (open ? " is-open" : "")} />
            </button>
          </div>
        </div>
      </nav>
      {open && (
        <div className="nav-mobile-menu" role="dialog" aria-modal="true">
          <a className="nav-mobile-link" href="#services" onClick={close}>Serviços</a>
          <a className="nav-mobile-link" href="#method"   onClick={close}>Método</a>
          <a className="nav-mobile-link" href="#portfolio" onClick={close}>Portfólio</a>
          <a className="nav-mobile-link" href="#results"  onClick={close}>Resultados</a>
          <a className="nav-mobile-link" href="#contact"  onClick={close}>Contato</a>
          <div className="nav-mobile-cta-wrap">
            <a className="btn btn-primary nav-mobile-cta" href="https://wa.me/5579988595156" target="_blank" rel="noopener noreferrer" onClick={close}>
              Conversar no WhatsApp →
            </a>
          </div>
        </div>
      )}
    </>
  );
}

// Hero with live rotating "lens" - different data views cycle
function Hero() {
  const [tab, setTab] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setTab(x => (x + 1) % 3), 4200);
    return () => clearInterval(t);
  }, [paused]);

  const datasets = [
    { label: "Receita projetada (R$)", series: [48, 52, 49, 58, 63, 61, 72, 80, 77, 92, 104, 118], stroke: "#2BE876", yPrefix: "R$", yUnit: "k", delta: "+38.4%" },
    { label: "Tempo por tarefa (min)", series: [42, 40, 35, 32, 28, 24, 22, 18, 16, 12, 10, 7], stroke: "#1E9FD4", yPrefix: "", yUnit: " min", delta: "−83%", invert: true },
    { label: "Decisões automatizadas/dia", series: [12, 18, 22, 30, 41, 58, 77, 98, 124, 156, 192, 238], stroke: "#F5C542", yPrefix: "", yUnit: "", delta: "+1880%" },
  ];
  const d = datasets[tab];
  const last = d.series[d.series.length - 1];

  return (
    <header className="hero" id="top">
      <HexBackdrop />
      <div className="shell hero-grid">
        <div>
          <Eyebrow>analise · decida · vença</Eyebrow>
          <h1 style={{marginTop: 16}}>
            Dados que <span className="text-grad">enxergam</span> o que seu time ainda não
            <span className="eye-hl"> viu</span>.
          </h1>
          <p className="hero-sub">
            A Nexalyze transforma planilhas silenciosas, sistemas desconexos e tarefas repetitivas em decisões claras - através de análise de dados, desenvolvimento sob medida e automação de rotinas.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contact">Agendar diagnóstico gratuito</a>
            <a className="btn btn-ghost" href="#services">Ver serviços</a>
          </div>
          <div className="hero-meta">
            <div className="kv"><span className="k">Entrega média</span><span className="v">2–6 semanas</span></div>
            <div className="kv"><span className="k">Stack</span><span className="v">Full Stack</span></div>
            <div className="kv"><span className="k">Base</span><span className="v">Aracaju · remoto</span></div>
          </div>
        </div>

        <div className="console" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          <div className="console-head">
            <span><span className="dot" />LIVE · nexalyze.telemetry/v1</span>
            <span>node_01 · 24ms</span>
          </div>
          <div className="console-body">
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 10}}>
              <div>
                <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase'}}>{d.label}</div>
                <div className="display" style={{fontSize: 38, fontWeight: 600, marginTop: 4, letterSpacing: '-0.03em'}}>
                  {d.yPrefix}{Math.round(last)}{d.yUnit}
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em'}}>Δ 12 MESES</div>
                <div style={{color: d.invert ? '#2BE876' : '#2BE876', fontFamily: 'Space Grotesk', fontSize: 20, fontWeight: 600}}>{d.delta}</div>
              </div>
            </div>
            <div style={{height: 220}}>
              <MiniChart data={d.series} stroke={d.stroke} />
            </div>
            <div style={{display:'flex', gap: 6, marginTop: 14}}>
              {datasets.map((x, i) => (
                <button key={i} onClick={() => setTab(i)} style={{
                  flex: 1, padding: '8px 10px', background: i===tab ? 'rgba(43,232,118,0.08)' : 'transparent',
                  border: '1px solid ' + (i===tab ? 'rgba(43,232,118,0.4)' : 'var(--line)'),
                  color: i===tab ? 'var(--ink)' : 'var(--ink-3)',
                  borderRadius: 4, fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.06em', cursor: 'pointer', textAlign:'left'
                }}>
                  0{i+1} · {x.label.split(' ')[0].toUpperCase()}
                </button>
              ))}
            </div>
          </div>
          {/* corner circuit ornaments */}
          <svg width="90" height="90" style={{position:'absolute', top: -30, right: -30, opacity: 0.35}} viewBox="0 0 90 90" fill="none">
            <circle cx="70" cy="20" r="3" fill="#2BE876" />
            <path d="M70 20 L30 20 L30 60" stroke="#2BE876" strokeWidth="1" />
            <circle cx="30" cy="60" r="2" fill="#2BE876" />
          </svg>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, Hero });