// Top navigation — floating frosted pill that hovers over the page (matches
// kid-link-website.vercel.app). Desktop links collapse to a drawer below 992px.

function Navbar() {
  const { route, go } = useRoute();
  const [open, setOpen] = useState(false);
  const [opacity, setOpacity] = useState(1);

  useEffect(() => {
    const evaluate = () => {
      const hero = document.querySelector("main section");
      const heroH = hero ? hero.offsetHeight : window.innerHeight;
      const y = window.scrollY || window.pageYOffset || 0;
      // Fade the header out across the hero: full at the top, gone by the hero's end.
      setOpacity(1 - Math.min(1, y / Math.max(1, heroH)));
    };
    evaluate();
    window.addEventListener("scroll", evaluate, { passive: true });
    window.addEventListener("resize", evaluate);
    return () => {
      window.removeEventListener("scroll", evaluate);
      window.removeEventListener("resize", evaluate);
    };
  }, [route]);

  const links = [
    { id: "home",          label: "Home",                 short: "Home" },
    { id: "parents",       label: "Parents & Caregivers", short: "Parents" },
    { id: "clinicians",    label: "Clinicians",           short: "Clinicians" },
    { id: "educators",     label: "Educators",            short: "Educators" },
    { id: "organisations", label: "Organisations",        short: "Organisations" },
    { id: "team",          label: "Meet the team",        short: "Team" },
    { id: "events",        label: "Upcoming Events",       short: "Events" },
    { id: "fees",          label: "Fees",                 short: "Fees" },
  ];

  const navigate = (id) => { go(id); setOpen(false); };

  return (
    <header className="kl-navbar" style={{ opacity, pointerEvents: opacity <= 0.02 ? "none" : "auto" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", gap: 24 }}>
        <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ display: "inline-flex", alignItems: "center" }}>
          <img src="../../assets/images/kidlink-logo-wordmark.png" alt="Kid Link" style={{ height: 37 }} />
        </a>

        {/* Right group — links + CTA pushed to the right, away from the logo */}
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <nav className="kl-nav-links">
            {links.map((l) => {
              const active = route === l.id;
              const baseStyle = {
                display: "inline-flex",
                alignItems: "center",
                gap: 4,
                padding: "10px 12px",
                fontSize: "var(--kl-text-regular)",
                color: "var(--kl-fg-1)",
                fontWeight: active ? 700 : 600,
                textDecoration: active ? "underline" : "none",
                textUnderlineOffset: "0.3em",
                whiteSpace: "nowrap",
              };
              if (l.href) {
                return (
                  <a key={l.id} href={l.href} target="_blank" rel="noopener noreferrer" style={baseStyle}>
                    {l.short}
                    <MIcon name="open_in_new" size={14} color="var(--kl-fg-2)" />
                  </a>
                );
              }
              return (
                <a
                  key={l.id} href="#"
                  onClick={(e) => { e.preventDefault(); navigate(l.id); }}
                  style={baseStyle}
                >
                  {l.short}
                </a>
              );
            })}
          </nav>

          {/* CTA is hidden on phones (see .kl-nav-cta in CSS) — too dominant in the small header */}
          <span className="kl-nav-cta">
            <Button variant="primary" size="sm" onClick={scrollToContact}>Enquire Now</Button>
          </span>
          <button
            type="button"
            className="kl-nav-toggle"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {open
                ? <><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></>
                : <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile drawer — visible only < 992px (CSS-gated) when open */}
      {open && (
        <div className="kl-nav-drawer">
          {links.map((l) => (
            l.href ? (
              <a key={l.id} href={l.href} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                {l.label}
                <MIcon name="open_in_new" size={15} color="var(--kl-fg-2)" />
              </a>
            ) : (
              <a
                key={l.id} href="#"
                onClick={(e) => { e.preventDefault(); navigate(l.id); }}
                style={{ fontWeight: route === l.id ? 600 : 400 }}
              >
                {l.label}
              </a>
            )
          ))}
        </div>
      )}
    </header>
  );
}

window.Navbar = Navbar;