// Homepage announcement modal — "the law was updated, did you notice?"
// Appears once per visitor (localStorage), dismissible, links to the DPO /
// Amendment 13 article. Mirrors the CookieBanner conventions (brand tokens,
// useLang, localStorage). Shown only where it's mounted (homepage).

function LawUpdateModal() {
  const [visible, setVisible] = React.useState(false);
  const lang = typeof useLang !== 'undefined' ? useLang() : 'he';
  const isEn = lang === 'en';
  const STORAGE_KEY = 'lawyerit-law-update-dpo13';

  React.useEffect(() => {
    let seen = null;
    try { seen = localStorage.getItem(STORAGE_KEY); } catch (e) {}
    if (seen) return;
    const timer = setTimeout(() => setVisible(true), 1000);
    return () => clearTimeout(timer);
  }, []);

  const dismiss = () => {
    try { localStorage.setItem(STORAGE_KEY, '1'); } catch (e) {}
    setVisible(false);
  };

  React.useEffect(() => {
    if (!visible) return;
    const onKey = (e) => { if (e.key === 'Escape') dismiss(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [visible]);

  if (!visible) return null;

  const t = {
    eyebrow: isEn ? 'Regulatory update' : 'עדכון רגולציה',
    title:   isEn ? 'The law was updated — did you notice?' : 'החוק עודכן — שמתם לב?',
    body: isEn
      ? 'Israel’s Privacy Protection Authority published its position paper on the duty to appoint a Data Protection Officer (DPO) under Amendment 13. Far more organizations are covered than most assume — including vendors that process data for a public body.'
      : 'הרשות להגנת הפרטיות פרסמה גילוי דעת על חובת מינוי ממונה הגנת פרטיות (DPO) לפי תיקון 13. הרבה יותר ארגונים חייבים ממונה משנהוג לחשוב — כולל ספקים שמעבדים מידע עבור גוף ציבורי.',
    cta:     isEn ? 'Check if it applies to you' : 'בדקו אם זה חל עליכם',
    later:   isEn ? 'Later' : 'אחר כך',
    close:   isEn ? 'Close' : 'סגירה',
  };

  return (
    <div
      onClick={(e) => { if (e.target === e.currentTarget) dismiss(); }}
      style={{
        position: 'fixed', inset: 0, zIndex: 10000,
        background: 'rgba(15,17,21,0.55)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 20,
        animation: 'lawmodal-overlay 0.25s ease-out',
      }}
      role="dialog" aria-modal="true" aria-label={t.title}
    >
      <div style={{
        position: 'relative',
        maxWidth: 460, width: '100%',
        background: '#fff', borderRadius: 20,
        padding: '32px 32px 28px',
        boxShadow: '0 32px 64px -12px rgba(15,17,21,0.45)',
        textAlign: isEn ? 'left' : 'right',
        animation: 'lawmodal-pop 0.35s cubic-bezier(0.16,1,0.3,1)',
      }}>
        {/* Close (X) */}
        <button
          onClick={dismiss} aria-label={t.close}
          style={{
            position: 'absolute', top: 14,
            left: isEn ? 'auto' : 14, right: isEn ? 14 : 'auto',
            width: 32, height: 32, borderRadius: 8,
            border: 'none', background: 'transparent', cursor: 'pointer',
            color: 'var(--muted)', fontSize: 20, lineHeight: 1,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
        >×</button>

        {/* Eyebrow pill */}
        <span style={{
          display: 'inline-block',
          background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
          fontSize: 12.5, fontWeight: 600, borderRadius: 999,
          padding: '5px 12px', marginBottom: 14,
        }}>{t.eyebrow}</span>

        <h2 style={{
          fontSize: 24, lineHeight: 1.25, fontWeight: 700,
          color: 'var(--ink)', margin: '0 0 12px', letterSpacing: '-0.02em',
        }}>{t.title}</h2>

        <p style={{
          fontSize: 15.5, lineHeight: 1.7, color: 'var(--ink-2)', margin: '0 0 22px',
        }}>{t.body}</p>

        {/* Actions */}
        <div style={{
          display: 'flex', gap: 12, alignItems: 'center',
          flexDirection: isEn ? 'row' : 'row-reverse', justifyContent: 'flex-start',
        }}>
          <a
            href="dpo-check.html"
            onClick={dismiss}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: 'var(--turquoise-700)', color: '#fff',
              textDecoration: 'none', fontWeight: 600, fontSize: 15,
              padding: '12px 24px', borderRadius: 999,
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--turquoise-600)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'var(--turquoise-700)'}
          >{t.cta}</a>
          <button
            onClick={dismiss}
            style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: 'var(--muted)', fontSize: 14, fontWeight: 500,
              fontFamily: 'inherit', padding: '10px 8px',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink-2)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--muted)'}
          >{t.later}</button>
        </div>
      </div>

      <style>{`
        @keyframes lawmodal-overlay { from { opacity: 0; } to { opacity: 1; } }
        @keyframes lawmodal-pop {
          from { opacity: 0; transform: translateY(12px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { LawUpdateModal });