/* global React */

const BLOG_POSTS = [
  {
    slug: 'local-ai-healthcare',
    icon: 'article',
    color: 'primary',
    en: {
      kicker: 'Guide',
      title: 'Local AI in Healthcare',
      body: 'A practical 30-day test roadmap — open-source model advice, privacy-first evaluation steps, and when to use a healthcare-specific deployment partner.',
      read: '16 min read'
    },
    fr: {
      kicker: 'Guide',
      title: 'IA locale en santé',
      body: 'Une feuille de route de test de 30 jours — conseils sur les modèles ouverts, étapes d’évaluation axées sur la confidentialité, et quand faire appel à un partenaire spécialisé en santé.',
      read: '16 min de lecture'
    }
  },
  {
    slug: 'on-premise-clinical-assistants',
    icon: 'dns',
    color: 'tertiary',
    en: {
      kicker: 'Architecture',
      title: 'On-Premise Clinical Assistants',
      body: 'A reference stack for running the scribe, discharge drafter, handoff, and document Q&A on hardware you own — with a 2026 hardware budget and the risks that matter.',
      read: '5 min read'
    },
    fr: {
      kicker: 'Architecture',
      title: 'Assistants cliniques sur site',
      body: 'Une pile de référence pour exécuter le scribe, la rédaction de congé, la passation et la Q&R documentaire sur votre propre matériel — avec le budget matériel 2026 et les risques à connaître.',
      read: '5 min de lecture'
    }
  },
  {
    slug: 'privacy-first-ai-adoption',
    icon: 'shield',
    color: 'secondary',
    en: {
      kicker: 'Framework',
      title: 'Privacy-First AI Adoption',
      body: 'A framework for evaluating AI vendors without exposing PHI during a demo or pilot — six pre-procurement decisions and three demo moves that flip the procurement choreography.',
      read: '6 min read'
    },
    fr: {
      kicker: 'Cadre',
      title: 'Adoption de l’IA axée sur la confidentialité',
      body: 'Un cadre pour évaluer les fournisseurs d’IA sans exposer de RPS pendant une démo — six décisions pré-approvisionnement et trois manœuvres de démo.',
      read: '6 min de lecture'
    }
  },
  {
    slug: 'ucla-nejm-ai-rct-explained',
    icon: 'science',
    color: 'primary',
    en: {
      kicker: 'Evidence',
      title: 'The UCLA NEJM AI RCT, Explained',
      body: 'What the 2025 ambient-scribe trial actually measured, why the 9.5% vs −1.7% split between Nabla and DAX matters, and how to put the result into your RFP without overweighting one paper.',
      read: '7 min read'
    },
    fr: {
      kicker: 'Preuve',
      title: 'L’ECR UCLA NEJM AI, expliqué',
      body: 'Ce que l’essai 2025 sur les scribes ambiants a réellement mesuré, pourquoi le clivage 9,5 % vs −1,7 % entre Nabla et DAX compte, et comment l’intégrer à votre AO.',
      read: '7 min de lecture'
    }
  },
  {
    slug: 'canadian-hospital-ai-procurement-2026',
    icon: 'policy',
    color: 'tertiary',
    en: {
      kicker: 'Procurement',
      title: 'Canadian Hospital AI Procurement in 2026',
      body: 'What changed between 2023 and 2026 — Law 25 enforcement, PHIPA modernization, PIPEDA AI-consent amendments — and how the 2026 procurement timeline differs from the 2023 playbook.',
      read: '7 min read'
    },
    fr: {
      kicker: 'Approvisionnement',
      title: 'Approvisionnement IA des hôpitaux canadiens en 2026',
      body: 'Ce qui a changé entre 2023 et 2026 — application de la Loi 25, modernisation de la LPRPS, modifications LPRPDE — et le nouveau calendrier d’approvisionnement.',
      read: '7 min de lecture'
    }
  },
  {
    slug: 'thirty-day-private-ai-pilot',
    icon: 'calendar_month',
    color: 'primary',
    en: {
      kicker: 'Playbook',
      title: 'The 30-Day Private AI Pilot',
      body: 'A week-by-week playbook for a safe, structured private AI pilot — pre-week scope, shadow mode, clinician-supervised review, and the decision gate at the end.',
      read: '6 min read'
    },
    fr: {
      kicker: 'Plan',
      title: 'Le pilote d’IA privée en 30 jours',
      body: 'Un plan semaine par semaine pour un pilote d’IA privée sûr et structuré — cadrage, mode parallèle, revue supervisée par les cliniciens, et porte de décision finale.',
      read: '6 min de lecture'
    }
  }
];

