const ENS = window.HotelManglaresLodgeCaldera_e07d8c;
const eContainer = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };

function ExperiencesScreen() {
  const { SectionHeader, ExperienceCard } = ENS;
  const items = [
    { category: "Naturaleza", distance: "A 5 min", title: "Manglares de Mata Limón", description: "Recorrido en kayak por el estuario, entre garzas, cangrejos y raíces de mangle.", image: "../../assets/img/grounds-sea.jpg" },
    { category: "Playa", distance: "A 5 min", title: "Playa Caldera", description: "Arena tranquila y atardeceres sobre el Pacífico, ideal para caminar.", image: "../../assets/img/exp-playa.jpg" },
    { category: "Tour", distance: "A 25 min", title: "Isla San Lucas", description: "Senderos e historia en el Parque Nacional isla San Lucas.", image: "../../assets/img/exp-isla.jpg" },
    { category: "Aventura", distance: "A 40 min", title: "Catarata Bijagual", description: "Una de las cascadas más altas del país, entre bosque tropical.", image: "../../assets/img/exp-catarata.jpg" },
    { category: "Cultura", distance: "A 15 min", title: "Puerto de Puntarenas", description: "Paseo, granizados tradicionales y el histórico Paseo de los Turistas.", image: "../../assets/img/exp-puerto.jpg" },
    { category: "Gastronomía", distance: "En el hotel", title: "Restaurante Manglares", description: "Desayuno incluido y cocina local servida cada mañana de 6:30 a 9:30.", image: "../../assets/img/restaurante.jpg" },
  ];
  return (
    <div>
      <section style={{ position: "relative", minHeight: "420px", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}><image-slot id="exp-hero" shape="rect" src="../../assets/img/entorno.jpg" placeholder="Foto del entorno · manglar / playa"></image-slot></div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(20,28,23,0.88), rgba(20,28,23,0.5))", pointerEvents: "none" }} />
        <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "150px", background: "linear-gradient(to bottom, rgba(20,28,23,0.5), transparent)", pointerEvents: "none" }} />
        <div className="container" style={{ ...eContainer, position: "relative", paddingBottom: "48px", paddingTop: "120px", width: "100%", boxSizing: "border-box" }}>
          <div style={{ pointerEvents: "none" }}><SectionHeader onDark title="Vive los alrededores" intro="Naturaleza, playa y cultura a pocos minutos del hotel." /></div>
        </div>
      </section>
      <section className="section-pad" style={{ padding: "72px 0 96px", background: "var(--surface-app)" }}>
        <div className="container" style={eContainer}>
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px" }}>
            {items.map((it) => <ExperienceCard key={it.title} {...it} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactScreen() {
  const { SectionHeader, Input, Select, Button } = ENS;
  const info = [
    ["Dirección", "100 m al sur del Restaurante Linda Mar, detrás de la iglesia de Mata Limón, Caldera, Puntarenas."],
    ["Teléfono", "+506 6334 3148", "tel:+50663343148"],
    ["WhatsApp", "+506 8906 2992", "https://wa.me/50689062992"],
    ["Correo", "info@manglares.com", "mailto:info@manglares.com"],
    ["Recepción", "Check-in 14:00 · Check-out 12:00"],
  ];
  return (
    <div style={{ background: "var(--surface-app)" }}>
      <section style={{ background: "var(--green-700)", padding: "128px 0 56px" }}>
        <div className="container" style={eContainer}><SectionHeader onDark title="Hablemos de tu estadía" intro="Reserva directamente o escríbenos por WhatsApp. Con gusto te ayudamos." /></div>
      </section>
      <section className="section-pad" style={{ padding: "72px 0 96px" }}>
        <div className="container grid-2" style={{ ...eContainer, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", alignItems: "start" }}>
          <form onSubmit={(e) => e.preventDefault()} style={{ background: "var(--white)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: "34px", display: "flex", flexDirection: "column", gap: "18px" }}>
            <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "18px" }}>
              <Input label="Nombre" placeholder="Tu nombre" />
              <Input label="Teléfono" placeholder="+506 …" />
            </div>
            <Input label="Correo electrónico" type="email" placeholder="tucorreo@ejemplo.com" />
            <Select label="Motivo" options={["Reserva", "Consulta de disponibilidad", "Evento / grupo", "Otro"]} />
            <label style={{ display: "flex", flexDirection: "column", gap: "7px", fontFamily: "var(--font-sans)" }}>
              <span style={{ fontSize: "13px", fontWeight: 600, color: "var(--text-body)" }}>Mensaje</span>
              <textarea rows="4" placeholder="Cuéntanos sobre tu estadía…" style={{ fontFamily: "var(--font-sans)", fontSize: "15px", padding: "12px 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-default)", resize: "vertical", color: "var(--text-heading)", outline: "none" }}></textarea>
            </label>
            <Button type="submit" variant="primary" size="lg" style={{ alignSelf: "flex-start" }}>Enviar mensaje</Button>
          </form>
          <div style={{ display: "flex", flexDirection: "column", gap: "28px" }}>
            <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "16/10", boxShadow: "var(--shadow-sm)", background: "var(--green-200)" }}>
              <a href="https://www.google.com/maps/search/?api=1&query=Mata+Lim%C3%B3n%2C+Caldera%2C+Puntarenas" target="_blank" rel="noopener" style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "6px", color: "var(--green-800)", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "14px" }}><span style={{ fontSize: "30px" }}>📍</span>Ver ubicación en Google Maps</a>
              <iframe title="Ubicación Hotel Manglares Lodge" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4912.706745854821!2d-84.70914719999999!3d9.9201699!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa0336d91e0cbd1%3A0x614f3a38123286ed!2sHotel%20Manglares!5e1!3m2!1ses!2scr!4v1785271146153!5m2!1ses!2scr" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }} loading="lazy" referrerPolicy="strict-origin-when-cross-origin"></iframe>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
              {info.map(([k, v, href]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "110px 1fr", gap: "16px", paddingBottom: "14px", borderBottom: "1px solid var(--border-soft)" }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 700, color: "var(--gold-700)" }}>{k}</span>
                  {href
                    ? <a href={href} target={href.startsWith("http") ? "_blank" : undefined} rel="noopener" style={{ fontFamily: "var(--font-sans)", fontSize: "15px", lineHeight: 1.55, color: "var(--text-body)" }}>{v}</a>
                    : <span style={{ fontFamily: "var(--font-sans)", fontSize: "15px", lineHeight: 1.55, color: "var(--text-body)" }}>{v}</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ExperiencesScreen, ContactScreen });