/* AUSIEGE · Tablet Contact (768) */

const ContactT = () => (
  <div className="t-screen" data-screen-label="06 Contact · tablet">
    <THeader solid current="contact"/>

    <div className="t-pagehead">
      <div className="t-pagehead__eyebrow">Contact / adresse</div>
      <h1 className="t-pagehead__title">Venir, écrire, <em>appeler</em>.</h1>
      <p className="t-pagehead__lede">
        Le salon est ouvert six jours sur sept. On vous répond sous une demi-journée.
      </p>
    </div>

    <div className="t-contact-grid">
      <div className="t-contact-map">
        <SalonMap className="salon-map__canvas" pinSize={32}/>
        <div className="t-contact-map__coord">49°25′58″ N / 2°04′52″ E</div>
        <div className="t-contact-map__actions">
          <a className="t-chip" href={SALON_MAPS_URL} target="_blank" rel="noopener noreferrer" style={{ background: "var(--bone)", color: "var(--ink)", borderColor: "var(--bone)" }}>Ouvrir Maps</a>
        </div>
      </div>
      <div className="t-contact-info">
        <div>
          <div className="t-contact-info__lbl">Adresse</div>
          <div className="t-contact-info__val">11 rue des Arbalétriers<br/>60000 Beauvais</div>
          <div className="t-contact-info__sub">Centre-ville / parking Hachette à 5 min</div>
        </div>
        <div>
          <div className="t-contact-info__lbl" style={{ marginBottom: 12 }}>Horaires</div>
          {[
            { d: "Lundi", h: "Fermé", off: true },
            { d: "Mardi / Vendredi", h: "09h / 19h" },
            { d: "Samedi", h: "09h / 19h" },
            { d: "Dimanche", h: "10h / 18h" },
          ].map((r, i) => (
            <div key={i} className={`t-contact-hrow ${r.off ? "off" : ""}`}>
              <span className="t-contact-hrow__d">{r.d}</span>
              <span className="t-contact-hrow__h">{r.h}</span>
            </div>
          ))}
        </div>
        <div>
          <div className="t-contact-info__lbl">Téléphone & email</div>
          <div className="t-contact-info__val" style={{ fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 500, marginTop: 4 }}>
            03 65 65 94 38<br/>bonjour@ausiege.fr
          </div>
        </div>
      </div>
    </div>

    {/* Stepper */}
    <section className="t-sect t-sect--inkSoft">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Réservation / en ligne</div>
          <h2 className="t-sect__title">Quatre étapes, <em>deux minutes</em>.</h2>
        </div>
        <p className="t-sect__lede">
          Aucun acompte. Annulation libre jusqu'à 4h avant.
        </p>
      </div>

      <div className="t-stepper">
        {[
          { n: "01", t: "Choisir une prestation", d: "Coupe, couleur, barbier, soin." },
          { n: "02", t: "Choisir un coiffeur", d: "Ou laissez-nous décider." },
          { n: "03", t: "Date / horaire", d: "Disponibilités temps réel." },
          { n: "04", t: "Confirmer", d: "Email + SMS de rappel." },
        ].map(s => (
          <div key={s.n} className="t-step">
            <div className="t-step__n">{s.n}</div>
            <div className="t-step__t">{s.t}</div>
            <div className="t-step__d">{s.d}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, display: "flex", justifyContent: "center" }}>
        <button className="t-btn t-btn--accent t-btn--lg">
          Réserver maintenant
          <Icon name="arrow-right" size={14}/>
        </button>
      </div>
    </section>

    {/* Quick message form */}
    <section className="t-sect t-sect--ink">
      <div className="t-sect__head">
        <div>
          <div className="t-sect__eyebrow">Une question / un mot</div>
          <h2 className="t-sect__title">Écrire <em>directement</em>.</h2>
        </div>
      </div>

      <div className="t-binq__form" style={{ background: "transparent" }}>
        <div className="t-field">
          <label className="t-field__lbl" style={{ color: "var(--mist)" }}>Prénom</label>
          <input className="t-field__input" placeholder="Claire" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
        </div>
        <div className="t-field">
          <label className="t-field__lbl" style={{ color: "var(--mist)" }}>Nom</label>
          <input className="t-field__input" placeholder="Henry" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
        </div>
        <div className="t-field t-field--wide">
          <label className="t-field__lbl" style={{ color: "var(--mist)" }}>Email</label>
          <input className="t-field__input" type="email" placeholder="vous@email.fr" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
        </div>
        <div className="t-field t-field--wide">
          <label className="t-field__lbl" style={{ color: "var(--mist)" }}>Votre message</label>
          <textarea className="t-field__input" placeholder="Une question, un retour" rows={4} style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
        </div>
        <div className="t-field t-field--wide" style={{ marginTop: 12 }}>
          <button className="t-btn t-btn--primary t-btn--lg">
            Envoyer le message
            <Icon name="arrow-right" size={14}/>
          </button>
        </div>
      </div>
    </section>

    <TFooter/>
  </div>
);

window.ContactT = ContactT;