function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { href: "#mission", label: "Αποστολή" },
    { href: "#curriculum", label: "Μαθήματα" },
    { href: "#pillars", label: "Πυλώνες" },
    { href: "#gallery", label: "Πλατφόρμα" },
    { href: "#faq", label: "Ερωτήσεις" },
  ];

  return (
    <header className="sfy-nav" style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "rgba(241,236,224,0.92)" : "var(--paper)",
      borderBottom: scrolled ? "1px solid rgba(20,24,28,0.12)" : "1px solid transparent",
      backdropFilter: "saturate(140%) blur(10px)",
      WebkitBackdropFilter: "saturate(140%) blur(10px)",
      transition: "all .25s ease",
    }}>
      <div className="sfy-nav-inner" style={{
        maxWidth: 1400, margin: "0 auto",
        padding: "16px 32px",
        display: "flex", alignItems: "center", gap: 32,
      }}>
        <a href="/" style={{display:"flex", alignItems:"center", gap: 10}}>
          <img src="/images/logo.png" alt="" style={{height: 34, width: 34, objectFit: "contain"}} />
          <span className="sfy-nav-brand" style={{
            fontFamily: "var(--serif)", fontWeight: 600, fontSize: 21,
            letterSpacing: "-0.015em", color: "var(--ink)",
          }}>
            StudyForYou<span style={{color: "var(--ember)"}}>.</span>gr
          </span>
        </a>

        <nav style={{display:"flex", gap: 28, marginLeft: "auto"}} className="sfy-nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              fontSize: 13.5, color: "var(--ink-soft)",
              fontWeight: 500, letterSpacing: "0.005em",
            }}>{l.label}</a>
          ))}
        </nav>

        <div style={{display:"flex", gap: 10, alignItems:"center"}} className="sfy-nav-cta">
          <a href="login.php" style={{
            fontSize: 13.5, fontWeight: 500, color: "var(--ink)",
            padding: "10px 16px",
          }}>Σύνδεση</a>
          <a href="register.php" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontSize: 13.5, fontWeight: 600, color: "#fff",
            background: "var(--forest)", padding: "11px 20px",
            borderRadius: 999,
          }}>
            Εγγραφή
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
        </div>

        <button onClick={() => setMobile(!mobile)} className="sfy-burger" aria-label="Menu"
          style={{
            display: "none", flexDirection: "column", gap: 4,
            background: "transparent", border: 0, cursor: "pointer",
            padding: 8, marginLeft: "auto",
          }}>
          <span style={{width: 22, height: 2, background: "var(--ink)", transform: mobile ? "translateY(5px) rotate(45deg)" : "none", transition:"all .25s"}} />
          <span style={{width: 22, height: 2, background: "var(--ink)", opacity: mobile ? 0 : 1, transition:"all .25s"}} />
          <span style={{width: 22, height: 2, background: "var(--ink)", transform: mobile ? "translateY(-5px) rotate(-45deg)" : "none", transition:"all .25s"}} />
        </button>
      </div>

      {mobile && (
        <div className="sfy-nav-mobile" style={{background: "var(--paper)", borderTop: "1px solid var(--ink)"}}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setMobile(false)} className="sfy-nav-mlink" style={{
              display: "block", padding: "14px 32px", fontSize: 15, fontWeight: 500,
              color: "var(--ink)", borderBottom: "1px solid var(--paper-deep)",
            }}>{l.label}</a>
          ))}
          {/* Show login/register inside the mobile menu since the desktop CTA cluster is hidden */}
          <div className="sfy-nav-mcta" style={{display: "flex", gap: 10, padding: "16px 20px"}}>
            <a href="login.php" style={{
              flex: 1, textAlign: "center", padding: "12px 16px",
              border: "1.5px solid var(--ink)", borderRadius: 999,
              fontSize: 14, fontWeight: 500, color: "var(--ink)",
            }}>Σύνδεση</a>
            <a href="register.php" style={{
              flex: 1, textAlign: "center", padding: "12px 16px",
              background: "var(--forest)", color: "#fff", borderRadius: 999,
              fontSize: 14, fontWeight: 600,
            }}>Εγγραφή →</a>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 900px) {
          .sfy-nav-links, .sfy-nav-cta { display: none !important; }
          .sfy-burger { display: flex !important; }
        }
        /* ── Mobile ────────────────────────────────────────── */
        @media (max-width: 640px) {
          .sfy-nav-inner { padding: 12px 20px !important; gap: 16px !important; }
          .sfy-nav-brand { font-size: 18px !important; }
          .sfy-nav-mlink { padding: 14px 20px !important; }
        }
      `}</style>
    </header>
  );
}
window.Nav = Nav;