/* Finance Family site — shared header with hover mega-menus. */
(function () {
  function SiteHeader({ page = "home", base = "" }) {
    const { Button, Logo, IconButton } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    const [open, setOpen] = React.useState(false);   // mobile menu
    const [expanded, setExpanded] = React.useState(null); // mobile sub-expand
    const onHome = page === "home";

    // resolve an anchor item to a real href (same-page on home, else navigate-then-jump)
    const res = (it) => it.anchor ? { ...it, href: onHome ? ("#" + it.anchor) : ("/#" + it.anchor) } : it;

    const loanBlurb = { buying: "First home or your next move", refinance: "Could a switch save you?", investment: "Grow your portfolio", construction: "Finance for every build stage", asset: "Cars, equipment & fit-out", business: "Cashflow, expansion & more", smsf: "Buy property via your SMSF" };
    const loanMenu = (window.FF_SERVICES || []).map((s) => ({ label: s.t, desc: loanBlurb[s.id] || "", ic: s.ic, href: "/book?purpose=" + s.id }));
    const calcMenu = [
      { label: "Borrowing power", desc: "How much could you borrow?", ic: "trending", href: "/calculators#borrow" },
      { label: "Repayments", desc: "What will it cost each month?", ic: "calculator", href: "/calculators#repay" },
      { label: "Stamp duty", desc: "Estimate your government duty", ic: "fileText", href: "/calculators#stamp" },
      { label: "Refinance savings", desc: "Could switching save you money?", ic: "refresh", href: "/calculators#refi" },
    ];
    const aboutMenu = [
      res({ label: "Our story", desc: "Why we started Finance Family", ic: "heart", anchor: "about" }),
      res({ label: "Meet the team", desc: "Brokers, support & AI crew", ic: "users", anchor: "team" }),
      res({ label: "Reviews", desc: "5.0 from 399 happy clients", ic: "star", anchor: "reviews" }),
      { label: "FAQs", desc: "The bits everyone asks", ic: "message", href: "/faq" },
    ];

    const links = [
      res({ label: "Home loans", anchor: "services", key: "loans", menu: loanMenu, mega: true }),
      { label: "Calculators", href: "/calculators", key: "calculators", menu: calcMenu },
      res({ label: "About", anchor: "about", key: "about", menu: aboutMenu }),
      { label: "FAQs", href: "/faq", key: "faq" },
      { label: "Refer a friend", href: "/refer", key: "refer" },
      { label: "Courses", href: "/courses", key: "courses" },
    ];

    function handleClick(e, l) {
      setOpen(false);
      if (l.anchor && onHome) {
        const el = document.getElementById(l.anchor);
        if (el) {
          e.preventDefault();
          const y = el.getBoundingClientRect().top + window.pageYOffset - 84;
          window.scrollTo({ top: y, behavior: "smooth" });
          if (history.replaceState) history.replaceState(null, "", "#" + l.anchor);
        }
      }
    }

    return (
      <header className="site-header">
        <div className="container nav-row">
          <a href={"/"} aria-label="Finance Family home" style={{ display: "flex", alignItems: "center" }}>
            <Logo variant="horizontal" tone="primary" base="/assets/logos" height={30} />
          </a>
          <nav className="nav-links nav-desktop" aria-label="Primary">
            {links.map((l) => (
              <div className="nav-item" key={l.key}>
                <a href={l.href} onClick={(e) => handleClick(e, l)} target={l.external ? "_blank" : undefined} rel={l.external ? "noopener noreferrer" : undefined} className={"nav-link" + (page === l.key ? " active" : "") + (l.menu ? " has-menu" : "")}>
                  {l.label}{l.menu && <Icon name="chevronDown" size={15} className="nav-caret" color="currentColor" style={{ marginLeft: 3 }} />}{l.external && <Icon name="arrowRight" size={13} color="currentColor" style={{ marginLeft: 4, transform: "rotate(-45deg)" }} />}
                </a>
                {l.menu && (
                  <div className={"nav-menu" + (l.mega ? " nav-mega" : "")}>
                    <div className="nav-menu-grid">
                      {l.menu.map((mi) => (
                        <a key={mi.label} href={mi.href} onClick={(e) => handleClick(e, mi)} className="nav-mi">
                          <span className="nav-mi-ic"><Icon name={mi.ic} size={19} color="var(--brand-primary)" /></span>
                          <span>
                            <span className="nav-mi-t">{mi.label}</span>
                            <span className="nav-mi-d">{mi.desc}</span>
                          </span>
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </nav>
          <div className="row gap-sm nav-actions">
            <a href="tel:0389004699" className="nav-desktop" style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 15, color: "var(--text-strong)", textDecoration: "none" }}>
              <Icon name="phone" size={18} color="var(--brand-primary)" /> (03) 8900 4699
            </a>
            <a href={"/book"} style={{ textDecoration: "none" }} className="nav-desktop">
              <Button size="sm">Book a chat</Button>
            </a>
            <span className="nav-mobile-toggle">
              <IconButton label={open ? "Close menu" : "Open menu"} variant="soft" onClick={() => setOpen(!open)}>
                <Icon name={open ? "x" : "menu"} size={20} />
              </IconButton>
            </span>
          </div>
        </div>
        {open && (
          <div className="nav-desktop-hide" style={{ borderTop: "1.5px solid var(--border-subtle)", background: "#fff", maxHeight: "80vh", overflowY: "auto" }}>
            <div className="container" style={{ padding: "10px var(--container-pad) 22px", display: "flex", flexDirection: "column", gap: 2 }}>
              {links.map((l) => (
                <React.Fragment key={l.key}>
                  <div style={{ display: "flex", alignItems: "center" }}>
                    <a href={l.href} onClick={(e) => handleClick(e, l)} target={l.external ? "_blank" : undefined} rel={l.external ? "noopener noreferrer" : undefined} style={{ flex: 1, padding: "13px 8px", fontFamily: "var(--font-body)", fontSize: 16.5, fontWeight: 600, color: "var(--text-body)", textDecoration: "none", borderRadius: 10 }}>{l.label}{l.external && " \u2197"}</a>
                    {l.menu && (
                      <button aria-label="Expand" onClick={() => setExpanded(expanded === l.key ? null : l.key)} style={{ border: "none", background: "none", cursor: "pointer", padding: 10, display: "inline-flex" }}>
                        <Icon name="chevronDown" size={18} color="var(--text-muted)" style={{ transform: expanded === l.key ? "rotate(180deg)" : "none", transition: "transform var(--dur)" }} />
                      </button>
                    )}
                  </div>
                  {l.menu && expanded === l.key && (
                    <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "2px 0 8px 10px", borderLeft: "2px solid var(--border-subtle)", marginLeft: 8 }}>
                      {l.menu.map((mi) => (
                        <a key={mi.label} href={mi.href} onClick={(e) => handleClick(e, mi)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 8px", textDecoration: "none", borderRadius: 8 }}>
                          <Icon name={mi.ic} size={17} color="var(--brand-primary)" />
                          <span style={{ fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 500, color: "var(--text-body)" }}>{mi.label}</span>
                        </a>
                      ))}
                    </div>
                  )}
                </React.Fragment>
              ))}
              <a href={"/book"} onClick={() => setOpen(false)} style={{ padding: "13px 8px", fontFamily: "var(--font-body)", fontSize: 16.5, fontWeight: 700, color: "var(--brand-primary)", textDecoration: "none" }}>Book a chat →</a>
            </div>
          </div>
        )}
      </header>
    );
  }
  window.SiteHeader = SiteHeader;
})();