/* AUSIEGE · Desktop Formation pro (1440) */

const TrainingD = () => {
  const modules = [
    { code: "FRM / 01", t: "Coupe homme contemporaine",
      d: "Lecture du visage, dégradé, transitions invisibles. Pour stylistes intermédiaires souhaitant moderniser leur signature homme.",
      duration: "2 jours", hours: "14h", format: "Présentiel / Beauvais", img: "assets/HOMME/5.jpg" },
    { code: "FRM / 02", t: "Balayage signature",
      d: "Travail au pinceau, lecture lumière, patine. Manipulation Olaplex, sécurisation du cheveu.",
      duration: "3 jours", hours: "21h", format: "Présentiel / Beauvais", img: "assets/FEMMES/03_balayage_signature_01.jpeg" },
    { code: "FRM / 03", t: "Cheveux bouclés / méthode AUSIEGE",
      d: "Diagnostic, coupe à sec, soin sur-mesure pour types 3 et 4. Protocole signature, certifié.",
      duration: "2 jours", hours: "14h", format: "Présentiel / Beauvais", img: "assets/FEMMES/5.jpg" },
    { code: "FRM / 04", t: "Rasage traditionnel / barbier",
      d: "Serviette chaude, blaireau, lame ouverte. Protocole sécurité et hygiène.",
      duration: "1 jour", hours: "7h", format: "Présentiel / Beauvais", img: "assets/HOMME/4.jpg" },
    { code: "FRM / 05", t: "Direction artistique salon",
      d: "Posture, écoute, conseil. Construire une signature commerciale et la transmettre à son équipe.",
      duration: "1 jour", hours: "7h", format: "Présentiel ou distanciel", img: "assets/HOMME/18.jpg" },
  ];

  const sessions = [
    { d: "12", m: "Juin", name: "Coupe homme contemporaine", sub: "FRM 01 · 2 jours · Gokhan", loc: "Salon AUSIÈGE / Beauvais", status: "open" },
    { d: "26", m: "Juin", name: "Balayage signature", sub: "FRM 02 · 3 jours · Julien", loc: "Salon AUSIÈGE / Beauvais", status: "full" },
    { d: "10", m: "Juil", name: "Cheveux bouclés / méthode AUSIEGE", sub: "FRM 03 · 2 jours · Anaelle", loc: "Salon AUSIÈGE / Beauvais", status: "open" },
    { d: "04", m: "Sept", name: "Rasage traditionnel / barbier", sub: "FRM 04 · 1 jour · Babacar", loc: "Salon AUSIÈGE / Beauvais", status: "open" },
    { d: "18", m: "Sept", name: "Direction artistique salon", sub: "FRM 05 · 1 jour · Sophiane", loc: "Distanciel possible", status: "waitlist" },
  ];

  const statusLabel = (s) => s === "open" ? "Inscriptions ouvertes" : s === "full" ? "Complet" : "Liste d'attente";

  return (
    <div className="d-screen" data-screen-label="05 Formation pro · desktop">
      <DHeader current="training"/>

      <section className="d-fhero">
        <div className="d-fhero__media">
          <img src="assets/HOMME/12.jpg" alt="Détail formation, geste précis."/>
        </div>
        <div className="d-fhero__veil"/>
        <div className="d-fhero__inner">
          <div className="d-fhero__copy">
            <span className="d-ftag">B2B / Formation professionnelle</span>
            <h1 className="d-pagehead__title" style={{ fontSize: 104 }}>
              Former les salons qui forment le <em>métier</em>.
            </h1>
            <p style={{ marginTop: 32, fontSize: 18, color: "var(--bone)", opacity: 0.85, lineHeight: 1.55, maxWidth: 640 }}>
              Cinq modules certifiants Qualiopi, conçus à partir des protocoles AUSIEGE. Pour salons indépendants, coiffeurs en activité, apprentis en fin de cursus.
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
              <button className="d-btn d-btn--accent">Demander un devis</button>
              <button className="d-btn d-btn--ghost">Télécharger le catalogue</button>
            </div>
          </div>
        </div>
      </section>

      <div className="d-trustbar">
        <div className="d-trustbar__grid">
          <div className="d-trustbar__cell">
            <div className="d-trustbar__val">5</div>
            <div className="d-trustbar__lbl">modules / 2026</div>
          </div>
          <div className="d-trustbar__cell">
            <div className="d-trustbar__val">142</div>
            <div className="d-trustbar__lbl">barbiers formés</div>
          </div>
          <div className="d-trustbar__cell">
            <div className="d-trustbar__val">100 %</div>
            <div className="d-trustbar__lbl">éligible OPCO</div>
          </div>
          <div className="d-trustbar__cell">
            <div className="d-trustbar__val">Qualiopi</div>
            <div className="d-trustbar__lbl">certifié 2024</div>
          </div>
        </div>
      </div>

      {/* Modules catalogue */}
      <section className="d-sect d-sect--ink">
        <div className="d-sect__head">
          <div>
            <div className="d-sect__eyebrow">Catalogue / 2026</div>
            <h2 className="d-sect__title">Cinq <em>territoires</em>, un même geste.</h2>
          </div>
          <p className="d-sect__lede">
            Tous les modules sont conçus en cycle court (1 à 3 jours). Documentation papier remise, suivi 3 mois inclus.
          </p>
        </div>

        <div className="d-fmod-grid">
          {modules.map(m => (
            <article className="d-fmod" key={m.code}>
              <div className="d-fmod__media"><img src={m.img} alt={m.t} style={m.img.endsWith("18.jpg") ? { objectPosition: "50% 18%" } : undefined}/></div>
              <div>
                <div className="d-fmod__code">{m.code}</div>
                <h3 className="d-fmod__title">{m.t}</h3>
                <p className="d-fmod__desc">{m.d}</p>
                <div className="d-fmod__meta">
                  <span className="d-fmod__pill d-fmod__pill--time">{m.duration} / {m.hours}</span>
                  <span className="d-fmod__pill">{m.format}</span>
                </div>
              </div>
              <a className="d-fmod__open">
                Détails du module
                <Icon name="arrow-right" size={14}/>
              </a>
            </article>
          ))}
        </div>
      </section>

      {/* Sessions calendar */}
      <section className="d-sect d-sect--inkSoft">
        <div className="d-sect__head">
          <div>
            <div className="d-sect__eyebrow">Sessions / calendrier</div>
            <h2 className="d-sect__title">Prochaines <em>dates</em>.</h2>
          </div>
          <p className="d-sect__lede">
            Inscriptions limitées à 8 stagiaires par session pour préserver la qualité d'accompagnement.
          </p>
        </div>

        <div>
          {sessions.map((s, i) => (
            <div className={`d-sess ${s.status === "full" ? "is-full" : ""}`} key={i}>
              <div className="d-sess__date">
                <div className="d-sess__day">{s.d}</div>
                <div className="d-sess__mon">{s.m} 2026</div>
              </div>
              <div>
                <div className="d-sess__name">{s.name}</div>
                <div className="d-sess__sub">{s.sub}</div>
              </div>
              <div className="d-sess__loc">{s.loc}</div>
              <div className={`d-sess__status d-sess__status--${s.status}`}>
                {statusLabel(s.status)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* B2B Inquiry */}
      <section className="d-sect d-sect--ink" style={{ paddingTop: 0, paddingBottom: 144 }}>
        <div className="d-binq">
          <div className="d-binq__grid">
            <div>
              <div className="d-pagehead__eyebrow" style={{ marginBottom: 24, color: "var(--rosewood)" }}>Devis personnalisé</div>
              <h2 className="d-binq__title">Une demande <em>sur-mesure</em> ?</h2>
              <p className="d-binq__sub">
                Formation intra-salon, module privé, accompagnement annuel. On vous rappelle sous 48 h ouvrées.
              </p>
              <div className="d-binq__list">
                <div className="d-binq__list-item">Formation dans vos locaux possible</div>
                <div className="d-binq__list-item">Module privé sur demande</div>
                <div className="d-binq__list-item">Prise en charge OPCO accompagnée</div>
                <div className="d-binq__list-item">Suivi post-formation 3 mois inclus</div>
              </div>
            </div>

            <div className="d-binq__form">
              <div className="d-field">
                <label className="d-field__lbl">Nom du salon</label>
                <input className="d-field__input" placeholder="Maison Lefèvre" defaultValue="Maison Lefèvre"/>
              </div>
              <div className="d-field">
                <label className="d-field__lbl">Contact</label>
                <input className="d-field__input" placeholder="Prénom Nom"/>
              </div>
              <div className="d-field">
                <label className="d-field__lbl">Email professionnel</label>
                <input className="d-field__input" type="email" placeholder="contact@salon.fr"/>
              </div>
              <div className="d-field">
                <label className="d-field__lbl">Téléphone</label>
                <input className="d-field__input" type="tel" placeholder="06 00 00 00 00"/>
              </div>
              <div className="d-field d-field--wide">
                <label className="d-field__lbl">Votre besoin</label>
                <textarea className="d-field__input" placeholder="Modules envisagés, nombre de stagiaires, dates souhaitées" rows={3}/>
              </div>
              <div className="d-field d-field--wide" style={{ marginTop: 16 }}>
                <button className="d-btn d-btn--ink d-btn--lg">
                  Envoyer la demande
                  <Icon name="arrow-right" size={14}/>
                </button>
              </div>
              <p className="d-field--wide" style={{ gridColumn: "span 2", fontSize: 12, color: "var(--taupe)", letterSpacing: "0.04em", lineHeight: 1.6, marginTop: 8 }}>
                Vos données restent confidentielles et ne sont utilisées que pour vous répondre. Aucun envoi commercial automatisé.
              </p>
            </div>
          </div>
        </div>
      </section>

      <DFooter/>
    </div>
  );
};

window.TrainingD = TrainingD;