// Cookie consent banner for Layershop.eu
function CookieBanner() {
  const STORAGE_KEY = "layershop_cookie_consent_v1";
  const [open, setOpen] = React.useState(false);
  const [showSettings, setShowSettings] = React.useState(false);
  const [prefs, setPrefs] = React.useState({
    necessary: true,
    statistics: true,
    marketing: true,
    preferences: true,
  });

  React.useEffect(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEY);
      if (!stored) {
        setOpen(true);
      }
    } catch (e) {
      setOpen(true);
    }

    // Luister naar klik op "Cookiebeleid" in de footer
    const onOpenSettings = () => {
      setOpen(true);
      setShowSettings(true);
    };
    window.addEventListener("layershop:open-cookie-settings", onOpenSettings);
    return () => window.removeEventListener("layershop:open-cookie-settings", onOpenSettings);
  }, []);

  const save = (values) => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...values, timestamp: Date.now() }));
    } catch (e) {}
    setOpen(false);
  };

  const acceptAll = () => save({ necessary: true, statistics: true, marketing: true, preferences: true });
  const onlyNecessary = () => save({ necessary: true, statistics: false, marketing: false, preferences: false });
  const saveCustom = () => save(prefs);

  if (!open) return null;

  const togglePref = (key) => {
    if (key === "necessary") return;
    setPrefs(p => ({ ...p, [key]: !p[key] }));
  };

  return (
    <div style={{
      position: "fixed", bottom: 24, left: 24, right: 24, zIndex: 1000,
      display: "flex", justifyContent: "center", pointerEvents: "none"
    }}>
      <div style={{
        pointerEvents: "auto",
        background: "#fff",
        borderRadius: 16,
        boxShadow: "0 30px 80px -20px rgba(14,19,48,0.35), 0 8px 24px -8px rgba(14,19,48,0.15)",
        padding: 28,
        maxWidth: 980,
        width: "100%",
        fontFamily: "'Inter', sans-serif",
        color: "#0E1330",
        border: "1px solid rgba(14,19,48,0.06)"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 380px", minWidth: 260 }}>
            <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, margin: "0 0 8px", color: "#0E1330" }}>
              Cookies
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, margin: 0, color: "rgba(14,19,48,0.7)" }}>
              We gebruiken cookies om de website goed te laten werken en (optioneel) inzicht te krijgen in het gebruik. Je kunt hieronder je voorkeuren instellen.
            </p>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
            <button onClick={() => setShowSettings(s => !s)} style={btnSecondary}>Instellen</button>
            <button onClick={onlyNecessary} style={btnSecondary}>Alleen noodzakelijk</button>
            <button onClick={acceptAll} style={btnPrimary}>Alles accepteren</button>
          </div>
        </div>

        {showSettings && (
          <>
            <div style={{ height: 1, background: "rgba(14,19,48,0.08)", margin: "22px 0 20px" }}/>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
              <PrefRow label="Noodzakelijk" sub="Altijd actief" value={true} disabled />
              <PrefRow label="Statistiek" sub="Gebruik meten" value={prefs.statistics} onToggle={() => togglePref("statistics")} />
              <PrefRow label="Marketing" sub="Campagnes" value={prefs.marketing} onToggle={() => togglePref("marketing")} />
              <PrefRow label="Voorkeuren" sub="Instellingen onthouden" value={prefs.preferences} onToggle={() => togglePref("preferences")} />
            </div>
            <div style={{ marginTop: 18, display: "flex", justifyContent: "flex-end" }}>
              <button onClick={saveCustom} style={btnPrimary}>Voorkeuren opslaan</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function PrefRow({ label, sub, value, onToggle, disabled }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
      background: "#F4F5F7", padding: "14px 18px", borderRadius: 10
    }}>
      <div>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: "#0E1330" }}>{label}</div>
        <div style={{ fontSize: 12, color: "rgba(14,19,48,0.6)", marginTop: 2 }}>{sub}</div>
      </div>
      <button
        onClick={disabled ? undefined : onToggle}
        aria-pressed={value}
        disabled={disabled}
        style={{
          width: 44, height: 24, borderRadius: 999,
          background: value ? "#F04E23" : "#CBD0DA",
          border: "none", padding: 0, position: "relative",
          cursor: disabled ? "default" : "pointer",
          opacity: disabled ? 0.85 : 1,
          transition: "background .15s"
        }}>
        <span style={{
          position: "absolute", top: 3, left: value ? 23 : 3,
          width: 18, height: 18, borderRadius: "50%", background: "#fff",
          boxShadow: "0 1px 3px rgba(0,0,0,0.25)",
          transition: "left .15s"
        }}/>
      </button>
    </div>
  );
}

const btnPrimary = {
  fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 600,
  background: "#1E2A8A", color: "#fff",
  border: "none", borderRadius: 10, padding: "10px 18px", cursor: "pointer"
};
const btnSecondary = {
  fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 500,
  background: "#fff", color: "#0E1330",
  border: "1px solid rgba(14,19,48,0.18)", borderRadius: 10, padding: "10px 16px", cursor: "pointer"
};

window.CookieBanner = CookieBanner;