function Themes({ accent }) {
  const themes = [
    {
      title: 'Économie & structures',
      desc: "Entreprises, établissements, chiffre d'affaires, autoentrepreneurs — mesurer le poids et la vitalité d'un secteur.",
      sources: ['SIRENE', 'ESANE', 'INSEE'],
      viz: 'donut',
    },
    {
      title: 'Emploi & dynamiques',
      desc: "Salariés, ETP, offres d'emploi, tensions au recrutement, intérim, chômage — cartographier le marché du travail.",
      sources: ['DSN', 'ACOSS', 'BMO', 'DARES', 'France Travail'],
      viz: 'line',
    },
    {
      title: 'Formation initiale & continue',
      desc: 'Certifications, organismes, apprenants, insertion, consommation de formation — piloter les parcours.',
      sources: ['RNCP', 'DEPP', 'Mon Compte Formation', 'OPCO'],
      viz: 'bar',
    },
    {
      title: 'Compétences & métiers',
      desc: 'Besoins en compétences, émergence et déclin des métiers, mobilités — anticiper les transitions.',
      sources: ['TextKernel', 'France compétences', 'Études KYU'],
      viz: 'radar',
    },
  ];

  return (
    <section id="themes" className="section themes-section">
      <div className="container">
        <SectionHead
          kicker="Thématiques"
          title={<>Tout le champ <em>emploi-formation</em>,<br />dans une seule plateforme.</>}
          lede="Un catalogue rassemblant plus de 100 sources distinctes, structurées et prêtes à croiser."
        />
        <div className="themes-grid">
          {themes.map((t, i) =>
            <article key={i} className="theme-card">
              <ThemeViz kind={t.viz} accent={accent} />
              <h3 className="theme-title">{t.title}</h3>
              <p className="theme-desc">{t.desc}</p>
              <div className="theme-sources">
                {t.sources.map(s => <span key={s} className="src-chip">{s}</span>)}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>
  );
}

function ThemeViz({ kind, accent }) {
  if (kind === 'donut') {
    const r = 26, c = 2 * Math.PI * r;
    return (
      <svg viewBox="0 0 80 80" className="theme-viz">
        <circle cx="40" cy="40" r={r} fill="none" stroke="#E2DCCE" strokeWidth="8" />
        <circle cx="40" cy="40" r={r} fill="none" stroke={accent.accent} strokeWidth="8"
          strokeDasharray={`${c * 0.62} ${c}`} strokeDashoffset={c * 0.25} transform="rotate(-90 40 40)" strokeLinecap="round" />
        <circle cx="40" cy="40" r={r} fill="none" stroke={accent.secondary} strokeWidth="8"
          strokeDasharray={`${c * 0.22} ${c}`} strokeDashoffset={c * 0.25 - c * 0.62} transform="rotate(-90 40 40)" strokeLinecap="round" />
      </svg>
    );
  }
  if (kind === 'line') {
    return (
      <svg viewBox="0 0 80 80" className="theme-viz">
        <polyline fill="none" stroke="#C9C2D8" strokeWidth="2" points="8,60 20,55 32,58 44,45 56,48 72,30" />
        <polyline fill="none" stroke={accent.accent} strokeWidth="2.5" points="8,50 20,42 32,48 44,32 56,36 72,18" />
        {[8, 20, 32, 44, 56, 72].map((x, i) =>
          <circle key={i} cx={x} cy={[50, 42, 48, 32, 36, 18][i]} r="2.4" fill={accent.accent} />
        )}
      </svg>
    );
  }
  if (kind === 'bar') {
    const vals = [35, 52, 28, 64, 48, 72];
    return (
      <svg viewBox="0 0 80 80" className="theme-viz">
        {vals.map((v, i) =>
          <rect key={i} x={8 + i * 11} y={72 - v} width="7" height={v}
            fill={i === 5 ? accent.accent : i === 3 ? accent.secondary : '#C9C2D8'} />
        )}
      </svg>
    );
  }
  // radar
  const pts = [[40, 12], [64, 28], [60, 58], [40, 68], [20, 58], [16, 28]];
  const active = [[40, 20], [58, 32], [52, 52], [40, 60], [28, 52], [28, 32]];
  return (
    <svg viewBox="0 0 80 80" className="theme-viz">
      <polygon points={pts.map(p => p.join(',')).join(' ')} fill="none" stroke="#E2DCCE" strokeWidth="1" />
      <polygon points={pts.map(([x, y]) => [(x + 40) / 2, (y + 40) / 2].join(',')).join(' ')} fill="none" stroke="#E2DCCE" strokeWidth="1" />
      <polygon points={active.map(p => p.join(',')).join(' ')} fill={accent.accent} fillOpacity="0.18" stroke={accent.accent} strokeWidth="1.5" />
    </svg>
  );
}

function SectionHead({ kicker, title, lede, align = 'left' }) {
  return (
    <header className={`sec-head align-${align}`}>
      <div className="kicker"><span className="kdot" />{kicker}</div>
      <h2 className="sec-title">{title}</h2>
      {lede && <p className="sec-lede">{lede}</p>}
    </header>
  );
}

Object.assign(window, { Themes, SectionHead });