// cookie-banner.jsx - minimal GDPR-style consent banner
// Stores preference in localStorage. Fires window event when consent changes
// so analytics can decide whether to load.

const CONSENT_KEY = "sb-cookie-consent"; // values: "all" | "essential"

function getConsent() {
  try { return localStorage.getItem(CONSENT_KEY); } catch (e) { return null; }
}
function setConsent(v) {
  try { localStorage.setItem(CONSENT_KEY, v); } catch (e) {}
  window.dispatchEvent(new CustomEvent("sb-consent-changed", { detail: { consent: v } }));
}

function CookieBanner() {
  const [consent, setLocalConsent] = React.useState(() => getConsent());
  const [showPrefs, setShowPrefs] = React.useState(false);
  const [isOpen, setIsOpen] = React.useState(() => !getConsent());

  const accept = () => { setConsent("all"); setLocalConsent("all"); };
  const reject = () => { setConsent("essential"); setLocalConsent("essential"); };
  const openBanner = () => {
    setShowPrefs(true);
    setIsOpen(true);
  };

  React.useEffect(() => {
    if (consent) setIsOpen(false);
  }, [consent]);

  return (
    <>
      {isOpen && (
        <div className="sb-cookie" role="dialog" aria-labelledby="sb-cookie-title">
          <div className="sb-cookie-inner">
            <div className="sb-cookie-text">
              <span className="kicker" id="sb-cookie-title">Cookies &amp; privacy</span>
              <p>
                We use a couple of cookies to make this site work and (if you
                consent) to measure which ads bring you here. We do not sell data,
                run remarketing, or send cold email.{" "}
                <a href="privacy.html">Privacy policy →</a>
              </p>
              {showPrefs && (
                <div className="sb-cookie-prefs">
                  <div className="sb-cookie-pref">
                    <span><strong>Strictly necessary</strong> - session, security, your consent itself.</span>
                    <span className="sb-cookie-pref-locked mono">always on</span>
                  </div>
                  <div className="sb-cookie-pref">
                    <span><strong>Analytics &amp; ad measurement</strong> - GA4, Microsoft Clarity, LinkedIn Insight Tag, Meta (Facebook/Instagram). Anonymous, aggregated.</span>
                    <span className="sb-cookie-pref-opt mono">your choice</span>
                  </div>
                </div>
              )}
            </div>
            <div className="sb-cookie-actions">
              {!showPrefs && (
                <button className="sb-cookie-link" onClick={() => setShowPrefs(true)}>
                  See details
                </button>
              )}
              <button className="sb-cookie-btn sb-cookie-btn--ghost" onClick={reject}>
                Essentials only
              </button>
              <button className="sb-cookie-btn sb-cookie-btn--primary" onClick={accept}>
                Accept all
              </button>
            </div>
          </div>
        </div>
      )}

      {consent && !isOpen && (
        <button className="sb-cookie-manage mono" onClick={openBanner} type="button">
          Cookie settings
        </button>
      )}
    </>
  );
}

// Styles
const cookieStyles = document.createElement("style");
cookieStyles.textContent = `
  .sb-cookie {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 90;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.35);
    animation: sb-cookie-in 0.4s var(--ease);
    max-width: 920px;
    margin-inline: auto;
  }
  .sb-cookie-manage {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 89;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--muted);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .sb-cookie-manage:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--paper-2);
  }
  @keyframes sb-cookie-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  .sb-cookie-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    padding: 18px 22px;
    align-items: center;
  }
  @media (max-width: 720px) {
    .sb-cookie-inner { grid-template-columns: 1fr; }
    .sb-cookie-manage {
      left: 12px;
      bottom: 12px;
    }
  }
  .sb-cookie-text { display: flex; flex-direction: column; gap: 8px; }
  .sb-cookie-text p {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 60ch;
  }
  .sb-cookie-text a {
    color: var(--bridge-red);
    border-bottom: 1px solid currentColor;
  }
  .sb-cookie-actions {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
  }
  .sb-cookie-link {
    background: none; border: 0;
    font-size: 13px; color: var(--muted);
    border-bottom: 1px dashed currentColor;
    padding: 4px 0; cursor: pointer;
    font-family: var(--f-mono);
  }
  .sb-cookie-link:hover { color: var(--ink); }
  .sb-cookie-btn {
    appearance: none;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .sb-cookie-btn--ghost {
    background: transparent;
    color: var(--ink);
  }
  .sb-cookie-btn--ghost:hover { background: var(--paper-2); }
  .sb-cookie-btn--primary {
    background: var(--bridge-red);
    color: #F7F2E9;
    border-color: var(--bridge-red);
  }
  .sb-cookie-btn--primary:hover {
    background: var(--bridge-red);
    border-color: var(--bridge-red);
  }
  .sb-cookie-prefs {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .sb-cookie-pref {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 13px; color: var(--muted);
  }
  .sb-cookie-pref strong { color: var(--ink); font-weight: 500; }
  .sb-cookie-pref-locked,
  .sb-cookie-pref-opt {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--paper-2);
    flex-shrink: 0;
    letter-spacing: 0.06em;
  }
  .sb-cookie-pref-locked { color: var(--muted); }
  .sb-cookie-pref-opt { color: var(--bridge-red); }
`;
document.head.appendChild(cookieStyles);

Object.assign(window, { CookieBanner });