// pages-inscription.jsx — Demande d'inscription au tableau de l'Ordre

function Inscription({ navigate }) {
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [dossierRef, setDossierRef] = useState(null);
  const [submitError, setSubmitError] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const [files, setFiles] = useState({ diplome: null, casier: null, photo: null, nationalite: null, cv: null, lettre: null });
  const fileRefs = useRef({});
  const [data, setData] = useState({
    // 0 — type
    typeDemande: "nouveau",
    // 1 — identité
    civilite: "Dr.",
    nom: "ABDOU",
    prenom: "Salif",
    naissanceDate: "1994-07-18",
    naissanceLieu: "Niamey, Niger",
    nationalite: "Nigérienne",
    nin: "NE-1994-071802145",
    // 2 — coordonnées
    email: "s.abdou@example.ne",
    telephone: "+227 90 45 12 78",
    adresse: "Quartier Plateau, Rue PL-15, BP 12502",
    ville: "Niamey",
    region: "Niamey",
    // 3 — diplômes
    diplomeNom: "Doctorat d'État en Pharmacie",
    diplomeUniv: "Université Abdou Moumouni de Niamey — Faculté des Sciences de la Santé",
    diplomeAnnee: "2024",
    diplomePays: "Niger",
    equivalence: false,
    specialisation: "Pharmacie clinique",
    // 4 — activité
    activite: "officine",
    structureNom: "Pharmacie de la Liberté",
    structureVille: "Niamey",
    fonction: "Pharmacien assistant",
    debutExercice: "2026-07-01",
    // 5 — pièces (géré via state `files` séparé)
    pieces: {
      diplome: false,
      casier: false,
      photo: false,
      nationalite: false,
      cv: false,
      lettre: false,
    },
    // 6 — déontologie
    deontologie: true,
    sincerite: true,
    signature: "Dr. Salif ABDOU",
  });

  const set = (k, v) => setData({ ...data, [k]: v });
  const addFile = (id, file) => {
    setFiles(f => ({ ...f, [id]: file }));
    setData(d => ({ ...d, pieces: { ...d.pieces, [id]: true } }));
  };
  const removeFile = (id) => {
    setFiles(f => ({ ...f, [id]: null }));
    setData(d => ({ ...d, pieces: { ...d.pieces, [id]: false } }));
    if (fileRefs.current[id]) fileRefs.current[id].value = '';
  };

  const STEPS = ["Type", "Identité", "Coordonnées", "Diplômes", "Activité", "Pièces", "Engagement"];
  const isLast = step === STEPS.length - 1;

  const piecesCount = Object.values(files).filter(Boolean).length;
  const piecesTotal = Object.keys(files).length;

  const TYPES = [
    { id: "nouveau",    t: "Première inscription",                   d: "Pharmacien diplômé souhaitant exercer pour la première fois au Niger.", i: "Doc" },
    { id: "etranger",   t: "Pharmacien diplômé à l'étranger",         d: "Pharmacien titulaire d'un diplôme délivré hors du Niger (équivalence requise).", i: "Building" },
    { id: "transfert",  t: "Transfert d'un autre Ordre",               d: "Pharmacien déjà inscrit dans le tableau d'un autre Ordre national.", i: "Map" },
    { id: "reinscription", t: "Réinscription après radiation",         d: "Demande de réinscription après une période d'interruption volontaire ou de radiation.", i: "Users" },
  ];

  const ACTIVITES = [
    { id: "officine",     t: "Officine",      d: "Pharmacien d'officine, titulaire ou assistant.", i: "Building" },
    { id: "hospitalier",  t: "Hospitalier",   d: "Pharmacien hospitalier, PUI, structure de santé.", i: "Shield" },
    { id: "industrie",    t: "Industrie",     d: "Industrie pharmaceutique, affaires réglementaires.", i: "Book" },
    { id: "biologie",     t: "Biologie",      d: "Pharmacien biologiste, laboratoire d'analyses.", i: "Help" },
    { id: "grossiste",    t: "Grossiste",     d: "Grossiste-répartiteur, distribution.", i: "Map" },
    { id: "autre",        t: "Autre",         d: "Recherche, enseignement, administration.", i: "Users" },
  ];

  const PIECES_LIST = [
    { id: "diplome",     t: "Copie certifiée du diplôme",          d: "Diplôme d'État de Docteur en Pharmacie, légalisé.", obligatoire: false },
    { id: "casier",      t: "Extrait de casier judiciaire",         d: "Bulletin n°3, daté de moins de 3 mois.", obligatoire: false },
    { id: "nationalite", t: "Justificatif de nationalité / titre",   d: "Certificat de nationalité ou titre de séjour valide.", obligatoire: false },
    { id: "photo",       t: "Photo d'identité récente",              d: "Photo couleur, fond neutre, format 4×4 cm.", obligatoire: false },
    { id: "cv",          t: "Curriculum Vitae",                       d: "CV daté et signé, parcours complet.", obligatoire: false },
    { id: "lettre",      t: "Lettre de motivation",                    d: "Adressée au Président de l'Ordre.", obligatoire: false },
  ];

  const canContinue = () => {
    switch (step) {
      case 0: return !!data.typeDemande;
      case 1: return data.civilite && data.nom && data.prenom && data.naissanceDate;
      case 2: return data.email && data.telephone && data.ville && data.region;
      case 3: return data.diplomeNom && data.diplomeUniv && data.diplomeAnnee;
      case 4: return data.activite && data.structureVille;
      case 5: return PIECES_LIST.filter(p => p.obligatoire).every(p => !!files[p.id]);
      case 6: return data.deontologie && data.sincerite && data.signature;
      default: return false;
    }
  };

  // SUCCESS SCREEN
  if (submitted) {
    const dossierNum = dossierRef || `DOS-${new Date().getFullYear()}-???`;
    return (
      <div className="page-enter">
        <section className="section">
          <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
            <div className="verify-badge" style={{ margin: "0 auto 24px", width: 72, height: 72 }}><Icon.Check size={32} /></div>
            <div className="eyebrow">Demande enregistrée</div>
            <h1 className="serif" style={{ marginTop: 14 }}>Votre dossier a été transmis</h1>
            <p className="lede" style={{ marginTop: 16 }}>
              Numéro de dossier : <b className="mono" style={{ color: "var(--c-primary)", fontSize: "1.1em" }}>{dossierNum}</b>
            </p>
            <div style={{ background: "var(--green-50)", border: "1px solid rgba(27,112,69,0.2)", borderRadius: "var(--r-lg)", padding: 28, marginTop: 32, textAlign: "left" }}>
              <h4 style={{ marginBottom: 14 }}>Prochaines étapes</h4>
              <ol className="next-steps">
                <li><b>Accusé de réception</b> envoyé à <span className="mono">{data.email}</span> dans les 24h.</li>
                <li><b>Examen administratif</b> sous 7 jours ouvrés (complétude des pièces).</li>
                <li><b>Avis du Conseil</b> lors de sa prochaine session (mensuelle).</li>
                <li><b>Décision finale</b> notifiée par courrier et par email sous 30 jours.</li>
              </ol>
            </div>
            <p className="muted" style={{ marginTop: 28, fontSize: 14 }}>
              Vous pouvez suivre l'état d'avancement depuis votre Espace candidat (accès envoyé par email).
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => navigate("accueil")}>Retour à l'accueil</button>
              <button className="btn btn-ghost" onClick={() => window.print()}><Icon.Download /> Télécharger le récépissé PDF</button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Tableau de l'Ordre"
        title="Demande d'inscription"
        lede="Formulaire officiel d'inscription au tableau de l'Ordre des Pharmaciens du Niger. Délai d'instruction moyen : 30 jours."
        breadcrumb={["Accueil", "Inscription"]}
      />

      <section className="section-sm">
        <div className="container" style={{ maxWidth: 980 }}>
          {/* Stepper */}
          <div className="stepper insc-stepper">
            {STEPS.map((s, i) => (
              <div key={s} className={`step ${step >= i ? "active" : ""} ${step === i ? "current" : ""}`}>
                <div className="step-n">{i + 1}</div>
                <div className="step-l">{s}</div>
              </div>
            ))}
          </div>

          <div className="insc-grid">
            {/* SIDEBAR — récapitulatif */}
            <aside className="insc-aside">
              <div className="aside-block">
                <h4>Conditions préalables</h4>
                <ul className="check-ul">
                  <li><Icon.Check size={13} /> Diplôme de Docteur en Pharmacie</li>
                  <li><Icon.Check size={13} /> Casier judiciaire vierge</li>
                  <li><Icon.Check size={13} /> Pièces administratives</li>
                  <li><Icon.Check size={13} /> Engagement déontologique</li>
                </ul>
              </div>
              <div className="aside-block">
                <h4>Délais & frais</h4>
                <div className="aside-row">
                  <span>Instruction</span><b>30 jours</b>
                </div>
                <div className="aside-row">
                  <span>Frais de dossier</span><b>50 000 FCFA</b>
                </div>
                <div className="aside-row">
                  <span>Cotisation 1<sup>re</sup> année</span><b>75 000 FCFA</b>
                </div>
              </div>
              <div className="aside-block aside-help">
                <Icon.Help size={16} />
                <div>
                  <b>Besoin d'aide ?</b>
                  <p className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>Secrétariat de l'Ordre — <a href="#" onClick={(e) => { e.preventDefault(); navigate("contact"); }}>nous contacter</a></p>
                </div>
              </div>
            </aside>

            {/* FORM */}
            <div className="form-wrap insc-form">
              {/* STEP 0 — TYPE */}
              {step === 0 && (
                <>
                  <h3 className="serif">Type de demande</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Sélectionnez la situation qui correspond à votre dossier.</p>
                  <div className="type-list">
                    {TYPES.map(t => {
                      const I = Icon[t.i];
                      return (
                        <label key={t.id} className={`type-option ${data.typeDemande === t.id ? "checked" : ""}`}>
                          <input type="radio" name="type" checked={data.typeDemande === t.id} onChange={() => set("typeDemande", t.id)} />
                          <div className="type-icon"><I /></div>
                          <div>
                            <div className="type-t">{t.t}</div>
                            <div className="type-d">{t.d}</div>
                          </div>
                        </label>
                      );
                    })}
                  </div>
                </>
              )}

              {/* STEP 1 — IDENTITÉ */}
              {step === 1 && (
                <>
                  <h3 className="serif">Identité du candidat</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Renseignez les informations telles qu'elles figurent sur vos pièces d'identité.</p>

                  <div className="field">
                    <label>Civilité *</label>
                    <div className="radio-row">
                      {["Dr.", "Pr.", "M.", "Mme"].map(c => (
                        <label key={c} className={`radio-btn ${data.civilite === c ? "checked" : ""}`}>
                          <input type="radio" name="civilite" checked={data.civilite === c} onChange={() => set("civilite", c)} />
                          {c}
                        </label>
                      ))}
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Nom *</label>
                      <input required value={data.nom} onChange={e => set("nom", e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Prénom(s) *</label>
                      <input required value={data.prenom} onChange={e => set("prenom", e.target.value)} />
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Date de naissance *</label>
                      <input required type="date" value={data.naissanceDate} onChange={e => set("naissanceDate", e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Lieu de naissance</label>
                      <input value={data.naissanceLieu} onChange={e => set("naissanceLieu", e.target.value)} placeholder="Ville, Pays" />
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Nationalité</label>
                      <select value={data.nationalite} onChange={e => set("nationalite", e.target.value)}>
                        <option>Nigérienne</option>
                        <option>Autre (CEDEAO)</option>
                        <option>Autre (hors CEDEAO)</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>N° d'identification (NIN)</label>
                      <input value={data.nin} onChange={e => set("nin", e.target.value)} placeholder="Optionnel" />
                    </div>
                  </div>
                </>
              )}

              {/* STEP 2 — COORDONNÉES */}
              {step === 2 && (
                <>
                  <h3 className="serif">Coordonnées</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Ces informations serviront à vous notifier l'avancement de votre dossier.</p>

                  <div className="form-row">
                    <div className="field">
                      <label>Email *</label>
                      <input required type="email" value={data.email} onChange={e => set("email", e.target.value)} placeholder="vous@exemple.com" />
                    </div>
                    <div className="field">
                      <label>Téléphone *</label>
                      <input required value={data.telephone} onChange={e => set("telephone", e.target.value)} placeholder="+227 ..." />
                    </div>
                  </div>

                  <div className="field">
                    <label>Adresse postale</label>
                    <input value={data.adresse} onChange={e => set("adresse", e.target.value)} placeholder="Quartier, numéro, BP" />
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Ville *</label>
                      <input required value={data.ville} onChange={e => set("ville", e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Région *</label>
                      <select value={data.region} onChange={e => set("region", e.target.value)}>
                        <option value="">Sélectionner…</option>
                        {REGIONS.slice(1).map(r => <option key={r}>{r}</option>)}
                      </select>
                    </div>
                  </div>
                </>
              )}

              {/* STEP 3 — DIPLÔMES */}
              {step === 3 && (
                <>
                  <h3 className="serif">Diplômes & formation</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Renseignez votre diplôme principal de Docteur en Pharmacie.</p>

                  <div className="field">
                    <label>Intitulé du diplôme *</label>
                    <input required value={data.diplomeNom} onChange={e => set("diplomeNom", e.target.value)} placeholder="Ex. Doctorat d'État en Pharmacie" />
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Université / Établissement *</label>
                      <input required value={data.diplomeUniv} onChange={e => set("diplomeUniv", e.target.value)} placeholder="Ex. Université Abdou Moumouni de Niamey" />
                    </div>
                    <div className="field">
                      <label>Année d'obtention *</label>
                      <input required type="number" min="1970" max="2030" value={data.diplomeAnnee} onChange={e => set("diplomeAnnee", e.target.value)} placeholder="AAAA" />
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Pays de délivrance</label>
                      <input value={data.diplomePays} onChange={e => set("diplomePays", e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Spécialisation (le cas échéant)</label>
                      <input value={data.specialisation} onChange={e => set("specialisation", e.target.value)} placeholder="Ex. Biologie clinique" />
                    </div>
                  </div>

                  {data.diplomePays && data.diplomePays.toLowerCase() !== "niger" && (
                    <label className="anonyme-toggle" style={{ background: "var(--gold-100)", borderColor: "rgba(181,138,31,0.3)" }}>
                      <input type="checkbox" checked={data.equivalence} onChange={e => set("equivalence", e.target.checked)} />
                      <div>
                        <div style={{ fontWeight: 600 }}>Équivalence de diplôme obtenue</div>
                        <div className="muted" style={{ fontSize: 13 }}>Décision d'équivalence délivrée par les autorités compétentes nigériennes. Joignez la pièce à l'étape « Pièces justificatives ».</div>
                      </div>
                    </label>
                  )}
                </>
              )}

              {/* STEP 4 — ACTIVITÉ */}
              {step === 4 && (
                <>
                  <h3 className="serif">Activité professionnelle envisagée</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Précisez le secteur d'exercice et la structure d'affectation.</p>

                  <div className="field" style={{ marginBottom: 18 }}>
                    <label>Secteur d'activité *</label>
                  </div>
                  <div className="activity-grid">
                    {ACTIVITES.map(a => {
                      const I = Icon[a.i];
                      return (
                        <label key={a.id} className={`activity-option ${data.activite === a.id ? "checked" : ""}`}>
                          <input type="radio" name="activite" checked={data.activite === a.id} onChange={() => set("activite", a.id)} />
                          <div className="activity-icon"><I size={20} /></div>
                          <div className="activity-t">{a.t}</div>
                          <div className="activity-d">{a.d}</div>
                        </label>
                      );
                    })}
                  </div>

                  <div className="form-row" style={{ marginTop: 24 }}>
                    <div className="field">
                      <label>Nom de la structure</label>
                      <input value={data.structureNom} onChange={e => set("structureNom", e.target.value)} placeholder="Ex. Pharmacie de la Liberté / Hôpital National" />
                    </div>
                    <div className="field">
                      <label>Ville de la structure *</label>
                      <input required value={data.structureVille} onChange={e => set("structureVille", e.target.value)} />
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Fonction</label>
                      <input value={data.fonction} onChange={e => set("fonction", e.target.value)} placeholder="Ex. Titulaire, Assistant, Chef de service…" />
                    </div>
                    <div className="field">
                      <label>Date prévue de prise de fonction</label>
                      <input type="date" value={data.debutExercice} onChange={e => set("debutExercice", e.target.value)} />
                    </div>
                  </div>
                </>
              )}

              {/* STEP 5 — PIÈCES */}
              {step === 5 && (
                <>
                  <h3 className="serif">Pièces justificatives</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 16 }}>
                    Téléversez les documents requis. Formats acceptés : PDF, JPG, PNG. Taille maximum : 5 Mo par fichier.
                  </p>

                  <div className="pieces-progress">
                    <div className="pieces-progress-bar">
                      <div className="pieces-progress-fill" style={{ width: `${(piecesCount / piecesTotal) * 100}%` }}></div>
                    </div>
                    <span className="mono" style={{ fontSize: 12, color: "var(--ink-500)" }}>{piecesCount} / {piecesTotal}</span>
                  </div>

                  <div className="pieces-list">
                    {PIECES_LIST.map(p => {
                      const uploaded = !!files[p.id];
                      return (
                        <div key={p.id} className={`piece-row ${uploaded ? "uploaded" : ""}`}>
                          <input
                            type="file"
                            accept=".pdf,.jpg,.jpeg,.png"
                            style={{ display: "none" }}
                            ref={el => fileRefs.current[p.id] = el}
                            onChange={e => {
                              const f = e.target.files[0];
                              if (f) addFile(p.id, f);
                            }}
                          />
                          <div className="piece-icon">
                            {uploaded ? <Icon.Check size={16} /> : <Icon.Doc size={18} />}
                          </div>
                          <div className="piece-body">
                            <div className="piece-t">
                              {p.t}
                              {p.obligatoire && <span className="piece-required">obligatoire</span>}
                            </div>
                            {uploaded
                              ? <div className="piece-d mono" style={{ fontSize: 12, color: "var(--c-primary)" }}>{files[p.id].name}</div>
                              : <div className="piece-d">{p.d}</div>
                            }
                          </div>
                          {uploaded
                            ? <button type="button" className="btn btn-sm btn-ghost" onClick={() => removeFile(p.id)}><Icon.X size={12} /> Retirer</button>
                            : <button type="button" className="btn btn-sm btn-primary" onClick={() => fileRefs.current[p.id]?.click()}><Icon.Download size={12} style={{ transform: "rotate(180deg)" }} /> Téléverser</button>
                          }
                        </div>
                      );
                    })}
                  </div>

                  <div className="confid-banner" style={{ marginTop: 24, background: "var(--ink-50)", borderColor: "var(--ink-100)" }}>
                    <Icon.Shield size={18} />
                    <div>
                      <b style={{ fontSize: 13.5 }}>Confidentialité</b>
                      <p className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
                        Vos pièces sont stockées de façon sécurisée et ne sont consultables que par les membres du Conseil chargés de l'instruction.
                      </p>
                    </div>
                  </div>
                </>
              )}

              {/* STEP 6 — ENGAGEMENT */}
              {step === 6 && (
                <>
                  <h3 className="serif">Engagement & signature</h3>
                  <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Dernière étape — relisez et engagez-vous formellement.</p>

                  {/* Récap */}
                  <div className="recap" style={{ marginBottom: 24 }}>
                    <div className="recap-row"><span>Type de demande</span><b>{TYPES.find(t => t.id === data.typeDemande)?.t || "—"}</b></div>
                    <div className="recap-row"><span>Candidat</span><b>{data.civilite} {data.prenom} {data.nom}</b></div>
                    <div className="recap-row"><span>Diplôme</span><b>{data.diplomeNom} — {data.diplomeUniv} ({data.diplomeAnnee})</b></div>
                    <div className="recap-row"><span>Activité prévue</span><b>{ACTIVITES.find(a => a.id === data.activite)?.t || "—"} · {data.structureVille}</b></div>
                    <div className="recap-row"><span>Pièces téléversées</span><b>{piecesCount} / {piecesTotal}</b></div>
                  </div>

                  {/* Engagement déontologique */}
                  <div className="oath">
                    <div className="oath-quote serif">
                      « En présence des Maîtres de la Faculté, des conseillers de l'Ordre et de mes condisciples, je promets et je jure d'honorer ceux qui m'ont instruit dans les préceptes de mon art et de leur témoigner ma reconnaissance en restant fidèle à leur enseignement. »
                    </div>
                    <div className="oath-attr">— Extrait du serment de Galien</div>
                  </div>

                  <label className="check-line">
                    <input type="checkbox" checked={data.deontologie} onChange={e => set("deontologie", e.target.checked)} />
                    <span>
                      Je m'engage à respecter le <b>Code de déontologie</b> des pharmaciens du Niger et à exercer ma profession en toute probité, indépendance et loyauté envers les patients et la collectivité.
                    </span>
                  </label>
                  <label className="check-line">
                    <input type="checkbox" checked={data.sincerite} onChange={e => set("sincerite", e.target.checked)} />
                    <span>
                      Je certifie sur l'honneur l'<b>exactitude et la sincérité</b> des informations fournies et l'authenticité des pièces téléversées. Je reconnais que toute fausse déclaration expose à des sanctions.
                    </span>
                  </label>

                  <div className="field" style={{ marginTop: 16 }}>
                    <label>Signature électronique (tapez votre nom complet) *</label>
                    <input
                      required
                      value={data.signature}
                      onChange={e => set("signature", e.target.value)}
                      placeholder={`${data.civilite} ${data.prenom} ${data.nom}`.trim() || "Votre nom complet"}
                      style={{ fontFamily: "var(--ff-serif)", fontSize: "1.15rem", fontStyle: "italic" }}
                    />
                    <div className="field-hint">Tenant lieu de signature manuscrite — Loi N°2020-035 du 15 oct. 2020.</div>
                  </div>
                </>
              )}

              {/* ERREUR SOUMISSION */}
              {submitError && (
                <div style={{ background: "var(--red-50,#fef2f2)", border: "1px solid var(--red-200,#fecaca)", borderRadius: "var(--r-md)", padding: "12px 16px", marginBottom: 12, color: "var(--red-700,#b91c1c)", fontSize: 14, display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <Icon.X size={15} style={{ marginTop: 1, flexShrink: 0 }} />
                  <span>{submitError}</span>
                </div>
              )}

              {/* NAV */}
              <div className="form-nav">
                {step > 0 ? (
                  <button className="btn btn-ghost" onClick={() => setStep(step - 1)}>Précédent</button>
                ) : <span />}
                {!isLast && (
                  <button className="btn btn-primary" disabled={!canContinue()} onClick={() => setStep(step + 1)}>
                    Continuer <Icon.ArrowRight />
                  </button>
                )}
                {isLast && (
                  <button className="btn btn-primary btn-lg" disabled={!canContinue() || submitting} onClick={async () => {
                    setSubmitError(null);
                    setSubmitting(true);
                    try {
                      const result = await window.API.soumettreInscription({
                        type_demande: data.typeDemande,
                        nom: data.nom,
                        prenom: data.prenom,
                        email: data.email,
                        telephone: data.telephone,
                        date_naissance: data.naissanceDate || null,
                        lieu_naissance: data.naissanceLieu || null,
                        nationalite: data.nationalite,
                        nin: data.nin || null,
                        diplome: data.diplomeNom,
                        universite: data.diplomeUniv,
                        annee_diplome: parseInt(data.diplomeAnnee) || null,
                        diplome_pays: data.diplomePays || null,
                        specialisation: data.specialisation || null,
                        equivalence: data.equivalence ? 1 : 0,
                        activite: data.activite,
                        structure_nom: data.structureNom || null,
                        structure_ville: data.structureVille,
                        fonction: data.fonction || null,
                        debut_exercice: data.debutExercice || null,
                        ville: data.ville,
                        region: data.region,
                        signature: data.signature,
                      });
                      // Upload pièces vers R2, puis update URLs dans Supabase
                      const uploads = Object.entries(files).filter(([, f]) => f !== null);
                      await Promise.all(uploads.map(async ([type, file]) => {
                        const fd = new FormData();
                        fd.append('file', file);
                        fd.append('type', type);
                        const res = await fetch(`${window.API_BASE}/inscriptions/${result.id}/upload`, {
                          method: 'POST',
                          body: fd,
                        });
                        if (res.ok) {
                          const { key } = await res.json();
                          await window.API.updateInscriptionUrl(result.id, type, key);
                        }
                      }));
                      setDossierRef(result.ref);
                      setSubmitted(true);
                    } catch (err) {
                      setSubmitError(err.message || "Erreur lors de la soumission. Veuillez réessayer.");
                    } finally {
                      setSubmitting(false);
                    }
                  }}>
                    {submitting ? "Envoi en cours…" : <><span>Transmettre la demande</span> <Icon.ArrowRight /></>}
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Inscription = Inscription;