const LeadNav = ({ onCta, spotsLeft }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: scrolled ? "rgba(255,255,255,0.72)" : "rgba(255,255,255,0)",
      backdropFilter: scrolled ? "saturate(180%) blur(20px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(180%) blur(20px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(5,27,66,0.12)" : "1px solid transparent",
      transition: "background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease",
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: isMobile ? "10px 16px" : "12px 24px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: isMobile ? 10 : 20,
        height: isMobile ? 48 : 52, boxSizing: "border-box",
      }}>
        <a href="https://difiorecreative.com" target="_blank" rel="noopener" style={{
          display: "flex", alignItems: "center", gap: 8,
          textDecoration: "none", color: "#051B42",
          flex: "0 0 auto", minWidth: 0,
        }}>
          <img src="assets/logo-brand.png" alt="Di Fiore Creative"
            width={isMobile ? 24 : 28} height={isMobile ? 24 : 28}
            style={{ display: "block", flex: "none" }}/>
          <div style={{
            fontFamily: "-apple-system, 'SF Pro Display', 'Inter', sans-serif",
            fontWeight: 600, fontSize: isMobile ? 14 : 15, letterSpacing: "-0.015em",
            whiteSpace: "nowrap",
          }}>
            Di Fiore Creative
          </div>
        </a>
        <div style={{
          display: "flex", alignItems: "center",
          gap: isMobile ? 8 : 16, flex: "0 0 auto",
        }}>
          {!isMobile && (
            <div style={{
              display: "flex", alignItems: "center", gap: 8,
              fontFamily: "-apple-system, 'SF Pro Text', 'Inter', sans-serif",
              fontSize: 12, color: "#051B42",
              padding: "6px 12px", borderRadius: 999,
              background: "rgba(5,27,66,0.06)",
              whiteSpace: "nowrap",
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999, background: "#051B42",
                animation: "df-pulse 2s ease-in-out infinite",
              }}/>
              <span><b style={{ fontWeight: 600 }}>{spotsLeft}</b> of 10 spots left</span>
            </div>
          )}
          {isMobile && (
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              fontFamily: "-apple-system, 'SF Pro Text', 'Inter', sans-serif",
              fontSize: 12, color: "#051B42",
              padding: "5px 10px", borderRadius: 999,
              background: "rgba(5,27,66,0.06)",
              whiteSpace: "nowrap",
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999, background: "#051B42",
                animation: "df-pulse 2s ease-in-out infinite",
              }}/>
              <span><b style={{ fontWeight: 600 }}>{spotsLeft}</b>/10 left</span>
            </div>
          )}
          <a href="#claim" onClick={(e) => { e.preventDefault(); onCta?.(); }} style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            background: "#051B42", color: "#fff",
            padding: isMobile ? "7px 14px" : "8px 18px", borderRadius: 999,
            fontFamily: "-apple-system, 'SF Pro Text', 'Inter', sans-serif",
            fontWeight: 500, fontSize: isMobile ? 13 : 14, letterSpacing: "-0.01em",
            textDecoration: "none", whiteSpace: "nowrap",
            transition: "background 160ms ease",
          }}
          onMouseEnter={(e)=>{e.currentTarget.style.background="#0A2A5C";}}
          onMouseLeave={(e)=>{e.currentTarget.style.background="#051B42";}}
          >
            {isMobile ? "Claim" : "Claim free month"}
          </a>
        </div>
      </div>
      <style>{`@keyframes df-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }`}</style>
    </header>
  );
};
window.LeadNav = LeadNav;