/* AUSIEGE · Tablet Home (768) · split entry Femme | Homme */

const HomeT = () => (
  <div className="t-screen" data-screen-label="01 Accueil · tablet">

    {/* SPLIT-SCREEN HERO */}
    <section className="t-hero-split">
      <div className="d-hero-split__brand">AUSIÈGE · BEAUVAIS</div>
      <div className="d-hero-split__lang"><strong>FR</strong> / EN</div>

      <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>

      <div className="d-hero-split__bottom">
        11 rue des Arbalétriers · Beauvais
      </div>
    </section>

    <THeader solid current="home"/>

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

    {/* INTRO */}
    <section className="t-intro">
      <div className="t-intro__overline">Notre maison</div>
      <p className="t-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="t-intro__sig">L'équipe AUSIÈGE / Beauvais</div>
      <div style={{ marginTop: 40, aspectRatio: "3 / 2", 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 (image plein cadre + overlay) */}
    <section className="t-expertise" aria-label="Dix ans d'expertise">
      <div className="t-expertise__bg">
        <img src={PHOTOS.homme.craft} alt="Le geste juste, le contour, à la tondeuse."/>
      </div>
      <div className="t-expertise__veil"/>
      <div className="t-expertise__num" aria-hidden="true">10</div>
      <div className="t-expertise__inner">
        <div className="t-expertise__eyebrow">Expertise / depuis 2016</div>
        <h2 className="t-expertise__title">
          <em>Dix ans</em> à former la main, lire le visage, poser le geste juste.
        </h2>
        <p className="t-expertise__lede">
          Une décennie de coupes, de couleurs, de barbes et de rencontres. AUSIÈGE, c'est d'abord ce temps-là, patient, précis, transmis d'un styliste à l'autre.
        </p>
      </div>
    </section>

    {/* TWO UNIVERSES */}
    <section className="t-sect t-sect--ink t-sect--hairline">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Deux univers</div>
          <h2 className="t-sect__title">Femme & Homme, <em>chacun son fauteuil</em>.</h2>
        </div>
        <p className="t-sect__lede">
          Deux territoires distincts, une même précision. Choisissez votre univers.
        </p>
      </div>

      <div className="t-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 femme, balayage, glossing, soins, é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 dans l'univers 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>
              <li>Couleur · sur devis</li>
            </ul>
            <a className="d-uni__cta">Entrer dans l'univers Homme <Icon name="arrow-right" size={14}/></a>
          </div>
        </article>
      </div>
    </section>

    {/* HOMME SPOTLIGHT — portrait signature (SOSO) */}
    <section className="t-sect t-sect--ink t-sect--hairline" data-universe="homme">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }}>
        <div style={{ 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>
          <div className="t-sect__eyebrow" style={{ color: "var(--accent)" }}>Univers Homme · la nouvelle ère</div>
          <h2 className="t-sect__title" style={{ fontSize: 44 }}>La main qui <em style={{ color: "var(--accent)" }}>dessine</em>.</h2>
          <p style={{ marginTop: 24, 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="t-btn t-btn--accent"
            style={{ marginTop: 28, 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>
      </div>
    </section>

    {/* GALLERY mixed */}
    <section className="t-sect t-sect--inkSoft">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Galerie / mixte</div>
          <h2 className="t-sect__title">Travaux <em>récents</em>.</h2>
        </div>
        <p className="t-sect__lede">
          Femme et homme mélangés. Une sélection livrée ces dernières semaines.
        </p>
      </div>

      <div className="t-gal">
        <div className="t-gal__tile t-gal__tile--a">
          <img src={PHOTOS.femme.gallery[0]} alt="Coupe femme"/>
          <span className="t-gal__cap">Coupe femme</span>
        </div>
        <div className="t-gal__tile t-gal__tile--b">
          <img src={PHOTOS.homme.gallery[0]} alt="Dégradé"/>
          <span className="t-gal__cap">Dégradé</span>
        </div>
        <div className="t-gal__tile t-gal__tile--c">
          <img src={PHOTOS.femme.gallery[3]} alt="Balayage"/>
          <span className="t-gal__cap">Balayage</span>
        </div>
        <div className="t-gal__tile t-gal__tile--d">
          <img src={PHOTOS.homme.gallery[2]} alt="Barbe"/>
          <span className="t-gal__cap">Barbe</span>
        </div>
        <div className="t-gal__tile t-gal__tile--e">
          <img src={PHOTOS.femme.gallery[6]} alt="Brushing"/>
          <span className="t-gal__cap">Brushing</span>
        </div>
      </div>
    </section>

    {/* TESTIMONIAL */}
    <section className="t-testi">
      <div className="t-testi__inner">
        <div className="t-testi__mark">”</div>
        <div>
          <div className="t-testi__overline">Témoignage / cliente fidèle</div>
          <p className="t-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="t-testi__attr">
            <strong>Claire H.</strong>
            <span>Cliente · 4 ans</span>
          </div>
        </div>
      </div>
    </section>

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

    <TFooter/>
  </div>
);

window.HomeT = HomeT;