// Floating pill nav, centered at top of viewport.
// Items animate on hover; CTA is the red signal pill.
function Nav({ theme, onThemeToggle }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [
    { href: "#services",     label: "Services" },
    { href: "#process",      label: "Process" },
    { href: "#cas",          label: "Cas clients" },
    { href: "#booking",      label: "Contact" },
  ];

  const wrapStyle = {
    position: "fixed",
    top: scrolled ? 12 : 20,
    left: "50%",
    transform: "translateX(-50%)",
    zIndex: 100,
    transition: "top 0.28s var(--ease-ui)",
    width: "calc(100% - 24px)",
    maxWidth: 880,
    pointerEvents: "auto",
  };

  const pillStyle = {
    display: "flex",
    alignItems: "center",
    gap: 4,
    padding: "6px 6px 6px 20px",
    borderRadius: 9999,
    border: "1px solid var(--hairline-strong)",
    background: scrolled
      ? "color-mix(in oklab, var(--canvas) 72%, transparent)"
      : "color-mix(in oklab, var(--canvas) 55%, transparent)",
    backdropFilter: "blur(20px) saturate(140%)",
    WebkitBackdropFilter: "blur(20px) saturate(140%)",
    boxShadow: scrolled
      ? "0 12px 40px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04)"
      : "0 4px 20px -8px rgba(0,0,0,0.4)",
    transition: "background 0.28s var(--ease-ui), box-shadow 0.28s var(--ease-ui)",
  };

  return (
    <nav style={wrapStyle} data-screen-label="Nav">
      <div style={pillStyle}>
        {/* Brand */}
        <a href="#" style={{ display: "flex", alignItems: "center", paddingRight: 14, paddingLeft: 4 }}>
          <PulseLogo size={20} />
        </a>

        {/* Hairline separator */}
        <span className="nav-sep" style={{ width: 1, height: 18, background: "var(--hairline-strong)" }} />

        {/* Links — desktop */}
        <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 0 }}>
          {links.map((l) => (
            <a key={l.href} href={l.href} style={{
              padding: "8px 14px",
              fontSize: 13.5,
              color: "var(--body)",
              borderRadius: 9999,
              transition: "color 0.15s var(--ease-ui), background 0.15s var(--ease-ui)",
            }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.background = "rgba(255,255,255,0.05)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--body)"; e.currentTarget.style.background = "transparent"; }}
            >{l.label}</a>
          ))}
        </div>

        <div style={{ flex: 1 }} />

        {/* Primary CTA */}
        <a href="#booking" className="pill pill--primary pill--sm nav-cta" style={{ marginLeft: 4 }}>
          <span className="nav-cta-full">Réserver un audit</span>
          <span className="nav-cta-short">Audit</span>
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none" style={{ marginLeft: 2 }}>
            <path d="M3 9 9 3M9 3H4M9 3v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          </svg>
        </a>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .nav-links { display: none !important; }
          .nav-sep   { display: none !important; }
          .nav-cta-full  { display: none; }
          nav[data-screen-label="Nav"] > div { position: relative; min-height: 48px; }
          .nav-cta {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 0 !important;
          }
          .nav-cta:active { transform: translateY(-50%) scale(0.97); }
        }
        @media (min-width: 721px) {
          .nav-cta-short { display: none; }
        }
      `}</style>
    </nav>
  );
}

function PulseLogo({ size = 20 }) {
  // PULSE. wordmark — white letters with red E and red dot
  return (
    <span style={{
      fontFamily: "var(--font-display)",
      fontSize: size,
      fontWeight: 800,
      letterSpacing: "-0.025em",
      color: "var(--ink)",
      lineHeight: 1,
      whiteSpace: "nowrap",
      display: "inline-flex",
      alignItems: "baseline",
    }}>
      PULS<span style={{ color: "var(--accent)" }}>E.</span>
    </span>
  );
}

window.Nav = Nav;
window.PulseLogo = PulseLogo;