// COOKIE CONSENT · ACADEMY · Loi 25 (Québec) + RGPD (UE)
// Affiché tant que le visiteur n'a pas fait son choix. Choix stocké dans
// localStorage.cookie_consent (= 'accepted' | 'refused').
// Accepter déclenche l'event 'cookie-accepted' que academy.html peut écouter
// pour charger Meta Pixel.

function CookieBanner() {
  const tr = useTr();
  const { setPage } = usePage();
  const { isMobile } = useViewport();
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    try {
      const v = localStorage.getItem('cookie_consent');
      if (v !== 'accepted' && v !== 'refused') {
        const id = setTimeout(() => setVisible(true), 800);
        return () => clearTimeout(id);
      }
    } catch {
      setVisible(true);
    }
  }, []);

  const accept = () => {
    try { localStorage.setItem('cookie_consent', 'accepted'); } catch {}
    try { window.dispatchEvent(new Event('cookie-accepted')); } catch {}
    setVisible(false);
  };
  const refuse = () => {
    try { localStorage.setItem('cookie_consent', 'refused'); } catch {}
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div role="dialog" aria-live="polite"
      aria-label={tr({ fr: 'Bandeau de consentement aux témoins', en: 'Cookie consent banner' })}
      style={{
        position: 'fixed',
        bottom: isMobile ? 12 : 20,
        left: isMobile ? 12 : 20,
        right: isMobile ? 12 : 'auto',
        maxWidth: isMobile ? 'none' : 460,
        zIndex: 9999,
        background: TOK.ivory,
        border: `1px solid ${TOK.bronze}`,
        padding: isMobile ? '20px 22px' : '24px 26px',
        boxShadow: '0 24px 60px rgba(10,10,10,.22), 0 4px 12px rgba(10,10,10,.10)',
        display: 'flex', flexDirection: 'column', gap: 16,
        animation: 'cookieIn .4s cubic-bezier(.2,.7,.2,1)',
      }}>
      <style>{`@keyframes cookieIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }`}</style>

      <div style={{
        fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.22em',
        color: TOK.bronze, textTransform: 'uppercase',
      }}>{tr({ fr: 'Confidentialité', en: 'Privacy' })}</div>

      <p style={{
        margin: 0, fontFamily: TOK.sans, fontSize: 13.5, lineHeight: 1.55,
        color: TOK.ink,
      }}>
        {tr({
          fr: 'Nous utilisons des témoins de mesure pour comprendre comment vous arrivez sur le site et améliorer nos campagnes. Aucune donnée personnelle revendue.',
          en: 'We use measurement cookies to understand how you reach the site and improve our campaigns. No personal data resold.',
        })}
        {' '}
        <button onClick={() => setPage('privacy')} style={{
          all: 'unset', cursor: 'pointer', color: TOK.ink,
          borderBottom: `1px solid ${TOK.bronze}`, paddingBottom: 1,
        }}>{tr({ fr: 'En savoir plus', en: 'Learn more' })}</button>.
      </p>

      <div style={{
        display: 'flex', gap: 10,
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'flex-end',
      }}>
        <button onClick={refuse} style={{
          all: 'unset', cursor: 'pointer',
          fontFamily: TOK.sans, fontSize: 13, fontWeight: 500,
          color: TOK.inkSoft,
          padding: '11px 18px',
          border: `1px solid ${TOK.ink22}`,
          textAlign: 'center',
          transition: 'color .2s, border-color .2s',
        }}
          onMouseEnter={e => { e.currentTarget.style.color = TOK.ink; e.currentTarget.style.borderColor = TOK.ink; }}
          onMouseLeave={e => { e.currentTarget.style.color = TOK.inkSoft; e.currentTarget.style.borderColor = TOK.ink22; }}>
          {tr({ fr: 'Refuser', en: 'Refuse' })}
        </button>
        <button onClick={accept} style={{
          all: 'unset', cursor: 'pointer',
          fontFamily: TOK.sans, fontSize: 13, fontWeight: 500,
          background: TOK.ink, color: TOK.ivory,
          padding: '12px 22px',
          textAlign: 'center',
          transition: 'box-shadow .2s',
          boxShadow: '0 1px 0 rgba(10,10,10,.04), 0 4px 12px rgba(10,10,10,.10)',
        }}
          onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 22px rgba(10,10,10,.18), 0 0 0 4px rgba(139,111,31,.18)'; }}
          onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 1px 0 rgba(10,10,10,.04), 0 4px 12px rgba(10,10,10,.10)'; }}>
          {tr({ fr: 'Accepter', en: 'Accept' })}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { CookieBanner });