/* Illuma Energy — Header (floating nav) + Footer */

function Header() {
  const [open, setOpen] = React.useState(false);
  const burgerRef = React.useRef(null);

  // boot.js moves .ill-header OUT of #stage (the React root) into #ill-chrome
  // so React's synthetic event delegation (which listens on #stage) never fires
  // for elements living in #ill-chrome. Attach a native listener directly to
  // the burger button to bypass that limitation entirely.
  React.useEffect(() => {
    const btn = burgerRef.current;
    if (!btn) return;
    const toggle = (e) => {
      e.stopPropagation();
      setOpen((o) => !o);
    };
    btn.addEventListener("click", toggle);
    return () => btn.removeEventListener("click", toggle);
  }, []);

  // Close when the user clicks anywhere outside the nav.
  React.useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, [open]);

  return (
    <header className="ill-header">
      <nav className="ill-nav">
        <a href="index.html" aria-label="Illuma Energy home">
          <img className="ill-nav__logo" src={`${ASSET}/logos/illuma-berry.svg`} alt="Illuma Energy" />
        </a>
        <div className="ill-nav__items">
          <a className="ill-nav__link" href="about.html">About</a>
          <div className="ill-drop">
            <span className="ill-nav__link" style={{ cursor: "default" }}>Projects <Chevron color="#732654" /></span>
            <div className="ill-drop__menu">
              <a className="ill-drop__item" href="projects-in-dev.html">Projects in dev</a>
              <a className="ill-drop__item" href="operational-assets.html">Operational assets</a>
            </div>
          </div>
          <a className="ill-nav__link" href="community.html">Community</a>
          <a className="ill-nav__link" href="news.html">News</a>
        </div>
        <button
          ref={burgerRef}
          className="ill-nav__burger"
          aria-label="Menu"
          aria-expanded={open}
        >
          <span style={{ transform: open ? "translateY(7px) rotate(45deg)" : "none" }} />
          <span style={{ opacity: open ? 0 : 1 }} />
          <span style={{ transform: open ? "translateY(-7px) rotate(-45deg)" : "none" }} />
        </button>
        <div className={"ill-nav__mobile" + (open ? " open" : "")}>
          <a href="about.html">About</a>
          <span style={{ padding: "15px 16px", fontSize: 16, lineHeight: 1, color: "var(--color-primary)", opacity: 0.45, display: "flex", alignItems: "center", minHeight: 44, fontFamily: "var(--font-primary)", letterSpacing: "0.02em" }}>Projects</span>
          <a href="projects-in-dev.html" className="ill-nav__mobile-sub">Projects in dev</a>
          <a href="operational-assets.html" className="ill-nav__mobile-sub">Operational assets</a>
          <a href="community.html">Community</a>
          <a href="news.html">News</a>
          <a href="contact.html" className="ill-nav__mobile-cta">Contact Us <ArrowUR color="currentColor" /></a>
        </div>
      </nav>
      <a className="ill-contact-btn" href="contact.html">Contact Us <ArrowUR color="currentColor" /></a>
    </header>
  );
}

function Footer() {
  const col = (title, links) => (
    <div>
      <p className="ill-footer__col-title">{title}</p>
      {links.map((l, i) => <a key={i} className="ill-footer__link" href={l[1]}>{l[0]}</a>)}
    </div>
  );
  return (
    <footer className="ill-footer">
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 120 }}>
        <div className="ill-footer__top" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div className="ill-footer__intro" style={{ width: 400, display: "flex", flexDirection: "column", gap: 32 }}>
            <img src={`${ASSET}/logos/illuma-energy-lightpink.svg`} alt="Illuma Energy" style={{ width: 280, height: "auto" }} />
            <p style={{ margin: 0, fontSize: 20, lineHeight: 1.3, color: "var(--color-surface-pink)" }}>
              Start your project today. Contact us to learn more and let&rsquo;s work together to achieve your goals.
            </p>
          </div>
          <div className="ill-footer__groups" style={{ display: "flex", gap: 80 }}>
            {col("\u21B3 Pages", [["Home", "index.html"], ["About", "about.html"], ["Community", "community.html"], ["News", "news.html"], ["Careers", "careers.html"], ["Contact us", "contact.html"]])}
            {col("\u21B3 Projects", [["Projects in dev", "projects-in-dev.html"], ["Operational assets", "operational-assets.html"]])}
            {col("\u21B3 Social", [["LinkedIn", "#"], ["Instagram", "#"]])}
            {col("\u21B3 Legal", [["Privacy Policy", "privacy-policy.html"], ["Terms & Conditions", "terms-and-conditions.html"]])}
          </div>
        </div>
        <div className="ill-footer__bottom" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", fontSize: 15, color: "var(--color-surface-pink)", opacity: 0.92, fontWeight: 500, fontFamily: "var(--font-secondary)" }}>
          <span>&copy; 2025 Illuma Energy. All rights reserved.</span>
          <span>Design by ven</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer });