/** Servicios page — app script */

function ServiciosApp() {
  return (
    <div className="app">
      <PageHeader activePage="servicios" />
      <main>
        <PageHero
          eyebrow="Servicios y equipamiento"
          title="Todo lo que necesitas, nada que te sobre."
          subtitle="Un apartamento tranquilo y bien equipado en Pontón de Abajo, Pontones. Para que solo tengas que pensar en descansar."
          image="uploads/pontones%20fondo.jpg"
        />

        {/* ── Highlights ────────────────────────────────── */}
        <section className="section section--tight">
          <div className="container">
            <div className="highlight-cards">
              <div className="highlight-card">
                <div className="highlight-card__num">1–5</div>
                <div className="highlight-card__label">Huéspedes</div>
                <p className="highlight-card__desc">
                  Cama de matrimonio, cama individual y sofá cama en el salón.
                </p>
              </div>
              <div className="highlight-card">
                <div className="highlight-card__num" style={{ fontFamily: "var(--font-script)", fontSize: 44 }}>Completa</div>
                <div className="highlight-card__label">Cocina equipada</div>
                <p className="highlight-card__desc">
                  Microondas, tostador, cafetera, frigorífico y menaje para cocinar.
                </p>
              </div>
              <div className="highlight-card">
                <div className="highlight-card__num" style={{ fontFamily: "var(--font-script)", fontSize: 44 }}>Sierra</div>
                <div className="highlight-card__label">Parque Natural</div>
                <p className="highlight-card__desc">
                  En plena Sierra de Segura, con senderos, ríos y pinares a tu alcance.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* ── Equipamiento detallado ────────────────────── */}
        <section className="section section--cream">
          <div className="container">
            <div className="section-head">
              <Eyebrow>Equipamiento del apartamento</Eyebrow>
              <h2 className="h-section">
                Lo que encuentras al llegar.
              </h2>
              <p className="lede">
                El apartamento está totalmente equipado. Solo tienes que traer la ropa
                y las ganas de desconectar.
              </p>
            </div>

            <div className="amenities-grid">

              <div className="amenity-full">
                <div className="amenity-full__icon"><Icon name="bed" size={24} /></div>
                <div className="amenity-full__text">
                  <h3>Dormitorio</h3>
                  <p>Cama de matrimonio y cama individual con ropa de cama. Habitación independiente con buena luz natural y vistas a la sierra.</p>
                  <div className="amenity-full__tags">
                    <span className="amenity-tag">Cama doble</span>
                    <span className="amenity-tag">Cama individual</span>
                    <span className="amenity-tag">Ropa de cama</span>
                  </div>
                </div>
              </div>

              <div className="amenity-full">
                <div className="amenity-full__icon"><Icon name="utensils" size={24} /></div>
                <div className="amenity-full__text">
                  <h3>Cocina equipada</h3>
                  <p>Salón con cocina integrada: microondas, tostador, cafetera, frigorífico y menaje completo para cocinar.</p>
                  <div className="amenity-full__tags">
                    <span className="amenity-tag">Microondas</span>
                    <span className="amenity-tag">Cafetera</span>
                    <span className="amenity-tag">Tostador</span>
                    <span className="amenity-tag">Frigorífico</span>
                    <span className="amenity-tag">Menaje</span>
                  </div>
                </div>
              </div>

              <div className="amenity-full">
                <div className="amenity-full__icon"><Icon name="flame" size={24} /></div>
                <div className="amenity-full__text">
                  <h3>Salón con sofá cama</h3>
                  <p>Espacio amplio con sofá cama para dos personas adicionales. Calefacción incluida para los meses fríos.</p>
                  <div className="amenity-full__tags">
                    <span className="amenity-tag">Sofá cama</span>
                    <span className="amenity-tag">Calefacción</span>
                  </div>
                </div>
              </div>

              <div className="amenity-full">
                <div className="amenity-full__icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/>
                    <path d="M18 14h-8"/>
                    <path d="M15 18h-5"/>
                    <path d="M10 6h8v4h-8V6Z"/>
                  </svg>
                </div>
                <div className="amenity-full__text">
                  <h3>Lavadora</h3>
                  <p>Lavadora disponible dentro del apartamento para estancias más largas.</p>
                  <div className="amenity-full__tags">
                    <span className="amenity-tag">Lavadora</span>
                  </div>
                </div>
              </div>

              <div className="amenity-full">
                <div className="amenity-full__icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M9 6 6.5 3.5a1.5 1.5 0 0 0-1-.5C4.683 3 4 3.683 4 4.5V17a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/>
                    <line x1="10" y1="5" x2="8" y2="7"/>
                    <line x1="2" y1="12" x2="22" y2="12"/>
                    <line x1="7" y1="19" x2="7" y2="22"/>
                    <line x1="17" y1="19" x2="17" y2="22"/>
                  </svg>
                </div>
                <div className="amenity-full__text">
                  <h3>Baño completo</h3>
                  <p>Baño con ducha, toallas incluidas y todos los básicos necesarios para tu estancia.</p>
                  <div className="amenity-full__tags">
                    <span className="amenity-tag">Ducha</span>
                    <span className="amenity-tag">Toallas</span>
                  </div>
                </div>
              </div>

              <div className="amenity-full">
                <div className="amenity-full__icon"><Icon name="mountain" size={24} /></div>
                <div className="amenity-full__text">
                  <h3>Terraza con vistas</h3>
                  <p>Terraza privada orientada al sur con vistas a la sierra. El lugar perfecto para desayunar o ver atardecer.</p>
                  <div className="amenity-full__tags">
                    <span className="amenity-tag">Vistas a la sierra</span>
                    <span className="amenity-tag">Orientación sur</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </section>

        {/* ── Destacado: Nacimiento del Río Segura ────────────────── */}
        <section className="section section--tight section--cream">
          <div className="container">
            <div className="spotlight-card">
              <div className="spotlight-card__image-wrap">
                <img
                  src="uploads/nacimiento-segura-opt.jpg"
                  alt="Nacimiento del Río Segura en Fuente Segura, Pontones"
                  className="spotlight-card__image"
                />
                <div className="spotlight-card__badge">
                  <span>Fuente Segura · Pontones</span>
                </div>
              </div>
              <div className="spotlight-card__content">
                <Eyebrow>A unos minutos del apartamento</Eyebrow>
                <h2 className="h-section" style={{ fontSize: "clamp(26px, 2.4vw, 36px)", margin: 0 }}>
                  El Nacimiento del Río Segura
                </h2>
                <p className="lede-text" style={{ fontSize: 16.5, lineHeight: 1.6, margin: 0, color: "var(--endrino-green-900)" }}>
                  A solo unos minutos del apartamento brota una de las maravillas naturales más icónicas de la sierra: el río Segura emergiendo cristalino desde la cueva de Fuente Segura.
                </p>
                <p style={{ font: "400 15px/1.6 var(--font-serif)", color: "var(--stone-700)", margin: 0 }}>
                  Un paraje natural único de pozas turquesas, álamos centenarios y pinares de montaña donde respirar la tranquilidad más pura de la sierra. Ideal para paseos tranquilos o como punto de partida para tus rutas.
                </p>
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 4 }}>
                  <span className="amenity-tag">Aguas cristalinas</span>
                  <span className="amenity-tag">Fuente Segura</span>
                  <span className="amenity-tag">Paseo de montaña</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ── El entorno ────────────────────────────────── */}
        <section className="section 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>El entorno</Eyebrow>
              <h2 className="h-section">
                La Sierra de Segura a tu puerta.
              </h2>
              <p className="lede">
                Pontones está en el corazón del Parque Natural de las Sierras de Cazorla,
                Segura y Las Villas. El mayor espacio protegido de España.
              </p>
            </div>
            <div className="environment-grid">
              {[
                {
                  icon: "footprints",
                  title: "Senderismo",
                  desc: "Rutas de senderismo señalizadas que salen directamente desde Pontones para recorrer el Río Segura y sus pinares centenarios."
                },
                {
                  icon: "tree-pine",
                  title: "Naturaleza",
                  desc: "Pinos laricios, águilas, ciervos y buitres. Un parque natural donde la fauna campa a sus anchas."
                },
                {
                  icon: "moon",
                  title: "Cielo estrellado",
                  desc: "Contaminación lumínica casi nula. Noches despejadas con la Vía Láctea a simple vista."
                },
              ].map((item, i) => (
                <div key={i} className="amenity-full" style={{ background: "var(--paper-50)" }}>
                  <div className="amenity-full__icon"><Icon name={item.icon} size={24} /></div>
                  <div className="amenity-full__text">
                    <h3>{item.title}</h3>
                    <p>{item.desc}</p>
                  </div>
                </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 }}>
            <Eyebrow center style={{ color: "var(--endrino-green-300)" }}>¿Te animas?</Eyebrow>
            <h2 className="h-section" style={{ color: "var(--paper-50)", margin: 0 }}>
              Reserva tu estancia en Los Endrinos.
            </h2>
            <p className="lede" style={{ color: "var(--endrino-green-300)", margin: "0 auto", textAlign: "center" }}>
              Llámanos o escríbenos y te confirmamos disponibilidad en el día.
            </p>
            <div className="hero__actions" style={{ marginTop: 8 }}>
              <a href="Contacto.html" className="btn btn--primary btn--large">
                Contactar <Icon name="arrow-right" size={16} />
              </a>
              <a href="tel:+34649987667" className="btn btn--ghost btn--large">
                Llamar ahora
              </a>
            </div>
          </div>
        </section>

      </main>
      <PageFooter />
    </div>
  );
}

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