/* Header com navegacao ancorada, scroll suave, secao ativa e menu mobile */

const NAV_LINKS = [
  { id: 'inicio', label: 'Início' },
  { id: 'solucoes', label: 'Soluções' },
  { id: 'recursos', label: 'Recursos' },
  { id: 'como-funciona', label: 'Como Funciona' },
  { id: 'precos', label: 'Preços' },
  { id: 'contato', label: 'Contato' }
];

function scrollToSection(id) {
  const el = document.getElementById(id);
  if (!el) return;
  el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  if (history.replaceState) history.replaceState(null, '', '#' + id);
}
window.scrollToSection = scrollToSection;

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState('inicio');

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 20);

      // secao ativa: a ultima cujo topo ja passou do offset do header.
      // No fim da pagina, forca a ultima secao (limite fisico de scroll).
      const offset = 120;
      let current = NAV_LINKS[0].id;
      for (const { id } of NAV_LINKS) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= offset) current = id;
      }
      const atBottom = window.innerHeight + window.scrollY >=
        document.body.scrollHeight - 4;
      if (atBottom) current = NAV_LINKS[NAV_LINKS.length - 1].id;
      setActive(current);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const go = (e, id) => {
    e.preventDefault();
    setOpen(false);
    scrollToSection(id);
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'all .3s ease',
      backdropFilter: scrolled || open ? 'blur(20px) saturate(180%)' : 'blur(0)',
      background: scrolled || open ? 'rgba(10, 13, 20, 0.75)' : 'transparent',
      borderBottom: scrolled || open ? '1px solid rgba(124, 58, 237, 0.18)' : '1px solid transparent'
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76
      }}>
        <a href="#inicio" onClick={e => go(e, 'inicio')} style={{ display: 'flex', textDecoration: 'none' }}>
          <CodeKidLogo size={28} />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }} className="hide-mobile">
          {NAV_LINKS.map(({ id, label }) => {
            const isActive = active === id;
            return (
              <a key={id} href={'#' + id} onClick={e => go(e, id)} style={{
                color: isActive ? '#fff' : 'var(--text-dim)',
                fontSize: 14, fontWeight: 500, textDecoration: 'none',
                position: 'relative', transition: 'color .2s', paddingBottom: 4
              }}
              onMouseEnter={e => e.currentTarget.style.color = '#fff'}
              onMouseLeave={e => e.currentTarget.style.color = isActive ? '#fff' : 'var(--text-dim)'}>
                {label}
                <span style={{
                  position: 'absolute', left: 0, right: 0, bottom: -2, height: 2, borderRadius: 2,
                  background: 'var(--accent, #00E5FF)',
                  boxShadow: '0 0 8px var(--accent, #00E5FF)',
                  transform: isActive ? 'scaleX(1)' : 'scaleX(0)',
                  transformOrigin: 'left', transition: 'transform .25s ease'
                }} />
              </a>
            );
          })}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#contato" onClick={e => go(e, 'contato')} className="btn btn-primary hide-mobile">
            Começar Agora
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>

          {/* Botao hamburger — so no mobile */}
          <button aria-label="Menu" onClick={() => setOpen(o => !o)} className="show-mobile" style={{
            width: 42, height: 42, borderRadius: 10, display: 'none',
            alignItems: 'center', justifyContent: 'center',
            background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', cursor: 'pointer'
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round">
              {open
                ? <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>
                : <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>}
            </svg>
          </button>
        </div>
      </div>

      {/* Painel mobile */}
      <div className="show-mobile" style={{
        display: 'none',
        maxHeight: open ? 460 : 0, overflow: 'hidden',
        transition: 'max-height .3s ease',
        borderTop: open ? '1px solid rgba(124,58,237,0.18)' : '1px solid transparent'
      }}>
        <div className="container" style={{ padding: '10px 32px 20px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {NAV_LINKS.map(({ id, label }) => (
            <a key={id} href={'#' + id} onClick={e => go(e, id)} style={{
              color: active === id ? '#fff' : 'var(--text-dim)',
              fontSize: 15, fontWeight: 500, textDecoration: 'none',
              padding: '12px 8px', borderRadius: 8,
              background: active === id ? 'rgba(0,229,255,0.08)' : 'transparent'
            }}>{label}</a>
          ))}
          <a href="#contato" onClick={e => go(e, 'contato')} className="btn btn-primary" style={{ justifyContent: 'center', marginTop: 10 }}>
            Começar Agora
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .hide-mobile { display: none !important; }
          .show-mobile { display: flex !important; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;