// GDPR: cookie banner + privacy modal
const { useEffect: useEG, useState: useSG } = React;

function CookieBanner({ t }) {
  const [visible, setVisible] = useSG(false);

  useEG(() => {
    const consent = localStorage.getItem('fq.cookieConsent');
    if (!consent) setTimeout(() => setVisible(true), 1200);
  }, []);

  const accept = () => {
    localStorage.setItem('fq.cookieConsent', JSON.stringify({ necessary: true, at: new Date().toISOString() }));
    setVisible(false);
  };
  const decline = () => {
    localStorage.setItem('fq.cookieConsent', JSON.stringify({ necessary: false, at: new Date().toISOString() }));
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div style={{
      position: 'fixed', bottom: 20, left: 20, right: 20,
      maxWidth: 540, margin: '0 auto',
      background: 'rgba(10,6,8,.95)',
      border: '1px solid rgba(251,244,240,.18)',
      borderRadius: 16,
      padding: 24,
      backdropFilter: 'blur(20px)',
      zIndex: 999,
      boxShadow: '0 30px 80px rgba(0,0,0,.5)',
      color: 'var(--ivory)',
      fontFamily: 'var(--sans)',
    }}>
      <div className="mono" style={{ fontSize: 10.5, letterSpacing: '.14em', color: 'var(--pink)', textTransform: 'uppercase', marginBottom: 10 }}>
        {t.cookies.eyebrow}
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ivory)', marginBottom: 16 }}>
        {t.cookies.body} <a href="#privacy" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('openPrivacy')); }} style={{ color: 'var(--pink)', borderBottom: '1px solid var(--pink)' }}>{t.cookies.more}</a>
      </p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <button onClick={accept} className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>
          {t.cookies.accept}
        </button>
        <button onClick={decline} className="btn btn-ghost" style={{ padding: '10px 18px', fontSize: 13 }}>
          {t.cookies.decline}
        </button>
      </div>
    </div>
  );
}

function PrivacyModal({ t }) {
  const [open, setOpen] = useSG(false);

  useEG(() => {
    const onHash = () => { if (window.location.hash === '#privacy') setOpen(true); };
    const onCustom = () => setOpen(true);
    window.addEventListener('hashchange', onHash);
    window.addEventListener('openPrivacy', onCustom);
    onHash();
    return () => {
      window.removeEventListener('hashchange', onHash);
      window.removeEventListener('openPrivacy', onCustom);
    };
  }, []);

  const close = () => {
    setOpen(false);
    if (window.location.hash === '#privacy') history.replaceState(null, '', window.location.pathname);
  };

  if (!open) return null;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 1001,
      background: 'rgba(10,6,8,.82)', backdropFilter: 'blur(12px)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: '80px 20px 40px', overflow: 'auto',
    }} onClick={close}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--ivory)', color: 'var(--ink)',
        maxWidth: 720, width: '100%', borderRadius: 8,
        padding: 'clamp(32px, 5vw, 64px)', position: 'relative',
        fontFamily: 'var(--sans)',
      }}>
        <button onClick={close} style={{
          position: 'absolute', top: 20, right: 20,
          fontSize: 22, color: 'var(--ink-dim)', width: 36, height: 36,
        }}>×</button>

        <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--ink-dim)', textTransform: 'uppercase', marginBottom: 12 }}>
          {t.privacy.eyebrow}
        </div>
        <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 52px)', lineHeight: 1, letterSpacing: '-0.02em', marginBottom: 24, fontWeight: 400 }}>
          {t.privacy.title}
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, fontSize: 15, lineHeight: 1.65, color: 'var(--ink-dim)' }}>
          {t.privacy.sections.map((s, i) => (
            <div key={i}>
              <h3 className="serif" style={{ fontSize: 22, letterSpacing: '-0.01em', marginBottom: 8, color: 'var(--ink)', fontWeight: 500 }}>
                {s.title}
              </h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--rule-ink)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '.05em', color: 'var(--ink-dim)' }}>
          {t.privacy.updated} · {t.privacy.contact} <a href="mailto:solmichaela@femquity.com" style={{ color: 'var(--rose)', borderBottom: '1px solid var(--rose)' }}>solmichaela@femquity.com</a>
        </div>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;
window.PrivacyModal = PrivacyModal;