/* global React */

const REASONS = [
  {
    icon: 'lock',
    en: { title: 'Data Privacy', body: 'PHI stays on your network. No cloud APIs. No phone-home.' },
    fr: { title: 'Confidentialité des données', body: 'Les RPS restent sur votre réseau. Aucune API infonuagique. Aucun appel distant.' }
  },
  {
    icon: 'local_hospital',
    en: { title: 'Built for Healthcare', body: 'Purpose-built clinical workflows — not a chatbot in a lab coat.' },
    fr: { title: 'Conçu pour la santé', body: 'Des flux cliniques spécialement conçus — pas un chatbot en sarrau.' }
  },
  {
    icon: 'gavel',
    en: { title: 'Regulatory Fit', body: 'HIPAA, PIPEDA, and provincial health acts baked into the architecture.' },
    fr: { title: 'Conformité réglementaire', body: 'HIPAA, LPRPDE et lois provinciales sur la santé intégrées à l’architecture.' }
  },
  {
    icon: 'balance',
    en: { title: 'Algorithmic Fairness', body: 'Real-time bias audits on every clinical risk score you deploy.' },
    fr: { title: 'Équité algorithmique', body: 'Audits de biais en temps réel sur chaque score de risque clinique déployé.' }
  },
  {
    icon: 'sentiment_satisfied',
    en: { title: 'Less Burnout', body: 'Ambient scribe, discharge, handoff, referral. Hours back per shift.' },
    fr: { title: 'Moins d’épuisement', body: 'Scribe ambiant, congés, transferts, références. Des heures récupérées par quart.' }
  },
  {
    icon: 'lock_open',
    en: { title: 'No Lock-in', body: 'Self-hosted, open, your hardware. Zero per-token cloud bills.' },
    fr: { title: 'Aucun verrouillage', body: 'Auto-hébergé, ouvert, votre matériel. Zéro facture infonuagique au jeton.' }
  }
];

