// pages-institution.jsx — Presse, Bilan, Carrieres, Forum, Bureau, Histoire, ProposerFormation

// ─── ESPACE PRESSE ─────────────────────────────────────────
function Presse() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Médias"
        title="Espace presse"
        lede="Communiqués officiels, photothèque institutionnelle, contacts presse et dossiers documentaires pour les journalistes."
        breadcrumb={["Accueil", "Espace presse"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="presse-grid">
            <div className="presse-card">
              <Icon.Doc size={28} />
              <h3 className="serif">Derniers communiqués</h3>
              <ul className="presse-list">
                {NEWS.filter((n) => n.cat === "Communiqués officiels").map((n) => (
                  <li key={n.id}>
                    <div className="mono">{n.date}</div>
                    <div>{n.title}</div>
                    <button className="btn btn-ghost btn-sm"><Icon.Download size={12} /> PDF</button>
                  </li>
                ))}
              </ul>
            </div>

            <div className="presse-card">
              <Icon.Building size={28} />
              <h3 className="serif">Dossiers thématiques</h3>
              <ul className="presse-list-simple">
                <li>Lutte contre les médicaments falsifiés — Dossier 2026</li>
                <li>Pharmacie en zone rurale — Étude OPN/MSP</li>
                <li>Antibiorésistance au Niger — Plan d'action 2026-2030</li>
                <li>Démographie pharmaceutique — Atlas 2026</li>
              </ul>
            </div>

            <div className="presse-card">
              <Icon.News size={28} />
              <h3 className="serif">Photothèque officielle</h3>
              <div className="presse-photos">
                {Array.from({ length: 6 }, (_, i) => (
                  <div key={i} className="ph" style={{ aspectRatio: "1/1", borderRadius: "var(--r-sm)" }} data-label={`Photo ${i+1}`}></div>
                ))}
              </div>
              <button className="btn btn-ghost btn-sm" style={{ marginTop: 12 }}>Toutes les photos</button>
            </div>

            <div className="presse-card presse-contact">
              <Icon.Mail size={28} />
              <h3 className="serif">Contact presse</h3>
              <p>Pour toute demande d'interview, sollicitation médiatique ou demande d'information :</p>
              <div style={{ marginTop: 16 }}>
                <div style={{ fontFamily: "var(--ff-serif)", fontSize: 18 }}>Mme Salamatou Issoufa</div>
                <div className="muted" style={{ fontSize: 13 }}>Responsable communication</div>
                <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}>
                  <span><Icon.Mail size={12} /> presse@opn.ne</span>
                  <span><Icon.Phone size={12} /> +227 20 00 00 01</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Presse = Presse;


// ─── BILAN ANNUEL ──────────────────────────────────────────
function Bilan() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Transparence"
        title="Rapport d'activité 2025"
        lede="Bilan annuel des actions de l'Ordre, comptes certifiés et perspectives pour le mandat en cours."
        breadcrumb={["Accueil", "L'Ordre", "Bilan annuel"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="bilan-hero">
            <div className="bilan-cover ph ph-dark" data-label="[ Couverture — Rapport d'activité 2025 ]"></div>
            <div>
              <div className="eyebrow">Document officiel — 84 pages</div>
              <h2 className="serif" style={{ marginTop: 12 }}>Une année de consolidation</h2>
              <p className="lede" style={{ marginTop: 12 }}>
                Le rapport présente les 6 axes d'action de l'Ordre, les chiffres-clés de la profession, les comptes de l'exercice 2025 certifiés par le commissaire aux comptes, et la feuille de route 2026.
              </p>
              <div className="bilan-cta">
                <button className="btn btn-primary"><Icon.Download /> Télécharger le PDF (4.2 Mo)</button>
                <button className="btn btn-ghost">Synthèse 12 pages</button>
              </div>
              <div className="bilan-files">
                <div><Icon.Doc size={14} /> Comptes annuels 2025 (certifiés)</div>
                <div><Icon.Doc size={14} /> Rapport du commissaire aux comptes</div>
                <div><Icon.Doc size={14} /> Procès-verbal de l'Assemblée Générale</div>
                <div><Icon.Doc size={14} /> Annexes statistiques</div>
              </div>
            </div>
          </div>

          {/* Faits marquants */}
          <div style={{ marginTop: 64 }}>
            <div className="kicker-rule"><span className="eyebrow">Faits marquants 2025</span></div>
            <div className="bilan-facts">
              {[
                { n: "1 247", l: "Pharmaciens inscrits au 31 déc. 2025", d: "+102 sur l'année" },
                { n: "94", l: "Dossiers d'inscription instruits", d: "Délai moyen : 26 jours" },
                { n: "18", l: "Procédures disciplinaires", d: "11 avertissements, 4 suspensions, 3 classées" },
                { n: "742", l: "Heures de DPC dispensées", d: "31 sessions, 6 régions" },
                { n: "9", l: "Alertes sanitaires émises", d: "dont 4 sur médicaments falsifiés" },
                { n: "412", l: "Officines visitées", d: "Programme d'inspection conjoint MSP" },
              ].map((f) => (
                <div key={f.l} className="bilan-fact">
                  <div className="bilan-fact-n serif">{f.n}</div>
                  <div className="bilan-fact-l">{f.l}</div>
                  <div className="bilan-fact-d muted">{f.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Bilan = Bilan;


// ─── CARRIÈRES & STAGES ────────────────────────────────────
function Carrieres() {
  const [type, setType] = useState("Tous");
  const types = ["Tous", "CDI", "Stage", "Public"];
  const liste = type === "Tous" ? OFFRES : OFFRES.filter((o) => o.type === type);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Emploi"
        title="Carrières & stages"
        lede="Offres d'emploi en pharmacie au Niger : officine, hôpital, industrie, secteur public, stages. Diffusion gratuite pour les pharmaciens inscrits."
        breadcrumb={["Accueil", "Carrières"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="filter-bar">
            {types.map((c) => (
              <button key={c} className={`filter-chip ${type === c ? "active" : ""}`} onClick={() => setType(c)}>{c}</button>
            ))}
            <div style={{ flex: 1 }}></div>
            <button className="btn btn-accent btn-sm"><Icon.ArrowRight /> Publier une offre</button>
          </div>

          <div className="offres-list">
            {liste.map((o) => (
              <article key={o.id} className="offre-card">
                <div className="offre-type">{o.type}</div>
                <div className="offre-main">
                  <h3 className="serif">{o.titre}</h3>
                  <div className="offre-meta">
                    <span><Icon.Pin size={12} /> {o.lieu}</span>
                    <span><Icon.Cal size={12} /> {o.date}</span>
                    <span><Icon.Doc size={12} /> {o.remunere}</span>
                  </div>
                </div>
                <button className="btn btn-primary btn-sm">Postuler <Icon.ArrowRight size={12} /></button>
              </article>
            ))}
          </div>

          <div className="carrieres-cta">
            <h3 className="serif">Pharmaciens et structures : publiez votre offre</h3>
            <p className="muted" style={{ marginTop: 8 }}>Service gratuit pour les membres inscrits à l'Ordre. Publication sous 48h après modération.</p>
            <button className="btn btn-primary" style={{ marginTop: 16 }}>Déposer une annonce</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Carrieres = Carrieres;


// ─── FORUM CONFRATERNEL (placeholder) ──────────────────────
function Forum() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Espace confraternel"
        title="Forum des pharmaciens"
        lede="Échanges entre pairs sur les questions de pratique. Espace modéré, réservé aux membres inscrits."
        breadcrumb={["Accueil", "Espace membre", "Forum"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="forum-cats">
            {[
              { n: "Pratique officinale", c: 142, last: "il y a 2h", t: "Substitution d'un IPP : retour d'expérience" },
              { n: "Pharmacie hospitalière", c: 64, last: "il y a 5h", t: "Préparation des cytotoxiques en milieu rural" },
              { n: "Pharmacovigilance", c: 38, last: "hier", t: "Effets indésirables observés sur le lot AMX-N-552" },
              { n: "Réglementation", c: 91, last: "hier", t: "Arrêté 2026-042 : interprétation du quota territorial" },
              { n: "DPC & Formation", c: 27, last: "il y a 2j", t: "Quelles formations valider pour le DPC 2026 ?" },
              { n: "Off-topic confraternel", c: 12, last: "il y a 4j", t: "Petites annonces matériel d'occasion" },
            ].map((f) => (
              <div key={f.n} className="forum-cat">
                <div>
                  <h4>{f.n}</h4>
                  <p className="muted" style={{ fontSize: 13 }}>{f.c} discussions · Dernier message : {f.last}</p>
                </div>
                <div className="forum-last">
                  <div className="mono">Dernier sujet</div>
                  <div>{f.t}</div>
                </div>
                <Icon.ArrowRight />
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.Forum = Forum;


// ─── BUREAU & CONSEIL ──────────────────────────────────────
function Bureau({ navigate }) {
  const conseillers = [
    { nom: "Dr. Idrissa Maman",       role: "Conseiller — Hospitalier",   ville: "Niamey",    mandat: "2026-2029" },
    { nom: "Dr. Fatouma Diallo",      role: "Conseillère — Officine",     ville: "Maradi",    mandat: "2026-2029" },
    { nom: "Dr. Hassane Boubacar",    role: "Conseiller — Officine",      ville: "Agadez",    mandat: "2026-2029" },
    { nom: "Dr. Salamatou Garba",     role: "Conseillère — Officine",     ville: "Zinder",    mandat: "2026-2029" },
    { nom: "Dr. Yacouba Adamou",      role: "Conseiller — Biologie",      ville: "Niamey",    mandat: "2026-2029" },
    { nom: "Pr. Halima Sani",         role: "Conseillère — Industrie",    ville: "Niamey",    mandat: "2026-2029" },
  ];

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Conseil National"
        title="Bureau & Conseil de l'Ordre"
        lede="Les membres élus qui gouvernent l'Ordre pour le mandat 2026-2029. Une équipe de douze conseillers représentant tous les modes d'exercice et toutes les régions."
        breadcrumb={["Accueil", "L'Ordre", "Bureau & Conseil"]}
      />

      {/* Bureau exécutif */}
      <section className="section-sm">
        <div className="container">
          <div className="kicker-rule"><span className="eyebrow">Bureau exécutif</span></div>
          <h2 className="serif">Les quatre fonctions du Bureau</h2>
          <p className="lede" style={{ marginTop: 12, marginBottom: 36 }}>Le Bureau pilote l'institution au quotidien et représente l'Ordre dans ses fonctions officielles.</p>

          <div className="bureau-exec">
            {BUREAU.slice(0, 4).map((m, i) => (
              <article key={m.nom} className={`bureau-exec-card ${i === 0 ? "primary" : ""}`}>
                <div className="ph" style={{ aspectRatio: "4/5", borderRadius: "var(--r-md)" }} data-label={`[ Portrait — ${m.role} ]`}></div>
                <div className="bureau-exec-body">
                  <div className="eyebrow" style={{ color: i === 0 ? "var(--gold-400)" : "var(--c-primary)" }}>{m.role}</div>
                  <h3 className="serif" style={{ color: i === 0 ? "#fff" : "var(--ink-900)", marginTop: 8 }}>{m.nom}</h3>
                  <div style={{ fontSize: 13, color: i === 0 ? "rgba(255,255,255,0.7)" : "var(--ink-500)", marginTop: 6 }}>
                    {m.ville} · Mandat {m.mandat}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Conseillers */}
      <section className="section-sm" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div className="kicker-rule"><span className="eyebrow">Conseillers</span></div>
          <h2 className="serif" style={{ marginBottom: 36 }}>Les huit conseillers du Conseil National</h2>
          <div className="bureau-grid">
            {[...BUREAU.slice(4), ...conseillers].map((m) => (
              <div key={m.nom} className="card bureau-card">
                <div className="ph" style={{ aspectRatio: "1/1", borderRadius: "var(--r-md)", marginBottom: 14 }} data-label={`[ Portrait ]`}></div>
                <div className="bureau-role">{m.role}</div>
                <div className="bureau-nom serif">{m.nom}</div>
                <div className="bureau-ville">{m.ville} · Mandat {m.mandat}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Organisation */}
      <section className="section">
        <div className="container">
          <div className="kicker-rule"><span className="eyebrow">Organisation</span></div>
          <h2 className="serif" style={{ marginBottom: 16 }}>Structure & fonctionnement</h2>
          <p className="lede" style={{ marginBottom: 36 }}>L'Ordre s'appuie sur trois instances complémentaires.</p>

          <div className="orga-grid">
            {[
              { n: "01", t: "Assemblée Générale", d: "Souveraine, réunit tous les pharmaciens inscrits une fois par an. Élit les membres du Conseil et valide les comptes.", k: "1 247 membres" },
              { n: "02", t: "Conseil National", d: "12 membres élus pour 3 ans. Statue sur les inscriptions, vote le budget, oriente les actions de l'Ordre.", k: "12 conseillers" },
              { n: "03", t: "Chambre de discipline", d: "Instance juridictionnelle indépendante. Statue sur les manquements à la déontologie. Composée de 5 membres.", k: "5 magistrats" },
            ].map((o) => (
              <div key={o.n} className="orga-card">
                <div className="orga-num serif">{o.n}</div>
                <h3 className="serif">{o.t}</h3>
                <p>{o.d}</p>
                <div className="orga-k mono">{o.k}</div>
              </div>
            ))}
          </div>

          {/* Organigramme schématique */}
          <div className="orga-chart">
            <div className="orga-chart-root">
              <Icon.Building size={20} />
              <span>Assemblée Générale</span>
              <em>1 247 pharmaciens inscrits</em>
            </div>
            <div className="orga-chart-line"></div>
            <div className="orga-chart-mid">
              <Icon.Shield size={20} />
              <span>Conseil National</span>
              <em>12 membres · Mandat 3 ans</em>
            </div>
            <div className="orga-chart-branches">
              <div className="orga-chart-leaf">
                <span>Bureau exécutif</span>
                <em>Pdt · V-Pdte · SG · Trés.</em>
              </div>
              <div className="orga-chart-leaf">
                <span>Commissions</span>
                <em>Inscriptions · DPC · Officine</em>
              </div>
              <div className="orga-chart-leaf">
                <span>Chambre de discipline</span>
                <em>5 magistrats indépendants</em>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA vers histoire */}
      <section className="section-sm" style={{ background: "var(--green-900)", color: "#fff" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="hero-eyebrow" style={{ color: "var(--gold-400)" }}>Aller plus loin</div>
            <h2 className="serif" style={{ color: "#fff", marginTop: 8 }}>Comment l'Ordre s'est-il constitué ?</h2>
          </div>
          <button className="btn btn-accent btn-lg" onClick={() => navigate("histoire")}>
            Découvrir l'histoire <Icon.ArrowRight />
          </button>
        </div>
      </section>
    </div>
  );
}
window.Bureau = Bureau;


// ─── HISTOIRE ──────────────────────────────────────────────
function Histoire({ navigate }) {
  const decennies = [
    { d: "Années 1970", t: "Les fondations", events: [
      { y: "1975", t: "Création de la pharmacie publique nigérienne", d: "Premières structures officielles d'encadrement du médicament au sein du Ministère de la Santé. Une vingtaine de pharmaciens diplômés exercent sur le territoire." },
      { y: "1978", t: "Premier syndicat des pharmaciens", d: "Naissance d'une organisation professionnelle informelle qui préfigure l'Ordre." },
    ]},
    { d: "Années 1990", t: "L'institution naît", events: [
      { y: "1992", t: "Loi fondatrice de l'Ordre", d: "Adoption de la loi instituant un Ordre national des Pharmaciens. Premier Code de déontologie publié l'année suivante." },
      { y: "1994", t: "Premier Conseil National élu", d: "Le Pr. Mahamadou Sani devient le premier Président élu de l'Ordre." },
      { y: "1996", t: "Ouverture du siège à Niamey", d: "Inauguration du siège historique avenue de la République." },
    ]},
    { d: "Années 2000", t: "Structuration", events: [
      { y: "2002", t: "Création des conseils régionaux", d: "Trois conseils régionaux installés : Niamey, Maradi, Zinder." },
      { y: "2008", t: "Modernisation du Code de déontologie", d: "Refonte des règles éthiques et instauration formelle du Conseil de discipline." },
    ]},
    { d: "Années 2010", t: "Élargissement", events: [
      { y: "2012", t: "Premier programme DPC", d: "Lancement du Développement Professionnel Continu obligatoire." },
      { y: "2016", t: "Cap des 800 pharmaciens", d: "L'Ordre franchit le seuil des 800 membres inscrits au tableau." },
      { y: "2018", t: "Plan anti-contrefaçon", d: "Premier plan national de lutte contre les médicaments falsifiés, en partenariat avec le MSP." },
    ]},
    { d: "Années 2020", t: "Transformation", events: [
      { y: "2020", t: "Nouveau Code de la santé publique", d: "Élargissement des missions de l'Ordre et renforcement de la lutte contre les médicaments falsifiés." },
      { y: "2023", t: "Code de déontologie 2023", d: "Refonte intégrale du Code, adapté aux nouveaux exercices (biologie, industrie locale)." },
      { y: "2026", t: "Plan stratégique 2026-2029", d: "Digitalisation complète des démarches, ouverture régionale renforcée, programme DPC élargi à toutes les régions." },
    ]},
  ];

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Mémoire institutionnelle"
        title="Cinquante années d'engagement"
        lede="De la création des premières structures pharmaceutiques publiques en 1975 à l'Ordre moderne d'aujourd'hui — les grandes étapes d'une institution au service de la santé publique."
        breadcrumb={["Accueil", "L'Ordre", "Historique"]}
      />

      {/* Hero numbers */}
      <section className="section-sm">
        <div className="container">
          <div className="histoire-numbers">
            <div className="hist-n">
              <div className="hist-n-v serif">1975</div>
              <div className="hist-n-l">Premières structures pharmaceutiques publiques</div>
            </div>
            <div className="hist-n">
              <div className="hist-n-v serif">1992</div>
              <div className="hist-n-l">Loi fondatrice de l'Ordre</div>
            </div>
            <div className="hist-n">
              <div className="hist-n-v serif">50</div>
              <div className="hist-n-l">Années d'engagement au service du public</div>
            </div>
            <div className="hist-n">
              <div className="hist-n-v serif">9</div>
              <div className="hist-n-l">Présidents successifs depuis 1994</div>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline détaillée */}
      <section className="section">
        <div className="container">
          {decennies.map((dec, di) => (
            <div key={dec.d} className="hist-decennie">
              <div className="hist-dec-side">
                <div className="hist-dec-d serif">{dec.d}</div>
                <div className="hist-dec-t">{dec.t}</div>
              </div>
              <div className="hist-dec-events">
                {dec.events.map((e) => (
                  <article key={e.y} className="hist-event">
                    <div className="hist-event-year mono">{e.y}</div>
                    <div className="hist-event-line"></div>
                    <div className="hist-event-body">
                      <h3 className="serif">{e.t}</h3>
                      <p>{e.d}</p>
                    </div>
                  </article>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Présidents */}
      <section className="section-sm" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div className="kicker-rule"><span className="eyebrow">Galerie des Présidents</span></div>
          <h2 className="serif" style={{ marginBottom: 36 }}>Les neuf Présidents de l'Ordre</h2>
          <div className="presidents-line">
            {[
              { n: "Pr. Mahamadou Sani",       m: "1994-1997" },
              { n: "Dr. Issoufou Garba",        m: "1997-2000" },
              { n: "Pr. Aminata Tinni",         m: "2000-2003" },
              { n: "Dr. Boureima Kané",         m: "2003-2009" },
              { n: "Dr. Soumana Maïga",         m: "2009-2015" },
              { n: "Pr. Hadiza Maman",          m: "2015-2018" },
              { n: "Dr. Ousmane Diallo",        m: "2018-2023" },
              { n: "Dr. Maïmouna Souley",       m: "2023-2026" },
              { n: "Pr. Abdoulaye Hima",        m: "2026-2029", current: true },
            ].map((p) => (
              <div key={p.n} className={`prez ${p.current ? "current" : ""}`}>
                <div className="ph" style={{ aspectRatio: "1/1", borderRadius: 99, width: 84, margin: "0 auto" }} data-label="Portrait"></div>
                <div className="prez-n serif">{p.n}</div>
                <div className="prez-m mono">{p.m}</div>
                {p.current && <div className="prez-tag">En exercice</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Citation */}
      <section className="section" style={{ background: "var(--green-900)", color: "#fff" }}>
        <div className="container">
          <div className="hist-quote-block">
            <div className="hist-quote-mark serif">«</div>
            <blockquote className="serif">
              Une profession sans Ordre est une profession sans miroir. L'Ordre, c'est la conscience collective d'un métier — il rappelle ce que nous devons aux patients, ce que nous nous devons entre confrères, et ce que nous devons à la République.
            </blockquote>
            <div className="hist-quote-sig">
              <div style={{ width: 32, height: 1, background: "var(--gold-400)" }}></div>
              <div>
                <div style={{ color: "#fff", fontWeight: 600 }}>Pr. Mahamadou Sani</div>
                <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 13 }}>Premier Président de l'Ordre · Discours fondateur, 1994</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Histoire = Histoire;


// ─── PROPOSER UNE FORMATION ────────────────────────────────
function ProposerFormation({ navigate }) {
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({
    organisme: "",
    typeOrg: "Pharmacien",
    nomContact: "",
    email: "",
    tel: "",
    titre: "",
    type: "DPC",
    format: "Présentiel",
    publics: [],
    objectifs: "",
    programme: "",
    duree: 7,
    intervenants: "",
    lieu: "",
    date: "",
    capacite: 30,
    cout: "",
    dpcCredit: true,
  });

  const togglePublic = (p) => {
    setData((d) => ({ ...d, publics: d.publics.includes(p) ? d.publics.filter((x) => x !== p) : [...d.publics, p] }));
  };

  const steps = [
    { n: "01", t: "Porteur", d: "Qui propose ?" },
    { n: "02", t: "Formation", d: "Sujet et format" },
    { n: "03", t: "Programme", d: "Contenu pédagogique" },
    { n: "04", t: "Logistique", d: "Date, lieu, capacité" },
    { n: "05", t: "Validation", d: "Récapitulatif" },
  ];

  const publics = ["Officine titulaire", "Officine assistant", "Hospitalier", "Biologie médicale", "Industrie", "Distribution", "Étudiants 5e année", "Pharmacien inspecteur"];

  if (submitted) {
    return (
      <div className="page-enter">
        <PageHeader
          eyebrow="Demande envoyée"
          title="Merci pour votre proposition"
          breadcrumb={["Accueil", "Formations", "Proposer une formation"]}
        />
        <section className="section-sm">
          <div className="container" style={{ maxWidth: 720 }}>
            <div className="propose-success">
              <div className="propose-success-check">
                <Icon.Check size={32} />
              </div>
              <h2 className="serif">Dossier transmis au Comité scientifique</h2>
              <p className="lede" style={{ marginTop: 14 }}>
                Votre proposition de formation <b>« {data.titre || 'Sans titre'} »</b> a bien été enregistrée.
                Référence : <span className="mono">FORM-2026-{Math.floor(Math.random() * 9000) + 1000}</span>.
              </p>
              <div className="propose-success-steps">
                <div><span className="cot-step-dot on"></span> <b>Réception</b> — Aujourd'hui</div>
                <div><span className="cot-step-dot"></span> <b>Étude de recevabilité</b> — Sous 5 jours</div>
                <div><span className="cot-step-dot"></span> <b>Évaluation scientifique</b> — Sous 21 jours</div>
                <div><span className="cot-step-dot"></span> <b>Décision du Conseil</b> — Notifiée par email</div>
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={() => navigate("formations")}>Voir le calendrier des formations</button>
                <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setStep(0); }}>Proposer une autre formation</button>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Devenir organisme de formation"
        title="Proposer une formation"
        lede="Pharmaciens, sociétés savantes, universités, laboratoires : soumettez votre projet de formation pour validation DPC par le Conseil de l'Ordre."
        breadcrumb={["Accueil", "Formations", "Proposer une formation"]}
      />

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

            {/* Sidebar gauche — critères */}
            <aside className="propose-side">
              <div className="propose-side-card">
                <div className="eyebrow">À retenir</div>
                <h3 className="serif" style={{ marginTop: 8 }}>Critères de recevabilité</h3>
                <ul className="propose-criteres">
                  <li><Icon.Check size={14} /> Au moins un pharmacien inscrit à l'Ordre dans l'équipe pédagogique</li>
                  <li><Icon.Check size={14} /> Programme détaillé sur 3 ans minimum d'objectifs scientifiques</li>
                  <li><Icon.Check size={14} /> Format conforme aux référentiels du DPC pharmaceutique</li>
                  <li><Icon.Check size={14} /> Capacité d'accueil et lieu validés</li>
                  <li><Icon.Check size={14} /> Absence de promotion commerciale d'un produit</li>
                </ul>
                <hr className="hr" style={{ margin: "20px 0" }} />
                <div className="eyebrow">Processus</div>
                <ol className="propose-process">
                  <li><b>Soumission</b> — Via ce formulaire</li>
                  <li><b>Recevabilité</b> — 5 jours ouvrés</li>
                  <li><b>Évaluation scientifique</b> — Comité ad hoc</li>
                  <li><b>Décision</b> — Conseil National mensuel</li>
                  <li><b>Publication</b> — Au calendrier officiel</li>
                </ol>
              </div>

              <div className="propose-side-card light">
                <Icon.Help size={18} />
                <h4>Questions ?</h4>
                <p className="muted" style={{ fontSize: 13, marginTop: 6 }}>L'équipe DPC répond aux porteurs de projet.</p>
                <div style={{ marginTop: 12, fontSize: 13, lineHeight: 1.7 }}>
                  <div><Icon.Mail size={12} /> dpc@opn.ne</div>
                  <div><Icon.Phone size={12} /> +227 20 00 00 02</div>
                </div>
              </div>
            </aside>

            {/* Formulaire central */}
            <div className="propose-main">
              {/* Stepper */}
              <div className="propose-stepper">
                {steps.map((s, i) => (
                  <div key={s.n} className={`propose-step ${i === step ? "active" : ""} ${i < step ? "done" : ""}`} onClick={() => i <= step && setStep(i)}>
                    <div className="propose-step-n">{i < step ? <Icon.Check size={14} /> : s.n}</div>
                    <div className="propose-step-t">
                      <b>{s.t}</b>
                      <em>{s.d}</em>
                    </div>
                  </div>
                ))}
              </div>

              {/* Step content */}
              <div className="propose-card">
                {step === 0 && (
                  <>
                    <h3 className="serif">Qui propose la formation ?</h3>
                    <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Le porteur principal est responsable du dossier devant le Conseil.</p>

                    <div className="propose-radio-grid" style={{ marginTop: 24 }}>
                      {[
                        { v: "Pharmacien", i: "Users", d: "Pharmacien inscrit à l'Ordre" },
                        { v: "Société savante", i: "Book", d: "Association scientifique" },
                        { v: "Université", i: "Building", d: "Faculté de pharmacie / médecine" },
                        { v: "Laboratoire", i: "Doc", d: "Industrie pharmaceutique" },
                      ].map((o) => {
                        const I = Icon[o.i];
                        return (
                          <button key={o.v} type="button" className={`propose-radio ${data.typeOrg === o.v ? "on" : ""}`} onClick={() => setData({...data, typeOrg: o.v})}>
                            <I />
                            <div>
                              <b>{o.v}</b>
                              <em>{o.d}</em>
                            </div>
                          </button>
                        );
                      })}
                    </div>

                    <div className="form-row" style={{ marginTop: 24 }}>
                      <div className="field">
                        <label>Nom de l'organisme / cabinet *</label>
                        <input value={data.organisme} onChange={(e) => setData({...data, organisme: e.target.value})} placeholder="Ex : Pharmacie de la Liberté" />
                      </div>
                      <div className="field">
                        <label>Référent du dossier *</label>
                        <input value={data.nomContact} onChange={(e) => setData({...data, nomContact: e.target.value})} placeholder="Dr. Prénom Nom" />
                      </div>
                    </div>
                    <div className="form-row" style={{ marginTop: 16 }}>
                      <div className="field">
                        <label>Email professionnel *</label>
                        <input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} placeholder="contact@exemple.ne" />
                      </div>
                      <div className="field">
                        <label>Téléphone</label>
                        <input value={data.tel} onChange={(e) => setData({...data, tel: e.target.value})} placeholder="+227 20 00 00 00" />
                      </div>
                    </div>
                  </>
                )}

                {step === 1 && (
                  <>
                    <h3 className="serif">La formation</h3>
                    <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Définissez le sujet et le format général.</p>

                    <div className="field" style={{ marginTop: 24 }}>
                      <label>Titre de la formation *</label>
                      <input value={data.titre} onChange={(e) => setData({...data, titre: e.target.value})} placeholder="Ex : Conseil pharmaceutique en hypertension artérielle" />
                    </div>

                    <div className="form-row" style={{ marginTop: 16 }}>
                      <div className="field">
                        <label>Type *</label>
                        <select value={data.type} onChange={(e) => setData({...data, type: e.target.value})}>
                          <option>DPC</option>
                          <option>Formation continue (hors DPC)</option>
                          <option>Conférence</option>
                          <option>Atelier pratique</option>
                          <option>Université d'été</option>
                        </select>
                      </div>
                      <div className="field">
                        <label>Format *</label>
                        <select value={data.format} onChange={(e) => setData({...data, format: e.target.value})}>
                          <option>Présentiel</option>
                          <option>Distanciel (e-learning)</option>
                          <option>Hybride (mixte)</option>
                        </select>
                      </div>
                    </div>

                    <div className="field" style={{ marginTop: 24 }}>
                      <label>Public visé * <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>(plusieurs choix possibles)</span></label>
                      <div className="propose-chips">
                        {publics.map((p) => (
                          <button key={p} type="button" className={`propose-chip ${data.publics.includes(p) ? "on" : ""}`} onClick={() => togglePublic(p)}>
                            {data.publics.includes(p) && <Icon.Check size={12} />}
                            {p}
                          </button>
                        ))}
                      </div>
                    </div>

                    <div className="propose-dpc">
                      <label className="propose-switch">
                        <input type="checkbox" checked={data.dpcCredit} onChange={(e) => setData({...data, dpcCredit: e.target.checked})} />
                        <span></span>
                      </label>
                      <div>
                        <b>Demander la validation DPC</b>
                        <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>
                          Si validée, la formation comptera dans le quota DPC annuel des pharmaciens participants.
                        </div>
                      </div>
                    </div>
                  </>
                )}

                {step === 2 && (
                  <>
                    <h3 className="serif">Programme pédagogique</h3>
                    <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Détaillez les objectifs et le contenu — base de l'évaluation scientifique.</p>

                    <div className="field" style={{ marginTop: 24 }}>
                      <label>Objectifs pédagogiques * <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>(3 à 5 objectifs)</span></label>
                      <textarea rows="5" value={data.objectifs} onChange={(e) => setData({...data, objectifs: e.target.value})} placeholder="À l'issue de cette formation, le participant sera capable de…"></textarea>
                    </div>

                    <div className="field" style={{ marginTop: 16 }}>
                      <label>Programme détaillé *</label>
                      <textarea rows="7" value={data.programme} onChange={(e) => setData({...data, programme: e.target.value})} placeholder="Détaillez les séquences, les durées, les méthodes pédagogiques (cours, ateliers, cas cliniques, e-learning…)"></textarea>
                    </div>

                    <div className="field" style={{ marginTop: 16 }}>
                      <label>Équipe pédagogique * <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>(au moins un pharmacien inscrit)</span></label>
                      <textarea rows="4" value={data.intervenants} onChange={(e) => setData({...data, intervenants: e.target.value})} placeholder="Liste des intervenants avec titre, qualification, n° d'inscription pour les pharmaciens"></textarea>
                    </div>

                    <div className="propose-upload">
                      <Icon.Doc />
                      <div style={{ flex: 1 }}>
                        <b>Pièces jointes recommandées</b>
                        <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>CV des intervenants, supports pédagogiques, bibliographie (PDF, 10 Mo max)</div>
                      </div>
                      <button type="button" className="btn btn-ghost btn-sm">Ajouter un fichier</button>
                    </div>
                  </>
                )}

                {step === 3 && (
                  <>
                    <h3 className="serif">Logistique</h3>
                    <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Dates proposées, lieu d'accueil, capacité.</p>

                    <div className="form-row" style={{ marginTop: 24 }}>
                      <div className="field">
                        <label>Date de la session *</label>
                        <input type="date" value={data.date} onChange={(e) => setData({...data, date: e.target.value})} />
                      </div>
                      <div className="field">
                        <label>Durée totale (heures) *</label>
                        <input type="number" min="1" max="40" value={data.duree} onChange={(e) => setData({...data, duree: e.target.value})} />
                      </div>
                    </div>

                    <div className="field" style={{ marginTop: 16 }}>
                      <label>Lieu d'accueil * <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>(si présentiel ou hybride)</span></label>
                      <input value={data.lieu} onChange={(e) => setData({...data, lieu: e.target.value})} placeholder="Ex : Faculté de Pharmacie, Niamey" />
                    </div>

                    <div className="form-row" style={{ marginTop: 16 }}>
                      <div className="field">
                        <label>Capacité d'accueil *</label>
                        <input type="number" min="5" max="500" value={data.capacite} onChange={(e) => setData({...data, capacite: e.target.value})} />
                      </div>
                      <div className="field">
                        <label>Coût par participant <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>(FCFA, 0 si gratuit)</span></label>
                        <input value={data.cout} onChange={(e) => setData({...data, cout: e.target.value})} placeholder="Ex : 25 000 FCFA" />
                      </div>
                    </div>

                    <div className="propose-info">
                      <Icon.Alert size={16} />
                      <div>
                        <b>Bon à savoir</b>
                        <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>
                          Le Conseil peut proposer un cofinancement pour les formations en région ou destinées aux jeunes pharmaciens.
                        </div>
                      </div>
                    </div>
                  </>
                )}

                {step === 4 && (
                  <>
                    <h3 className="serif">Récapitulatif</h3>
                    <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Vérifiez les informations avant envoi au Comité scientifique.</p>

                    <div className="propose-recap" style={{ marginTop: 24 }}>
                      <div className="propose-recap-section">
                        <div className="eyebrow">Porteur</div>
                        <div className="propose-recap-row"><span>Type</span><b>{data.typeOrg}</b></div>
                        <div className="propose-recap-row"><span>Organisme</span><b>{data.organisme || "—"}</b></div>
                        <div className="propose-recap-row"><span>Référent</span><b>{data.nomContact || "—"}</b></div>
                        <div className="propose-recap-row"><span>Email</span><b className="mono">{data.email || "—"}</b></div>
                      </div>
                      <div className="propose-recap-section">
                        <div className="eyebrow">Formation</div>
                        <div className="propose-recap-row"><span>Titre</span><b>{data.titre || "—"}</b></div>
                        <div className="propose-recap-row"><span>Type · Format</span><b>{data.type} · {data.format}</b></div>
                        <div className="propose-recap-row"><span>Public</span><b>{data.publics.length ? data.publics.join(", ") : "—"}</b></div>
                        <div className="propose-recap-row"><span>Durée</span><b>{data.duree} h</b></div>
                        <div className="propose-recap-row"><span>Validation DPC</span><b>{data.dpcCredit ? "Demandée" : "Non demandée"}</b></div>
                      </div>
                      <div className="propose-recap-section">
                        <div className="eyebrow">Logistique</div>
                        <div className="propose-recap-row"><span>Date</span><b>{data.date || "—"}</b></div>
                        <div className="propose-recap-row"><span>Lieu</span><b>{data.lieu || "—"}</b></div>
                        <div className="propose-recap-row"><span>Capacité</span><b>{data.capacite} participants</b></div>
                        <div className="propose-recap-row"><span>Coût</span><b>{data.cout || "Gratuit"}</b></div>
                      </div>
                    </div>

                    <label className="propose-attest">
                      <input type="checkbox" /> J'atteste sur l'honneur l'exactitude des informations fournies et l'absence de promotion commerciale dans le contenu pédagogique.
                    </label>
                  </>
                )}

                {/* Footer */}
                <div className="propose-foot">
                  <button type="button" className="btn btn-ghost" disabled={step === 0} onClick={() => setStep(step - 1)}>
                    ← Précédent
                  </button>
                  <div className="propose-progress">
                    <span className="mono">Étape {step + 1} sur {steps.length}</span>
                    <div className="propose-progress-bar"><div className="propose-progress-fill" style={{ width: `${((step + 1) / steps.length) * 100}%` }}></div></div>
                  </div>
                  {step < steps.length - 1 ? (
                    <button type="button" className="btn btn-primary" onClick={() => setStep(step + 1)}>
                      Suivant <Icon.ArrowRight />
                    </button>
                  ) : (
                    <button type="button" className="btn btn-accent" onClick={() => setSubmitted(true)}>
                      Envoyer la proposition <Icon.ArrowRight />
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA bas */}
      <section className="section-sm" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div className="propose-stats">
            <div><div className="big-n serif">31</div><div className="big-l">Formations validées en 2025</div></div>
            <div><div className="big-n serif">742h</div><div className="big-l">D'enseignement dispensé</div></div>
            <div><div className="big-n serif">86 %</div><div className="big-l">Taux d'acceptation moyen</div></div>
            <div><div className="big-n serif">21j</div><div className="big-l">Délai moyen de réponse</div></div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.ProposerFormation = ProposerFormation;