/* AUSIEGE · Tablet menu overlay (768) */

const MenuT = () => {
  const links = [
    { num: "01", name: "Accueil", desc: "L'adresse, deux univers" },
    { num: "02", name: "Femme", desc: "Coupe, couleur, soin" },
    { num: "03", name: "Homme", desc: "Coupe, barbe, rasage" },
    { num: "04", name: "Équipe", desc: "7 stylistes" },
    { num: "05", name: "Galerie", desc: "Travaux récents" },
    { num: "06", name: "Merch", desc: "Le vestiaire, porté ailleurs" },
    { num: "07", name: "Produit", desc: "Huiles, parfums, accessoires" },
    { num: "08", name: "Formation", desc: "B2B Qualiopi" },
    { num: "09", name: "Contact", desc: "Venir, écrire" },
  ];

  return (
    <div className="t-screen t-menu" data-screen-label="08 Menu tablet">
      <div className="t-menu__head">
        <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--mist)" }}>
          Navigation
        </div>
        <div className="t-menu__brand">AUSIEGE</div>
        <button className="t-menu__close">
          Fermer
          <Icon name="x" size={14}/>
        </button>
      </div>
      <div className="t-menu__body">
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {links.map((l, i) => (
            <li key={l.num} className="t-menu__li">
              <span className="t-menu__num">{l.num}</span>
              <span className="t-menu__name" style={{ fontStyle: (i === 1 || i === 2) ? "italic" : "normal" }}>{l.name}</span>
              <span className="t-menu__desc">{l.desc}</span>
            </li>
          ))}
        </ul>
        <aside className="t-menu__aside">
          <div className="t-menu__featured">
            <img src={PHOTOS.femme.gallery[2]} alt="Travail récent"/>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--mist)" }}>Adresse</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, marginTop: 4 }}>11 rue des Arbalétriers, Beauvais</div>
            </div>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--mist)" }}>Téléphone</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, marginTop: 4 }}>03 65 65 94 38</div>
            </div>
          </div>
          <button className="t-btn t-btn--accent">
            Réserver
            <Icon name="arrow-right" size={14}/>
          </button>
        </aside>
      </div>
    </div>
  );
};

window.MenuT = MenuT;