/* global React */

const DIRECTORY_BUCKETS = [
  {
    icon: 'category',
    color: 'primary',
    href: 'directory/category/',
    count: '5',
    en: {
      kicker: 'Workflows',
      title: 'Compare by workflow',
      desc: 'Ambient scribes, discharge drafts, shift handoffs, document Q&A, and private medical search — see what each format does and where it fits.'
    },
    fr: {
      kicker: 'Flux',
      title: 'Comparer par flux',
      desc: 'Scribes ambiants, congés, passations, Q&R documentaire et recherche médicale privée — ce que chaque format fait et où il s’insère.'
    }
  },
  {
    icon: 'storefront',
    color: 'tertiary',
    href: 'directory/vendors/',
    count: '11',
    en: {
      kicker: 'Commercial',
      title: 'Vendor profiles',
      desc: 'Abridge, Ambience, Augmedix, Commure, DeepScribe, Dragon Copilot, Freed, Heidi, Nabla, Suki — independent profiles, no sponsored rankings.'
    },
    fr: {
      kicker: 'Commercial',
      title: 'Profils fournisseurs',
      desc: 'Abridge, Ambience, Augmedix, Commure, DeepScribe, Dragon Copilot, Freed, Heidi, Nabla, Suki — profils indépendants, sans classement payant.'
    }
  },
  {
    icon: 'code',
    color: 'secondary',
    href: 'directory/open-source/',
    count: '10',
    en: {
      kicker: 'Self-host',
      title: 'Open-source toolkit',
      desc: 'Ollama, vLLM, llama.cpp, MedGemma, Whisper, Qdrant, OpenSearch, LocalAI, Haystack, Milvus — what each tool is good for and when not to use it.'
    },
    fr: {
      kicker: 'Auto-hébergé',
      title: 'Outils open source',
      desc: 'Ollama, vLLM, llama.cpp, MedGemma, Whisper, Qdrant, OpenSearch, LocalAI, Haystack, Milvus — à quoi chacun sert et quand l’éviter.'
    }
  },
  {
    icon: 'menu_book',
    color: 'primary',
    href: 'directory/guides/',
    count: '3',
    en: {
      kicker: 'Guides',
      title: 'Buyer guides',
      desc: 'How to evaluate local AI in healthcare, how to test an AI scribe safely, and cloud vs. local for hospitals — practical, not sponsored.'
    },
    fr: {
      kicker: 'Guides',
      title: 'Guides d’achat',
      desc: 'Évaluer l’IA locale en santé, tester un scribe en toute sécurité, et nuage c. local pour les hôpitaux — pratique, non commandité.'
    }
  }
];

const DIRECTORY_CHECKLISTS = [
  {
    href: 'directory/compare/local-vs-cloud-ai-checklist/',
    en: 'Local vs. cloud AI checklist',
    fr: 'Liste : IA locale c. infonuagique'
  },
  {
    href: 'directory/compare/data-residency-and-sovereignty-checklist/',
    en: 'Data residency & sovereignty checklist',
    fr: 'Liste : résidence et souveraineté des données'
  },
  {
    href: 'directory/compare/multi-workflow-platform-checklist/',
    en: 'Multi-workflow platform checklist',
    fr: 'Liste : plateforme multi-flux'
  }
];

function DirectoryPreview() {
  const lang = React.useContext(LangContext);
  const t = useT();
  return (
    <section id="directory" className="section surface-divider">
      <div className="container">
        <div className="sec-head">
          <div data-reveal>
            <span className="eyebrow">{t('/ 04 · Directory', '/ 04 · Répertoire')}</span>
            <h2>
              {t('Compare the market', 'Comparez le marché')}<br/>{t('before you commit.', 'avant de vous engager.')}
            </h2>
          </div>
          <p data-reveal data-reveal-delay="1">
            {t(
              'An independent guide to commercial and open-source healthcare AI — so you can see who fits your privacy posture, workflow, and budget before a single demo.',
              'Un guide indépendant de l’IA santé commerciale et open source — pour voir qui correspond à votre posture de confidentialité, à votre flux et à votre budget avant la première démo.'
            )}
          </p>
        </div>
        <div style={{
          display: 'grid',
          gap: 16,
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))'
        }}>
          {DIRECTORY_BUCKETS.map((b, i) => {
            const copy = b[lang] || b.en;
            return (
              <a key={b.href} href={b.href} className="m3-card-elevated" data-reveal data-reveal-delay={String(Math.min(i, 3))} style={{
                padding: 24, display: 'flex', flexDirection: 'column', gap: 16,
                minHeight: 260, textDecoration: 'none', color: 'inherit', cursor: 'pointer'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 12,
                    background: `var(--md-sys-${b.color}-container)`,
                    color: `var(--md-sys-on-${b.color}-container)`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <span className="material-symbols-outlined" style={{ fontSize: 26, fontVariationSettings: "'FILL' 1" }}>{b.icon}</span>
                  </div>
                  <span style={{
                    font: '500 11px/1 var(--md-sys-typeface-mono)',
                    letterSpacing: '0.2em',
                    color: 'var(--md-sys-on-surface-variant)'
                  }}>
                    {b.count} {t('ENTRIES', 'ENTRÉES')}
                  </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.desc}</p>
                </div>
                <span className="m3-btn m3-btn--text" style={{ padding: '0 8px', height: 32, alignSelf: 'flex-start' }}>
                  {t('Browse', 'Parcourir')}
                  <span className="material-symbols-outlined" style={{ fontSize: 16 }}>arrow_forward</span>
                </span>
              </a>
            );
          })}
        </div>

        <div data-reveal style={{
          marginTop: 28, padding: 20,
          background: 'var(--md-sys-surface-container)',
          borderRadius: 16,
          border: '1px solid var(--md-sys-outline-variant)',
          display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'space-between'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="material-symbols-outlined" style={{ color: 'var(--md-sys-primary)', fontSize: 24 }}>fact_check</span>
            <span style={{
              font: '500 13px/1.4 var(--md-sys-typeface-plain)',
              color: 'var(--md-sys-on-surface)',
              textTransform: 'uppercase',
              letterSpacing: '0.08em'
            }}>{t('Buyer checklists', 'Listes pour acheteurs')}</span>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {DIRECTORY_CHECKLISTS.map(c => (
              <a key={c.href} href={c.href} className="m3-chip" style={{ textDecoration: 'none' }}>
                <span className="material-symbols-outlined">check_box</span>
                {c[lang] || c.en}
              </a>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }} data-reveal>
          <a href="directory/" className="m3-btn m3-btn--filled">
            {t('Open the full directory', 'Ouvrir le répertoire complet')}
            <span className="material-symbols-outlined">arrow_forward</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DirectoryPreview });