// Marketing site — top navigation (responsive, transparent → solid on scroll).
const { useState, useEffect } = React;
const { Button } = window.TheGangsaDesignSystem_223a82;

const MENU = [
  { label: "소개", en: "About" },
  { label: "도구", en: "Tools" },
  { label: "요금제", en: "Pricing" },
  { label: "문의", en: "Contact" },
];

function Nav({ onCta, onLogin }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 60,
      background: scrolled ? "color-mix(in srgb, var(--bg-app) 86%, transparent)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "background .3s ease, border-color .3s ease",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "16px clamp(18px,4vw,44px)", display: "flex", alignItems: "center", gap: 16 }}>
        <Logo />
        <nav className="site-nav-desktop" style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 30 }}>
          {MENU.map((m) => (
            <a key={m.label} href="#" style={{ textDecoration: "none", color: "var(--text-secondary)", fontSize: 14.5, fontWeight: 600, display: "inline-flex", alignItems: "baseline", gap: 5 }}>
              {m.label}
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-soft)" }}>{m.en}</span>
            </a>
          ))}
          <a onClick={onLogin} style={{ textDecoration: "none", cursor: "pointer", color: "var(--text-primary)", fontSize: 14.5, fontWeight: 700 }}>로그인</a>
          <Button variant="primary" size="sm" onClick={onCta}>무료로 시작</Button>
        </nav>
        <button className="site-nav-burger" onClick={() => setOpen(!open)} aria-label="menu" style={{
          marginLeft: "auto", display: "none", width: 42, height: 42, borderRadius: "var(--r-md)",
          border: "1px solid var(--line-2)", background: "var(--bg-surface)", cursor: "pointer",
          alignItems: "center", justifyContent: "center", color: "var(--text-primary)",
        }}>
          <Icon name={open ? "x" : "menu"} size={20} />
        </button>
      </div>

      {open && (
        <div className="site-nav-mobile" style={{ padding: "8px clamp(18px,4vw,44px) 20px", display: "none", flexDirection: "column", gap: 4, borderTop: "1px solid var(--line)" }}>
          {MENU.map((m) => (
            <a key={m.label} href="#" onClick={() => setOpen(false)} style={{ textDecoration: "none", color: "var(--text-primary)", fontSize: 16, fontWeight: 600, padding: "12px 8px", borderRadius: "var(--r-md)" }}>
              {m.label} <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-soft)" }}>{m.en}</span>
            </a>
          ))}
          <a onClick={() => { setOpen(false); onLogin && onLogin(); }} style={{ textDecoration: "none", cursor: "pointer", color: "var(--text-primary)", fontSize: 16, fontWeight: 700, padding: "12px 8px", borderRadius: "var(--r-md)" }}>로그인</a>
          <div style={{ marginTop: 8 }}><Button variant="primary" fullWidth onClick={() => { setOpen(false); onCta && onCta(); }}>무료로 시작</Button></div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Nav });