// ============================================
// COOKIE CONSENT — toont een banner bij eerste bezoek
// Slaat keuze op in localStorage onder 'lm_consent'
// Waarden: 'all' | 'essential' (essentieel-only)
// ============================================

function CookieBanner() {
  const cms = window.LM_CMS || {};
  const C = (window.LM_DATA?.COOKIES) || {};
  const navigate = (id) => {
    window.location.hash = '#/' + id;
    setVisible(false);
  };

  const getConsent = () => {
    try { return localStorage.getItem('lm_consent') || ''; } catch { return ''; }
  };
  const setConsent = (v) => {
    try { localStorage.setItem('lm_consent', v); } catch {}
  };

  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (!getConsent()) setVisible(true);
  }, []);

  if (!visible) return null;

  const title  = C.title         || 'Cookies & privacy';
  const msg    = C.message       || 'We gebruiken alleen essentiële cookies om de website te laten werken.';
  const accept = C.acceptLabel   || 'Akkoord';
  const reject = C.rejectLabel   || 'Alleen essentieel';
  const info   = C.settingsLabel || 'Meer info';

  return (
    <div role="dialog" aria-label={title} style={{
      position: 'fixed',
      bottom: 16,
      left: 16,
      right: 16,
      zIndex: 9999,
      maxWidth: 560,
      margin: '0 auto',
      background: 'var(--surface, #0e1a26)',
      color: 'var(--ink-900, white)',
      border: '1px solid var(--border, rgba(255,255,255,.12))',
      borderRadius: 14,
      boxShadow: 'var(--shadow-lg, 0 20px 48px rgba(14,26,38,.35))',
      padding: 20,
      animation: 'lmCookieIn .35s ease',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <span style={{ fontSize: 18 }}>🍪</span>
        <strong style={{ fontSize: 15 }}>{title}</strong>
      </div>
      <p style={{ margin: '0 0 14px', fontSize: 13, lineHeight: 1.55, color: 'var(--ink-700, rgba(255,255,255,.8))' }}>
        {msg}
      </p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
        <button
          onClick={() => { setConsent('all'); setVisible(false); }}
          className="btn btn-sm"
          style={{ background: 'var(--teal-500)', color: 'var(--on-accent, #0e1a26)', border: 'none', fontWeight: 700 }}>
          {accept}
        </button>
        <button
          onClick={() => { setConsent('essential'); setVisible(false); }}
          className="btn btn-sm"
          style={{ background: 'transparent', color: 'var(--ink-900, white)', border: '1px solid var(--ink-300, rgba(255,255,255,.3))' }}>
          {reject}
        </button>
        <a
          href="#/privacybeleid"
          onClick={(e) => { e.preventDefault(); navigate('privacybeleid'); }}
          style={{ color: 'var(--ink-500, rgba(255,255,255,.7))', fontSize: 12, textDecoration: 'underline', marginLeft: 'auto' }}>
          {info}
        </a>
      </div>
      <style>{`
        @keyframes lmCookieIn {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

window.LM_CookieBanner = CookieBanner;