function CookieBanner() {
  const [visible, setVisible] = React.useState(false);
  const lang = typeof useLang !== 'undefined' ? useLang() : 'he';

  React.useEffect(() => {
    const consent = localStorage.getItem('lawyerit-cookie-consent');
    if (!consent) setVisible(true);
  }, []);

  const accept = () => {
    localStorage.setItem('lawyerit-cookie-consent', 'accepted');
    setVisible(false);
  };

  const decline = () => {
    localStorage.setItem('lawyerit-cookie-consent', 'declined');
    setVisible(false);
  };

  if (!visible) return null;

  const isEn = lang === 'en';

  return (
    <div style={{
      position: 'fixed',
      bottom: 24,
      left: isEn ? 24 : 'auto',
      right: isEn ? 'auto' : 24,
      zIndex: 9999,
      maxWidth: 420,
      width: 'calc(100vw - 48px)',
      background: 'var(--ink)',
      color: '#fff',
      borderRadius: 16,
      padding: '20px 24px',
      boxShadow: '0 24px 48px -8px rgba(0,0,0,0.35)',
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
      animation: 'cookie-slide-in 0.35s cubic-bezier(0.16,1,0.3,1)',
    }}>
      {/* Icon + text */}
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'rgba(71,203,203,0.15)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="9" stroke="var(--turquoise)" strokeWidth="1.8"/>
            <circle cx="8.5" cy="10" r="1.2" fill="var(--turquoise)"/>
            <circle cx="14" cy="7.5" r="1" fill="var(--turquoise)"/>
            <circle cx="15" cy="13.5" r="1.4" fill="var(--turquoise)"/>
            <circle cx="10" cy="15" r="0.9" fill="var(--turquoise)"/>
          </svg>
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 6, color: '#fff' }}>
            {isEn ? 'We use cookies' : 'האתר משתמש בעוגיות'}
          </div>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6 }}>
            {isEn
              ? 'We use cookies to improve your experience and analyze site traffic. By clicking "Accept", you consent to our use of cookies in accordance with our '
              : 'אנחנו משתמשים בעוגיות לשיפור חווית הגלישה ולניתוח תנועה באתר. בלחיצה על "קבל" אתה מסכים לשימוש בעוגיות בהתאם ל'
            }
            <a href="#" style={{ color: 'var(--turquoise)', textDecoration: 'underline', fontSize: 12.5 }}>
              {isEn ? 'Privacy Policy' : 'מדיניות הפרטיות'}
            </a>
            {isEn ? '.' : '.'}
          </div>
        </div>
      </div>

      {/* Buttons */}
      <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
        <button
          onClick={decline}
          style={{
            fontSize: 13, fontWeight: 500,
            color: 'rgba(255,255,255,0.55)',
            background: 'transparent',
            border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 8,
            padding: '8px 16px',
            cursor: 'pointer',
            transition: 'all 0.2s',
            fontFamily: 'inherit',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.color = '#fff';
            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.35)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.color = 'rgba(255,255,255,0.55)';
            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.15)';
          }}
        >
          {isEn ? 'Decline' : 'דחה'}
        </button>
        <button
          onClick={accept}
          style={{
            fontSize: 13, fontWeight: 600,
            color: 'var(--ink)',
            background: 'var(--turquoise)',
            border: 'none',
            borderRadius: 8,
            padding: '8px 20px',
            cursor: 'pointer',
            transition: 'background 0.2s',
            fontFamily: 'inherit',
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--turquoise-600)'}
          onMouseLeave={e => e.currentTarget.style.background = 'var(--turquoise)'}
        >
          {isEn ? 'Accept' : 'קבל'}
        </button>
      </div>

      <style>{`
        @keyframes cookie-slide-in {
          from { opacity: 0; transform: translateY(16px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { CookieBanner });