// Header + Topbar + WhatsApp floating button
const Topbar = () => {
  const messages = window.ABACO.topbarMessages;
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((x) => (x + 1) % messages.length), 5000);
    return () => clearInterval(t);
  }, [messages.length]);
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-ticker" key={i}>
          <span className="topbar-dot" /> {messages[i]}
        </div>
        <div className="topbar-actions">
          <a href="#">Portal do aluno</a>
          <span className="topbar-sep">·</span>
          <a href="#">Trabalhe conosco</a>
        </div>
      </div>
    </div>
  );
};

const Logo = ({ inverted }) => (
  <a href="#top" className={"abc-logo" + (inverted ? " inv" : "")}>
    <img src="assets/logo-abaco.png" alt="Colégio Ábaco"
         className={"abc-logo-img" + (inverted ? " inv" : "")} />
  </a>
);

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const nav = [
    { label: 'O Ábaco', href: '#why' },
    { label: 'Ensinos', href: '#ensinos' },
    { label: 'Extracurriculares', href: '#extras' },
    { label: 'Projetos', href: '#projetos' },
    { label: 'Famílias', href: '#depoimentos' },
    { label: 'Unidades', href: '#unidades' },
  ];
  return (
    <header className={"site-header " + (scrolled ? "scrolled" : "")}>
      <div className="container header-inner">
        <Logo />
        <nav className={"site-nav " + (open ? "open" : "")}>
          {nav.map((n) => (
            <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <a href="#matricula" className="btn btn-primary">Matricule-se 2026</a>
          <button className="header-burger" onClick={() => setOpen((o) => !o)} aria-label="menu">
            <span /><span /><span />
          </button>
        </div>
      </div>
    </header>
  );
};

const WhatsAppFAB = () => {
  return (
    <a className="wa-fab" href={`https://wa.me/${window.ABACO.whatsapp}`} target="_blank" rel="noopener" aria-label="WhatsApp">
      <svg viewBox="0 0 32 32" width="28" height="28" fill="white">
        <path d="M16 3C9 3 3.4 8.6 3.4 15.6c0 2.5.7 4.9 2 7L3 29l6.6-2.3a12.6 12.6 0 0 0 6.4 1.7c7 0 12.6-5.6 12.6-12.6S23 3 16 3zm0 22.7c-2 0-4-.5-5.7-1.6l-.4-.2-3.9 1.4 1.3-3.8-.3-.4a10.4 10.4 0 1 1 9 4.6zm5.7-7.8c-.3-.2-1.8-.9-2.1-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1c-.3-.2-1.3-.5-2.6-1.6a9.8 9.8 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.4.3-.6s0-.5-.1-.6c-.1-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4s-1.2 1.2-1.2 2.8 1.2 3.3 1.4 3.5c.2.3 2.3 3.6 5.6 5 .8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4 0-.1-.2-.2-.5-.3z" />
      </svg>
      <span>Fale com a gente</span>
    </a>
  );
};

window.Topbar = Topbar;
window.Header = Header;
window.WhatsAppFAB = WhatsAppFAB;