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

const ABOUT_LINKS = [
  ["Our Story", "about.html#our-story"],
  ["What We Do", "about.html#what-we-do"],
  ["Our People", "about.html#our-leaders"],
  ["Community Engagement", "about.html#engagement"],
];

function Header() {
  const [open, setOpen] = React.useState(false);
  const [aboutOpen, setAboutOpen] = React.useState(false);
  const [aboutDrop, setAboutDrop] = React.useState(false);
  const burgerRef = React.useRef(null);
  const aboutAccRef = React.useRef(null);
  const aboutTrigRef = 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 native listeners directly to
  // the interactive buttons 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);
  }, []);

  // Mobile About accordion — native listener (see note above).
  React.useEffect(() => {
    const btn = aboutAccRef.current;
    if (!btn) return;
    const toggle = (e) => {
      e.stopPropagation();
      setAboutOpen((o) => !o);
    };
    btn.addEventListener("click", toggle);
    return () => btn.removeEventListener("click", toggle);
  }, []);

  // Desktop About dropdown — opens on click of the (non-link) trigger.
  React.useEffect(() => {
    const btn = aboutTrigRef.current;
    if (!btn) return;
    const toggle = (e) => {
      e.stopPropagation();
      setAboutDrop((o) => !o);
    };
    btn.addEventListener("click", toggle);
    return () => btn.removeEventListener("click", toggle);
  }, []);

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

  return (
    <header className="ill-header">
      <nav className="ill-nav">
        <a href="index.html" aria-label="Illuma home">
          <img className="ill-nav__logo" src={`${ASSET}/logos/illuma-berry.svg`} alt="Illuma" />
        </a>
        <div className="ill-nav__items">
          <div className={"ill-drop" + (aboutDrop ? " open" : "")}>
            <span ref={aboutTrigRef} className="ill-nav__link" style={{ cursor: "pointer" }}>About Us <Chevron color="#732654" /></span>
            <div className="ill-drop__menu">
              {ABOUT_LINKS.map((l, i) => (
                <a key={i} className="ill-drop__item" href={l[1]}>{l[0]}</a>
              ))}
            </div>
          </div>
          <a className="ill-nav__link" href="projects.html">Projects</a>
          <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" : "")}>
          <button
            ref={aboutAccRef}
            className={"ill-nav__mobile-acc" + (aboutOpen ? " open" : "")}
            aria-expanded={aboutOpen}
          >
            About Us <Chevron color="currentColor" />
          </button>
          <div className={"ill-nav__mobile-accpanel" + (aboutOpen ? " open" : "")}>
            <div className="ill-nav__mobile-acclist">
              {ABOUT_LINKS.map((l, i) => (
                <a key={i} href={l[1]} className="ill-nav__mobile-sub">{l[0]}</a>
              ))}
            </div>
          </div>
          <a href="projects.html">Projects</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-btn ill-btn--berry ill-contact-btn" href="contact.html">Contact Us <ArrowUR color="currentColor" /></a>
    </header>
  );
}

function Footer() {
  const ExtLink = () => (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 6, verticalAlign: "baseline", opacity: 0.8 }} aria-hidden="true">
      <path d="M14 4h6v6" />
      <path d="M20 4L11 13" />
      <path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4" />
    </svg>
  );
  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[2] ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{l[0]}{l[2] ? <ExtLink /> : null}</a>
      ))}
    </div>
  );
  return (
    <footer className="ill-footer">
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 60 }}>
        <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-lightpink.svg`} alt="Illuma" style={{ width: 180, height: "auto" }} />
            <p style={{ margin: 0, fontSize: 20, lineHeight: 1.3, color: "var(--color-surface-pink)" }}>
              Powering what&rsquo;s next, now.
            </p>
          </div>
          <div className="ill-footer__groups" style={{ display: "flex", gap: 80 }}>
            {col("Pages", [["Home", "index.html"], ["About", "about.html"], ["Projects", "projects.html"], ["Community", "community.html"], ["News", "news.html"], ["Contact us", "contact.html"]])}
            {col("Social", [["LinkedIn", "#"]])}
            {col("Legal", [["Privacy Policy", "privacy-policy.html", true], ["Terms & Conditions", "terms-and-conditions.html", true]])}
          </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; 2026 Illuma. All rights reserved.</span>
          <span>Website by <a href="https://ven.com.au" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "underline" }}>ven</a></span>
        </div>
      </div>
    </footer>
  );
}

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