/* AUSIEGE · Formation pro · mobile 390 */

const Training = () => {
  const modules = [
    {
      code: "FRM / 01", t: "Coupe homme contemporaine",
      d: "Lecture du visage, dégradé, transitions invisibles. Pour stylistes intermédiaires.",
      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.",
      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.",
      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é.",
      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.",
      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", status: "open" },
    { d: "26", m: "Juin", name: "Balayage signature", sub: "FRM 02 · 3 jours · Julien", status: "full" },
    { d: "10", m: "Juil", name: "Cheveux bouclés / méthode AUSIEGE", sub: "FRM 03 · 2 jours · Anaelle", status: "open" },
    { d: "04", m: "Sept", name: "Rasage traditionnel / barbier", sub: "FRM 04 · 1 jour · Babacar", status: "open" },
    { d: "18", m: "Sept", name: "Direction artistique salon", sub: "FRM 05 · 1 jour · Sophiane", status: "waitlist" },
  ];

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

  return (
    <div className="screen" data-screen-label="05 Formation pro">
      <MHeader solid />

      {/* HERO formation */}
      <section className="f-hero">
        <div className="f-hero__media">
          <img src="assets/HOMME/12.jpg" alt="Détail formation, geste précis."/>
        </div>
        <div className="f-hero__veil"/>
        <div className="f-hero__content">
          <span className="f-tag">B2B / Formation pro</span>
          <h1 className="page-head__title" style={{ fontSize: 42 }}>
            Former les salons qui forment le <em>métier</em>.
          </h1>
          <p style={{ marginTop: 16, fontSize: 14, color: "var(--bone)", opacity: 0.85, lineHeight: 1.5, maxWidth: 320 }}>
            Cinq modules certifiants. Pour salons indépendants, coiffeurs en activité, apprentis en fin de cursus.
          </p>
        </div>
      </section>

      {/* Stat strip */}
      <div className="trustbar">
        <div className="trustbar__grid">
          <div className="trustbar__cell">
            <div className="trustbar__val">5</div>
            <div className="trustbar__lbl">modules / 2026</div>
          </div>
          <div className="trustbar__cell">
            <div className="trustbar__val">142</div>
            <div className="trustbar__lbl">barbiers formés</div>
          </div>
          <div className="trustbar__cell">
            <div className="trustbar__val">100 %</div>
            <div className="trustbar__lbl">éligible OPCO</div>
          </div>
          <div className="trustbar__cell">
            <div className="trustbar__val">Qualiopi</div>
            <div className="trustbar__lbl">certifié 2024</div>
          </div>
        </div>
      </div>

      {/* Modules catalogue */}
      <section className="sect sect--ink">
        <div className="sect__head">
          <div className="sect__eyebrow">Catalogue / 2026</div>
          <h2 className="sect__title">Cinq <em>territoires</em>, un même geste.</h2>
        </div>

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

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

        <div>
          {sessions.map((s, i) => (
            <div className={`session-row ${s.status === "full" ? "is-full" : ""}`} key={i}>
              <div className="session-row__date">
                <div className="session-row__day">{s.d}</div>
                <div className="session-row__mon">{s.m}</div>
              </div>
              <div>
                <div className="session-row__name">{s.name}</div>
                <div className="session-row__sub">{s.sub}</div>
              </div>
              <div className={`session-row__status session-row__status--${s.status === "open" ? "open" : "full"}`}>
                {statusLabel(s.status)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* B2B Inquiry form on light slab atop dark */}
      <section className="sect sect--ink" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="binq">
          <div className="page-head__eyebrow" style={{ marginBottom: 12, color: "var(--rosewood)" }}>
            Devis personnalisé
          </div>
          <h2 className="binq__title">Une demande <em>sur-mesure</em> ?</h2>
          <p className="binq__sub">
            Formation intra-salon, module privé, accompagnement annuel. On vous rappelle sous 48 h.
          </p>

          <div className="field">
            <label className="field__lbl">Nom du salon</label>
            <input className="field__input" placeholder="Maison Lefèvre" defaultValue="Maison Lefèvre"/>
          </div>
          <div className="field">
            <label className="field__lbl">Contact</label>
            <input className="field__input" placeholder="Prénom Nom"/>
          </div>
          <div className="field">
            <label className="field__lbl">Email</label>
            <input className="field__input" type="email" placeholder="contact@salon.fr"/>
          </div>
          <div className="field">
            <label className="field__lbl">Téléphone</label>
            <input className="field__input" type="tel" placeholder="06 00 00 00 00"/>
          </div>
          <div className="field">
            <label className="field__lbl">Votre besoin</label>
            <textarea className="field__input" placeholder="Modules envisagés, nombre de stagiaires, dates souhaitées" rows={4}/>
          </div>

          <button className="btn btn--ink btn--block btn--lg" style={{ marginTop: 8 }}>
            Envoyer la demande
            <Icon name="arrow-right" size={14}/>
          </button>
          <p style={{ marginTop: 16, fontSize: 11, color: "var(--taupe)", letterSpacing: "0.04em", lineHeight: 1.5 }}>
            Vos données restent confidentielles et ne sont utilisées que pour vous répondre. Aucun envoi commercial automatisé.
          </p>
        </div>
      </section>

      <Footer/>
      <BookBar ctaLabel="Demander un devis"/>
    </div>
  );
};

window.Training = Training;