/* Navbar — floating pill style, matches Framer site */

const Navbar = ({ theme, setTheme, locale, setLocale }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [
    { href: "#hero", key: "home" },
    { href: "#features", key: "features" },
    { href: "#how", key: "how" },
    { href: "#pricing", key: "pricing" },
    { href: "#comparison", key: "comparison" },
    { href: "#contact", key: "contact" },
  ];

  return (
    <header style={{
      position: "sticky", top: 12, zIndex: 40,
      padding: "0 16px",
    }}>
      <div style={{
        maxWidth: 1100, margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 12,
        padding: "8px 8px 8px 20px",
        borderRadius: 999,
        background: scrolled ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.7)",
        border: "1px solid var(--line)",
        backdropFilter: "blur(16px) saturate(160%)",
        WebkitBackdropFilter: "blur(16px) saturate(160%)",
        boxShadow: scrolled ? "var(--shadow)" : "var(--shadow-sm)",
        transition: "all 200ms var(--ease)",
      }}>
        <a href="#hero" style={{ display: "inline-flex", flex: "none" }}><Logo /></a>

        <nav className="hidden-sm" style={{ display: "flex", gap: 2 }}>
          {links.map((l) => (
            <a key={l.key} href={l.href} style={{
              padding: "9px 14px", fontSize: 14, color: "var(--ink-2)", borderRadius: 999,
              transition: "color 160ms var(--ease), background 160ms var(--ease)",
            }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.background = "rgba(0,0,0,0.04)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-2)"; e.currentTarget.style.background = "transparent"; }}
            >
              {t(`nav.${l.key}`)}
            </a>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <select value={locale} onChange={(e) => setLocale(e.target.value)} className="hidden-sm" style={{
            appearance: "none",
            background: "transparent", border: "1px solid var(--line)",
            color: "var(--ink-2)", fontSize: 12, padding: "6px 10px",
            borderRadius: 999, cursor: "pointer",
          }} aria-label="Language">
            <option value="en">EN</option><option value="zh-TW">繁</option><option value="zh-CN">简</option>
          </select>
          <a href={window.ctaUrl()} target="_blank" rel="noreferrer" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14 }}>
            {t("nav.cta")}
          </a>
          <button aria-label="Menu" onClick={() => setOpen(true)} className="nav-mbtn" style={{
            display: "none", width: 36, height: 36, borderRadius: 999,
            border: "1px solid var(--line)", alignItems: "center", justifyContent: "center",
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 5h10M3 11h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
          </button>
        </div>
      </div>

      {open && (
        <div onClick={() => setOpen(false)} style={{
          position: "fixed", inset: 0, zIndex: 60, padding: 24,
          background: "rgba(255,255,255,0.8)", backdropFilter: "blur(10px)",
          display: "flex", alignItems: "flex-start", justifyContent: "center",
        }}>
          <div onClick={(e) => e.stopPropagation()} className="card" style={{ width: "100%", maxWidth: 340, padding: 16, marginTop: 80 }}>
            {links.map((l) => (
              <a key={l.key} href={l.href} onClick={() => setOpen(false)} style={{ display: "block", padding: "12px 12px", borderRadius: 10, fontSize: 15 }}>
                {t(`nav.${l.key}`)}
              </a>
            ))}
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 860px) {
          .nav-mbtn { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
};

window.Navbar = Navbar;