/* AUSIEGE · Contact & réservation · mobile 390 */

const Contact = () => {
  return (
    <div className="screen" data-screen-label="06 Contact">
      <MHeader solid />

      <div className="page-head" style={{ paddingTop: 80 }}>
        <div className="page-head__eyebrow">Contact / adresse</div>
        <h1 className="page-head__title">Venir, écrire, <em>appeler</em>.</h1>
        <p className="page-head__lede">
          Le salon est ouvert six jours sur sept. On vous répond sous une demi-journée, en moyenne.
        </p>
      </div>

      {/* Map */}
      <div className="contact-map">
        <SalonMap className="salon-map__canvas" pinSize={32}/>
        <div className="contact-map__coord">49°25′58″ N / 2°04′52″ E</div>
        <div className="contact-map__actions">
          <a className="chip" href={SALON_DIR_URL} target="_blank" rel="noopener noreferrer">Itinéraire</a>
          <a className="chip chip--solid" href={SALON_MAPS_URL} target="_blank" rel="noopener noreferrer">
            Ouvrir Maps
          </a>
        </div>
      </div>

      {/* Info blocks */}
      <div className="contact-info">
        <div className="contact-info__block">
          <span className="contact-info__lbl">Adresse</span>
          <span className="contact-info__val">11 rue des Arbalétriers<br/>60000 Beauvais</span>
          <span className="contact-info__sub">Centre-ville / parking Hachette à 5 min</span>
        </div>
        <div style={{ borderTop: "1px solid var(--border-on-dark)", paddingTop: 24 }}>
          <span className="contact-info__lbl">Horaires</span>
          <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { d: "Lundi", h: "Fermé", off: true },
              { d: "Mardi / Vendredi", h: "09h00 / 19h00" },
              { d: "Samedi", h: "09h00 / 19h00" },
              { d: "Dimanche", h: "10h00 / 18h00" },
            ].map((r, i) => (
              <div key={i} style={{
                display: "flex", justifyContent: "space-between",
                paddingBottom: 8, borderBottom: "1px solid var(--border-on-dark)",
                fontSize: 14
              }}>
                <span style={{ color: r.off ? "var(--mist)" : "var(--bone)" }}>{r.d}</span>
                <span style={{
                  fontFamily: "var(--font-display)", fontSize: 16,
                  color: r.off ? "var(--mist)" : "var(--bone)",
                  fontStyle: r.off ? "italic" : "normal"
                }}>{r.h}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--border-on-dark)", paddingTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <div className="contact-info__block">
            <span className="contact-info__lbl">Téléphone</span>
            <span className="contact-info__val" style={{ fontSize: 18 }}>03 65 65 94 38</span>
          </div>
          <div className="contact-info__block">
            <span className="contact-info__lbl">Email</span>
            <span className="contact-info__val" style={{ fontSize: 16, fontFamily: "var(--font-sans)", fontWeight: 500 }}>bonjour@ausiege.fr</span>
          </div>
        </div>
      </div>

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

        <div style={{ padding: "0 20px", display: "flex", flexDirection: "column", gap: 16 }}>
          {[
            { 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 en temps réel" },
            { n: "04", t: "Confirmer", d: "Email + SMS de rappel" },
          ].map((s, i) => (
            <div key={s.n} style={{
              display: "grid", gridTemplateColumns: "56px 1fr", gap: 16,
              paddingBottom: 16, borderBottom: "1px solid var(--border-on-dark)",
              alignItems: "flex-start"
            }}>
              <div style={{
                width: 56, height: 56,
                border: "1px solid var(--border-on-dark-strong)",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-display)", fontSize: 22,
                color: "var(--champagne)"
              }}>{s.n}</div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--bone)", marginBottom: 4 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: "var(--mist)" }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ padding: "32px 20px 0" }}>
          <button className="btn btn--accent btn--block btn--lg">
            Réserver maintenant
            <Icon name="arrow-right" size={14}/>
          </button>
        </div>
      </section>

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

        <div style={{ padding: "0 20px" }}>
          <div className="field">
            <label className="field__lbl" style={{ color: "var(--mist)" }}>Nom</label>
            <input className="field__input" placeholder="Prénom Nom" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
          </div>
          <div className="field">
            <label className="field__lbl" style={{ color: "var(--mist)" }}>Email</label>
            <input className="field__input" type="email" placeholder="vous@email.fr" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
          </div>
          <div className="field">
            <label className="field__lbl" style={{ color: "var(--mist)" }}>Votre message</label>
            <textarea className="field__input" placeholder="Une question, un retour, une demande spéciale" rows={4} style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
          </div>
          <button className="btn btn--primary btn--block btn--lg" style={{ marginTop: 16 }}>
            Envoyer
            <Icon name="arrow-right" size={14}/>
          </button>
        </div>
      </section>

      <Footer/>
      <BookBar/>
    </div>
  );
};

window.Contact = Contact;