// Inline SM circle — true transparent background, scales crisply at any size.
function SmCircleMark({ size = 44 }) {
  return (
    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
      style={{ height: size, width: size, display: "block", flexShrink: 0 }}
      aria-hidden="true"
    >
      <circle cx="50" cy="50" r="50" fill="#0E0E10" />
      <text
        x="50" y="47"
        fontFamily="Inter Tight, ui-sans-serif, system-ui, -apple-system, sans-serif"
        fontWeight="700" fontSize="34" fill="#F4EFE6"
        textAnchor="middle" dominantBaseline="middle"
        letterSpacing="-1.5"
      >SM</text>
      <rect x="33" y="63" width="34" height="3.5" fill="#E89060" />
    </svg>
  );
}
window.SmCircleMark = SmCircleMark;

// Homepage Nav — fixed, transparent over hero, hairline + cream blur on scroll.
function HpNav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Resolve a section anchor: scroll if on homepage, otherwise navigate cross-page.
  const isHome = (() => {
    const p = window.location.pathname;
    return p.endsWith("/") || p.endsWith("index.html") || p === "";
  })();
  const anchor = (id) => isHome ? `#${id}` : `index.html#${id}`;

  const navStyle = {
    background: scrolled ? "rgba(244, 239, 230, 0.82)" : "transparent",
    backdropFilter: scrolled ? "blur(16px)" : "none",
    WebkitBackdropFilter: scrolled ? "blur(16px)" : "none",
    borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
  };

  return (
    <header className="hp-nav-root" style={navStyle}>
      <div className="hp-nav-inner">
        <a href={isHome ? "#" : "index.html"} className="hp-brand" aria-label="Scale Media — home">
          <SmCircleMark size={44} />
          <span className="hp-brand-name" style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.04em", color: "var(--ink)" }}>
            <span style={{ fontWeight: 500 }}>Scale</span><span style={{ fontWeight: 200 }}>Media</span>
          </span>
        </a>
        <nav className="hp-nav-links">
          <a href={anchor("verticals")} className="hp-nav-link is-secondary">Verticals</a>
          <a href={anchor("process")}   className="hp-nav-link is-secondary">Process</a>
          <a href={anchor("reach")}     className="hp-nav-link is-secondary">Reach</a>
          <a href="contact.html"        className="hp-nav-link is-cta">Get in touch →</a>
        </nav>
      </div>
    </header>
  );
}
window.HpNav = HpNav;
