/* AUSIEGE · Tablet Formation pro (768) */

const TrainingT = () => {
  const modules = [
    { code: "FRM / 01", t: "Coupe homme contemporaine",
      d: "Lecture du visage, dégradé, transitions invisibles.",
      duration: "2 jours", hours: "14h", format: "Présentiel", img: "assets/HOMME/5.jpg" },
    { code: "FRM / 02", t: "Balayage signature",
      d: "Travail au pinceau, lecture lumière, patine.",
      duration: "3 jours", hours: "21h", format: "Présentiel", 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 types 3 et 4.",
      duration: "2 jours", hours: "14h", format: "Présentiel", img: "assets/FEMMES/5.jpg" },
    { code: "FRM / 04", t: "Rasage traditionnel / barbier",
      d: "Serviette chaude, blaireau, lame ouverte.",
      duration: "1 jour", hours: "7h", format: "Présentiel", img: "assets/HOMME/4.jpg" },
    { code: "FRM / 05", t: "Direction artistique salon",
      d: "Posture, écoute, conseil. Signature commerciale.",
      duration: "1 jour", hours: "7h", format: "Présentiel / distanciel", img: "assets/HOMME/18.jpg" },
  ];
  const sessions = [
    { d: "12", m: "Juin", name: "Coupe homme contemporaine", sub: "FRM 01 · Gokhan", status: "open" },
    { d: "26", m: "Juin", name: "Balayage signature", sub: "FRM 02 · Julien", status: "full" },
    { d: "10", m: "Juil", name: "Cheveux bouclés", sub: "FRM 03 · Anaelle", status: "open" },
    { d: "04", m: "Sept", name: "Rasage traditionnel", sub: "FRM 04 · Babacar", status: "open" },
    { d: "18", m: "Sept", name: "Direction artistique", sub: "FRM 05 · Sophiane", status: "waitlist" },
  ];
  const statusLabel = (s) => s === "open" ? "Inscriptions" : s === "full" ? "Complet" : "Liste attente";

  return (
    <div className="t-screen" data-screen-label="05 Formation pro · tablet">
      <THeader current="training"/>

      <section className="t-fhero">
        <div className="t-fhero__media"><img src="assets/HOMME/12.jpg" alt="Détail formation."/></div>
        <div className="t-fhero__veil"/>
        <div className="t-fhero__inner">
          <span className="t-ftag">B2B / Formation pro</span>
          <h1 className="t-pagehead__title" style={{ fontSize: 56 }}>
            Former les salons qui forment le <em>métier</em>.
          </h1>
          <p style={{ marginTop: 20, fontSize: 15, color: "var(--bone)", opacity: 0.85, lineHeight: 1.55, maxWidth: 480 }}>
            Cinq modules certifiants Qualiopi. Pour salons indépendants, coiffeurs en activité, apprentis.
          </p>
        </div>
      </section>

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

      <section className="t-sect t-sect--ink">
        <div className="t-sect__head">
          <div>
            <div className="t-sect__eyebrow">Catalogue / 2026</div>
            <h2 className="t-sect__title">Cinq <em>territoires</em>.</h2>
          </div>
          <p className="t-sect__lede">
            Tous les modules sont en cycle court. Documentation papier, suivi 3 mois inclus.
          </p>
        </div>

        <div>
          {modules.map(m => (
            <article className="t-fmod" key={m.code}>
              <div className="t-fmod__media"><img src={m.img} alt={m.t} style={m.img.endsWith("18.jpg") ? { objectPosition: "50% 18%" } : undefined}/></div>
              <div>
                <div className="t-fmod__code">{m.code}</div>
                <h3 className="t-fmod__title">{m.t}</h3>
                <p className="t-fmod__desc">{m.d}</p>
                <div className="t-fmod__meta">
                  <span className="t-fmod__pill t-fmod__pill--time">{m.duration} / {m.hours}</span>
                  <span className="t-fmod__pill">{m.format}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="t-sect t-sect--inkSoft">
        <div className="t-sect__head">
          <div>
            <div className="t-sect__eyebrow">Sessions / calendrier</div>
            <h2 className="t-sect__title">Prochaines <em>dates</em>.</h2>
          </div>
        </div>

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

      <section className="t-sect t-sect--ink" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="t-binq">
          <div className="t-pagehead__eyebrow" style={{ marginBottom: 16, color: "var(--rosewood)" }}>Devis personnalisé</div>
          <h2 className="t-binq__title">Une demande <em>sur-mesure</em> ?</h2>
          <p className="t-binq__sub">
            Formation intra-salon, module privé, accompagnement annuel. On vous rappelle sous 48h.
          </p>
          <div className="t-binq__form">
            <div className="t-field">
              <label className="t-field__lbl">Nom du salon</label>
              <input className="t-field__input" defaultValue="Maison Lefèvre"/>
            </div>
            <div className="t-field">
              <label className="t-field__lbl">Contact</label>
              <input className="t-field__input" placeholder="Prénom Nom"/>
            </div>
            <div className="t-field">
              <label className="t-field__lbl">Email</label>
              <input className="t-field__input" type="email" placeholder="contact@salon.fr"/>
            </div>
            <div className="t-field">
              <label className="t-field__lbl">Téléphone</label>
              <input className="t-field__input" type="tel" placeholder="06 00 00 00 00"/>
            </div>
            <div className="t-field t-field--wide">
              <label className="t-field__lbl">Votre besoin</label>
              <textarea className="t-field__input" placeholder="Modules, stagiaires, dates" rows={3}/>
            </div>
            <div className="t-field t-field--wide" style={{ marginTop: 8 }}>
              <button className="t-btn t-btn--ink t-btn--lg">
                Envoyer la demande
                <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          </div>
        </div>
      </section>

      <TFooter/>
    </div>
  );
};

window.TrainingT = TrainingT;