/* global React, Wordmark, useState, useEffect */

const NAV_ITEMS = [
 { id: "home", label: "홈" },
 { id: "about", label: "회사 소개" },
 { id: "products", label: "제품" },
 { id: "ir", label: "투자정보" },
 { id: "contact", label: "문의" },
];

function Nav({ current, onNavigate }) {
 const [scrolled, setScrolled] = useState(false);

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

 return (
 <header
 style={{
 position: "fixed",
 top: 0, left: 0, right: 0,
 zIndex: 50,
 background: scrolled ? "color-mix(in oklab, var(--bg) 80%, transparent)" : "transparent",
 backdropFilter: scrolled ? "saturate(160%) blur(14px)" : "none",
 WebkitBackdropFilter: scrolled ? "saturate(160%) blur(14px)" : "none",
 transition: "background .25s ease",
 }}
 >
 <div
 className="nav-inner"
 style={{
 height: "var(--nav-h)",
 display: "flex",
 alignItems: "center",
 gap: 24,
 padding: "0 clamp(20px, 4vw, 56px)",
 }}
 >
 <a href="#home" onClick={(e) => { e.preventDefault(); onNavigate("home"); }} style={{ display: "inline-flex" }}>
 <Wordmark />
 </a>

 <nav className="nav-links">
 {NAV_ITEMS.map((n, i) => (
 <React.Fragment key={n.id}>
 {i > 0 && <span className="nav-sep" aria-hidden />}
 <a
 href={`#${n.id}`}
 onClick={(e) => { e.preventDefault(); onNavigate(n.id); }}
 style={{
 padding: "8px 4px",
 fontSize: 14,
 color: current === n.id ? "var(--ink)" : "var(--ink-3)",
 fontWeight: current === n.id ? 500 : 400,
 transition: "color .15s ease",
 }}
 onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ink)")}
 onMouseLeave={(e) => (e.currentTarget.style.color = current === n.id ? "var(--ink)" : "var(--ink-3)")}
 >
 {n.label}
 </a>
 </React.Fragment>
 ))}
 </nav>

 <div className="grow" />

 <div className="row gap-8 nav-actions">
 <a
 onClick={(e) => { e.preventDefault(); onNavigate("contact"); }}
 href="#contact"
 className="btn sm"
 style={{ marginLeft: 8 }}
 >도입 문의</a>
 </div>
 </div>

 <style>{`
 .nav-links {
 display: flex;
 align-items: center;
 gap: 6px;
 padding-left: 12px;
 margin-left: 8px;
 border-left: 1px solid var(--line);
 }
 @media (max-width: 980px) {
 .nav-links, .nav-actions a:not(.btn) { display: none !important; }
 }
 @media (max-width: 720px) {
 .nav-actions .icon-btn { display: none; }
 }
 `}</style>
 </header>
 );
}

function SocialBtn({ children, aria }) {
 return (
 <button className="icon-btn liquid-glass" aria-label={aria}>
 {children}
 </button>
 );
}

window.Nav = Nav;
window.NAV_ITEMS = NAV_ITEMS;
