/* Navy utility bar across the very top: scrolls away above the sticky nav.
   tone: "navy" (default) | "teal". Toggleable via Tweaks. */
function TopBar({ text, tone = "navy" }) {
  const bg = tone === "teal" ? "var(--teal-deep)" : "var(--navy)";
  const links = ["EN-AU"];
  return (
    <div style={{ background: bg, color: "#fff" }}>
      <div style={{ width: "100%", maxWidth: 1200, marginInline: "auto", paddingInline: 32, height: 40,
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, letterSpacing: "0.01em", color: "rgba(255,255,255,0.82)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          {text}
        </span>
        <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
          {links.map((l) => (
            <a key={l} style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 12.5, color: "rgba(255,255,255,0.9)", cursor: "pointer", whiteSpace: "nowrap" }}>{l}</a>
          ))}
        </div>
      </div>
    </div>
  );
}

window.TopBar = TopBar;

/* Sticky white nav with Novonesis-style mega-menu. Logo left, links centre
   (Solutions opens a mega-panel), Get-in-touch pill right. 80px tall.
   Per PHYOMIC.AG brand: NO menu icons (Novonesis uses them; we don't). */
function SiteHeader({ current, onNav }) {
  const { Button, Logo } = window.PHYOMICAGDesignSystem_ac1e0b;
  const [mega, setMega] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  const narrow = window.useNarrow();

  const links = [
    { label: "Home", key: "home" },
    { label: "Solutions", key: "solutions", mega: true },
    { label: "About", key: "about" },
  ];

  /* Mirrors the Solutions page: two products in commercial supply, the rest of
     the range in formulation and trial, then the discovery pipeline. */
  const families = [
    { h: "Available now", items: [["BroilerXP", "broilerxp"], ["LayerXP", "layerxp"]] },
  ];

  /* Phone navigation is a flat list: the mega-panel's two-column hover
     behaviour has no touch equivalent, so products sit inline instead. */
  const phoneLinks = [
    ["Home", "home"], ["Solutions", "solutions"], ["BroilerXP", "broilerxp"],
    ["LayerXP", "layerxp"], ["About", "about"], ["Get in touch", "contact"],
  ];

  return (
    <header onMouseLeave={() => setMega(false)} style={{ position: "sticky", top: 0, zIndex: 50 }}>
      <div style={{ height: 60, background: "rgba(255,255,255,0.94)", backdropFilter: "saturate(150%) blur(8px)",
        borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center" }}>
        <div style={{ width: "100%", maxWidth: 1200, marginInline: "auto", paddingInline: 32,
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: narrow ? 12 : 24 }}>
          <a onClick={() => { onNav("home"); setMega(false); }} style={{ cursor: "pointer", display: "flex" }}>
            <Logo variant="horizontal" iconSrc={(window.__resources && window.__resources.phyomicIcon) || "../../assets/phyomic-icon.png"} size={38} />
          </a>
          <nav style={{ display: narrow ? "none" : "flex", gap: 28 }}>
            {links.map((l) => {
              const active = l.key && current === l.key;
              return (
                <a key={l.label}
                  onMouseEnter={() => setMega(!!l.mega)}
                  onClick={() => l.key && (onNav(l.key), setMega(false))}
                  style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 17,
                    color: active ? "var(--teal-deep)" : "var(--navy)", cursor: "pointer", whiteSpace: "nowrap",
                    paddingBottom: 2, borderBottom: active ? "2px solid var(--teal)" : "2px solid transparent" }}>
                  {l.label}
                </a>
              );
            })}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            {narrow ? (
              <a onClick={() => setMenu((m) => !m)} role="button" aria-expanded={menu}
                style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 15, letterSpacing: "0.06em",
                  textTransform: "uppercase", color: "var(--navy)", cursor: "pointer", padding: "12px 4px",
                  borderBottom: menu ? "2px solid var(--teal)" : "2px solid transparent" }}>
                {menu ? "Close" : "Menu"}
              </a>
            ) : (
              <Button variant="primary" size="sm" onClick={() => onNav("contact")}>Get in touch</Button>
            )}
          </div>
        </div>
      </div>

      {/* PHONE DRAWER */}
      {narrow && menu && (
        <div style={{ background: "#fff", borderBottom: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-card)" }}>
          <nav style={{ display: "flex", flexDirection: "column", paddingInline: 20, paddingBlock: 8 }}>
            {phoneLinks.map(([label, key]) => {
              const active = current === key;
              return (
                <a key={key} onClick={() => { onNav(key); setMenu(false); }}
                  style={{ fontFamily: "var(--font-body)", fontWeight: active ? 600 : 500, fontSize: 17,
                    color: active ? "var(--teal-deep)" : "var(--navy)", cursor: "pointer",
                    paddingBlock: 16, borderBottom: "1px solid var(--border-subtle)" }}>
                  {label}
                </a>
              );
            })}
          </nav>
        </div>
      )}

      {/* MEGA PANEL */}
      {!narrow && mega && (
        <div style={{ background: "#fff", borderBottom: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-card)" }}>
          <div style={{ width: "100%", maxWidth: 1200, marginInline: "auto", paddingInline: 32, paddingBlock: 36 }}>
            <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 48, maxWidth: 620 }}>
              <div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, color: "var(--navy)", margin: 0 }}>Our solutions</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.55, color: "var(--charcoal)", margin: "12px 0 16px", maxWidth: 240 }}>
                  Two Livestock XP products, in commercial supply today.
                </p>
                <a onClick={() => { onNav("solutions"); setMega(false); }} style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14.5, color: "var(--teal-deep)", cursor: "pointer", borderBottom: "2px solid rgba(27,139,112,0.35)", paddingBottom: 2 }}>Find your next biosolution →</a>
              </div>
              {families.map((f) => (
                <div key={f.h}>
                  <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--teal-grey)", marginBottom: 4 }}>{f.h}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 11.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--stone)", marginBottom: 12, minHeight: 14 }}>{f.note || ""}</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
                    {f.items.map(([name, page]) => (
                      <a key={name} onClick={() => { onNav(page || "solutions"); setMega(false); }}
                        style={{ fontFamily: "var(--font-body)", fontWeight: page ? 600 : 400, fontSize: 14.5,
                          color: page ? "var(--teal-deep)" : "var(--navy)", cursor: "pointer" }}>{name}</a>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

window.SiteHeader = SiteHeader;