/* global React */
// Shared site nav. Used by index.html and 10x.html.
// Pass active="home" or active="10x" to highlight the matching link.
const SITE_YOUTUBE_URL = "https://www.youtube.com/@TheDailyTraderPierre";

function SiteNav({ active = "home" }) {
  return (
    <nav style={navStyles.nav}>
      <div style={navStyles.inner}>
        <a href="/" style={navStyles.brand}>
          <svg width="42" height="28" viewBox="0 0 60 40" style={{ display: "block" }}>
            <text x="30" y="28" textAnchor="middle"
              fontFamily='"Inter", -apple-system, sans-serif' fontSize="26" fontWeight="900"
              fontStyle="italic" fill="#0a2540" letterSpacing="-0.04em">TAI</text>
            <line x1="8" y1="34" x2="52" y2="31"
              stroke="#5b8db8" strokeWidth="2.5" strokeLinecap="round" />
          </svg>
          <span style={navStyles.name}>The Trend-Aware Investor</span>
        </a>
        <div style={navStyles.links}>
          <a href="/" style={active === "home" ? navStyles.linkActive : navStyles.link}>Home</a>
          <a href="/10x" style={active === "10x" ? navStyles.linkActive : navStyles.link}>The 10x Index</a>
          <a href={SITE_YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={navStyles.link}>YouTube</a>
          <a href="/#memberships" style={navStyles.link}>Memberships</a>
          <a href={SITE_YOUTUBE_URL + "/membership"} target="_blank" rel="noopener noreferrer" style={navStyles.join}>Join</a>
        </div>
      </div>
    </nav>
  );
}

const navStyles = {
  nav: {
    background: "rgba(251,250,246,0.95)",
    backdropFilter: "blur(8px)",
    borderBottom: "1px solid #e3e8ee",
    position: "sticky",
    top: 0,
    zIndex: 50,
  },
  inner: {
    maxWidth: 1200,
    margin: "0 auto",
    padding: "16px 32px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 16,
    flexWrap: "wrap",
  },
  brand: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    textDecoration: "none",
    color: "#0a2540",
  },
  name: { fontSize: 15, fontWeight: 700, letterSpacing: "-0.01em" },
  links: { display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" },
  link: {
    fontSize: 14, fontWeight: 500, color: "#425466",
    textDecoration: "none",
  },
  linkActive: {
    fontSize: 14, fontWeight: 700, color: "#0a2540",
    textDecoration: "none",
    borderBottom: "2px solid #5b8db8",
    paddingBottom: 2,
  },
  join: {
    fontSize: 14, fontWeight: 600, color: "#fff",
    background: "#0a2540",
    padding: "8px 18px", borderRadius: 6,
    textDecoration: "none",
  },
};

window.SiteNav = SiteNav;