// ============================================================
// Nav.jsx - premium editorial navigation
// ============================================================

const { useEffect, useState } = React;

function useViewportWidth() {
  const [width, setWidth] = useState(
    typeof window === "undefined" ? 1440 : window.innerWidth
  );

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

function Nav() {
  const links = [
    { href: "#kulup", label: "Kulüp" },
    { href: "#programlar", label: "Programlar" },
    { href: "#ritim", label: "Ritim" },
    { href: "#etki", label: "Etki" },
    { href: "#haberler", label: "Gündem" },
    { href: "#iletisim", label: "İletişim" },
  ];

  const width = useViewportWidth();
  const isMobile = width < 860;
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    if (!isMobile) {
      setMenuOpen(false);
    }
  }, [isMobile]);

  return (
    <header style={nv.wrap}>
      <div style={nv.line}></div>

      {isMobile ? (
        <div style={nv.mobileShell}>
          <div style={nv.mobileBar}>
            <a href="#" style={nv.brandMobile}>
              <div style={nv.logoShellMobile}>
                <img src="../assets/logo.png" alt="Merter Akademi logosu" style={nv.logo} />
              </div>
              <div style={nv.brandCopyMobile}>
                <div style={nv.brandNameMobile}>Merter Akademi</div>
                <div style={nv.brandSubMobile}>Spor Kulübü / İstanbul / Kuruluş Sezonu</div>
              </div>
            </a>

            <button
              type="button"
              aria-expanded={menuOpen}
              aria-label="Menüyü aç"
              onClick={() => setMenuOpen((value) => !value)}
              style={nv.menuButton}
            >
              {menuOpen ? "KAPAT" : "MENÜ"}
            </button>
          </div>

          {menuOpen && (
            <div style={nv.mobilePanel}>
              <nav style={nv.mobileLinks}>
                {links.map((item) => (
                  <a
                    key={item.href}
                    href={item.href}
                    style={nv.mobileLink}
                    onClick={() => setMenuOpen(false)}
                  >
                    {item.label}
                  </a>
                ))}
              </nav>

              <div style={nv.mobileMeta}>
                <div style={nv.mobileMetaLabel}>Kurucu Dönem</div>
                <div style={nv.mobileMetaText}>2026-27 / Merter merkezli yıl boyu kulüp modeli</div>
              </div>

              <a
                href="../uploads/Merter_Akademi_Kurucu_Sponsor_Tanitim_2026.pdf"
                target="_blank"
                rel="noreferrer"
                style={nv.mobilePrimary}
                onClick={() => setMenuOpen(false)}
              >
                Kulüp Dosyası
              </a>
            </div>
          )}
        </div>
      ) : (
        <div style={nv.inner}>
          <a href="#" style={nv.brand}>
            <div style={nv.logoShell}>
              <img src="../assets/logo.png" alt="Merter Akademi logosu" style={nv.logo} />
            </div>
            <div style={nv.brandCopy}>
              <div style={nv.brandName}>Merter Akademi</div>
              <div style={nv.brandSub}>Spor Kulübü / İstanbul / Kuruluş Sezonu</div>
            </div>
          </a>

          <nav style={nv.links}>
            {links.map((item) => (
              <a key={item.href} href={item.href} style={nv.link}>
                {item.label}
              </a>
            ))}
          </nav>

          <div style={nv.actions}>
            <div style={nv.meta}>
              <div style={nv.metaLabel}>Kurucu Dönem</div>
              <div style={nv.metaText}>2026-27 / Merter merkezli yıl boyu kulüp modeli</div>
            </div>

            <a
              href="../uploads/Merter_Akademi_Kurucu_Sponsor_Tanitim_2026.pdf"
              target="_blank"
              rel="noreferrer"
              style={nv.primary}
            >
              Kulüp Dosyası
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

const nv = {
  wrap: {
    position: "sticky",
    top: 0,
    zIndex: 60,
    background: "rgba(3, 18, 10, 0.78)",
    backdropFilter: "blur(24px) saturate(160%)",
    WebkitBackdropFilter: "blur(24px) saturate(160%)",
    borderBottom: "1px solid rgba(255,255,255,0.08)",
    boxShadow: "0 16px 40px rgba(0,0,0,0.2)",
  },
  line: {
    height: 1,
    background:
      "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 16%, rgba(240,122,24,0.48) 50%, rgba(255,255,255,0.12) 84%, transparent 100%)",
  },
  inner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "14px 28px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 20,
    flexWrap: "wrap",
  },
  mobileShell: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "10px 18px 12px",
  },
  mobileBar: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 12,
  },
  brand: {
    display: "flex",
    alignItems: "center",
    gap: 14,
    color: "#fff",
    textDecoration: "none",
  },
  brandMobile: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    color: "#fff",
    textDecoration: "none",
    minWidth: 0,
    flex: 1,
  },
  logoShell: {
    width: 56,
    height: 56,
    borderRadius: "50%",
    padding: 3,
    background: "linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 100%)",
    boxShadow: "0 0 0 1px rgba(255,255,255,0.07), 0 14px 32px rgba(0,0,0,0.24)",
    flexShrink: 0,
  },
  logoShellMobile: {
    width: 46,
    height: 46,
    borderRadius: "50%",
    padding: 2,
    background: "linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 100%)",
    boxShadow: "0 0 0 1px rgba(255,255,255,0.07), 0 10px 20px rgba(0,0,0,0.18)",
    flexShrink: 0,
  },
  logo: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
    borderRadius: "50%",
  },
  brandCopy: {
    display: "flex",
    flexDirection: "column",
    gap: 4,
  },
  brandCopyMobile: {
    display: "flex",
    flexDirection: "column",
    gap: 2,
    minWidth: 0,
  },
  brandName: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 20,
    letterSpacing: "0.06em",
    textTransform: "uppercase",
    lineHeight: 1,
  },
  brandNameMobile: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 18,
    letterSpacing: "0.05em",
    textTransform: "uppercase",
    lineHeight: 1,
  },
  brandSub: {
    fontFamily: "var(--font-display)",
    fontWeight: 500,
    fontSize: 10,
    letterSpacing: "0.24em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
  },
  brandSubMobile: {
    fontFamily: "var(--font-display)",
    fontWeight: 500,
    fontSize: 8,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
    whiteSpace: "normal",
  },
  links: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 18,
    flexWrap: "wrap",
  },
  link: {
    color: "rgba(255,255,255,0.72)",
    textDecoration: "none",
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 13,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    whiteSpace: "nowrap",
  },
  mobileLinks: {
    display: "grid",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
    gap: 10,
  },
  mobileLink: {
    padding: "10px 12px",
    borderRadius: 10,
    background: "rgba(255,255,255,0.04)",
    border: "1px solid rgba(255,255,255,0.08)",
    color: "#fff",
    textDecoration: "none",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    textAlign: "center",
  },
  actions: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    gap: 14,
    flexWrap: "wrap",
  },
  meta: {
    display: "flex",
    flexDirection: "column",
    gap: 3,
    padding: "10px 0",
    minWidth: 0,
  },
  metaLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
    textAlign: "right",
  },
  metaText: {
    fontFamily: "var(--font-body)",
    fontSize: 13,
    lineHeight: 1.4,
    color: "rgba(255,255,255,0.62)",
    maxWidth: 290,
    textAlign: "right",
    textWrap: "pretty",
  },
  mobileMeta: {
    padding: "12px 2px 4px",
    display: "flex",
    flexDirection: "column",
    gap: 4,
  },
  mobileMetaLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
  },
  mobileMetaText: {
    fontFamily: "var(--font-body)",
    fontSize: 13,
    lineHeight: 1.5,
    color: "rgba(255,255,255,0.68)",
    textWrap: "pretty",
  },
  primary: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "12px 18px",
    borderRadius: 999,
    textDecoration: "none",
    background: "linear-gradient(135deg, #ff9a42 0%, var(--ma-orange-500) 58%, #d66000 100%)",
    color: "var(--ma-green-950)",
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 13,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    boxShadow: "0 16px 30px rgba(240,122,24,0.22), inset 0 1px 0 rgba(255,255,255,0.18)",
    whiteSpace: "nowrap",
  },
  mobilePrimary: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    padding: "13px 18px",
    borderRadius: 999,
    textDecoration: "none",
    background: "linear-gradient(135deg, #ff9a42 0%, var(--ma-orange-500) 58%, #d66000 100%)",
    color: "var(--ma-green-950)",
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 13,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    boxShadow: "0 14px 24px rgba(240,122,24,0.18)",
  },
  menuButton: {
    border: "1px solid rgba(255,255,255,0.12)",
    background: "rgba(255,255,255,0.04)",
    color: "#fff",
    borderRadius: 999,
    padding: "10px 14px",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    cursor: "pointer",
    flexShrink: 0,
  },
  mobilePanel: {
    marginTop: 14,
    display: "grid",
    gap: 12,
    paddingTop: 12,
    borderTop: "1px solid rgba(255,255,255,0.08)",
  },
};