/** Contacto page — app script */

function ContactoApp() {
  return (
    <div className="app">
      <PageHeader activePage="contacto" />
      <main>
        <PageHero
          eyebrow="Contacto y reservas"
          title="Estamos cerca. Llámanos."
          subtitle="Mari y Ramón te atienden personalmente. Sin formularios, sin intermediarios."
          image="uploads/pontones%20fondo.jpg"
        />

        {/* ── Datos de contacto ─────────────────────────── */}
        <section className="section">
          <div className="container">
            <div className="section-head section-head--center">
              <Eyebrow center>Cómo contactarnos</Eyebrow>
              <h2 className="h-section">Trato directo, como debe ser.</h2>
              <p className="lede" style={{ margin: "0 auto", textAlign: "center" }}>
                Llama por teléfono o escríbenos un WhatsApp.
                Te respondemos el mismo día, normalmente en un par de horas.
              </p>
            </div>

            <div className="contact-detail-grid">
              <div className="contact-detail">
                <div className="contact-detail__icon"><Icon name="phone" size={26} /></div>
                <div className="contact-detail__label">Teléfono / WhatsApp</div>
                <a className="contact-detail__value" href="tel:+34649987667">+34 649 98 76 67</a>
                <p className="contact-detail__note">Lun – Dom · 9:00 – 21:00</p>
              </div>

              <div className="contact-detail">
                <div className="contact-detail__icon"><Icon name="users" size={26} /></div>
                <div className="contact-detail__label">Tus anfitriones</div>
                <span className="contact-detail__value">Mari y Ramón</span>
                <p className="contact-detail__note">Vivimos en Pontones. Te recibimos en persona.</p>
              </div>

              <div className="contact-detail">
                <div className="contact-detail__icon"><Icon name="map-pin" size={26} /></div>
                <div className="contact-detail__label">Dirección</div>
                <span className="contact-detail__value" style={{ fontSize: 16 }}>Calle Los Endrinos. Pontón de Abajo. Santiago-Pontones.</span>
                <p className="contact-detail__note">C.P. 23291</p>
              </div>
            </div>
          </div>
        </section>

        {/* ── Mapa ──────────────────────────────────────── */}
        <section className="section section--cream section--tight">
          <div className="container">
            <div className="section-head">
              <Eyebrow>Dónde estamos</Eyebrow>
              <h2 className="h-section">En el corazón de la sierra.</h2>
              <p className="lede">
                Pontones pertenece al municipio de Santiago-Pontones,
                en pleno Parque Natural de las Sierras de Cazorla, Segura y Las Villas.
              </p>
            </div>

            <div className="map-card" style={{ height: 520, borderRadius: 14, marginBottom: 32 }}>
              <iframe
                className="map-embed"
                title="Apartamento Los Endrinos en el mapa"
                src="https://www.google.com/maps?q=38.117716,-2.669284&z=16&output=embed"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
            </div>
          </div>
        </section>


        {/* ── Qué necesitas saber ───────────────────────── */}
        <section className="section section--cream section--has-deco">
          <img src="assets/endrino-bg.svg" className="endrino-deco endrino-deco--right" aria-hidden="true" alt="" />
          <div className="container">
            <div className="section-head">
              <Eyebrow>Información práctica</Eyebrow>
              <h2 className="h-section">Antes de venir.</h2>
            </div>
            <div className="faq-grid">
              {[
                { q: "Precio", a: "Desde 30 € por persona y noche." },
                { q: "Hora de entrada", a: "A partir de las 16:00. Si necesitas llegar antes, consúltanos." },
                { q: "Hora de salida", a: "Antes de las 12:00 del día de salida." },
                { q: "Estancia mínima", a: "2 noches los fines de semana. En festivos y puentes puede ser de 3 noches." },
                { q: "Mascotas", a: "No se admiten mascotas." },
                { q: "Aparcamiento", a: "Recomendamos dejar el coche en la plaza de la Rambla, que está a solo dos minutos a pie del apartamento." },
                { q: "Compras y supermercado", a: "En Pontones hay un pequeño minisúper para compras básicas. Para una compra completa, el supermercado principal se encuentra en Santiago de la Espada (a unos 15 minutos en coche)." },
              ].map((item, i) => (
                <div key={i} style={{ borderLeft: "2px solid var(--c-accent)", paddingLeft: 20 }}>
                  <h4 style={{ font: "600 11px/1 var(--font-sans)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--c-accent)", margin: "0 0 10px" }}>
                    {item.q}
                  </h4>
                  <p style={{ font: "400 16px/1.55 var(--font-serif)", color: "var(--ink-900)", margin: 0 }}>
                    {item.a}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── CTA ───────────────────────────────────────── */}
        <section className="section section--tight" style={{ background: "var(--endrino-green-900)", textAlign: "center" }}>
          <div className="container" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 22 }}>
            <h2 className="h-section" style={{ color: "var(--paper-50)", margin: 0 }}>
              ¿Listo para venir?
            </h2>
            <p className="lede" style={{ color: "var(--endrino-green-300)", margin: "0 auto", textAlign: "center" }}>
              Llámanos y reserva tu estancia directamente. Sin comisiones, sin plataformas.
            </p>
            <a href="tel:+34649987667" className="btn btn--primary btn--large" style={{ marginTop: 8 }}>
              Llamar al +34 649 98 76 67 <Icon name="phone" size={16} />
            </a>
          </div>
        </section>
      </main>
      <PageFooter />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ContactoApp />);