/* Header, shared across all pages. Real multi-page nav + persistent
   in-progress pulse for the Assessment tab once the user has started the form. */
function Header({ page, darkHero }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const progress = useFormProgress();
  // On pages with a dark full-bleed hero (e.g. About), the header sits over a
  // dark image until the user scrolls, so brand + nav need to be white at the top.
  const light = darkHero && !scrolled;

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { id: "platform", label: "Platform",     href: "index.html" },
    { id: "services", label: "Our Services", href: "services.html" },
    { id: "process",  label: "Our Process",  href: "process.html" },
    { id: "about",    label: "About",        href: "about.html" },
    { id: "team",     label: "Our Team",     href: "team.html" },
    { id: "contact",  label: "Contact Us",   href: "contact.html" },
  ];

  const showAssessmentTab = progress != null;

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "14px 0",
      background: scrolled ? "rgba(247,246,241,0.78)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid var(--mist)" : "1px solid transparent",
      transition: "background .4s ease, border-color .4s ease",
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 12, color: light ? "#fff" : "var(--ink)", transition: "color .4s ease", whiteSpace: "nowrap", flexShrink: 0 }}>
          <I.Mark s={22} />
          <span style={{ fontFamily: "'DM Serif Display', Georgia, 'Times New Roman', serif", fontSize: 19, letterSpacing: "-0.01em", fontWeight: 400, color: light ? "#fff" : "var(--ink)", transition: "color .4s ease", whiteSpace: "nowrap" }}>Direct Property Finance</span>
        </a>

        <nav style={{ display: "flex", gap: 22, flexShrink: 0, whiteSpace: "nowrap" }} className="nav-desktop">
          {nav.map((n) => {
            const active = page === n.id;
            return (
              <a key={n.id} href={n.href} style={{
                fontSize: 14, fontWeight: 500, whiteSpace: "nowrap",
                color: active ? (light ? "#fff" : "var(--ink)") : (light ? "rgba(255,255,255,0.9)" : "var(--carbon)"),
                padding: "6px 0", position: "relative", transition: "color .4s ease",
              }}>
                {n.label}
                {active && <span style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 1, background: light ? "#fff" : "var(--ink)" }}/>}
              </a>
            );
          })}
          {showAssessmentTab && (
            <a href="assessment.html" className="serif-em" style={{
              fontSize: 15, color: "var(--steel)", padding: "6px 0",
              display: "inline-flex", alignItems: "center", gap: 8, position: "relative",
            }}>
              <span className="pulse-dot" />
              Assessment · {progress.pct}%
            </a>
          )}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
          <a href="assessment.html" className="btn btn--primary nav-cta">
            Begin Funding Assessment <span className="arrow"><I.Arrow s={14}/></span>
          </a>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen((v) => !v)}
            style={{ background: "transparent", border: light ? "1px solid rgba(255,255,255,0.5)" : "1px solid var(--mist-2)", borderRadius: 999, padding: "10px 12px", color: light ? "#fff" : "var(--ink)", display: "none" }}>
            <I.Menu s={16}/>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      <div style={{
        position: "fixed", top: 72, left: 0, right: 0, bottom: 0, zIndex: 40,
        background: "rgba(247,246,241,0.98)", backdropFilter: "blur(20px)",
        opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none",
        transition: "opacity .3s ease",
        padding: "24px 24px 40px",
      }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {nav.map((n) => (
            <a key={n.id} href={n.href} className="display" style={{ fontSize: 40, padding: "16px 0", borderBottom: "1px solid var(--mist)" }}>
              {n.label}
            </a>
          ))}
          <a href="assessment.html" className="btn btn--primary" style={{ marginTop: 24 }}>
            Begin Funding Assessment <span className="arrow"><I.Arrow/></span>
          </a>
          {showAssessmentTab && (
            <a href="assessment.html" className="serif-em" style={{ marginTop: 16, color: "var(--steel)", display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span className="pulse-dot"/> Resume assessment in progress
            </a>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 1180px) {
          .nav-desktop { display: none !important; }
          .nav-cta { display: none !important; }
          .nav-burger { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
}
window.Header = Header;