/* 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: null,
    icon: 'hourglass_top',
    color: 'secondary',
    en: {
      kicker: 'Coming soon',
      title: 'Privacy-First AI Adoption',
      body: 'A short framework for evaluating AI vendors without exposing PHI during a demo or pilot.',
      read: 'Draft'
    },
    fr: {
      kicker: 'À venir',
      title: 'Adoption de l’IA axée sur la confidentialité',
      body: 'Un cadre court pour évaluer les fournisseurs d’IA sans exposer de RPS pendant une démo ou un pilote.',
      read: 'Brouillon'
    }
  }
];

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('/ 04 · Blog', '/ 04 · 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 });