// Contact — La Coutume, Toucy
// Réservation par téléphone (aucun système de réservation en ligne confirmé).
// Carte : OpenStreetMap — pas de cookie, pas de bandeau de consentement (RGPD).

const ContactPage = () => (
  <>
    <section className="page-header">
      <div className="container">
        <Reveal className="eyebrow">Contact · Réservation</Reveal>
        <Reveal as="h1" className="display" delay={1}>
          On vous attend <em>à Toucy</em>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead">
            Pour réserver votre table, appelez-nous directement — c'est le plus simple et le plus sûr.
          </p>
        </Reveal>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="contact-grid">
          <Reveal>
            <div className="info-block">
              <div className="info-label">Téléphone</div>
              <div className="info-value">
                <a href={INFO.phoneHref} className="info-phone">{INFO.phone}</a>
                <small>Le meilleur moyen de réserver votre table</small>
              </div>
            </div>
            <div className="info-block">
              <div className="info-label">E-mail</div>
              <div className="info-value">
                <a href={INFO.emailHref} className="info-mail">{INFO.email}</a>
                <small>Groupes, privatisations, demandes particulières</small>
              </div>
            </div>
            <div className="info-block">
              <div className="info-label">Adresse</div>
              <div className="info-value">
                {INFO.address}<br />{INFO.city}
                <small>Sur la place du Marché, au cœur de Toucy</small>
              </div>
            </div>
            <div className="info-block">
              <div className="info-label">Déjeuner</div>
              <div className="info-value">
                Mardi — Samedi
                <small>12h — 14h</small>
              </div>
            </div>
            <div className="info-block">
              <div className="info-label">Dîner</div>
              <div className="info-value">
                Jeudi — Samedi
                <small>19h — 21h</small>
              </div>
            </div>
            <div className="info-block">
              <div className="info-label">Fermeture</div>
              <div className="info-value">
                Dimanche &amp; Lundi
                <small>Repos hebdomadaire</small>
              </div>
            </div>
            <div className="info-block" style={{ borderBottom: 0 }}>
              <div className="info-label">Paiement</div>
              <div className="info-value info-value-plain">
                {INFO.payment.join(" · ")}
              </div>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="reserve-card">
              <div className="reserve-title">Réserver une table</div>
              <p className="reserve-text">
                Appelez-nous et nous trouverons ensemble le meilleur moment pour vous accueillir, au déjeuner comme au dîner.
              </p>
              <a href={INFO.phoneHref} className="btn btn-primary reserve-btn">
                <Icon name="phone" size={18} /> {INFO.phone}
              </a>
              <a href={INFO.emailHref} className="btn btn-ghost reserve-btn-alt">
                <Icon name="mail" size={14} /> Écrire un e-mail
              </a>

              <div className="reserve-facts">
                <div className="reserve-facts-h">Bon à savoir</div>
                {[
                  { label: "Terrasse", val: "Aux beaux jours" },
                  { label: "Animaux", val: "Acceptés, prévenir" },
                  { label: "Chaises bébé", val: "Disponibles" },
                  { label: "Langues", val: INFO.languages.join(" / ") },
                ].map(it => (
                  <div key={it.label} className="reserve-fact">
                    <span>{it.label}</span>
                    <strong>{it.val}</strong>
                  </div>
                ))}
              </div>

              <div className="reserve-social">
                <a href={INFO.facebook} target="_blank" rel="noopener noreferrer">Facebook</a>
                <a href={INFO.instagram} target="_blank" rel="noopener noreferrer">Instagram</a>
                <a href={RATING.url} target="_blank" rel="noopener noreferrer">TripAdvisor</a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Carte + accès */}
    <section className="section-tight" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal>
          <div className="map-head">
            <div>
              <span className="eyebrow">Nous trouver</span>
              <div className="display map-head-title">
                1 Rue du <em>Marché</em>
              </div>
            </div>
            <a href={INFO.mapsUrl} target="_blank" rel="noopener noreferrer" className="btn-link">
              Itinéraire Google Maps <Icon name="arrow" size={12} />
            </a>
          </div>
          <div className="map-frame">
            <iframe
              title="Carte — La Coutume, 1 Rue du Marché, 89130 Toucy"
              className="map-embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              src="https://www.openstreetmap.org/export/embed.html?bbox=3.2884%2C47.7332%2C3.3004%2C47.7402&layer=mapnik&marker=47.7367%2C3.2944"
            />
          </div>
          <p className="map-note">
            Carte OpenStreetMap — sans cookie ni traceur.
          </p>
        </Reveal>

        <Reveal>
          <div className="access-block">
            <div className="access-h">Depuis les environs</div>
            <div className="access-grid">
              {ACCESS.map(a => (
                <div key={a.place} className="access-item">
                  <div className="access-place">{a.place}</div>
                  <div className="access-meta">{a.km} · {a.time}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  </>
);

Object.assign(window, { ContactPage });