// Top navigation — sticky, transparent over hero, solid after scroll
function Nav({ lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const t = (ja, en) => (lang === "ja" ? ja : en);
  const links = [
    { id: "about", label: t("私たちについて", "About") },
    { id: "services", label: t("サービス", "Services") },
    { id: "markets", label: t("展開市場", "Markets") },
    { id: "process", label: t("進め方", "Process") },
    { id: "company", label: t("会社情報", "Company") },
    { id: "contact", label: t("お問い合わせ", "Contact") },
  ];

  const go = (id) => {
    setMobileOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <header style={{
        position: "fixed",
        top: 0, left: 0, right: 0,
        zIndex: 50,
        transition: "all 320ms ease",
        background: scrolled ? "rgba(255,255,255,0.88)" : "rgba(255,255,255,0)",
        backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid rgba(74,168,208,0.12)" : "1px solid transparent",
      }}>
        <div style={{
          maxWidth: 1320, margin: "0 auto",
          padding: scrolled ? "14px 32px" : "22px 32px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          transition: "padding 320ms ease",
        }}>
          <button onClick={() => go("top")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer" }}>
            <RiverenceLogo size={scrolled ? 30 : 34} />
          </button>

          <nav className="desktop-nav" style={{ display: "flex", alignItems: "center", gap: 36 }}>
            {links.map(l => (
              <button key={l.id} onClick={() => go(l.id)} style={navLinkStyle}>
                {l.label}
              </button>
            ))}
            <div style={{ display: "flex", gap: 0, marginLeft: 8, border: "1px solid rgba(58,58,58,0.18)", borderRadius: 999, overflow: "hidden" }}>
              {["ja", "en"].map(l => (
                <button key={l} onClick={() => setLang(l)} style={{
                  padding: "6px 12px",
                  fontSize: 11,
                  fontFamily: "'Inter', sans-serif",
                  letterSpacing: "0.12em",
                  fontWeight: 500,
                  background: lang === l ? "#3a3a3a" : "transparent",
                  color: lang === l ? "#fff" : "#3a3a3a",
                  border: "none",
                  cursor: "pointer",
                  transition: "all 200ms",
                }}>
                  {l.toUpperCase()}
                </button>
              ))}
            </div>
          </nav>

          <button
            className="mobile-toggle"
            onClick={() => setMobileOpen(!mobileOpen)}
            style={{ display: "none", background: "none", border: "none", cursor: "pointer", padding: 8 }}
            aria-label="menu"
          >
            <svg width="22" height="22" viewBox="0 0 22 22">
              <path d={mobileOpen ? "M4 4 L18 18 M18 4 L4 18" : "M3 6 H19 M3 11 H19 M3 16 H19"}
                stroke="#3a3a3a" strokeWidth="1.6" strokeLinecap="round" fill="none" />
            </svg>
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div style={{
        position: "fixed", inset: 0, zIndex: 49,
        background: "rgba(255,255,255,0.98)",
        backdropFilter: "blur(20px)",
        transform: mobileOpen ? "translateY(0)" : "translateY(-100%)",
        transition: "transform 420ms cubic-bezier(.2,.8,.2,1)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <nav style={{ display: "flex", flexDirection: "column", gap: 22, alignItems: "center" }}>
          {links.map(l => (
            <button key={l.id} onClick={() => go(l.id)} style={{
              background: "none", border: "none", cursor: "pointer",
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 22, color: "#1a2942", letterSpacing: "0.04em",
            }}>
              {l.label}
            </button>
          ))}
        </nav>
      </div>
    </>
  );
}

const navLinkStyle = {
  background: "none", border: "none", cursor: "pointer",
  fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
  fontSize: 13,
  fontWeight: 500,
  letterSpacing: "0.06em",
  color: "#2a3a52",
  padding: "6px 0",
  position: "relative",
  transition: "color 200ms",
};

Object.assign(window, { Nav });