/* ============================================================
   <CookieBanner /> — GDPR / PDPL-compliant consent banner.
   Three actions: Accept all · Essential only · Manage preferences.
   Persists choice to localStorage; never shown again unless the
   user revisits with the cookie cleared.
   ============================================================ */

const COOKIE_KEY = "innoveev:cookie-consent";

function CookieBanner() {
  const [state, setState] = React.useState(() => {
    if (typeof window === "undefined") return "set";
    try { return localStorage.getItem(COOKIE_KEY) || "unset"; } catch { return "unset"; }
  });
  const [managing, setManaging] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ analytics: true, marketing: false });

  if (state !== "unset" && !managing) return null;

  const persist = (choice) => {
    try { localStorage.setItem(COOKIE_KEY, JSON.stringify({ choice, prefs, ts: Date.now() })); } catch {}
    setState(choice);
    setManaging(false);
  };

  if (managing) {
    return (
      <div className="cookie-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-mgr-title">
        <div className="cookie-modal__backdrop" onClick={() => setManaging(false)}></div>
        <div className="cookie-modal__card">
          <h2 id="cookie-mgr-title" className="h3" style={{ margin: 0 }}>Cookie preferences</h2>
          <p className="body" style={{ marginTop: 8 }}>
            We use a small number of cookies. Pick which ones we may set. You can change this any time from the footer.
          </p>

          <ul className="cookie-list">
            <li>
              <div>
                <strong>Essential</strong>
                <p>Required for the site to function. Cannot be disabled.</p>
              </div>
              <span className="cookie-pill cookie-pill--locked">Always on</span>
            </li>
            <li>
              <div>
                <strong>Analytics</strong>
                <p>Anonymous usage data so we can see what's working. No personal data.</p>
              </div>
              <label className="cookie-switch">
                <input
                  type="checkbox"
                  checked={prefs.analytics}
                  onChange={(e) => setPrefs((p) => ({ ...p, analytics: e.target.checked }))}
                />
                <span></span>
              </label>
            </li>
            <li>
              <div>
                <strong>Marketing</strong>
                <p>Off by default. We don't run remarketing, but if we do later, this controls it.</p>
              </div>
              <label className="cookie-switch">
                <input
                  type="checkbox"
                  checked={prefs.marketing}
                  onChange={(e) => setPrefs((p) => ({ ...p, marketing: e.target.checked }))}
                />
                <span></span>
              </label>
            </li>
          </ul>

          <div className="cookie-modal__actions">
            <button type="button" className="btn btn--secondary" onClick={() => setManaging(false)}>Cancel</button>
            <button type="button" className="btn btn--primary" onClick={() => persist("custom")}>
              Save preferences
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="cookie-banner" role="region" aria-label="Cookie consent">
      <div className="cookie-banner__copy">
        <strong>We use a few cookies.</strong>
        <p>
          Essential ones keep the site working. Analytics help us improve it. You decide.
          See our <a href="/privacy.html">privacy policy</a> for the detail.
        </p>
      </div>
      <div className="cookie-banner__actions">
        <button type="button" className="btn btn--ghost btn--small" onClick={() => setManaging(true)}>
          Manage
        </button>
        <button type="button" className="btn btn--secondary btn--small" onClick={() => persist("essential")}>
          Essential only
        </button>
        <button type="button" className="btn btn--primary btn--small" onClick={() => persist("all")}>
          Accept all
        </button>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;