/* Alis AI — landing: primitivos + nav + footer + modal + fab */

function Button({ variant = "primary", size, block, href, children, onClick, icon }) {
  const cls = ["btn", "btn--" + variant, size === "lg" && "btn--lg", block && "btn--block"].filter(Boolean).join(" ");
  const inner = [children, icon && React.createElement(Icon, { name: icon, key: "i" })];
  if (href) return React.createElement("a", { className: cls, href, onClick }, inner);
  return React.createElement("button", { className: cls, onClick }, inner);
}

function Eyebrow({ children, invert }) {
  return <p className={"eyebrow" + (invert ? " eyebrow--invert" : "")}>{children}</p>;
}

function SectionHead({ eyebrow, title, sub }) {
  return (
    <div className="section__head reveal">
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="section__title">{title}</h2>
      {sub && <p className="section__sub">{sub}</p>}
    </div>
  );
}

function Brand({ onDark }) {
  return (
    <a className="brand" href="#top">
      <img className="brand__mark" src="assets/logo-mark.svg" alt="" />
      <span className="brand__name">Alis<b> AI</b></span>
    </a>
  );
}

const NAV_LINKS = [
  ["Funcionalidades", "#features"],
  ["Como funciona", "#how"],
  ["Para quem é", "#usecases"],
  ["Planos", "#pricing"],
  ["Dúvidas", "#faq"],
];

function Nav({ onSignup }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    fn();
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="container nav__inner">
        <Brand />
        <div className="nav__links">
          {NAV_LINKS.map(([t, h]) => <a className="nav__link" key={h} href={h}>{t}</a>)}
        </div>
        <div className="nav__spacer" />
        <div className="nav__actions">
          <Button variant="ghost" onClick={onSignup}>Entrar</Button>
          <Button variant="primary" onClick={onSignup}>Criar conta</Button>
        </div>
        <button className="nav__burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          <Icon name={open ? "x" : "menu"} />
        </button>
      </div>
      <div className={"nav__mobile" + (open ? " is-open" : "")}>
        {NAV_LINKS.map(([t, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
        <a href="#" onClick={(e) => { e.preventDefault(); setOpen(false); onSignup(); }}>Testar 14 dias →</a>
      </div>
    </nav>
  );
}

const FOOTER_COLS = [
  ["Produto", ["Planos", "Funcionalidades", "API", "Roadmap", "Changelog"]],
  ["Empresa", ["Sobre", "Blog", "Vagas", "Contato"]],
  ["Recursos", ["Documentação", "Tutoriais", "Comunidade", "Suporte"]],
  ["Legal", ["Termos de uso", "Privacidade", "LGPD", "Cookies"]],
];

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <div className="brand" style={{ pointerEvents: "none" }}>
              <img className="brand__mark" src="assets/logo-mark.svg" alt="" />
              <span className="brand__name" style={{ color: "#fff" }}>Alis<b style={{ color: "var(--purple-400)" }}> AI</b></span>
            </div>
            <p className="footer__tag">Co-piloto de WhatsApp pra times que querem render mais. Feito no Brasil.</p>
          </div>
          {FOOTER_COLS.map(([h, items]) => (
            <div className="footer__col" key={h}>
              <h4>{h}</h4>
              {items.map(i => <a key={i} href="#">{i}</a>)}
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span className="footer__copy">© 2026 Alis AI. Feito no Brasil, pra quem atende muito no WhatsApp.</span>
          <div className="footer__social">
            {["instagram", "linkedin", "youtube", "twitter"].map(n => (
              <a key={n} href="#" aria-label={n}><Icon name={n} /></a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFab({ onClick }) {
  return (
    <button className="wfab" onClick={onClick}>
      <Icon name="whatsapp" /> Testar a Alis
    </button>
  );
}

function SignupModal({ onClose }) {
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    const fn = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", fn);
    return () => window.removeEventListener("keydown", fn);
  }, []);
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal__panel" onClick={e => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Fechar"><Icon name="x" size={20} /></button>
        {done ? (
          <div className="modal__ok">
            <div className="ico"><Icon name="check" /></div>
            <h3 className="modal__title">Conta criada!</h3>
            <p className="modal__sub">Agora é só escanear o QR Code pra conectar seu WhatsApp. (Isto é uma demonstração.)</p>
            <Button variant="primary" block onClick={onClose}>Fechar</Button>
          </div>
        ) : (
          <React.Fragment>
            <h3 className="modal__title">Testar 14 dias grátis</h3>
            <p className="modal__sub">14 dias completos no Pro. Sem cartão. Conecta seu WhatsApp em 1 click.</p>
            <form onSubmit={e => { e.preventDefault(); setDone(true); }}>
              <input className="field" placeholder="Nome do seu negócio" required />
              <input className="field" type="email" placeholder="seu@email.com" required />
              <input className="field" placeholder="WhatsApp com DDD" required />
              <Button variant="primary" block>Começar teste de 14 dias →</Button>
            </form>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Button, Eyebrow, SectionHead, Brand, Nav, Footer, WhatsAppFab, SignupModal });