/* CookieBanner — respeta consent previo en localStorage */
(function () {
  if (document.getElementById('amp-cookie-css')) return;
  const s = document.createElement('style');
  s.id = 'amp-cookie-css';
  s.textContent = '@media(max-width:767px){.amp-cb-row{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}.amp-cb-btns{width:100%!important;justify-content:flex-start!important}}';
  document.head.appendChild(s);
}());

const CookieBanner = () => {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (!localStorage.getItem('ampera_cookies')) setVisible(true);
  }, []);

  if (!visible) return null;

  const accept = () => { localStorage.setItem('ampera_cookies', 'accepted'); setVisible(false); };
  const reject = () => { localStorage.setItem('ampera_cookies', 'rejected'); setVisible(false); };

  const btnBase = {
    fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13,
    padding: '10px 22px', borderRadius: 9999, cursor: 'pointer',
    letterSpacing: '.02em', whiteSpace: 'nowrap',
  };

  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 999,
      background: '#1B5C2C',
      boxShadow: '0 -4px 24px rgba(15,53,24,0.18)',
    }}>
      <div className="amp-cb-row" style={{
        maxWidth: 1440, margin: '0 auto',
        padding: '16px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, flexWrap: 'wrap',
      }}>
        <p style={{
          margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 14,
          color: 'rgba(255,255,255,0.88)', lineHeight: 1.5, flex: 1,
        }}>
          Usamos cookies técnicas y de analítica para mejorar tu experiencia en amperaenergy.co.{' '}
          <a href="/politica-de-datos/" style={{ color: '#C4A84F', textDecoration: 'underline' }}>
            Política de datos
          </a>
        </p>
        <div className="amp-cb-btns" style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button onClick={accept} style={{
            ...btnBase,
            background: '#C4A84F', color: '#0F3518', border: 'none',
          }}>Aceptar</button>
          <button onClick={reject} style={{
            ...btnBase,
            background: 'transparent', color: '#fff',
            border: '1.5px solid rgba(255,255,255,0.5)',
          }}>Rechazar</button>
        </div>
      </div>
    </div>
  );
};

window.CookieBanner = CookieBanner;