// Shared primitives for the AI Agents Lab LP

function PrimaryButton({ href = '#inscricao', children, onClick, style }) {
  return (
    <a className="primary-button" href={href} onClick={onClick} style={style}>
      <span className="label">{children}</span>
      <span className="button-elipse" />
    </a>
  );
}

function SecondaryButton({ href = '#', children, onClick }) {
  return (
    <a className="secondary-button" href={href} onClick={onClick}>
      <span className="label">{children}</span>
      <span className="icon-pill">
        <img src="assets/icons/Arrow.svg" alt="" width="16" />
      </span>
    </a>
  );
}

function EventPill({ compact }) {
  return (
    <div className="event-pill" style={compact ? { padding: '.4rem .75rem', fontSize: '.75rem' } : undefined}>
      <span className="dot" />
      <span>18 e 25 jun</span>
      <span className="divider" />
      <span>São Paulo</span>
      <span className="divider" />
      <span>9h–13h</span>
    </div>
  );
}

function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <div className={'navbar' + (scrolled ? ' is-scrolled' : '') + (open ? ' is-open' : '')}>
      <div className="padding-global">
        <div className="container mid">
          <div className="navbar-row">
            <a href="#top" className="navbar-brand" onClick={close}>
              <img src="assets/logo-maitha-negativo.svg" alt="Maitha tech" />
            </a>
            <nav className="navbar-links">
              <a href="#por-que" onClick={close}>Sobre a imersão</a>
              <a href="#ai7" onClick={close}>Metodologia</a>
              <a href="#faq" onClick={close}>Dúvidas</a>
              <PrimaryButton href="#inscricao" onClick={close}>Inscreva-se</PrimaryButton>
            </nav>
            <div className="navbar-meta">
              <EventPill compact />
              <PrimaryButton href="#inscricao" onClick={close}>Inscreva-se</PrimaryButton>
            </div>
            <button
              type="button"
              className="navbar-burger"
              aria-label={open ? 'Fechar menu' : 'Abrir menu'}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
            >
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div className="footer">
      <div className="footer-brand">
        <img src="assets/logo-maitha-negativo.svg" alt="Maitha tech" />
      </div>
      <div className="footer-links">
        <a href="https://maitha.com.br/" target="_blank" rel="noreferrer">Site</a>
        <span className="footer-divider" />
        <a href="https://www.instagram.com/maithatech/" target="_blank" rel="noreferrer">Instagram</a>
        <span className="footer-divider" />
        <a href="https://br.linkedin.com/company/maitha-tech" target="_blank" rel="noreferrer">Linkedin</a>
      </div>
      <div className="footer-credits">© AI Agents Lab é uma realização da Maitha Tech · São Paulo</div>
    </div>
  );
}

Object.assign(window, { PrimaryButton, SecondaryButton, EventPill, Navbar, Footer });