/* AUSIEGE · Desktop Contact (1440) */

const ContactD = () => (
  <div className="d-screen" data-screen-label="06 Contact · desktop">
    <DHeader solid current="contact"/>

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

    {/* Map + Info split */}
    <div className="d-contact-grid">
      <div className="d-contact-map">
        <SalonMap className="salon-map__canvas" pinSize={40}/>
        <div className="d-contact-map__coord">49°25′58″ N / 2°04′52″ E</div>
        <div className="d-contact-map__actions">
          <a className="d-chip" href={SALON_DIR_URL} target="_blank" rel="noopener noreferrer" style={{ background: "rgba(28,26,23,0.7)", borderColor: "var(--border-on-dark-strong)" }}>Itinéraire</a>
          <a className="d-chip" href={SALON_MAPS_URL} target="_blank" rel="noopener noreferrer" style={{ background: "var(--bone)", color: "var(--ink)", borderColor: "var(--bone)" }}>Ouvrir Google Maps</a>
        </div>
      </div>
      <div className="d-contact-info">
        <div className="d-contact-info__block">
          <span className="d-contact-info__lbl">Adresse</span>
          <span className="d-contact-info__val">11 rue des Arbalétriers<br/>60000 Beauvais</span>
          <span className="d-contact-info__sub">Centre-ville / parking Hachette à 5 min</span>
        </div>
        <div>
          <span className="d-contact-info__lbl" style={{ display: "block", marginBottom: 16 }}>Horaires</span>
          {[
            { 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} className={`d-contact-hrow ${r.off ? "off" : ""}`}>
              <span className="d-contact-hrow__d">{r.d}</span>
              <span className="d-contact-hrow__h">{r.h}</span>
            </div>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <div className="d-contact-info__block">
            <span className="d-contact-info__lbl">Téléphone</span>
            <span className="d-contact-info__val d-contact-info__val--sm">03 65 65 94 38</span>
          </div>
          <div className="d-contact-info__block">
            <span className="d-contact-info__lbl">Email</span>
            <span className="d-contact-info__val d-contact-info__val--sm">bonjour@ausiege.fr</span>
          </div>
        </div>
      </div>
    </div>

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

      <div className="d-stepper">
        {[
          { n: "01", t: "Choisir une prestation", d: "Coupe, couleur, barbier, soin · sept services principaux." },
          { n: "02", t: "Choisir un coiffeur", d: "Ou laissez-nous orienter selon vos attentes." },
          { n: "03", t: "Date / horaire", d: "Disponibilités synchronisées en temps réel." },
          { n: "04", t: "Confirmer", d: "Email récap + SMS de rappel 24 h avant." },
        ].map(s => (
          <div key={s.n} className="d-step">
            <div className="d-step__n">{s.n}</div>
            <div className="d-step__t">{s.t}</div>
            <div className="d-step__d">{s.d}</div>
          </div>
        ))}
      </div>

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

    {/* Quick message form */}
    <section className="d-sect d-sect--ink">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 96, alignItems: "start" }}>
        <div>
          <div className="d-sect__eyebrow">Une question / un mot</div>
          <h2 className="d-sect__title" style={{ fontSize: 64 }}>Écrire <em>directement</em>.</h2>
          <p style={{ marginTop: 32, fontSize: 16, color: "var(--mist)", lineHeight: 1.65, maxWidth: 380 }}>
            Suggestion, demande spéciale, retour après visite. Tous les messages sont lus, on vous répond sous 24h ouvrées.
          </p>
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--border-on-dark)", display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--mist)" }}>
              <span style={{ letterSpacing: "0.16em", textTransform: "uppercase" }}>Téléphone</span>
              <span style={{ color: "var(--bone)", fontFamily: "var(--font-display)", fontSize: 18 }}>03 65 65 94 38</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--mist)" }}>
              <span style={{ letterSpacing: "0.16em", textTransform: "uppercase" }}>Email</span>
              <span style={{ color: "var(--bone)", fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500 }}>bonjour@ausiege.fr</span>
            </div>
          </div>
        </div>
        <div>
          <div className="d-binq__form" style={{ background: "transparent" }}>
            <div className="d-field">
              <label className="d-field__lbl" style={{ color: "var(--mist)" }}>Prénom</label>
              <input className="d-field__input" placeholder="Claire" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
            </div>
            <div className="d-field">
              <label className="d-field__lbl" style={{ color: "var(--mist)" }}>Nom</label>
              <input className="d-field__input" placeholder="Henry" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
            </div>
            <div className="d-field d-field--wide">
              <label className="d-field__lbl" style={{ color: "var(--mist)" }}>Email</label>
              <input className="d-field__input" type="email" placeholder="vous@email.fr" style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
            </div>
            <div className="d-field d-field--wide">
              <label className="d-field__lbl" style={{ color: "var(--mist)" }}>Votre message</label>
              <textarea className="d-field__input" placeholder="Une question, un retour, une demande spéciale" rows={4} style={{ color: "var(--bone)", borderBottomColor: "var(--border-on-dark-strong)" }}/>
            </div>
            <div className="d-field d-field--wide" style={{ marginTop: 16 }}>
              <button className="d-btn d-btn--primary d-btn--lg">
                Envoyer le message
                <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <DFooter/>
  </div>
);

window.ContactD = ContactD;