// pages-ressources.jsx — Chiffres, NigerMap, Guides, Portraits

// ─── L'ORDRE EN CHIFFRES ───────────────────────────────────
function Chiffres() {
  const total = STATS_REGION.reduce((a, b) => a + b.pharmaciens, 0);
  const officines = STATS_REGION.reduce((a, b) => a + b.officines, 0);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Données ouvertes"
        title="L'Ordre en chiffres"
        lede="La profession pharmaceutique au Niger en données : démographie, répartition territoriale, exercices, évolution."
        breadcrumb={["Accueil", "L'Ordre en chiffres"]}
      />

      <section className="section-sm">
        <div className="container">

          {/* Big numbers */}
          <div className="chiffres-big">
            <div className="big-stat">
              <div className="big-n serif">{total.toLocaleString("fr-FR")}</div>
              <div className="big-l">Pharmaciens inscrits</div>
              <div className="big-d">+8.7 % vs 2025</div>
            </div>
            <div className="big-stat">
              <div className="big-n serif">{officines}</div>
              <div className="big-l">Officines en exercice</div>
              <div className="big-d">8 régions couvertes</div>
            </div>
            <div className="big-stat">
              <div className="big-n serif">62 %</div>
              <div className="big-l">Pharmaciennes</div>
              <div className="big-d">Parité quasi-atteinte</div>
            </div>
            <div className="big-stat">
              <div className="big-n serif">37 ans</div>
              <div className="big-l">Âge médian</div>
              <div className="big-d">Profession jeune</div>
            </div>
          </div>

          {/* Carte Niger schématique */}
          <div className="chiffres-region">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Répartition territoriale</span></div>
              <h2 className="serif">8 régions, 8 réalités</h2>
              <p className="lede" style={{ marginTop: 12 }}>
                La densité pharmaceutique varie fortement entre Niamey et les régions du nord et de l'est. L'Ordre œuvre pour une meilleure répartition.
              </p>
            </div>
            <NigerMap stats={STATS_REGION} />
          </div>

          {/* Tableau */}
          <div style={{ marginTop: 48, overflow: "auto" }}>
            <table className="stats-table">
              <thead>
                <tr>
                  <th>Région</th><th>Pharmaciens</th><th>Officines</th><th>Ratio</th><th>Évolution 1 an</th>
                </tr>
              </thead>
              <tbody>
                {STATS_REGION.map((s) => (
                  <tr key={s.region}>
                    <td><strong>{s.region}</strong></td>
                    <td>{s.pharmaciens}</td>
                    <td>{s.officines}</td>
                    <td className="mono">{s.ratio}</td>
                    <td><span className="tag" style={{ background: "var(--green-100)", color: "var(--green-800)" }}>{s.evolution}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Exercices */}
          <div style={{ marginTop: 56 }}>
            <div className="kicker-rule"><span className="eyebrow">Modes d'exercice</span></div>
            <h2 className="serif">Une profession plurielle</h2>
            <div className="exercices-grid">
              {[
                { l: "Officine",        n: 824, pct: 66 },
                { l: "Hospitalier",     n: 192, pct: 15 },
                { l: "Biologie médicale", n: 84, pct: 7 },
                { l: "Industrie",       n: 71, pct: 6 },
                { l: "Distribution",    n: 48, pct: 4 },
                { l: "Administration",  n: 28, pct: 2 },
              ].map((e) => (
                <div key={e.l} className="exercice-card">
                  <div className="exercice-bar"><div className="exercice-fill" style={{ width: `${e.pct}%` }}></div></div>
                  <div className="exercice-l">{e.l}</div>
                  <div className="exercice-n serif">{e.n}</div>
                  <div className="exercice-pct">{e.pct} %</div>
                </div>
              ))}
            </div>
          </div>

          <div className="data-cta">
            <div>
              <h3 className="serif">Données ouvertes</h3>
              <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Téléchargez les jeux de données complets (CSV, JSON) sous licence Etalab.</p>
            </div>
            <button className="btn btn-primary"><Icon.Download /> Télécharger les données</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Chiffres = Chiffres;

// Carte schématique du Niger (SVG simple : carrés positionnés)
function NigerMap({ stats }) {
  const positions = {
    "Agadez":    { x: 50, y: 10, w: 38, h: 35 },
    "Tahoua":    { x: 25, y: 40, w: 22, h: 22 },
    "Zinder":    { x: 50, y: 45, w: 22, h: 22 },
    "Diffa":     { x: 75, y: 45, w: 18, h: 22 },
    "Maradi":    { x: 38, y: 60, w: 16, h: 14 },
    "Tillabéri": { x: 8,  y: 50, w: 16, h: 24 },
    "Dosso":     { x: 18, y: 70, w: 16, h: 14 },
    "Niamey":    { x: 5,  y: 73, w: 10, h: 10 },
  };
  const max = Math.max(...stats.map((s) => s.pharmaciens));
  return (
    <div className="niger-map">
      <svg viewBox="0 0 100 90" preserveAspectRatio="xMidYMid meet">
        {stats.map((s) => {
          const p = positions[s.region]; if (!p) return null;
          const intensity = s.pharmaciens / max;
          return (
            <g key={s.region}>
              <rect x={p.x} y={p.y} width={p.w} height={p.h}
                fill={`rgba(15,81,50, ${0.18 + intensity * 0.72})`}
                stroke="var(--gold-400)" strokeWidth="0.25" />
              <text x={p.x + p.w/2} y={p.y + p.h/2 - 1} textAnchor="middle" fontSize="3.2" fill="#fff" fontFamily="var(--ff-serif)">{s.region}</text>
              <text x={p.x + p.w/2} y={p.y + p.h/2 + 3.5} textAnchor="middle" fontSize="2.6" fill="rgba(255,255,255,0.8)" fontWeight="600">{s.pharmaciens}</text>
            </g>
          );
        })}
      </svg>
      <div className="niger-legend">
        <span className="mono">Densité de pharmaciens · Source : OPN 2026</span>
      </div>
    </div>
  );
}


// ─── GUIDES SANTÉ ──────────────────────────────────────────
function Guides() {
  const [open, setOpen] = useState(null);
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Pour le grand public"
        title="Guides santé"
        lede="Comprendre les médicaments, savoir quand consulter, reconnaître les pièges. Des fiches courtes rédigées par des pharmaciens."
        breadcrumb={["Accueil", "Guides santé"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="guides-grid">
            {GUIDES.map((g, i) => (
              <article key={g.id} className={`guide-card ${i === 0 ? "feat" : ""}`} onClick={() => setOpen(open === g.id ? null : g.id)}>
                <div className="guide-num serif">{String(i + 1).padStart(2, "0")}</div>
                <div className="guide-meta">
                  <span className="tag">{g.cat}</span>
                  <span className="mono">{g.duree} de lecture</span>
                </div>
                <h3 className="serif">{g.titre}</h3>
                <p>{g.excerpt}</p>
                <div className="guide-read">Lire le guide <Icon.ArrowRight size={12} /></div>
              </article>
            ))}
          </div>

          {/* Vidéo pédagogique teaser */}
          <div className="guide-video">
            <div className="ph ph-dark" style={{ aspectRatio: "16/9", borderRadius: "var(--r-lg)" }} data-label="[ Vidéo pédagogique — Bien utiliser ses médicaments ]"></div>
            <div className="guide-video-play">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
                <circle cx="18" cy="18" r="18" fill="#fff" />
                <path d="M14 11l11 7-11 7z" fill="var(--c-primary)" />
              </svg>
            </div>
            <div className="guide-video-meta">
              <div className="eyebrow" style={{ color: "var(--gold-400)" }}>Série vidéo</div>
              <h3 className="serif" style={{ color: "#fff", marginTop: 8 }}>Pharmacie pratique — 5 vidéos courtes</h3>
              <p style={{ color: "rgba(255,255,255,0.75)", marginTop: 8 }}>Réalisée avec le Ministère de la Santé Publique du Niger.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Guides = Guides;


// ─── PORTRAITS DE PHARMACIENS ──────────────────────────────
function Portraits({ navigate }) {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Visages de la profession"
        title="Portraits de pharmaciens"
        lede="Derrière chaque officine, chaque hôpital, chaque laboratoire, il y a un parcours. Découvrez celles et ceux qui font la pharmacie nigérienne."
        breadcrumb={["Accueil", "Portraits"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="portraits-grid">
            {PORTRAITS.map((p, i) => (
              <article key={p.nom} className={`portrait-card ${i % 3 === 0 ? "tall" : ""}`}>
                <div className="ph" style={{ aspectRatio: i % 3 === 0 ? "3/4" : "1/1", borderRadius: "var(--r-md)" }} data-label={`[ Portrait — ${p.nom} ]`}></div>
                <div className="portrait-body">
                  <div className="portrait-meta">
                    <span className="tag tag-gold">{p.exercice}</span>
                    <span className="mono">{p.annees} ans d'exercice</span>
                  </div>
                  <h3 className="serif">{p.nom}</h3>
                  <div className="muted" style={{ fontSize: 14 }}>{p.ville}</div>
                  <blockquote className="portrait-quote serif">« {p.phrase} »</blockquote>
                  <button className="btn btn-ghost btn-sm" style={{ marginTop: 14 }}>Lire le portrait <Icon.ArrowRight size={12} /></button>
                </div>
              </article>
            ))}
          </div>

          {/* Podcasts */}
          <div style={{ marginTop: 72 }}>
            <div className="section-head">
              <div>
                <div className="kicker-rule"><span className="eyebrow">Podcast & Vidéos</span></div>
                <h2 className="serif">« Paroles de pharmaciens »</h2>
                <p className="lede" style={{ marginTop: 12 }}>Une série d'entretiens audio avec les professionnels du Niger.</p>
              </div>
            </div>
            <div className="podcast-list">
              {PODCASTS.map((p) => (
                <div key={p.id} className="podcast-row">
                  <button className="podcast-play">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                      <path d="M6 4l11 6-11 6z" fill="currentColor" />
                    </svg>
                  </button>
                  <div style={{ flex: 1 }}>
                    <h4>{p.titre}</h4>
                    <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>Avec {p.invite} · {p.date}</div>
                  </div>
                  <div className="mono" style={{ color: "var(--ink-500)" }}>{p.duree}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Portraits = Portraits;