/* =========== Cookie consent banner =========== */
function CookieBanner(){
  useLang(); // her-render bij taalwissel
  const [state, setState] = useState(()=>{
    try { return localStorage.getItem('wv_cookie_consent') || null; }
    catch { return null; }
  });
  const [mounted, setMounted] = useState(false);

  useEffect(()=>{
    // Short delay before showing, feels less aggressive on first page load
    const t = setTimeout(()=> setMounted(true), 800);
    return ()=> clearTimeout(t);
  }, []);

  const setConsent = (value)=>{
    try { localStorage.setItem('wv_cookie_consent', value); } catch {}
    setState(value);
    // Dispatch event so any analytics/marketing scripts in index.html can lazy-load
    if(value === 'accepted'){
      window.dispatchEvent(new Event('wv-cookie-accepted'));
    }
  };

  // On mount, if previously accepted, fire the event so trackers init on every visit
  useEffect(()=>{
    if(state === 'accepted'){
      // small delay so listeners in index.html are attached
      setTimeout(()=> window.dispatchEvent(new Event('wv-cookie-accepted')), 200);
    }
  }, []);

  if(state || !mounted) return null;

  const t = (nl, en)=> (window.WV_LANG==='en' ? en : nl);
  return (
    <div className="cookie-banner" role="dialog" aria-label={t('Cookie-voorkeuren','Cookie preferences')}>
      <div className="cookie-banner__inner">
        <div className="cookie-banner__text">
          <h3 className="cookie-banner__title">{t('Over cookies.','About cookies.')}</h3>
          <p>
            {t('Wij gebruiken functionele cookies om deze website te laten werken en (met uw toestemming) analytische cookies om het bezoek te meten. Geen marketing. Meer info in onze ','We use functional cookies to make this website work and (with your consent) analytical cookies to measure visits. No marketing. More info in our ')}<Link to="/voorwaarden" style={{textDecoration:'underline'}}>{t('privacyverklaring','privacy statement')}</Link>.
          </p>
        </div>
        <div className="cookie-banner__actions">
          <button type="button" onClick={()=>setConsent('denied')} className="cookie-btn cookie-btn--ghost">
            {t('Enkel noodzakelijk','Only necessary')}
          </button>
          <button type="button" onClick={()=>setConsent('accepted')} className="cookie-btn cookie-btn--primary">
            {t('Alles accepteren','Accept all')}
          </button>
        </div>
      </div>

      <style>{`
        .cookie-banner{
          position:fixed;
          left:20px; right:20px; bottom:20px;
          z-index:9000;
          background:var(--ink);
          color:var(--ivory);
          border-radius:4px;
          padding:24px 28px;
          box-shadow:0 20px 60px rgba(0,0,0,.35);
          max-width:720px;
          margin:0 auto;
          animation:cookieIn .5s cubic-bezier(.2,.8,.2,1);
        }
        @keyframes cookieIn{
          from{opacity:0; transform:translateY(24px)}
          to{opacity:1; transform:translateY(0)}
        }
        .cookie-banner__inner{
          display:grid;
          grid-template-columns:1fr auto;
          gap:28px;
          align-items:center;
        }
        .cookie-banner__title{
          font-family:var(--serif);
          font-size:22px;
          line-height:1;
          margin-bottom:10px;
        }
        .cookie-banner__text p{
          font-size:13px;
          line-height:1.6;
          color:rgba(255,255,255,.75);
          max-width:480px;
        }
        .cookie-banner__text a{
          color:var(--gold);
          text-decoration:underline;
          text-decoration-color:rgba(168,140,95,.5);
          text-underline-offset:3px;
        }
        .cookie-banner__text a:hover{text-decoration-color:var(--gold)}
        .cookie-banner__actions{
          display:flex;
          flex-direction:column;
          gap:8px;
          flex-shrink:0;
        }
        .cookie-btn{
          padding:11px 20px;
          border-radius:999px;
          font-size:10px;
          letter-spacing:.25em;
          text-transform:uppercase;
          cursor:pointer;
          transition:background .25s, color .25s, border-color .25s;
          font-weight:500;
          white-space:nowrap;
          border:1px solid;
        }
        .cookie-btn--primary{
          background:var(--ivory);
          color:var(--ink);
          border-color:var(--ivory);
        }
        .cookie-btn--primary:hover{
          background:transparent;
          color:var(--ivory);
        }
        .cookie-btn--ghost{
          background:transparent;
          color:var(--ivory);
          border-color:rgba(255,255,255,.35);
        }
        .cookie-btn--ghost:hover{
          border-color:var(--ivory);
          background:rgba(255,255,255,.08);
        }
        @media (max-width:700px){
          .cookie-banner{padding:20px 22px; left:12px; right:12px; bottom:12px}
          .cookie-banner__inner{grid-template-columns:1fr; gap:18px}
          .cookie-banner__actions{flex-direction:row}
          .cookie-btn{flex:1}
        }
        @media (max-width:600px){
          .cookie-banner__text p{max-width:none}
        }
        @media (max-width:430px){
          .cookie-banner{padding:18px 18px; left:10px; right:10px; bottom:10px}
          .cookie-banner__inner{gap:14px}
          .cookie-banner__title{font-size:20px}
          .cookie-banner__actions{flex-direction:column; gap:8px}
          .cookie-btn{
            flex:none;
            width:100%;
            padding:12px 16px;
            font-size:10px;
            letter-spacing:.18em;
          }
        }
        @media (orientation:landscape) and (max-height:520px){
          .cookie-banner{
            bottom:10px;
            padding:16px 20px;
            max-width:600px;
          }
          .cookie-banner__inner{grid-template-columns:1fr auto; gap:18px}
          .cookie-banner__title{font-size:18px; margin-bottom:6px}
          .cookie-banner__text p{font-size:12px; line-height:1.5}
          .cookie-banner__actions{flex-direction:column}
          .cookie-btn{flex:none; width:auto}
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { CookieBanner });