/* Nav + Announcement bar */

function QuoteBadge() {
  const [count, setCount] = React.useState(() => window.__scdQuote ? window.__scdQuote.count() : 0);
  React.useEffect(() => {
    if (!window.__scdQuote) return;
    return window.__scdQuote.subscribe(items => {
      setCount(items.reduce((n, i) => n + (i.qty || 0), 0));
    });
  }, []);
  return (
    <button
      aria-label={`Quote request, ${count} item${count === 1 ? "" : "s"}`}
      onClick={() => window.__scdQuote && window.__scdQuote.open()}
      style={{ ...iconBtnStyle, position: "relative" }}
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
        <polyline points="14 2 14 8 20 8"/>
        <line x1="9" y1="13" x2="15" y2="13"/>
        <line x1="9" y1="17" x2="13" y2="17"/>
      </svg>
      {count > 0 && (
        <span style={{
          position: "absolute", top: 2, right: 2,
          background: "var(--scd-blush-500)", color: "var(--scd-navy-900)",
          fontSize: 9, borderRadius: 999, padding: "2px 5px", fontWeight: 700,
          minWidth: 15, textAlign: "center", lineHeight: 1.2,
          letterSpacing: "0.02em",
        }}>{count}</span>
      )}
    </button>
  );
}

function AnnouncementBar() {
  return (
    <div className="announce" style={{
      background: "var(--scd-navy-900)",
      color: "var(--scd-cream-100)",
      fontSize: 13,
      padding: "9px 0",
      textAlign: "center",
      fontFamily: "var(--font-body)",
      letterSpacing: "0.01em",
    }}>
      <div className="wrap" style={{ display: "flex", justifyContent: "center", gap: 24, flexWrap: "wrap", alignItems: "center" }}>
        <span>Free freight on qualifying B2B orders over <strong style={{ fontWeight: 600, color: "var(--scd-cream-50)" }}>$500</strong>.</span>
        <span style={{ color: "var(--scd-blush-300)" }}>·</span>
        <span style={{ color: "var(--scd-cream-200)" }}>Family-owned, shipping nationwide from Orange County.</span>
      </div>
    </div>
  );
}

function TopNav() {
  const [open, setOpen] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const lastY = React.useRef(0);

  React.useEffect(() => {
    lastY.current = window.scrollY || 0;
    const THRESHOLD = 8;        // ignore tiny jitters
    const TOP_SHOW = 64;        // always visible near top
    let ticking = false;

    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY || 0;
        const dy = y - lastY.current;
        if (y < TOP_SHOW) {
          setHidden(false);
        } else if (Math.abs(dy) > THRESHOLD) {
          setHidden(dy > 0);
        }
        lastY.current = y;
        ticking = false;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      borderBottom: "1px solid var(--border)",
      background: "var(--scd-cream-100)",
      position: "sticky", top: 0, zIndex: 20,
      transform: hidden ? "translateY(-100%)" : "translateY(0)",
      transition: "transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1)",
      willChange: "transform",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", gap: 32,
        padding: "14px 48px", minHeight: 80,
        maxWidth: 1440, marginLeft: "auto", marginRight: "auto",
      }}>
        <a href="homepage-v1.html" aria-label="South Coast Designs home" style={{
          textDecoration: "none", display: "block",
          marginRight: 8, flexShrink: 0,
          width: 200, height: 52, position: "relative",
        }}>
          <img src="assets/logo-trim.png" alt="South Coast Designs"
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%",
              objectFit: "contain", objectPosition: "left center",
              display: "block",
            }}/>
        </a>
        <nav aria-label="Primary" style={{
          display: "flex", gap: 2, marginLeft: 12,
        }} className="nav-links">
          {[
            { label: "Trimmers", href: "collection-rotary-trimmers-v1.html" },
            { label: "Our story", href: "about-v1.html" },
            { label: "B2B",       href: "b2b-wholesale-v1.html" },
            { label: "FAQ",       href: "faq-v1.html" },
            { label: "Contact",   href: "contact-v1.html" },
          ].map(l => (
            <a key={l.label} href={l.href} style={navLinkStyle}
              onMouseOver={e => { e.currentTarget.style.color = "var(--scd-navy-900)"; e.currentTarget.style.background = "var(--scd-cream-200)"; }}
              onMouseOut={e => { e.currentTarget.style.color = "var(--fg)"; e.currentTarget.style.background = "transparent"; }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", alignItems: "center", gap: 6 }} className="nav-icons">
          <button aria-label="Search" style={iconBtnStyle}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
          </button>
          <button aria-label="Account" style={iconBtnStyle}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
          </button>
          <QuoteBadge/>
          <button aria-label="Cart, 2 items" style={{ ...iconBtnStyle, position: "relative", marginRight: 10 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3h3l2.5 13h11L22 7H7"/><circle cx="10" cy="20" r="1.2"/><circle cx="18" cy="20" r="1.2"/></svg>
            <span style={cartBadgeStyle}>2</span>
          </button>
          <a href="b2b-wholesale-v1.html#quote-form" className="btn btn--primary btn--sm">Request B2B quote</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 1080px) { .nav-links { display: none !important; } }
        @media (max-width: 640px) {
          .nav-icons button[aria-label="Search"],
          .nav-icons button[aria-label="Account"] { display: none !important; }
          .nav-icons button[aria-label^="Quote request"] { display: none !important; }
        }
      `}</style>
    </header>
  );
}

const navLinkStyle = {
  color: "var(--fg)", fontSize: 14, fontWeight: 500,
  textDecoration: "none", padding: "8px 12px", borderRadius: 2,
  transition: "background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)",
};

const iconBtnStyle = {
  width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center",
  border: "1px solid transparent", borderRadius: 2,
  background: "transparent", color: "var(--fg-brand)", cursor: "pointer",
  transition: "background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)",
};

const cartBadgeStyle = {
  position: "absolute", top: 2, right: 2,
  background: "var(--scd-navy-800)", color: "var(--scd-cream-50)",
  fontSize: 9, borderRadius: 999, padding: "2px 5px", fontWeight: 600,
  minWidth: 15, textAlign: "center", lineHeight: 1.2,
};

Object.assign(window, { TopNav, AnnouncementBar });
