/* global React, Logo, Button, Icon */
const NAV = [
  { href: "#documents", label: "Documents" },
  { href: "#process", label: "Process" },
  { href: "#why", label: "Why us" },
  { href: "#contact", label: "Contact" },
];

function Header({ onQuote }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // lock scroll when the mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <header className={"cl-header" + (scrolled || open ? " scrolled" : "")}>
      <div className="cl-container cl-header-inner">
        <Logo variant="dark" tagline />

        <nav className="cl-nav">
          {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
        </nav>

        <div className="cl-header-cta">
          <a href="https://t.me/columbus_support" target="_blank" rel="noopener noreferrer" className="cl-header-tg">
            <Icon name="send" size={16} />Telegram
          </a>
          <Button variant="gold" size="md" icon="file-check-2" onClick={onQuote}>Free Quote</Button>
        </div>

        <button className="cl-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
          <Icon name={open ? "x" : "menu"} size={24} />
        </button>
      </div>

      <div className={"cl-mobile-menu" + (open ? " open" : "")}>
        <nav>
          {NAV.map((n) => <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
        </nav>
        <div className="cl-mobile-actions">
          <Button variant="gold" size="lg" icon="file-check-2" onClick={() => { setOpen(false); onQuote(); }}>Get a Free Quote</Button>
          <a className="cl-mobile-tg" href="https://t.me/columbus_support" target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>
            <Icon name="send" size={18} />Message us on Telegram
          </a>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;