/* AUSIEGE · Desktop menu overlay (1440) */

const MenuD = () => {
  const links = [
    { num: "01", name: "Accueil", desc: "L'adresse, deux univers, la prochaine date" },
    { num: "02", name: "Femme", desc: "Coupe, couleur, coiffage, soin" },
    { num: "03", name: "Homme", desc: "Coupe, barbe, rasage, couleur" },
    { num: "04", name: "Équipe", desc: "Sept stylistes, deux univers" },
    { num: "05", name: "Galerie", desc: "Travaux récents" },
    { num: "06", name: "Merch", desc: "Le vestiaire AU SIÈGE, porté ailleurs" },
    { num: "07", name: "Produit", desc: "Huiles, parfums & accessoires du salon" },
    { num: "08", name: "Formation", desc: "B2B / former d'autres salons" },
    { num: "09", name: "Contact", desc: "Venir, écrire, appeler" },
  ];

  return (
    <div className="d-screen d-menu" data-screen-label="08 Menu desktop">
      <div className="d-menu__head">
        <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--mist)" }}>
          Navigation principale
        </div>
        <div className="d-menu__brand">AUSIÈGE · BEAUVAIS</div>
        <button className="d-menu__close">
          Fermer
          <Icon name="x" size={14}/>
        </button>
      </div>
      <div className="d-menu__body">
        <ul className="d-menu__list">
          {links.map((l, i) => (
            <li key={l.num} className="d-menu__li">
              <span className="d-menu__num">{l.num}</span>
              <span className="d-menu__name" style={{ fontStyle: (i === 1 || i === 2) ? "italic" : "normal" }}>
                {l.name}
              </span>
              <span className="d-menu__desc">{l.desc}</span>
            </li>
          ))}
        </ul>
        <aside className="d-menu__aside">
          <div className="d-menu__featured">
            <img src={PHOTOS.femme.gallery[2]} alt="Travail récent"/>
            <div className="d-menu__featured-cap">Galerie / printemps 2026</div>
          </div>
          <div>
            <div className="d-menu__contact-block">
              <span className="d-menu__contact-lbl">Adresse</span>
              <span className="d-menu__contact-val">11 rue des Arbalétriers, Beauvais</span>
            </div>
            <div className="d-menu__contact-block" style={{ marginTop: 24 }}>
              <span className="d-menu__contact-lbl">Téléphone</span>
              <span className="d-menu__contact-val">03 65 65 94 38</span>
            </div>
            <div className="d-menu__contact-block" style={{ marginTop: 24 }}>
              <span className="d-menu__contact-lbl">Aujourd'hui</span>
              <span className="d-menu__contact-val">Ouvert · 9h00 / 19h00</span>
            </div>
          </div>
          <button className="d-btn d-btn--accent d-btn--lg">
            Réserver un rendez-vous
            <Icon name="arrow-right" size={14}/>
          </button>
        </aside>
      </div>
    </div>
  );
};

window.MenuD = MenuD;