function Blog() {
  const lang = React.useContext(LangContext);
  const t = useT();
  return (
    <section id="blog" className="section surface-divider">
      <div className="container">
        <div className="sec-head">
          <div data-reveal>
            <span className="eyebrow">{t('/ 05 · Blog', '/ 05 · Blog')}</span>
            <h2>
              {t('Short, practical reads', 'Lectures courtes et pratiques')}<br/>{t('for healthcare teams.', 'pour les équipes de santé.')}
            </h2>
          </div>
          <p data-reveal data-reveal-delay="1">
            {t(
              'Local AI, on-prem clinical assistants, and privacy-first adoption — written for clinical and technical leaders.',
              'IA locale, assistants cliniques sur site et adoption axée sur la confidentialité — pour les responsables cliniques et techniques.'
            )}
          </p>
        </div>
        <div style={{
          display: 'grid',
          gap: 16,
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))'
        }}>
          {BLOG_POSTS.map((p, i) => {
            const copy = p[lang] || p.en;
            const href = p.slug ? `blog/${p.slug}/` : null;
            const isLink = !!href;
            const commonStyle = {
              padding: 24, display: 'flex', flexDirection: 'column', gap: 16,
              minHeight: 260, textDecoration: 'none', color: 'inherit',
              cursor: isLink ? 'pointer' : 'default', opacity: isLink ? 1 : 0.75
            };
            const inner = (
              <React.Fragment>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: `var(--md-sys-${p.color}-container)`,
                  color: `var(--md-sys-on-${p.color}-container)`,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  <span className="material-symbols-outlined" style={{ fontSize: 26, fontVariationSettings: "'FILL' 1" }}>{p.icon}</span>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ font: '500 11px/1 var(--md-sys-typeface-mono)', letterSpacing: '0.22em', color: 'var(--md-sys-on-surface-variant)', textTransform: 'uppercase', marginBottom: 10 }}>
                    {copy.kicker}
                  </div>
                  <h3 style={{ margin: 0, font: '400 22px/28px var(--md-sys-typeface-brand)', letterSpacing: '-0.005em', color: 'var(--md-sys-on-surface)' }}>{copy.title}</h3>
                  <p style={{ margin: '10px 0 0', font: '400 15px/22px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)' }}>{copy.body}</p>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
                  <span style={{ font: '500 11px/1 var(--md-sys-typeface-mono)', letterSpacing: '0.2em', color: 'var(--md-sys-on-surface-variant)', textTransform: 'uppercase' }}>{copy.read}</span>
                  {isLink && (
                    <span className="m3-btn m3-btn--text" style={{ padding: '0 8px', height: 32 }}>
                      {t('Read', 'Lire')}
                      <span className="material-symbols-outlined" style={{ fontSize: 16 }}>arrow_forward</span>
                    </span>
                  )}
                </div>
              </React.Fragment>
            );
            return isLink ? (
              <a key={i} href={href} className="m3-card-elevated" data-reveal data-reveal-delay={String(Math.min(i, 3))} style={commonStyle}>
                {inner}
              </a>
            ) : (
              <article key={i} className="m3-card-elevated" data-reveal data-reveal-delay={String(Math.min(i, 3))} style={commonStyle}>
                {inner}
              </article>
            );
          })}
        </div>
        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'flex-end' }} data-reveal>
          <a href="blog/" className="m3-btn m3-btn--outlined">
            {t('View all articles', 'Voir tous les articles')}
            <span className="material-symbols-outlined">arrow_forward</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Blog });