// Consenso cookie / servizi esterni.
//
// Il sito non ha statistiche ne' cookie di profilazione: l'unico servizio
// esterno e' la mappa Google nella sezione Dove, che ricevendo l'indirizzo IP
// del visitatore richiede consenso. Finche' non viene dato, l'iframe non
// viene proprio inserito nella pagina (bloccare a monte e' l'unico modo
// corretto: nascondere l'iframe non impedirebbe la richiesta a Google).
//
// La preferenza sta in localStorage, non in un cookie: e' una scelta
// dell'utente conservata sul suo dispositivo e non viene mai inviata a noi.

const CONSENT_KEY = 'consentMaps';

function useConsent(){
  const [maps, setMaps] = React.useState(() => localStorage.getItem(CONSENT_KEY) === 'yes');
  const [asked, setAsked] = React.useState(() => localStorage.getItem(CONSENT_KEY) !== null);

  React.useEffect(() => {
    const onChange = () => {
      setMaps(localStorage.getItem(CONSENT_KEY) === 'yes');
      setAsked(localStorage.getItem(CONSENT_KEY) !== null);
    };
    window.addEventListener('consentchange', onChange);
    return () => window.removeEventListener('consentchange', onChange);
  }, []);

  return { maps, asked };
}

function setConsent(value){
  localStorage.setItem(CONSENT_KEY, value ? 'yes' : 'no');
  window.dispatchEvent(new Event('consentchange'));
}

function reopenConsent(){
  localStorage.removeItem(CONSENT_KEY);
  window.dispatchEvent(new Event('consentchange'));
}

function ConsentBanner(){
  const { t } = useLang();
  const { asked } = useConsent();
  if (asked) return null;

  return (
    <div role="dialog" aria-label={t('consent.title')} style={{
      position:'fixed', left:0, right:0, bottom:0, zIndex:9998,
      background:'var(--ink)', borderTop:'1px solid rgba(17,17,17,.25)',
      boxShadow:'0 -18px 40px -20px rgba(0,0,0,.35)',
      // paddingBottom a parte: se un browser non capisce env() scarta solo
      // quella riga e resta il 22px dello shorthand, invece di perdere tutto.
      padding:'22px clamp(20px, 5vw, 48px)',
      paddingBottom:'calc(22px + env(safe-area-inset-bottom, 0px))',
    }}>
      <div className="consent-inner" style={{
        maxWidth:1100, margin:'0 auto',
        display:'flex', gap:'clamp(18px, 3vw, 40px)', alignItems:'center', flexWrap:'wrap',
      }}>
        <div style={{flex:'1 1 340px', minWidth:0}}>
          <div className="label" style={{
            fontSize:13, letterSpacing:3, textTransform:'uppercase',
            color:'var(--cream)', marginBottom:8,
          }}>
            {t('consent.title')}
          </div>
          <p className="cormorant" style={{
            fontSize:16.5, lineHeight:1.6, color:'var(--cream-2)', margin:0,
          }}>
            {t('consent.text')}{' '}
            <a href="privacy.html" style={{color:'var(--cream)', textDecoration:'underline'}}>
              {t('consent.policy')}
            </a>
          </p>
        </div>
        <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
          <button onClick={() => setConsent(false)} className="label" style={{
            background:'transparent', color:'var(--cream)',
            border:'1px solid rgba(17,17,17,.45)', padding:'14px 22px',
            fontSize:12, letterSpacing:2, textTransform:'uppercase', cursor:'pointer',
          }}>
            {t('consent.reject')}
          </button>
          <button onClick={() => setConsent(true)} className="label" style={{
            background:'var(--blood)', color:'var(--cream)', border:'1px solid var(--blood)',
            padding:'14px 26px', fontSize:12, letterSpacing:2, textTransform:'uppercase', cursor:'pointer',
          }}>
            {t('consent.accept')}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { useConsent, setConsent, reopenConsent, ConsentBanner });