/* AUSIEGE · Accueil (Home) · mobile 390 · split entry Femme | Homme */

const Home = () => (
  <div className="screen" data-screen-label="01 Accueil">

    {/* Header en overlay transparent, posé par-dessus le hero (mobile) */}
    <MHeader/>

    {/* SPLIT-SCREEN HERO (stacked vertically on mobile) */}
    <section className="m-hero-split">

      <button className="d-hero-split__side d-hero-split__side--homme" aria-label="Univers Homme">
        <div className="d-hero-split__media">
          <img src={PHOTOS.homme.hero} alt="Univers Homme."/>
        </div>
        <div className="d-hero-split__veil"/>
        <div className="d-hero-split__inner">
          <div className="d-hero-split__overline">Univers Homme</div>
          <h2 className="d-hero-split__title">Le geste, <em>à la lame</em>.</h2>
          <span className="d-hero-split__cta">Entrer <Icon name="arrow-right" size={14}/></span>
        </div>
      </button>

      <div className="d-hero-split__divider" aria-hidden="true"/>

      <button className="d-hero-split__side d-hero-split__side--femme" aria-label="Univers Femme">
        <div className="d-hero-split__media">
          <video
            src={PHOTOS.femme.heroVideo}
            poster={PHOTOS.femme.hero}
            autoPlay muted loop playsInline
          />
        </div>
        <div className="d-hero-split__veil"/>
        <div className="d-hero-split__inner">
          <div className="d-hero-split__overline">Univers Femme</div>
          <h2 className="d-hero-split__title">La coiffure, <em>comme une signature</em>.</h2>
          <span className="d-hero-split__cta">Entrer <Icon name="arrow-right" size={14}/></span>
        </div>
      </button>
    </section>

    {/* TRUST BAR */}
    <div className="trustbar">
      <div className="trustbar__grid">
        <div className="trustbar__cell">
          <div className="trustbar__val">10 ans</div>
          <div className="trustbar__lbl">d'expertise</div>
        </div>
        <div className="trustbar__cell">
          <div className="trustbar__val">7</div>
          <div className="trustbar__lbl">stylistes</div>
        </div>
        <div className="trustbar__cell">
          <div className="trustbar__val">4.9 / 5</div>
          <div className="trustbar__lbl">820 avis</div>
        </div>
        <div className="trustbar__cell">
          <div className="trustbar__val">4,9 / 5</div>
          <div className="trustbar__lbl">1916 Planity</div>
        </div>
      </div>
    </div>

    {/* INTRO */}
    <section className="intro">
      <div className="intro__overline">Notre maison</div>
      <p className="intro__body">
        Chez AUSIÈGE, chaque rendez-vous commence par une écoute attentive et se termine par une coupe, une couleur, une taille de barbe ou un rasage pensé pour votre style. Deux univers, un même geste.
      </p>
      <div className="intro__sig">L'équipe AUSIÈGE / Beauvais</div>
      <div style={{ marginTop: 28, aspectRatio: "4 / 5", overflow: "hidden", borderRadius: 2 }}>
        <img src={PHOTOS.homme.editorial} alt="AUSIÈGE, l'écoute et le geste, en salon." style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
      </div>
    </section>

    {/* EXPERTISE BAND — Dix ans d'expertise (image plein cadre + overlay) */}
    <section className="m-expertise" aria-label="Dix ans d'expertise">
      <div className="m-expertise__bg">
        <img src={PHOTOS.homme.craft} alt="Le geste juste, le contour, à la tondeuse."/>
      </div>
      <div className="m-expertise__veil"/>
      <div className="m-expertise__num" aria-hidden="true">10</div>
      <div className="m-expertise__inner">
        <div className="m-expertise__eyebrow">Expertise / depuis 2016</div>
        <h2 className="m-expertise__title">
          <em>Dix ans</em> à former la main, lire le visage, poser le geste juste.
        </h2>
        <p className="m-expertise__lede">
          Une décennie de coupes, de couleurs, de barbes. AUSIÈGE, c'est d'abord ce temps-là.
        </p>
      </div>
    </section>

    {/* TWO UNIVERSES */}
    <section className="sect sect--ink sect--hairline">
      <div className="sect__head">
        <div className="sect__eyebrow">Deux univers</div>
        <h2 className="sect__title">Femme & Homme, <em>chacun son fauteuil</em>.</h2>
      </div>

      <div className="m-uni">
        <article className="d-uni__card">
          <div className="d-uni__media">
            <img src={PHOTOS.femme.intro} alt="Univers Femme."/>
          </div>
          <div className="d-uni__body">
            <div className="d-uni__num">01 / Femme</div>
            <h3 className="d-uni__title">La <em>matière</em>, la lumière.</h3>
            <p className="d-uni__desc">Coupe, balayage, glossing, soin, événement. Quatre stylistes.</p>
            <ul className="d-uni__list">
              <li>Coupe femme</li>
              <li>Balayage signature</li>
              <li>Brushing</li>
              <li>Coiffure mariée</li>
            </ul>
            <a className="d-uni__cta">Entrer / Femme <Icon name="arrow-right" size={14}/></a>
          </div>
        </article>

        <article className="d-uni__card">
          <div className="d-uni__media">
            <img src={PHOTOS.homme.intro} alt="Univers Homme." style={{ objectPosition: "50% 22%" }}/>
          </div>
          <div className="d-uni__body">
            <div className="d-uni__num">02 / Homme</div>
            <h3 className="d-uni__title">Le <em>dessin</em>, la lame.</h3>
            <p className="d-uni__desc">Coupe, coupe afro, barbe, rasage traditionnel. Cinq barbiers.</p>
            <ul className="d-uni__list">
              <li>Coupe homme · 20 €</li>
              <li>Coupe + barbe · 30 €</li>
              <li>Rasage · 25 €</li>
            </ul>
            <a className="d-uni__cta">Entrer / Homme <Icon name="arrow-right" size={14}/></a>
          </div>
        </article>
      </div>
    </section>

    {/* HOMME SPOTLIGHT — portrait signature (SOSO) */}
    <section className="sect sect--ink sect--hairline" data-universe="homme">
      <div style={{ padding: "0 20px" }}>
        <div style={{ width: "100%", aspectRatio: "4 / 5", overflow: "hidden" }}>
          <img
            src={PHOTOS.homme.portrait}
            alt="Barbier AUSIÈGE en plein geste, univers Homme."
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
        </div>
        <div className="sect__eyebrow" style={{ color: "var(--accent)", marginTop: 28 }}>Univers Homme · la nouvelle ère</div>
        <h2 className="sect__title" style={{ marginTop: 10 }}>La main qui <em style={{ color: "var(--accent)" }}>dessine</em>.</h2>
        <p style={{ marginTop: 16, fontSize: 14, color: "var(--mist)", lineHeight: 1.6 }}>
          Sept barbiers, un même geste : lire le visage, dessiner la ligne, finir à la lame. L'univers Homme d'AUSIÈGE.
        </p>
        <button
          className="btn btn--accent btn--block"
          style={{ marginTop: 24, background: "var(--accent)", borderColor: "var(--accent)", color: "var(--bone)" }}
          onClick={() => window.ausiegeNavigate && window.ausiegeNavigate("homme")}
        >
          Entrer dans l'univers Homme
          <Icon name="arrow-right" size={14}/>
        </button>
      </div>
    </section>

    {/* GALLERY MOSAIC */}
    <section className="sect sect--inkSoft">
      <div className="sect__head">
        <div className="sect__eyebrow">Galerie / mixte</div>
        <h2 className="sect__title">Travaux <em>récents</em>.</h2>
      </div>

      <div className="gal">
        <div className="gal__tile gal__tile--tall">
          <img src={PHOTOS.femme.gallery[0]} alt="Coupe femme."/>
          <span className="gal__cap">Coupe femme</span>
        </div>
        <div className="gal__tile gal__tile--square">
          <img src={PHOTOS.homme.gallery[0]} alt="Dégradé."/>
          <span className="gal__cap">Dégradé</span>
        </div>
        <div className="gal__tile gal__tile--square">
          <img src={PHOTOS.femme.gallery[3]} alt="Balayage."/>
          <span className="gal__cap">Balayage</span>
        </div>
        <div className="gal__tile gal__tile--wide">
          <img src={PHOTOS.homme.gallery[2]} alt="Barbe."/>
          <span className="gal__cap">Barbe</span>
        </div>
        <div className="gal__tile gal__tile--square">
          <img src={PHOTOS.femme.gallery[6]} alt="Brushing."/>
          <span className="gal__cap">Brushing</span>
        </div>
        <div className="gal__tile gal__tile--square">
          <img src={PHOTOS.homme.gallery[5]} alt="Coupe homme."/>
          <span className="gal__cap">Coupe</span>
        </div>
      </div>
    </section>

    {/* TESTIMONIAL */}
    <section className="testi">
      <div className="testi__overline">Témoignage / cliente fidèle</div>
      <p className="testi__quote">
        « On ne vient pas chez AUSIÈGE pour une coupe. On vient pour une <em>conversation</em>, et on repart avec une coupe qu'on n'aurait pas pensé pouvoir porter. »
      </p>
      <div className="testi__attr">
        <strong>Claire H.</strong>
        <span>Cliente / 4 ans</span>
      </div>
    </section>

    {/* FINAL CTA */}
    <section className="finalcta">
      <div style={{ padding: "0 20px" }}>
        <div className="sect__eyebrow" style={{ marginBottom: 16 }}>Réserver</div>
        <h2 className="finalcta__title">Prendre place chez <em>AUSIEGE</em>.</h2>
        <p className="finalcta__sub">
          Aucun acompte. Deux parcours dédiés selon votre univers.
        </p>
        <div className="finalcta__actions">
          <button className="btn btn--primary btn--block btn--lg">
            Réserver / Femme
            <Icon name="arrow-right" size={14}/>
          </button>
          <button className="btn btn--ghost btn--block btn--lg">
            Réserver / Homme
            <Icon name="arrow-right" size={14}/>
          </button>
          <button className="btn btn--ghost btn--block">03 65 65 94 38</button>
        </div>
      </div>
    </section>

    <Footer/>
    <BookBar/>
  </div>
);

window.Home = Home;