/* AUSIEGE · Desktop Home (1440) · neutral landing with Femme | Homme split-screen entry */

const HomeD = () => (
  <div className="d-screen" data-screen-label="01 Accueil · desktop">

    {/* SPLIT-SCREEN HERO — two entry doors */}
    <section className="d-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="Entrer dans l'univers Homme">
        <div className="d-hero-split__media">
          <img src={PHOTOS.homme.hero} alt="Univers Homme · AUSIEGE."/>
        </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 juste, <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="Entrer dans l'univers Femme">
        <div className="d-hero-split__media">
          <video
            src={PHOTOS.femme.heroVideo}
            poster={PHOTOS.femme.hero}
            autoPlay muted loop playsInline
            aria-label="Univers Femme · AUSIEGE."
          />
        </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">
        49°25′58″ N / 2°04′52″ E · 11 rue des Arbalétriers · Beauvais
      </div>
    </section>

    {/* Header sits below hero (sticky on scroll); the split-hero is the true landing */}
    <DHeader solid current="home"/>

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

    {/* EDITORIAL INTRO */}
    <section className="d-intro">
      <div className="d-intro__grid">
        <div>
          <div className="d-intro__overline">Notre maison</div>
          <div style={{ marginTop: 48, aspectRatio: "3 / 4", 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>
        </div>
        <div>
          <p className="d-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, votre visage et votre quotidien. Une adresse de précision, posée au cœur du Vieux-Beauvais. Deux univers, un même geste.
          </p>
          <div className="d-intro__sig">L'équipe AUSIÈGE / Beauvais</div>
        </div>
      </div>
    </section>

    {/* EXPERTISE BAND — Dix ans d'expertise (image plein cadre + overlay) */}
    <section className="d-expertise" aria-label="Dix ans d'expertise">
      <div className="d-expertise__bg">
        <img src={PHOTOS.homme.craft} alt="Le geste juste, le contour, à la tondeuse."/>
      </div>
      <div className="d-expertise__veil"/>
      <div className="d-expertise__num" aria-hidden="true">10</div>
      <div className="d-expertise__inner">
        <div className="d-expertise__eyebrow">Expertise / depuis 2016</div>
        <h2 className="d-expertise__title">
          <em>Dix ans</em> à former la main, lire le visage,<br/>poser le geste juste.
        </h2>
        <p className="d-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 — full presentation */}
    <section className="d-sect d-sect--ink d-sect--hairline">
      <div className="d-sect__head">
        <div>
          <div className="d-sect__eyebrow">Deux univers</div>
          <h2 className="d-sect__title">Femme & Homme, <em>chacun son fauteuil</em>.</h2>
        </div>
        <p className="d-sect__lede">
          Deux territoires distincts, une même précision. Choisissez votre univers : services, stylistes et parcours de réservation y sont pensés pour vous.
        </p>
      </div>

      <div className="d-uni">
        <article className="d-uni__card">
          <div className="d-uni__media">
            <img src={PHOTOS.femme.intro} alt="Univers Femme · AUSIEGE."/>
          </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 signature, glossing, soins profonds et coiffure événement. Quatre stylistes formé·es au travail au pinceau et à la méthode boucles.
            </p>
            <ul className="d-uni__list">
              <li>Coupe femme</li>
              <li>Balayage signature</li>
              <li>Brushing & coiffage</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 · AUSIEGE." 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 homme, coupe afro, taille de barbe et rasage traditionnel. Cinq barbiers formés au dégradé, à la coupe afro et au rasage à la serviette chaude.
            </p>
            <ul className="d-uni__list">
              <li>Coupe homme · 20 €</li>
              <li>Coupe + barbe courte · 30 €</li>
              <li>Coupe + barbe longue · 40 €</li>
              <li>Rasage traditionnel · 25 €</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="d-sect d-sect--inkSoft" data-universe="homme">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center", maxWidth: "var(--content-max)", margin: "0 auto" }}>
        <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="d-sect__eyebrow" style={{ color: "var(--accent)" }}>Univers Homme · la nouvelle ère</div>
          <h2 className="d-sect__title" style={{ fontSize: 64 }}>La main qui <em style={{ color: "var(--accent)" }}>dessine</em>.</h2>
          <p style={{ marginTop: 32, fontSize: 17, color: "var(--mist)", lineHeight: 1.65, maxWidth: 460 }}>
            Sept barbiers, une même exigence : lire le visage, dessiner la ligne, finir à la lame. L'univers Homme d'AUSIÈGE, c'est ce geste-là : précis, transmis, signé.
          </p>
          <div style={{ marginTop: 40 }}>
            <button className="d-btn d-btn--accent" onClick={() => window.ausiegeNavigate && window.ausiegeNavigate("homme")}>
              Entrer dans l'univers Homme
              <Icon name="arrow-right" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </section>

    {/* GALLERY MOSAIC — mixed showcase */}
    <section className="d-sect d-sect--inkSoft">
      <div className="d-sect__head">
        <div>
          <div className="d-sect__eyebrow">Galerie / travaux récents</div>
          <h2 className="d-sect__title">Quatorze <em>regards</em>, un même salon.</h2>
        </div>
        <p className="d-sect__lede">
          Une sélection des coupes, couleurs et finitions livrées ces dernières semaines. Femme et homme mélangés. Sans before/after, sans filtre.
        </p>
      </div>

      <div className="d-gal">
        <div className="d-gal__tile d-gal__tile--a">
          <img src={PHOTOS.femme.gallery[0]} alt="Coupe femme contemporaine."/>
          <span className="d-gal__cap">Coupe femme · Sophiane</span>
        </div>
        <div className="d-gal__tile d-gal__tile--b">
          <img src={PHOTOS.homme.gallery[0]} alt="Coupe homme dégradée."/>
          <span className="d-gal__cap">Dégradé · Killian</span>
        </div>
        <div className="d-gal__tile d-gal__tile--c">
          <img src={PHOTOS.femme.gallery[3]} alt="Balayage signature."/>
          <span className="d-gal__cap">Balayage · Julien</span>
        </div>
        <div className="d-gal__tile d-gal__tile--d">
          <img src={PHOTOS.homme.gallery[2]} alt="Taille de barbe."/>
          <span className="d-gal__cap">Barbe · Babacar</span>
        </div>
        <div className="d-gal__tile d-gal__tile--e">
          <img src={PHOTOS.femme.gallery[6]} alt="Brushing structuré."/>
          <span className="d-gal__cap">Brushing</span>
        </div>
        <div className="d-gal__tile d-gal__tile--f">
          <img src={PHOTOS.femme.gallery[9]} alt="Coiffure événement."/>
          <span className="d-gal__cap">Événement · Anaelle</span>
        </div>
        <div className="d-gal__tile d-gal__tile--g">
          <img src={PHOTOS.homme.gallery[5]} alt="Coupe homme contemporaine."/>
          <span className="d-gal__cap">Coupe · Gokhan</span>
        </div>
      </div>

      <div style={{ marginTop: 64, display: "flex", justifyContent: "center", gap: 16 }}>
        <button className="d-btn d-btn--ghost">
          Galerie Femme
          <Icon name="arrow-up-right" size={14}/>
        </button>
        <button className="d-btn d-btn--ghost">
          Galerie Homme
          <Icon name="arrow-up-right" size={14}/>
        </button>
      </div>
    </section>

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

    {/* FINAL CTA */}
    <section className="d-finalcta">
      <div className="d-finalcta__bigword">AUSIEGE</div>
      <div className="d-finalcta__grid">
        <div>
          <div className="d-sect__eyebrow" style={{ marginBottom: 32 }}>Réserver</div>
          <h2 className="d-finalcta__title">Prendre place chez <em>AUSIEGE</em>.</h2>
        </div>
        <div className="d-finalcta__side">
          <p className="d-finalcta__sub">
            Un rendez-vous se réserve en deux minutes. Aucun acompte demandé. Annulation libre jusqu'à 4 heures avant. Deux parcours dédiés selon votre univers.
          </p>
          <div className="d-finalcta__actions">
            <button className="d-btn d-btn--primary d-btn--lg d-btn--block">
              Réserver / Femme
              <Icon name="arrow-right" size={14}/>
            </button>
            <button className="d-btn d-btn--ghost d-btn--lg d-btn--block">
              Réserver / Homme
              <Icon name="arrow-right" size={14}/>
            </button>
            <button className="d-btn d-btn--ghost d-btn--block" style={{ marginTop: 8 }}>
              Nous appeler · 03 65 65 94 38
            </button>
          </div>
        </div>
      </div>
    </section>

    <DFooter/>
  </div>
);

window.HomeD = HomeD;