/* Adhérent flow v2 — Questionnaire FESPA × BoostYourIA */

const { useState: useStateA, useMemo: useMemoA } = React;

/* ============================================================
   Landing
   ============================================================ */
function AdherentWelcome({ tweaks, onStart }) {
  return (
    <div className="ad-welcome">
      <div className="ad-welcome__topbar">
        <FespaMark variant="dark" size={1.1} />
        <div className="ad-welcome__topbar-right">
          <span className="byi-caption">FESPA France × BoostYourIA · 2026</span>
        </div>
      </div>

      <div className="ad-welcome__grid">
        <div className="ad-welcome__hero">
          <Eyebrow>Commission Intelligence Artificielle · FESPA France</Eyebrow>
          <h1 className="byi-display ad-welcome__title">
            Usage de l'IA<br />dans la filière<br />Communication&nbsp;Visuelle
          </h1>
          <p className="byi-lede ad-welcome__lede">
            FESPA France souhaite mieux comprendre comment l'IA s'intègre dans
            les entreprises de la filière, et identifier vos besoins concrets
            en formation. Vos réponses orienteront les actions de la Commission IA.
          </p>

          <div className="ad-welcome__meta">
            <div className="ad-welcome__meta-item">
              <span className="ad-welcome__meta-num">4</span>
              <span className="ad-welcome__meta-lbl">minutes<br/>chrono</span>
            </div>
            <div className="ad-welcome__meta-item">
              <span className="ad-welcome__meta-num">5</span>
              <span className="ad-welcome__meta-lbl">blocs<br/>17 questions</span>
            </div>
            <div className="ad-welcome__meta-item">
              <span className="ad-welcome__meta-num">100%</span>
              <span className="ad-welcome__meta-lbl">anonyme<br/>au partage</span>
            </div>
          </div>

          <div className="ad-welcome__cta">
            <Button size="lg" onClick={onStart}>Commencer le questionnaire →</Button>
            <span className="byi-caption ad-welcome__cta-hint">
              Lien personnalisé · {tweaks.invitedCompany}
            </span>
          </div>
        </div>

        <aside className="ad-welcome__side">
          <Card padding="lg" className="ad-welcome__panel">
            <Eyebrow>Ce que nous cherchons à comprendre</Eyebrow>
            <ul className="ad-welcome__bullets">
              <li><span className="ad-bullet">01</span>Votre profil et votre rattachement OPCO</li>
              <li><span className="ad-bullet">02</span>Votre niveau et vos usages actuels de l'IA</li>
              <li><span className="ad-bullet">03</span>Votre gouvernance et vos freins</li>
              <li><span className="ad-bullet">04</span>Vos besoins en formation et intention</li>
              <li><span className="ad-bullet">05</span>Votre retour libre</li>
            </ul>
            <p className="ad-welcome__followup">
              Les résultats seront partagés anonymement avec l'ensemble des adhérents.
              Vous serez informé(e) des prochaines actions de la Commission IA de FESPA France.
            </p>
          </Card>
          <div className="ad-welcome__trust">
            <div className="ad-welcome__trust-dot"></div>
            Les résultats vous seront partagés anonymement à la clôture.
          </div>
        </aside>
      </div>
    </div>
  );
}

/* ============================================================
   Steps definition
   ============================================================ */
const STEPS = [
  { id: "profil",     title: "Profil & entreprise",     bloc: "Bloc 1" },
  { id: "niveau",     title: "Niveau & usage de l'IA",  bloc: "Bloc 2" },
  { id: "gouvernance",title: "Gouvernance & freins",    bloc: "Bloc 3" },
  { id: "formation",  title: "Besoins en formation",    bloc: "Bloc 4" },
  { id: "cloture",    title: "Clôture",                 bloc: "Bloc 5" }
];

/* ============================================================
   Questionnaire shell
   ============================================================ */
