/* global React */
/* BOHAM Praia — Cookie consent banner (gates GA analytics_storage) */
(function () {
  const L = window.L;
  const KEY = 'boham-cookie-consent';

  function setConsent(value) {
    try { localStorage.setItem(KEY, value); } catch (e) {}
    try {
      if (typeof window.gtag === 'function') {
        window.gtag('consent', 'update', { analytics_storage: value });
        window.gtag('event', 'cookie_consent', { choice: value });
      }
    } catch (e) {}
  }

  function CookieBanner() {
    const lang = window.useBohamLang();
    const [open, setOpen] = React.useState(false);
    React.useEffect(() => {
      let stored = null;
      try { stored = localStorage.getItem(KEY); } catch (e) {}
      if (stored !== 'granted' && stored !== 'denied') setOpen(true);
    }, []);
    if (!open) return null;

    const choose = (v) => { setConsent(v); setOpen(false); };

    return (
      <div role="dialog" aria-label="Cookies" style={{
        position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 200,
        display: 'flex', justifyContent: 'center', padding: 'clamp(12px,2vw,20px)',
      }}>
        <div style={{
          background: 'var(--boham-ink)', color: 'var(--boham-cream)', maxWidth: 920, width: '100%',
          display: 'flex', alignItems: 'center', gap: 'clamp(14px,2.5vw,28px)', flexWrap: 'wrap',
          padding: 'clamp(16px,2vw,22px) clamp(18px,2.4vw,28px)', boxShadow: 'var(--shadow-lg)',
        }}>
          <p style={{ flex: '1 1 320px', margin: 0, fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'rgba(251,246,234,0.88)' }}>
            {L(lang,
              'We use cookies to measure traffic and improve this website. You choose.',
              'Usamos cookies para medir o tráfego e melhorar o site. Você decide.',
              'Nous utilisons des cookies pour mesurer l’audience et améliorer ce site. À vous de choisir.')}
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button onClick={() => choose('denied')} style={{
              cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.06em',
              textTransform: 'uppercase', padding: '10px 20px', borderRadius: 'var(--radius-pill)',
              background: 'transparent', color: 'var(--boham-cream)', border: '1px solid rgba(251,246,234,0.5)',
            }}>{L(lang, 'Decline', 'Recusar', 'Refuser')}</button>
            <button onClick={() => choose('granted')} style={{
              cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.06em',
              textTransform: 'uppercase', padding: '10px 20px', borderRadius: 'var(--radius-pill)',
              background: 'var(--boham-orange)', color: 'var(--boham-cream)', border: '1px solid var(--boham-orange)',
            }}>{L(lang, 'Accept', 'Aceitar', 'Accepter')}</button>
          </div>
        </div>
      </div>
    );
  }

  window.BohamCookieBanner = CookieBanner;
})();