/* GDPR/cookie consent banner — bottom of screen, EU-compliant one-liner.
   Persists acceptance to localStorage. Only shows once per browser. */

function CookieBanner() {
  const key = 'ellaride_cookies_ok';
  const [visible, setVisible] = React.useState(false);
  const [hiding, setHiding] = React.useState(false);
  const t = window.t;
  const lang = window.__LANG__ || 'el';

  React.useEffect(() => {
    try { if (!localStorage.getItem(key)) setVisible(true); } catch (e) { /* private mode */ }
  }, []);

  const accept = () => {
    setHiding(true);
    try { localStorage.setItem(key, '1'); } catch (e) {}
    setTimeout(() => setVisible(false), 420);
  };

  if (!visible) return null;

  const text = lang === 'el'
    ? 'Χρησιμοποιούμε μόνο απαραίτητα cookies (localStorage) για τις προτιμήσεις γλώσσας. Δεν χρησιμοποιούμε tracking cookies.'
    : 'We use only essential cookies (localStorage) for language preferences. No tracking cookies.';
  const btnText = lang === 'el' ? 'Εντάξει' : 'Got it';
  const policyText = lang === 'el' ? 'Πολιτική απορρήτου' : 'Privacy policy';

  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 999,
      background: 'var(--navy-800)', borderTop: '1px solid var(--navy-line)',
      padding: '14px 24px',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, flexWrap: 'wrap',
      transform: hiding ? 'translateY(100%)' : 'translateY(0)',
      transition: 'transform 380ms var(--ease-in-out)',
      boxShadow: '0 -8px 32px rgba(6,14,26,0.35)',
    }}>
      <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-on-dark-muted)', flex: '1 1 auto', minWidth: 200, maxWidth: 680 }}>
        {text}{' '}
        <a href="#privacy" style={{ color: 'var(--blue)', fontWeight: 600, whiteSpace: 'nowrap' }}>{policyText}</a>
      </p>
      <button onClick={accept} style={{
        flexShrink: 0, height: 38, padding: '0 20px',
        background: 'var(--blue)', color: '#fff', border: 0, borderRadius: 'var(--radius-pill)',
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13.5, cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(40,159,252,0.4)',
        transition: 'transform 120ms var(--ease-out)',
      }}
        onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
      >{btnText}</button>
    </div>
  );
}

window.CookieBanner = CookieBanner;