function AdherentQuestionnaire({ tweaks, onSubmit, onBackHome }) {
  const data = window.FESPA_DATA;
  const [step, setStep] = useStateA(0);
  const [a, setA] = useStateA(() => initialAnswers(tweaks, data));

  const set    = (k, v) => setA(s => ({ ...s, [k]: v }));
  const toggle = (k, v) => setA(s => {
    const arr = s[k] || [];
    return { ...s, [k]: arr.includes(v) ? arr.filter(x => x !== v) : [...arr, v] };
  });
  const setNested = (k, sub, v) => setA(s => ({ ...s, [k]: { ...(s[k] || {}), [sub]: v } }));

  // Conditional logic — derive flags
  const isNonUser   = a.usage === "Non, mais nous y réfléchissons" || a.usage === "Non, pas du tout";
  const noPaidNeeded = a.paidStatus === "Non, nous utilisons uniquement les versions gratuites" || a.paidStatus === "En cours de réflexion";
  const skipFormation = a.wantsFormation === "Non, pas pour l'instant";

  const progress = ((step + 1) / STEPS.length) * 100;
  const stepDef = STEPS[step];

  const next = () => step < STEPS.length - 1 ? setStep(step + 1) : onSubmit(a);
  const prev = () => step > 0 ? setStep(step - 1) : onBackHome();

  return (
    <div className="ad-form">
      <header className="ad-form__header">
        <button className="ad-form__home" onClick={onBackHome}>← Quitter</button>
        <FespaMark variant="dark" size={0.95} />
        <span className="byi-caption">Étape {step + 1} / {STEPS.length}</span>
      </header>

      <div className="ad-form__progressbar">
        <div className="ad-form__progressfill" style={{ width: `${progress}%` }}></div>
      </div>

      <div className="ad-form__shell">
        <aside className="ad-form__nav">
          <Eyebrow>Sommaire</Eyebrow>
          <ol className="ad-form__steps">
            {STEPS.map((s, i) => (
              <li
                key={s.id}
                className={`ad-form__step ${i === step ? "is-current" : ""} ${i < step ? "is-done" : ""}`}
                onClick={() => i <= step && setStep(i)}
              >
                <span className="ad-form__step-num">{String(i + 1).padStart(2, "0")}</span>
                <div className="ad-form__step-titles">
                  <span className="ad-form__step-bloc">{s.bloc}</span>
                  <span className="ad-form__step-title">{s.title}</span>
                </div>
              </li>
            ))}
          </ol>
        </aside>

        <main className="ad-form__main">
          <div className="ad-form__page-head">
            <Eyebrow>{stepDef.bloc} — Section {String(step + 1).padStart(2, "0")}</Eyebrow>
            <h2 className="byi-h2 ad-form__title">{stepDef.title}</h2>
          </div>

          <div className="ad-form__body">
            {step === 0 && <Bloc1 a={a} set={set} toggle={toggle} data={data} />}
            {step === 1 && <Bloc2 a={a} set={set} toggle={toggle} setNested={setNested} data={data}
                                  isNonUser={isNonUser} noPaidNeeded={noPaidNeeded} />}
            {step === 2 && <Bloc3 a={a} set={set} toggle={toggle} data={data} isNonUser={isNonUser} />}
            {step === 3 && <Bloc4 a={a} set={set} toggle={toggle} setNested={setNested}
                                  data={data} skipFormation={skipFormation} />}
            {step === 4 && <Bloc5 a={a} set={set} data={data} />}
          </div>

          <div className="ad-form__footer">
            <Button variant="ghost" onClick={prev}>{step === 0 ? "← Retour à l'accueil" : "← Précédent"}</Button>
            <div className="ad-form__footer-right">
              <span className="byi-caption">Sauvegarde auto · à l'instant</span>
              <Button onClick={next}>
                {step < STEPS.length - 1 ? "Continuer →" : "Envoyer mes réponses ✓"}
              </Button>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

function initialAnswers(tweaks, data) {
  return {
    // Q1
    firstName: "Camille",
    lastName: "Rousseau",
    company: tweaks.invitedCompany,
    email: "camille.rousseau@" + tweaks.invitedCompany.toLowerCase().replace(/[^a-z]/g, "").slice(0, 14) + ".fr",
    // Q2
    role: "",
    roleOther: "",
    // Q3
    headcount: "",
    // Q4
    sectors: [],
    sectorOther: "",
    // Q4bis
    opcoSalaries: [],
    opcoSalariesOther: "",
    opcoDirigeant: [],
    opcoDirigeantOther: "",
    // Q5
    skill: 5,
    // Q6
    usage: "",
    // Q7
    tools: [],
    toolsOther: {},   // {groupName: text}
    toolMetier: "",
    toolOther: "",
    // Q7bis
    paidStatus: "",
    licences: {},      // {tool: count}
    licencesOther: "", // free text for "Autre"
    // Q8
    domains: [],
    domainOther: "",
    // Q10
    benefits: [],
    timeSavedHours: "",
    // Q10
    policy: "",
    // Q11
    barriers: [],
    barrierOther: "",
    // Q11bis
    pastTrainingStatus: "",
    pastTraining: { title: "", organism: "", headcount: "", year: "" },
    pastTrainingSubjects: [],
    // Q12
    wantsFormation: "",
    // Q12bis & Q13 — per-service training plan
    trainingPlan: data.catalog.SERVICES.reduce((o, s) => {
      o[s] = { headcount: "", themes: [] };
      return o;
    }, {}),
    // Q17 — budget
    budget: "",
    // Q18 — right contact
    rightContact: "",
    contactFirstName: "",
    contactLastName: "",
    contactEmail: "",
    contactPhone: "",
    // Q19 — willing to share
    willingToShare: "",
    // Q17
    comment: ""
  };
}

/* ============================================================
   Sub-fields
   ============================================================ */
function QLabel({ num, children, required, optional, sub }) {
  return (
    <div className="qf-q__header">
      <div className="qf-q__label">
        <span className="qf-q__num">{num}</span>
        <span>{children}</span>
        {required && <span className="qf-q__required">*</span>}
        {optional && <span className="qf-q__optional">facultatif</span>}
      </div>
      {sub && <div className="qf-q__sub">{sub}</div>}
    </div>
  );
}

function RadioRow({ name, options, value, onChange, layout = "stack" }) {
  return (
    <div className={`qf-radio qf-radio--${layout}`}>
      {options.map(opt => {
        const val = typeof opt === "string" ? opt : opt.value;
        const label = typeof opt === "string" ? opt : opt.label;
        return (
          <label key={val} className={`qf-radio__opt ${value === val ? "is-on" : ""}`}>
            <input type="radio" name={name} checked={value === val} onChange={() => onChange(val)} />
            <span className="qf-radio__dot"></span>
            <span className="qf-radio__label">{label}</span>
          </label>
        );
      })}
    </div>
  );
}

function CheckGrid({ options, values, onToggle, cols = 2 }) {
  return (
    <div className={`qf-check qf-check--cols${cols}`}>
      {options.map(opt => (
        <label key={opt} className={`qf-check__opt ${values.includes(opt) ? "is-on" : ""}`}>
          <input type="checkbox" checked={values.includes(opt)} onChange={() => onToggle(opt)} />
          <span className="qf-check__box">{values.includes(opt) ? "✓" : ""}</span>
          <span className="qf-check__label">{opt}</span>
        </label>
      ))}
    </div>
  );
}

function CheckGroup({ groups, values, onToggle, otherValues, onOtherChange }) {
  // groups: [{group, tools: []}]
  // Each group has its own "Autre" — keyed by group name in otherValues
  return (
    <div className="qf-checkgroup">
      {groups.map((g, gi) => {
        const otherKey = g.group;
        const otherChecked = values.includes(`Autre (${otherKey})`);
        return (
          <div key={gi} className="qf-checkgroup__block">
            <div className="qf-checkgroup__title">{g.group}</div>
            <div className="qf-check qf-check--cols2">
              {g.tools.map(opt => {
                // For "Autre", we tag it with the group name to make it unique
                const value = opt === "Autre" ? `Autre (${otherKey})` : opt;
                const on = values.includes(value);
                return (
                  <label key={opt} className={`qf-check__opt ${on ? "is-on" : ""}`}>
                    <input type="checkbox" checked={on} onChange={() => onToggle(value)} />
                    <span className="qf-check__box">{on ? "✓" : ""}</span>
                    <span className="qf-check__label">{opt === "Autre" ? "Autre — précisez" : opt}</span>
                  </label>
                );
              })}
            </div>
            {otherChecked && (
              <input className="qf-input-inline" style={{marginTop: 10}}
                placeholder={`Précisez l'outil (${otherKey})…`}
                value={(otherValues && otherValues[otherKey]) || ""}
                onChange={e => onOtherChange(otherKey, e.target.value)} />
            )}
          </div>
        );
      })}
    </div>
  );
}

function SkipNote({ children }) {
  return (
    <div className="qf-skip-note">
      <span className="qf-skip-note__icon">↩</span>
      {children}
    </div>
  );
}

/* ============================================================
   BLOC 1 — Profil & entreprise
   ============================================================ */
function Bloc1({ a, set, toggle, data }) {
  return (
    <div className="qf-stack">
      <div className="qf-q">
        <QLabel num="Q1">Vos coordonnées</QLabel>
        <p className="qf-q__help">Optionnel — ces informations resteront confidentielles.</p>
        <div className="qf-grid-2">
          <label className="qf-input">
            <span>Nom & Prénom</span>
            <input value={`${a.firstName} ${a.lastName}`} onChange={e => {
              const [f, ...rest] = e.target.value.split(" ");
              set("firstName", f);
              set("lastName", rest.join(" "));
            }} />
          </label>
          <label className="qf-input">
            <span>Email professionnel</span>
            <input value={a.email} onChange={e => set("email", e.target.value)} />
          </label>
          <label className="qf-input qf-input--full">
            <span>Entreprise</span>
            <input value={a.company} onChange={e => set("company", e.target.value)} />
          </label>
        </div>
      </div>

      <div className="qf-q">
        <QLabel num="Q2" required>Nombre de collaborateurs au sein de votre entreprise</QLabel>
        <div className="qf-headcount">
          <input
            type="number"
            min="1"
            placeholder="0"
            value={a.headcount || ""}
            onChange={e => set("headcount", e.target.value)}
            className="qf-headcount__input"
          />
          <span className="qf-headcount__suffix">collaborateurs</span>
        </div>
      </div>

      <div className="qf-q">
        <QLabel num="Q3" required sub="Plusieurs réponses possibles">Quels sont vos secteurs d'activité&nbsp;?</QLabel>
        <CheckGrid options={data.catalog.SECTORS} values={a.sectors} onToggle={v => toggle("sectors", v)} />
        {a.sectors.includes("Autre") && (
          <input className="qf-input-inline" placeholder="Précisez votre secteur…"
            value={a.sectorOther} onChange={e => set("sectorOther", e.target.value)} />
        )}
      </div>

      <div className="qf-q">
        <QLabel num="Q4" required sub="Plusieurs réponses possibles — certaines entreprises ont un OPCO pour les salariés et un autre pour le dirigeant.">
          Quel est votre OPCO&nbsp;?
        </QLabel>

        <div className="qf-opco">
          <div className="qf-opco__col">
            <div className="qf-opco__title">Pour vos salariés</div>
            <CheckGrid options={data.catalog.OPCO_SALARIES}
              values={a.opcoSalaries} onToggle={v => toggle("opcoSalaries", v)} cols={1} />
            {a.opcoSalaries.includes("Autre") && (
              <input className="qf-input-inline" placeholder="Précisez l'OPCO de vos salariés…"
                value={a.opcoSalariesOther} onChange={e => set("opcoSalariesOther", e.target.value)} />
            )}
          </div>
          <div className="qf-opco__col">
            <div className="qf-opco__title">Pour le dirigeant</div>
            <CheckGrid options={data.catalog.OPCO_DIRIGEANT}
              values={a.opcoDirigeant} onToggle={v => toggle("opcoDirigeant", v)} cols={1} />
            {a.opcoDirigeant.includes("Autre") && (
              <input className="qf-input-inline" placeholder="Précisez l'OPCO du dirigeant…"
                value={a.opcoDirigeantOther} onChange={e => set("opcoDirigeantOther", e.target.value)} />
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   BLOC 2 — Niveau & usage actuel
   ============================================================ */
function Bloc2({ a, set, toggle, setNested, data, isNonUser, noPaidNeeded }) {
  return (
    <div className="qf-stack">
      <div className="qf-q">
        <QLabel num="Q5" required sub="1 = je ne connais pas · 10 = je l'utilise quotidiennement en expert">
          Comment évaluez-vous votre niveau personnel sur l'IA&nbsp;?
        </QLabel>
        <div className="qf-slider">
          <input type="range" min="1" max="10" step="1"
            value={a.skill} onChange={e => set("skill", Number(e.target.value))} />
          <div className="qf-slider__scale">
            {Array.from({ length: 10 }, (_, i) => (
              <span key={i} className={`qf-slider__tick ${i + 1 <= a.skill ? "is-on" : ""}`}>{i + 1}</span>
            ))}
          </div>
          <div className="qf-slider__readout">
            Niveau&nbsp;: <strong>{a.skill}/10</strong>
          </div>
        </div>
      </div>

      <div className="qf-q">
        <QLabel num="Q6" required>Votre entreprise utilise-t-elle des outils d'IA&nbsp;?</QLabel>
        <RadioRow name="usage" options={data.catalog.USAGE_LEVELS}
          value={a.usage} onChange={v => set("usage", v)} />
        {isNonUser && (
          <SkipNote>
            Réponse « non » : nous passerons directement au <strong>Bloc 4 — Besoins en formation</strong>.
            Les questions Q7 à Q9 ne sont pas pertinentes pour vous.
          </SkipNote>
        )}
      </div>

      {!isNonUser && (
        <>
          <div className="qf-q">
            <QLabel num="Q7" required sub="Choix multiples — par catégorie">
              Quels outils d'IA utilisez-vous actuellement&nbsp;?
            </QLabel>
            <CheckGroup
              groups={data.catalog.TOOLS_GROUPS}
              values={a.tools}
              onToggle={v => toggle("tools", v)}
              otherValues={a.toolsOther}
              onOtherChange={(k, v) => setNested("toolsOther", k, v)}
            />
            <div className="qf-q__inline-extras">
              <label className="qf-input qf-input--full">
                <span>IA intégrée dans logiciel métier — précisez</span>
                <input value={a.toolMetier} onChange={e => set("toolMetier", e.target.value)}
                  placeholder="ex : Caldera AI, EFI Fiery, OneVision…" />
              </label>
            </div>
          </div>

          <div className="qf-q">
            <QLabel num="Q8" required>
              Pour les outils que vous utilisez, avez-vous souscrit des licences payantes&nbsp;?
            </QLabel>
            <RadioRow name="paidStatus" options={[
              "Oui, pour tous les postes concernés",
              "Oui, pour certains postes seulement",
              "Non, nous utilisons uniquement les versions gratuites",
              "En cours de réflexion"
            ]} value={a.paidStatus} onChange={v => set("paidStatus", v)} />

            <div className="qf-licences">
              <div className="qf-licences__title">Pour quels outils avez-vous souscrit, et combien de licences&nbsp;?</div>
                <table className="qf-licences__table">
                  <thead>
                    <tr>
                      <th>Outil</th>
                      <th style={{width:90}}>Souscrit&nbsp;?</th>
                      <th style={{width:140}}>Nb licences</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.catalog.PAID_TOOLS.map(t => {
                      const isOn = a.licences[t] != null && a.licences[t] !== "";
                      const isOther = t === "Autre";
                      return (
                        <tr key={t} className={isOn ? "is-on" : ""}>
                          <td>
                            {isOther ? (
                              <div className="qf-licences__other">
                                <span>Autre&nbsp;:</span>
                                <input type="text" className="qf-licences__other-input"
                                  placeholder="Précisez l'outil…"
                                  value={a.licencesOther || ""}
                                  onChange={e => set("licencesOther", e.target.value)} />
                              </div>
                            ) : t}
                          </td>
                          <td>
                            <button type="button" className={`qf-licences__check ${isOn ? "is-on" : ""}`}
                              onClick={() => {
                                if (isOn) {
                                  const next = { ...a.licences };
                                  delete next[t];
                                  set("licences", next);
                                } else {
                                  setNested("licences", t, 1);
                                }
                              }}>
                              {isOn ? "✓" : ""}
                            </button>
                          </td>
                          <td>
                            <input type="number" min="1" className="qf-licences__num"
                              value={a.licences[t] || ""}
                              disabled={!isOn}
                              onChange={e => setNested("licences", t, e.target.value)} />
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
            </div>
          </div>

          <div className="qf-q">
            <QLabel num="Q9" required sub="Choix multiples">
              Dans quels domaines utilisez-vous concrètement l'IA&nbsp;?
            </QLabel>
            <CheckGrid options={data.catalog.DOMAINS} values={a.domains} onToggle={v => toggle("domains", v)} />
            {a.domains.includes("Autre") && (
              <input className="qf-input-inline" placeholder="Précisez le domaine…"
                value={a.domainOther} onChange={e => set("domainOther", e.target.value)} />
            )}
          </div>

          <div className="qf-q">
            <QLabel num="Q10" required sub="Choix multiples">
              Quels bénéfices concrets avez-vous observés&nbsp;?
            </QLabel>
            <CheckGrid options={data.catalog.BENEFITS} values={a.benefits} onToggle={v => toggle("benefits", v)} />
            {a.benefits.includes("Estimation gain de temps par collaborateur par semaine") && (
              <div className="qf-hours">
                <span className="qf-hours__lbl">Estimation gain de temps&nbsp;:</span>
                <input type="number" min="0" step="0.5" placeholder="0"
                  className="qf-hours__input"
                  value={a.timeSavedHours || ""}
                  onChange={e => set("timeSavedHours", e.target.value)} />
                <span className="qf-hours__suffix">heures par collaborateur et par semaine</span>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}

/* ============================================================
   BLOC 3 — Gouvernance & freins
   ============================================================ */
function Bloc3({ a, set, toggle, data, isNonUser }) {
  return (
    <div className="qf-stack">
      {isNonUser && (
        <SkipNote>
          Vous avez indiqué ne pas utiliser l'IA. Ces deux questions restent pertinentes.
        </SkipNote>
      )}

      <div className="qf-q">
        <QLabel num="Q11" required>
          Avez-vous mis en place des règles d'usage de l'IA dans votre entreprise&nbsp;?
        </QLabel>
        <RadioRow name="policy" options={data.catalog.POLICY}
          value={a.policy} onChange={v => set("policy", v)} />
      </div>

      <div className="qf-q">
        <QLabel num="Q12" required sub="Choix multiples">
          Quels sont les principaux freins à une utilisation plus large de l'IA&nbsp;?
        </QLabel>
        <CheckGrid options={data.catalog.BARRIERS} values={a.barriers} onToggle={v => toggle("barriers", v)} />
        {a.barriers.includes("Autre") && (
          <input className="qf-input-inline" placeholder="Précisez d'autres freins…"
            value={a.barrierOther} onChange={e => set("barrierOther", e.target.value)} />
        )}
      </div>
    </div>
  );
}

/* ============================================================
   BLOC 4 — Besoins en formation
   ============================================================ */
function Bloc4({ a, set, toggle, setNested, data, skipFormation }) {
  const trainTotal = Object.values(a.trainingPlan || {})
    .reduce((s, v) => s + (Number(v.headcount) || 0), 0);

  return (
    <div className="qf-stack">
      <div className="qf-q">
        <QLabel num="Q13" required>
          Avez-vous déjà suivi une formation sur l'intelligence artificielle&nbsp;?
        </QLabel>
        <RadioRow name="pastTrainingStatus" layout="row" options={["Oui", "Non"]}
          value={a.pastTrainingStatus} onChange={v => set("pastTrainingStatus", v)} />
      </div>

      {a.pastTrainingStatus === "Oui" && (
        <div className="qf-q">
          <QLabel num="Q14" required sub="Choix multiples — quels sujets ont été abordés ?">
            Si oui, sur quel sujet avez-vous suivi une formation sur l'IA&nbsp;?
          </QLabel>
          <CheckGrid options={data.catalog.PAST_TRAINING_SUBJECTS}
            values={a.pastTrainingSubjects}
            onToggle={v => toggle("pastTrainingSubjects", v)} cols={1} />

          <div className="qf-past-details">
            <div className="qf-grid-3">
              <label className="qf-input">
                <span>Quel organisme&nbsp;?</span>
                <input value={a.pastTraining.organism}
                  onChange={e => setNested("pastTraining", "organism", e.target.value)}
                  placeholder="Ex : BoostYourIA, Cegos…" />
              </label>
              <label className="qf-input">
                <span>Quel effectif formé&nbsp;?</span>
                <input type="number" min="1" value={a.pastTraining.headcount}
                  onChange={e => setNested("pastTraining", "headcount", e.target.value)}
                  placeholder="Nombre de personnes" />
              </label>
              <label className="qf-input">
                <span>Quelle année&nbsp;?</span>
                <input value={a.pastTraining.year}
                  onChange={e => setNested("pastTraining", "year", e.target.value)}
                  placeholder="2025" />
              </label>
            </div>
          </div>
        </div>
      )}

      <div className="qf-q">
        <QLabel num="Q15" required>
          Seriez-vous intéressé(e) par une formation IA pour vous-même ou vos équipes&nbsp;?
        </QLabel>
        <RadioRow name="wantsFormation" options={data.catalog.FORMATION_INTEREST}
          value={a.wantsFormation} onChange={v => set("wantsFormation", v)} />
        {skipFormation && (
          <SkipNote>Pas d'intérêt formation pour l'instant — les questions Q16 à Q18 ne s'appliquent pas, on passe au Bloc 5.</SkipNote>
        )}
      </div>

      {!skipFormation && (
        <>
          <div className="qf-q">
            <QLabel num="Q16" required sub="Pour chaque service concerné, indiquez le nombre d'apprenants et cochez les modules qu'ils suivraient.">
              Quel plan de formation par service&nbsp;?
            </QLabel>
            <div className="qf-plan">
              {data.catalog.SERVICES.map(svc => {
                const plan = a.trainingPlan[svc] || { headcount: "", themes: [] };
                const isActive = (Number(plan.headcount) > 0) || (plan.themes && plan.themes.length > 0);
                return (
                  <div key={svc} className={`qf-plan__row ${isActive ? "is-on" : ""}`}>
                    <div className="qf-plan__head">
                      <div className="qf-plan__service">
                        <span className="qf-plan__dot"></span>
                        <span>{svc}</span>
                      </div>
                      <label className="qf-plan__count">
                        <span>Apprenants</span>
                        <input type="number" min="0" placeholder="0"
                          value={plan.headcount || ""}
                          onChange={e => {
                            const next = { ...a.trainingPlan, [svc]: { ...plan, headcount: e.target.value } };
                            set("trainingPlan", next);
                          }} />
                      </label>
                    </div>
                    <div className="qf-plan__themes">
                      <div className="qf-plan__themes-label">Modules suivis par ce service</div>
                      <div className="qf-plan__chips">
                        {data.catalog.TRAINING_THEMES.map(t => {
                          const on = (plan.themes || []).includes(t);
                          return (
                            <button key={t} type="button"
                              className={`qf-plan__chip ${on ? "is-on" : ""}`}
                              onClick={() => {
                                const arr = plan.themes || [];
                                const nextThemes = on ? arr.filter(x => x !== t) : [...arr, t];
                                const next = { ...a.trainingPlan, [svc]: { ...plan, themes: nextThemes } };
                                set("trainingPlan", next);
                              }}>
                              <span className="qf-plan__chip-box">{on ? "✓" : ""}</span>
                              {t}
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                );
              })}

              <div className="qf-plan__totalrow">
                <div>
                  <span className="qf-plan__total-lbl">TOTAL apprenants tous services confondus</span>
                </div>
                <div className="qf-plan__total">{trainTotal}</div>
              </div>
            </div>
          </div>

          <div className="qf-q">
            <QLabel num="Q17" required>
              Quel budget seriez-vous prêt(e) à allouer à une formation IA par personne&nbsp;?
            </QLabel>
            <RadioRow name="budget"
              options={data.catalog.BUDGETS.map(b => ({ value: b.id, label: b.label }))}
              value={a.budget} onChange={v => set("budget", v)} />
          </div>

          <div className="qf-q">
            <QLabel num="Q18" required>
              Êtes-vous le bon interlocuteur&nbsp;?
            </QLabel>
            <RadioRow name="rightContact" layout="row" options={["Oui", "Non"]}
              value={a.rightContact} onChange={v => set("rightContact", v)} />

            {a.rightContact === "Non" && (
              <div className="qf-past-details">
                <div className="qf-grid-2">
                  <div className="qf-q__sub" style={{margin:"0 0 8px",fontWeight:600}}>
                    Si non, qui est le bon interlocuteur&nbsp;?
                  </div>
                </div>
                <div className="qf-grid-2">
                  <label className="qf-input">
                    <span>Prénom</span>
                    <input value={a.contactFirstName || ""}
                      onChange={e => set("contactFirstName", e.target.value)}
                      placeholder="Prénom" />
                  </label>
                  <label className="qf-input">
                    <span>Nom</span>
                    <input value={a.contactLastName || ""}
                      onChange={e => set("contactLastName", e.target.value)}
                      placeholder="Nom" />
                  </label>
                  <label className="qf-input">
                    <span>Adresse mail</span>
                    <input type="email" value={a.contactEmail || ""}
                      onChange={e => set("contactEmail", e.target.value)}
                      placeholder="email@entreprise.fr" />
                  </label>
                  <label className="qf-input">
                    <span>GSM</span>
                    <input type="tel" value={a.contactPhone || ""}
                      onChange={e => set("contactPhone", e.target.value)}
                      placeholder="06 12 34 56 78" />
                  </label>
                </div>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}

/* ============================================================
   BLOC 5 — Clôture
   ============================================================ */
function Bloc5({ a, set, data }) {
  const plan = a.trainingPlan || {};
  const trainTotal = Object.values(plan).reduce((s, v) => s + (Number(v.headcount) || 0), 0);
  const activeServices = Object.entries(plan).filter(([, v]) => Number(v.headcount) > 0 || (v.themes||[]).length > 0).length;
  const allModules = new Set();
  Object.values(plan).forEach(v => (v.themes||[]).forEach(t => allModules.add(t)));
  return (
    <div className="qf-stack">
      <div className="qf-q">
        <QLabel num="Q19" required>
          Souhaitez-vous partager votre retour d'expérience lors d'un futur atelier FESPA France&nbsp;?
        </QLabel>
        <RadioRow name="share" layout="row"
          options={["Oui, volontiers", "Peut-être", "Non"]}
          value={a.willingToShare} onChange={v => set("willingToShare", v)} />
      </div>

      <div className="qf-q">
        <QLabel num="Q20" optional sub="Partagez toute observation, attente ou suggestion que vous n'avez pas pu exprimer ci-dessus.">
          Un commentaire libre&nbsp;?
        </QLabel>
        <textarea className="qf-textarea" rows={5}
          placeholder="Votre commentaire libre…"
          value={a.comment} onChange={e => set("comment", e.target.value)}></textarea>
      </div>

      <Card padding="md" className="ad-form__recap">
        <Eyebrow>Récapitulatif avant envoi</Eyebrow>
        <ul className="ad-form__recap-list">
          <li><span>Répondant</span><strong>{a.firstName} {a.lastName} · {a.company}</strong></li>
          <li><span>Rôle</span><strong>{a.role || "—"}</strong></li>
          <li><span>Effectif</span><strong>{a.headcount ? `${a.headcount} collaborateurs` : "—"}</strong></li>
          <li><span>Secteurs</span><strong>{a.sectors.join(", ") || "—"}</strong></li>
          <li><span>OPCO salariés</span><strong>{a.opcoSalaries.join(", ") || "—"}</strong></li>
          <li><span>OPCO dirigeant</span><strong>{a.opcoDirigeant.join(", ") || "—"}</strong></li>
          <li><span>Usage IA</span><strong>{a.usage || "—"} · niveau {a.skill}/10</strong></li>
          <li><span>Outils sélectionnés</span><strong>{a.tools.length} outils</strong></li>
          <li><span>Licences payantes</span><strong>{Object.keys(a.licences || {}).length} outil(s) souscrits</strong></li>
          <li><span>Intérêt formation</span><strong>{a.wantsFormation || "—"}</strong></li>
          <li><span>Services concernés</span><strong>{activeServices} services</strong></li>
          <li><span>Total apprenants</span><strong>{trainTotal}</strong></li>
          <li><span>Modules sélectionnés</span><strong>{allModules.size} module(s)</strong></li>
          <li><span>Budget / personne</span><strong>{data.catalog.BUDGETS.find(b=>b.id===a.budget)?.label || "—"}</strong></li>
        </ul>
        <p className="byi-caption ad-form__recap-trust">
          Vos réponses seront analysées globalement et partagées de manière anonyme.
        </p>
      </Card>
    </div>
  );
}

/* ============================================================
   Thank you
   ============================================================ */
function AdherentThankYou({ onBackHome, answers }) {
  return (
    <div className="ad-thanks">
      <div className="ad-thanks__inner">
        <div className="ad-thanks__check">
          <svg viewBox="0 0 64 64" width="64" height="64">
            <circle cx="32" cy="32" r="30" fill="none" stroke="currentColor" strokeWidth="3" />
            <path d="M18 33 L28 43 L46 23" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <Eyebrow>Réponses enregistrées · merci !</Eyebrow>
        <h1 className="byi-h1 ad-thanks__title">Votre contribution alimentera la Commission&nbsp;IA.</h1>
        <p className="byi-lede">
          Les résultats seront partagés anonymement avec l'ensemble des adhérents.
          Vous serez informé(e) des prochaines actions de la Commission IA de FESPA France.
        </p>
        <div className="ad-thanks__refs">
          <div><span>Référence</span><strong>FESPA-2026-A{(answers?.email||"x").length.toString().padStart(3,"0")}</strong></div>
          <div><span>Envoyé le</span><strong>23 mai 2026 — 14:32</strong></div>
        </div>
        <div className="ad-thanks__cta">
          <Button variant="ghost" onClick={onBackHome}>← Revenir à l'accueil</Button>
          <a className="fb-btn fb-btn--primary fb-btn--md" href="https://fespa-france.fr/" target="_blank" rel="noreferrer">
            Visiter fespa-france.fr →
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdherentWelcome, AdherentQuestionnaire, AdherentThankYou });