/* AUSIEGE · Menu mobile (burger ouvert) · mobile 390 */

const MobileMenu = () => {
  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="screen menu" data-screen-label="08 Menu mobile (ouvert)" style={{ height: 880 }}>
      <div className="menu__head">
        <button className="menu__close" aria-label="Fermer">
          <Icon name="x" size={20}/>
        </button>
        <div className="menu__brand"><Wordmark size={13}/></div>
        <button className="menu__cta-mini" aria-label="Téléphone">
          <Icon name="phone" size={18}/>
        </button>
      </div>

      <div className="menu__body">
        <ul className="menu__list">
          {links.map((l, i) => (
            <li key={l.num} className="menu__li">
              <span className="menu__link">
                <span className="menu__name" style={{ fontStyle: (i === 1 || i === 2) ? "italic" : "normal" }}>
                  {l.name}
                </span>
                <span className="menu__num">{l.num}</span>
              </span>
              <div className="menu__desc">{l.desc}</div>
            </li>
          ))}
        </ul>

        <div style={{ marginTop: 32 }}>
          <button className="btn btn--accent btn--block btn--lg">
            Réserver un rendez-vous
            <Icon name="arrow-right" size={14}/>
          </button>
        </div>
      </div>

      <div className="menu__foot">
        <div className="menu__foot-row">
          <span className="menu__foot-lbl">Adresse</span>
          <span className="menu__foot-val">11 rue des Arbalétriers, Beauvais</span>
        </div>
        <div className="menu__foot-row">
          <span className="menu__foot-lbl">Téléphone</span>
          <span className="menu__foot-val">03 65 65 94 38</span>
        </div>
        <div className="menu__foot-row">
          <span className="menu__foot-lbl">Horaires</span>
          <span className="menu__foot-val">Mar / Sam 9h / 19h</span>
        </div>
        <div className="menu__social">
          <a aria-label="Instagram"><Icon name="instagram" size={16}/></a>
          <a aria-label="Facebook"><Icon name="facebook" size={16}/></a>
        </div>
      </div>
    </div>
  );
};

window.MobileMenu = MobileMenu;