function Reasons() {
  const lang = React.useContext(LangContext);
  const t = useT();
  return (
    <section id="reasons" className="section surface-divider">
      <div className="container">
        <div className="sec-head">
          <div data-reveal>
            <span className="eyebrow">{t('/ 00 · Why', '/ 00 · Pourquoi')}</span>
            <h2>
              {t('Six reasons', 'Six raisons')}<br/>{t('hospitals pick it.', 'que choisissent les hôpitaux.')}
            </h2>
          </div>
          <p data-reveal data-reveal-delay="1">
            {t(
              'A short list of what changes the day you move clinical AI off the public cloud and onto your own network.',
              'Une courte liste de ce qui change le jour où vous déplacez l’IA clinique du nuage public vers votre propre réseau.'
            )}
          </p>
        </div>
        <div style={{
          display: 'grid',
          gap: 16,
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))'
        }}>
          {REASONS.map((r, i) => {
            const copy = r[lang] || r.en;
            return (
              <div key={r.icon} className="m3-card-elevated" data-reveal data-reveal-delay={String(Math.min(i, 5))} style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, minHeight: 220 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: 'var(--md-sys-primary-container)',
                  color: 'var(--md-sys-on-primary-container)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  <span className="material-symbols-outlined" style={{ fontSize: 26, fontVariationSettings: "'FILL' 1" }}>{r.icon}</span>
                </div>
                <div>
                  <div style={{ font: '500 11px/1 var(--md-sys-typeface-mono)', letterSpacing: '0.22em', color: 'var(--md-sys-on-surface-variant)', textTransform: 'uppercase', marginBottom: 8 }}>
                    0{i + 1}
                  </div>
                  <h3 style={{ margin: 0, font: '400 24px/32px var(--md-sys-typeface-brand)', letterSpacing: '-0.01em', 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>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const t = useT();
  return (
    <section id="problem" className="section surface-divider">
      <div className="container">
        <div className="sec-head">
          <div data-reveal>
            <span className="eyebrow">{t('/ 01 · Problem', '/ 01 · Problème')}</span>
            <h2>
              {t('Every cloud API', 'Chaque API infonuagique')}<br/>{t('is a compliance risk.', 'est un risque de conformité.')}
            </h2>
          </div>
          <p data-reveal data-reveal-delay="1">
            {t(
              'Hospitals can’t send PHI to ChatGPT. Vendor AI tools phone home. Off-the-shelf copilots weren’t designed for HIPAA, PIPEDA, or provincial health acts. WalledCare is.',
              'Les hôpitaux ne peuvent pas envoyer de RPS à ChatGPT. Les outils d’IA des fournisseurs appellent leur base. Les copilotes prêts à l’emploi n’ont pas été conçus pour HIPAA, la LPRPDE ou les lois provinciales. WalledCare, oui.'
            )}
          </p>
        </div>

        <div className="m3-card-filled" data-reveal style={{ padding: 24, overflow: 'hidden', position: 'relative' }}>
          <div className="hai-problem-grid">
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: '100%', maxWidth: 260, aspectRatio: '1.4/1',
                background: 'var(--md-sys-surface-container-lowest)',
                borderRadius: 16,
                border: '1px solid var(--md-sys-outline-variant)',
                padding: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10
              }}>
                {['computer','database','monitor_heart','vital_signs','patient_list','bed'].map((ic, i) => (
                  <div key={i} style={{
                    aspectRatio: '1/1',
                    borderRadius: 8, background: 'var(--md-sys-primary-container)',
                    color: 'var(--md-sys-on-primary-container)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <span className="material-symbols-outlined" style={{ fontSize: 22, fontVariationSettings: "'FILL' 1" }}>{ic}</span>
                  </div>
                ))}
              </div>
              <div style={{ font: '500 11px/1 var(--md-sys-typeface-mono)', letterSpacing: '0.22em', color: 'var(--md-sys-on-surface-variant)', textTransform: 'uppercase' }}>
                {t('Your hospital network', 'Votre réseau hospitalier')}
              </div>
            </div>

            <div className="hai-problem-divider" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, minWidth: 140 }}>
              <div style={{ position: 'relative', width: 120, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="120" height="30" viewBox="0 0 120 30">
                  <line x1="4" y1="15" x2="116" y2="15" stroke="var(--md-sys-outline)" strokeWidth="2" strokeDasharray="6 6" />
                  <path d="M 108 8 L 116 15 L 108 22" fill="none" stroke="var(--md-sys-outline)" strokeWidth="2" />
                </svg>
                <div style={{
                  position: 'absolute',
                  width: 54, height: 54, borderRadius: '50%',
                  background: 'var(--md-sys-error-container)',
                  color: 'var(--md-sys-on-error-container)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: 'var(--md-sys-elevation-2)'
                }}>
                  <span className="material-symbols-outlined" style={{ fontSize: 32, fontVariationSettings: "'FILL' 1" }}>block</span>
                </div>
              </div>
              <span className="m3-chip" style={{ borderColor: 'var(--md-sys-error)', color: 'var(--md-sys-error)', background: 'color-mix(in oklab, var(--md-sys-error) 8%, transparent)' }}>
                <span className="material-symbols-outlined">wifi_off</span>
                {t('No web required', 'Aucun web requis')}
              </span>
            </div>

            <div className="hai-problem-cloud" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, opacity: 0.4 }}>
              <div style={{
                width: '100%', maxWidth: 260, aspectRatio: '1.4/1',
                background: 'var(--md-sys-surface-container-low)',
                borderRadius: 16,
                border: '1px dashed var(--md-sys-outline)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <span className="material-symbols-outlined" style={{ fontSize: 72, color: 'var(--md-sys-on-surface-variant)', fontVariationSettings: "'FILL' 1" }}>cloud</span>
              </div>
              <div style={{ font: '500 11px/1 var(--md-sys-typeface-mono)', letterSpacing: '0.22em', color: 'var(--md-sys-on-surface-variant)', textTransform: 'uppercase' }}>
                {t('Cloud API', 'API infonuagique')}
              </div>
            </div>
          </div>

          <p style={{ textAlign: 'center', margin: '16px 0 0', font: '400 14px/20px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)' }}>
            {t('Every app runs entirely on your hospital network.', 'Chaque application s’exécute entièrement sur votre réseau hospitalier.')}
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reasons, Problem });