const { Logo, Button, IconButton } = window.AterraDesignSystem_75d442;

const NAV_ITEMS = [
  ['Capabilities', '#capabilities'],
  ['Process', '#process'],
  ['Agencies', '#agencies'],
  ['Questions', '#questions'],
];

function SiteNav() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const el = document.scrollingElement || document.documentElement;
      setScrolled(el.scrollTop > 4);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [open]);
  return (
    <header className="hdr" data-scrolled={scrolled}>
      <div className="wrap hdr__in">
        <a href="#top" aria-label="Aterra home" className="hdr__logo"><Logo size={28} /></a>
        <nav className="hdr__nav">
          {NAV_ITEMS.map(([label, href]) => <a key={href} className="hdr__link" href={href}>{label}</a>)}
        </nav>
        <div className="hdr__cta">
          <Button variant="accent" size="sm" href="mailto:hello@aterrasolutions.io" arrow>Email Aterra</Button>
        </div>
        <span className="hdr__burger">
          <IconButton label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(!open)}>
            <i data-lucide={open ? 'x' : 'menu'}></i>
          </IconButton>
        </span>
      </div>
      {open ? (
        <div className="mnav">
          <div className="wrap">
            {NAV_ITEMS.map(([label, href]) => <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>)}
            <div style={{ marginTop: 'var(--space-6)' }}>
              <Button variant="accent" href="mailto:hello@aterrasolutions.io" arrow>Email Aterra</Button>
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="ftr on-dark">
      <div className="wrap">
        <div className="ftr__top">
          <div className="ftr__brand">
            <Logo size={30} />
            <span className="ftr__desc">AI software development</span>
          </div>
          <nav className="ftr__links">
            <a href="#capabilities">Capabilities</a>
            <a href="#process">Process</a>
            <a href="#agencies">Agencies</a>
            <a href="#questions">Questions</a>
            <a href="mailto:hello@aterrasolutions.io">Email</a>
          </nav>
        </div>
        <div className="ftr__bottom">
          <span className="ftr__meta">Aterra Solutions LLC / Tbilisi, Georgia / hello@aterrasolutions.io</span>
          <span className="ftr__legal">Privacy and terms pages pending.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteNav, SiteFooter });