// Header.jsx — Jetsites institutional site header
// Visual style ported from apps/proposals/proposta.html: glyph + brand text,
// scroll-spy underline on active section, sticky bar with backdrop blur.
// Mobile drawer kept for nav access in <1024px viewports.
const Header = () => {
  const [open, setOpen] = React.useState(false);
  const [activeId, setActiveId] = React.useState(null);

  // Body scroll lock when drawer open
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  // Scroll-spy: highlights the link of the section currently in viewport.
  React.useEffect(() => {
    if (!('IntersectionObserver' in window)) return;
    const ids = ['cases', 'metodo', 'estudio', 'contato'];
    const sections = ids
      .map((id) => document.getElementById(id))
      .filter(Boolean);
    if (!sections.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) setActiveId(entry.target.id);
        });
      },
      { rootMargin: '-40% 0px -50% 0px', threshold: 0 }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  const go = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const linkClass = (id) => `nav__link${activeId === id ? ' is-active' : ''}`;

  return (
    <header className="site__topbar" role="banner">
      <div className="topbar__inner">
        <a
          href="#home"
          className="topbar__brand"
          onClick={go('home')}
          aria-label="Jetsites · ir para o topo"
        >
          <span className="glyph" aria-hidden="true">J</span>
          Jet<em>sites</em>
        </a>

        <nav className="topbar__nav" aria-label="Navegação principal">
          <a href="#cases"   className={linkClass('cases')}   onClick={go('cases')}>Cases</a>
          <a href="#metodo"  className={linkClass('metodo')}  onClick={go('metodo')}>Método</a>
          <a href="#estudio" className={linkClass('estudio')} onClick={go('estudio')}>Estúdio</a>
          <a href="#contato" className={linkClass('contato')} onClick={go('contato')}>Contato</a>
        </nav>

        <button
          type="button"
          className="btn btn--accent btn--sm topbar__cta"
          onClick={go('contato')}
        >
          Pedir proposta <span className="arrow" aria-hidden="true">→</span>
        </button>

        <button
          type="button"
          className="nav__toggle"
          aria-label={open ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={open}
          aria-controls="mobile-nav"
          onClick={() => setOpen((o) => !o)}
        >
          <span className={`nav__toggle-bar ${open ? 'is-x-1' : ''}`}></span>
          <span className={`nav__toggle-bar ${open ? 'is-x-2' : ''}`}></span>
          <span className={`nav__toggle-bar ${open ? 'is-x-3' : ''}`}></span>
        </button>
      </div>

      <div
        id="mobile-nav"
        className={`nav__drawer ${open ? 'is-open' : ''}`}
        aria-hidden={!open}
      >
        <a href="#cases"   onClick={go('cases')}>Cases</a>
        <a href="#metodo"  onClick={go('metodo')}>Método</a>
        <a href="#estudio" onClick={go('estudio')}>Estúdio</a>
        <a href="#contato" onClick={go('contato')}>Contato</a>
        <button type="button" className="btn btn--accent" onClick={go('contato')}>
          Pedir proposta <span className="arrow" aria-hidden="true">→</span>
        </button>
      </div>
    </header>
  );
};

window.Header = Header;