// Articles data — add new articles at the top of each array
const ARTICLES_HE = [
  {
    tag: 'תובנה',
    tagColor: 'blue',
    title: 'AI Act — מה חברות SaaS חייבות לדעת לפני שמאוחר מדי',
    excerpt: 'רגולציית ה-AI של האיחוד האירופי נכנסת לתוקף בשלבים. הנה מה שחברות ישראליות שמוכרות לשוק האירופי צריכות לעשות כבר עכשיו.',
    date: 'מאי 2025',
    href: 'articles/ai-act-saas.html',
    readTime: '5 דקות קריאה',
  },
  {
    tag: 'עדכון רגולציה',
    tagColor: 'orange',
    title: 'תיקון 13 לחוק הגנת הפרטיות — מה משתנה לחברות טכנולוגיה',
    excerpt: 'הרשות להגנת הפרטיות פרסמה הנחיות מעודכנות. אלו ההשלכות המעשיות על חברות SaaS, ביטוח ופינטק בישראל.',
    date: 'אפריל 2025',
    href: 'articles/privacy-law-amendment.html',
    readTime: '4 דקות קריאה',
  },
  {
    tag: 'תובנה',
    tagColor: 'blue',
    title: 'למה חברות פינטק קטנות צריכות קצינת ציות — גם לפני שהרגולטור דופק',
    excerpt: 'הטעות הכי יקרה שחברות פיננסיות עושות היא לחכות לרגולציה לפני שבונות מסגרת ציות. הנה למה זה עולה כפול.',
    date: 'מרץ 2025',
    href: 'articles/fintech-compliance.html',
    readTime: '6 דקות קריאה',
  },
];

const ARTICLES_EN = [
  {
    tag: 'Insight',
    tagColor: 'blue',
    title: 'AI Act — What SaaS Companies Need to Know Before It\'s Too Late',
    excerpt: 'The EU\'s AI regulation is entering into force in stages. Here\'s what Israeli companies selling to European markets need to do right now.',
    date: 'May 2025',
    href: 'articles/ai-act-saas.html',
    readTime: '5 min read',
  },
  {
    tag: 'Regulatory Update',
    tagColor: 'orange',
    title: 'Israeli Privacy Law Amendment — What Changes for Tech Companies',
    excerpt: 'The Israeli Privacy Protection Authority has issued updated guidance. Here are the practical implications for SaaS, insurance, and fintech companies.',
    date: 'April 2025',
    href: 'articles/privacy-law-amendment.html',
    readTime: '4 min read',
  },
  {
    tag: 'Insight',
    tagColor: 'blue',
    title: 'Why Fintech Startups Need a Compliance Officer — Even Before the Regulator Knocks',
    excerpt: 'The most expensive mistake financial companies make is waiting for regulatory pressure before building a compliance framework. Here\'s why it costs twice as much.',
    date: 'March 2025',
    href: 'articles/fintech-compliance.html',
    readTime: '6 min read',
  },
];

const ARTICLE_TAG_COLORS = {
  blue:   { bg: 'var(--blue-50)',   fg: 'var(--blue-600)' },
  orange: { bg: 'var(--orange-50)', fg: 'var(--orange)' },
};

function ArticleCard({ article }) {
  const c = ARTICLE_TAG_COLORS[article.tagColor] || ARTICLE_TAG_COLORS.blue;
  return (
    <a href={article.href} style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
      padding: 28,
      background: 'white',
      border: '1px solid var(--border)',
      borderRadius: 16,
      textDecoration: 'none',
      color: 'inherit',
      transition: 'box-shadow 0.2s, transform 0.2s',
      cursor: 'pointer',
    }}
    onMouseEnter={e => {
      e.currentTarget.style.boxShadow = 'var(--shadow-lg)';
      e.currentTarget.style.transform = 'translateY(-2px)';
    }}
    onMouseLeave={e => {
      e.currentTarget.style.boxShadow = 'none';
      e.currentTarget.style.transform = 'none';
    }}>
      {/* Tag + date row */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        <div className="en" style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
          color: c.fg, background: c.bg,
          padding: '3px 9px', borderRadius: 5,
        }}>{article.tag}</div>
        <div style={{ fontSize: 12, color: 'var(--muted-2)' }}>{article.date}</div>
      </div>

      {/* Title */}
      <div style={{
        fontSize: 17, fontWeight: 600,
        color: 'var(--ink)',
        lineHeight: 1.4,
        letterSpacing: '-0.01em',
      }}>{article.title}</div>

      {/* Excerpt */}
      <div style={{
        fontSize: 14, color: 'var(--muted)',
        lineHeight: 1.65,
        flexGrow: 1,
      }}>{article.excerpt}</div>

      {/* Footer */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: 16,
        borderTop: '1px solid var(--border-2)',
      }}>
        <div style={{ fontSize: 12, color: 'var(--muted-2)' }}>{article.readTime}</div>
        <div style={{
          fontSize: 13, fontWeight: 500, color: 'var(--turquoise-700)',
          display: 'flex', alignItems: 'center', gap: 4,
        }}>
          <span>{typeof useLang !== 'undefined' && useLang() === 'en' ? 'Read more' : 'לקריאה המלאה'}</span>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
            <path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </a>
  );
}

function Insights() {
  const lang = useLang();
  const articles = lang === 'en' ? ARTICLES_EN : ARTICLES_HE;

  return (
    <section id="insights" style={{ padding: '100px 0', background: 'var(--bg-3)' }}>
      <div className="container">
        {/* Header row */}
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 52, flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <div className="eyebrow">{t(lang, 'תובנות ועדכונים', 'Insights & Updates')}</div>
            <h2 style={{
              fontSize: 'clamp(28px, 3vw, 40px)',
              fontWeight: 700, letterSpacing: '-0.03em',
              marginBottom: 10,
            }}>
              {t(lang, 'מה שחשוב לדעת בעולם המשפט והרגולציה.', 'What matters in law and regulation.')}
            </h2>
            <p style={{ fontSize: 15, color: 'var(--muted)', maxWidth: 480, lineHeight: 1.6 }}>
              {t(lang,
                'ניתוחים מעשיים ועדכונים שוטפים — בלי עשן ובלי ג\'רגון.',
                'Practical analysis and regulatory updates — no smoke, no jargon.'
              )}
            </p>
          </div>
          <a href="insights.html" style={{
            fontSize: 14, fontWeight: 500, color: 'var(--turquoise-700)',
            display: 'flex', alignItems: 'center', gap: 6,
            textDecoration: 'none', whiteSpace: 'nowrap',
            flexShrink: 0,
          }}
          onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
          onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}>
            {t(lang, 'כל המאמרים', 'All articles')}
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>

        {/* Cards grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }} className="articles-grid">
          {articles.map((a, i) => <ArticleCard key={i} article={a} />)}
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .articles-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 1100px) and (min-width: 861px) {
          .articles-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Insights });