// Tiny hash router + nav
const PAGES = [
  { id: "home", label: "Home", href: "#/" },
  { id: "realtors", label: "For Realtors", href: "#/realtors" },
  { id: "strategy", label: "Strategy Engine", href: "#/strategy" },
  { id: "prelisting", label: "Pre-Listing", href: "#/prelisting" },
  { id: "loan-officers", label: "For Loan Officers", href: "#/loan-officers" },
];

function useHashRoute() {
  const [hash, setHash] = React.useState(() => window.location.hash || "#/");
  React.useEffect(() => {
    const onHash = () => {
      setHash(window.location.hash || "#/");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  if (hash === "#/" || hash === "" || hash === "#") return "home";
  if (hash.startsWith("#/realtors")) return "realtors";
  if (hash.startsWith("#/strategy")) return "strategy";
  if (hash.startsWith("#/prelisting")) return "prelisting";
  if (hash.startsWith("#/loan-officers")) return "loan-officers";
  return "home";
}

function TopNav({ wordmark, lockup, accent, currentPage }) {
  const accentBg =
    accent === "teal" ? "#2EBDBD" :
    accent === "gradient" ? "linear-gradient(135deg, #E8573A 0%, #2EBDBD 100%)" :
    "#E8573A";
  return (
    <header className="topnav">
      <a className="topnav-left" href="#/">
        <Wordmark variant={wordmark} size={22} lockup={lockup === "stacked" ? "inline" : lockup} />
        <span className="badge mono">COMING SOON</span>
      </a>
      <nav className="topnav-right">
        {PAGES.map((p) => (
          <a
            key={p.id}
            href={p.href}
            className={`nav-link ${currentPage === p.id ? "active" : ""}`}
          >
            {p.label}
          </a>
        ))}
        <a href="#/#waitlist" className="nav-cta" style={{ background: accentBg }}>
          Get early access
        </a>
      </nav>
    </header>
  );
}

function PageFooter({ wordmark, lockup }) {
  return (
    <footer className="foot">
      <div className="foot-left">
        <Wordmark variant={wordmark} size={18} lockup={lockup === "stacked" ? "inline" : lockup} />
        <span className="foot-tag mono">COMING JUNE 2026</span>
      </div>
      <div className="foot-mid mono">
        <a href="#/">HOME</a>
        <span className="foot-dot">·</span>
        <a href="#/realtors">REALTORS</a>
        <span className="foot-dot">·</span>
        <a href="#/strategy">STRATEGY</a>
        <span className="foot-dot">·</span>
        <a href="#/prelisting">PRE-LISTING</a>
        <span className="foot-dot">·</span>
        <a href="#/loan-officers">LOs</a>
        <span className="foot-dot">·</span>
        <a href="mailto:hello@myflyers.ai">HELLO@MYFLYERS.AI</a>
      </div>
      <div className="foot-right mono">
        A SIBLING OF MYLOANIQ · V0.2 · <a href="/seo-preview">SEO &amp; SOCIAL</a>
      </div>
    </footer>
  );
}

Object.assign(window, { useHashRoute, TopNav, PageFooter, PAGES });