// Navegação e rodapé compartilhados entre todas as páginas.
const NavBar = ({ active = 'inicio' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    const onKeyDown = (event) => {
      if (event.key === 'Escape') setMenuOpen(false);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('keydown', onKeyDown);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('keydown', onKeyDown);
    };
  }, []);

  const links = [
    { id: 'inicio', label: 'Início', href: 'index.html' },
    { id: 'programacao', label: 'Programação', href: 'programacao.html' },
    { id: 'palestrantes', label: 'Palestrantes', href: 'palestrantes.html' },
    { id: 'submissao', label: 'Submissão', href: 'submissao.html' },
    { id: 'inscricoes', label: 'Inscrições', href: 'inscricoes.html' },
    { id: 'sobre', label: 'Sobre', href: 'index.html#sobre' },
  ];

  const renderLinks = (mobile = false) => links.map((link) => (
    <li key={link.id}>
      <a
        href={link.href}
        className={active === link.id ? 'active' : ''}
        aria-current={active === link.id ? 'page' : undefined}
        onClick={() => mobile && setMenuOpen(false)}
      >
        {link.label}
      </a>
    </li>
  ));

  return (
    <>
      <nav
        className={`nav ${menuOpen ? 'menu-open' : ''}`}
        aria-label="Navegação principal"
        style={{
          background: scrolled || menuOpen ? 'rgba(251, 246, 235, 0.98)' : 'rgba(251, 246, 235, 0.88)',
          boxShadow: scrolled ? '0 4px 20px rgba(107, 26, 46, 0.08)' : 'none',
        }}
      >
        <div className="nav-inner">
          <a href="index.html" className="nav-brand" aria-label="XI CAMES 2026 - início">
            <img src="assets/logo-oficial.png" alt="" width="48" height="48"/>
            <span>
              <span className="nav-brand-name">CAMES</span>
              <span className="nav-brand-year">2026</span>
            </span>
          </a>

          <ul className="nav-links">{renderLinks()}</ul>
          <a href="inscricoes.html" className="nav-cta">Inscreva-se</a>

          <button
            type="button"
            className="nav-toggle"
            aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu'}
            aria-expanded={menuOpen}
            aria-controls="mobile-navigation"
            onClick={() => setMenuOpen((open) => !open)}
          >
            <span/>
            <span/>
            <span/>
          </button>
        </div>

        <div id="mobile-navigation" className="nav-mobile" hidden={!menuOpen}>
          <ul>{renderLinks(true)}</ul>
          <a href="inscricoes.html" className="nav-cta nav-mobile-cta" onClick={() => setMenuOpen(false)}>
            Inscreva-se
          </a>
        </div>
      </nav>

      <a
        className="floating-ticket"
        href="https://www.even3.com.br/tickets/get/cames-xi-770767?even3_orig=get_tickets"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Comprar ingressos do XI CAMES na Even3"
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 5.5h16v4a2.5 2.5 0 0 0 0 5v4H4v-4a2.5 2.5 0 0 0 0-5v-4Z"/>
          <path d="M9 5.5v13"/>
        </svg>
        <span>Ingressos</span>
      </a>
    </>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="footer-grid">
      <div>
        <div className="footer-brand">
          <div className="footer-seal">XI</div>
          <div>
            <div className="footer-brand-title">CAMES 2026</div>
            <div className="footer-brand-subtitle">CONGRESSO ACADÊMICO DE MEDICINA E SAÚDE</div>
          </div>
        </div>
        <p className="footer-theme">O Papel da Ciência em Tempos de Desinformação.</p>
      </div>
      <div>
        <h4>Navegação</h4>
        <a href="index.html">Início</a>
        <a href="inscricoes.html">Inscrições</a>
        <a href="palestrantes.html">Palestrantes</a>
        <a href="programacao.html">Programação</a>
        <a href="submissao.html">Submissão</a>
      </div>
      <div>
        <h4>Evento</h4>
        <p>6, 7 e 8 de novembro de 2026</p>
        <p>Centro Universitário Atenas</p>
        <p>Paracatu - MG</p>
        <a href="mailto:camesxicontato@gmail.com">camesxicontato@gmail.com</a>
      </div>
      <div>
        <h4>Redes</h4>
        <a href="https://instagram.com/11cames" target="_blank" rel="noopener noreferrer">
          Instagram @11cames
        </a>
      </div>
    </div>
    <div className="footer-bottom">
      <div>© 2026 · XI CAMES · Todos os direitos reservados</div>
      <div>Paracatu - MG</div>
    </div>
  </footer>
);

Object.assign(window, { NavBar, Footer });