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

const ROOMS = [
  { name: "Iguana", slug: "iguana", cat: "Estándar", capacity: "2 personas", config: "1 cama matrimonial", amenities: ["A/C", "TV", "Desayuno"], price: 35000, rating: 4.7, image: "../../assets/img/lapa.jpg", desc: "Habitación estándar acogedora con cama matrimonial, ideal para parejas. Aire acondicionado, TV y desayuno incluido." },
  { name: "Lora", slug: "lora", cat: "Estándar", capacity: "2 personas", config: "1 cama matrimonial", amenities: ["A/C", "TV", "Desayuno"], price: 35000, rating: 4.7, image: "../../assets/img/room-matrimonial.jpg", desc: "Estándar con cama matrimonial, perfecta para dos. Ambiente tranquilo con A/C, TV y desayuno incluido." },
  { name: "Oso Perezoso", slug: "oso-perezoso", cat: "Estándar", badge: "Equipada", capacity: "2 personas", config: "1 cama matrimonial", amenities: ["Cocina", "A/C", "TV"], price: 40000, rating: 4.6, image: "../../assets/img/colibri2.jpg", desc: "Estándar equipada con cocina y cama matrimonial. Ideal para quienes buscan comodidad e independencia." },
  { name: "Rana", slug: "rana", cat: "Familiar", capacity: "3 personas", config: "1 matrimonial + 1 individual", amenities: ["A/C", "TV"], price: 45000, rating: 4.7, image: "../../assets/img/rana.jpg", desc: "Habitación familiar para tres, con una cama matrimonial y una individual. Cómoda y bien ventilada." },
  { name: "Mariposa", slug: "mariposa", cat: "Familiar", capacity: "4 personas", config: "1 matrimonial + 2 individuales", amenities: ["A/C", "TV"], price: 60000, rating: 4.7, image: "../../assets/img/mariposa.jpg", desc: "Familiar para cuatro, con matrimonial y dos individuales. Espacio ideal para familias pequeñas." },
  { name: "Mono Rasta", slug: "mono-rasta", cat: "Familiar", capacity: "4 personas", config: "1 matrimonial + 2 individuales", amenities: ["A/C", "TV"], price: 60000, rating: 4.6, image: "../../assets/img/mono.jpg", desc: "Familiar para cuatro, con matrimonial y dos individuales. Amplia y luminosa." },
  { name: "Delfín", slug: "delfin", cat: "Familiar", capacity: "4 personas", config: "1 matrimonial + 2 individuales", amenities: ["A/C", "TV"], price: 60000, rating: 4.8, image: "../../assets/img/delfin.jpg", desc: "Familiar para cuatro, con matrimonial y dos individuales. Cómoda para toda la familia." },
  { name: "Tortuga", slug: "tortuga", cat: "Familiar", badge: "Equipada", capacity: "4 personas", config: "1 matrimonial + 2 individuales", amenities: ["Cocina", "A/C", "TV"], price: 75000, rating: 4.8, image: "../../assets/img/room-familiar2.jpg", desc: "Familiar equipada con cocina, para cuatro personas. Matrimonial y dos individuales, con total independencia." },
  { name: "Tucán", slug: "tucan", cat: "Familiar", badge: "Equipada", capacity: "5 personas", config: "1 matrimonial + 3 individuales", amenities: ["Cocina", "A/C", "TV"], price: 85000, rating: 4.8, image: "../../assets/img/room-familiar.jpg", desc: "Familiar equipada con cocina, para cinco. Matrimonial y tres individuales: perfecta para grupos." },
  { name: "Colibrí", slug: "colibri", cat: "Apartamento", badge: "Equipada", capacity: "6 personas", config: "1 matrimonial + 2 individuales", amenities: ["Cocina", "A/C", "TV"], price: 90000, rating: 4.9, image: "../../assets/img/colibri.jpg", desc: "Apartamento equipado para seis, con cocina completa, cama matrimonial y dos individuales. Como estar en casa." },
  { name: "Cabaña Ecológica", slug: "cabana-ecologica", cat: "Cabaña", badge: "Vista al mar", capacity: "5 personas", config: "1 Queen + 1 matrimonial", amenities: ["Vista al mar", "A/C", "TV"], price: 75000, rating: 4.9, image: "../../assets/img/cabana-terraza.jpg", desc: "Una cabaña con vista directa al mar, ideal para grupos y familias. Espacios frescos rodeados de vegetación, con la brisa del Pacífico y la tranquilidad del manglar. Capacidad para 5 personas con una cama Queen y una matrimonial.", video: "../../assets/video/cabana.mp4", poster: "../../assets/img/cabana-interior.jpg", gallery: ["../../assets/img/cabana-lounge.jpg", "../../assets/img/cabana-bano.jpg"] },
  { name: "Cabaña Rancho Loma", slug: "cabana-rancho-loma", cat: "Cabaña", badge: "Vista al mar", capacity: "8 personas", config: "2 habitaciones · rancho · piscina", amenities: ["Vista al mar", "Cocina", "Piscina"], price: 140000, rating: 5, image: "../../assets/img/hero.jpg", desc: "Nuestra cabaña más completa: dos habitaciones independientes, cocina equipada, rancho y piscina pequeña, con vista al mar. Para grupos de hasta 8 personas.", video: "../../assets/video/rancho-loma.mp4", poster: "../../assets/img/hero.jpg", gallery: ["../../assets/img/grounds-sea.jpg", "../../assets/img/cabana-exterior.jpg"] },
];
const CATS = ["Todas", "Estándar", "Familiar", "Apartamento", "Cabaña"];

const AMEN_MAP = {
  "Vista al mar": { icon: "sea", label: "Vista al mar" },
  "A/C": { icon: "ac", label: "Aire acondicionado" },
  "TV": { icon: "tv", label: "TV" },
  "Cocina": { icon: "minibar", label: "Cocina equipada" },
  "Piscina": { icon: "pool", label: "Piscina" },
  "Desayuno": { icon: "breakfast", label: "Desayuno incluido" },
};
function roomAmenities(room) {
  const seen = {}, items = [];
  const add = (it) => { if (it && !seen[it.label]) { seen[it.label] = 1; items.push(it); } };
  room.amenities.forEach((a) => add(AMEN_MAP[a]));
  add({ icon: "wifi", label: "WiFi" });
  add({ icon: "breakfast", label: "Desayuno incluido" });
  return items;
}

function RoomsScreen({ onNavigate }) {
  const { SectionHeader, RoomCard, Badge, Button } = RNS;
  const [cat, setCat] = React.useState("Todas");
  const list = cat === "Todas" ? ROOMS : ROOMS.filter((r) => r.cat === cat);
  return (
    <div>
      <section style={{ background: "var(--green-700)", padding: "128px 0 56px" }}>
        <div className="container" style={rContainer}><SectionHeader onDark title="Trece espacios, una misma calma" intro="Cada habitación lleva el nombre de la fauna que nos rodea. Elige la tuya." /></div>
      </section>
      <section style={{ padding: "40px 0 96px", background: "var(--surface-app)" }}>
        <div className="container" style={rContainer}>
          <div style={{ display: "flex", gap: "10px", flexWrap: "wrap", marginBottom: "36px" }}>
            {CATS.map((c) => (
              <button key={c} onClick={() => setCat(c)} style={{
                fontFamily: "var(--font-sans)", fontSize: "13px", fontWeight: 600, cursor: "pointer",
                padding: "9px 18px", borderRadius: "var(--radius-pill)",
                border: `1px solid ${cat === c ? "var(--gold-500)" : "var(--border-default)"}`,
                background: cat === c ? "var(--gold-500)" : "var(--white)",
                color: cat === c ? "var(--ink-900)" : "var(--text-body)",
              }}>{c}</button>
            ))}
          </div>
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "26px" }}>
            {list.map((r) => <RoomCard key={r.name} {...r} onCta={() => onNavigate("room", r.slug)} />)}
          </div>
        </div>
      </section>

      {/* Corporativas */}
      <section style={{ background: "var(--green-700)" }}>
        <div className="container" style={{ ...rContainer, padding: "72px 32px" }}>
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", alignItems: "center" }}>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "4/3" }}>
              <img src="../../assets/img/corp.jpg" alt="Habitaciones corporativas Hotel Manglares" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div>
              <SectionHeader onDark title="Habitaciones corporativas" intro="A pocos metros del hotel, pensadas para trabajadores, empresas y estadías prolongadas. Incluyen parqueo, aire acondicionado, TV y desayuno servido en el restaurante." />
              <div style={{ display: "flex", gap: "32px", flexWrap: "wrap", margin: "24px 0 26px" }}>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "34px", fontWeight: 600, color: "var(--cream-100)", lineHeight: 1.1 }}>₡23.000</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "rgba(251,247,239,0.72)", marginTop: "2px" }}>por persona / noche · solo hospedaje</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "34px", fontWeight: 600, color: "var(--cream-100)", lineHeight: 1.1 }}>₡27.000</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "rgba(251,247,239,0.72)", marginTop: "2px" }}>paquete + 3 tiempos de comida</div>
                </div>
              </div>
              <Button variant="primary" href="https://wa.me/50689062992">Consultar convenio empresarial</Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function RoomDetailScreen({ onNavigate, param }) {
  const { SectionHeader, AmenityList, Rating, Badge, Button, PriceTag } = RNS;
  const bp = window.useBP ? window.useBP() : { mobile: false };
  const room = ROOMS.find((r) => r.slug === param) || ROOMS.find((r) => r.slug === "cabana-ecologica");
  const subs = (room.gallery || []).slice(0, 2);
  const amen = roomAmenities(room);
  const rimg = { width: "100%", height: "100%", objectFit: "cover", display: "block" };
  return (
    <div style={{ background: "var(--surface-app)" }}>
      <div className="container" style={{ ...rContainer, paddingTop: "28px" }}>
        <a onClick={() => onNavigate("rooms")} style={{ fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 600, color: "var(--text-muted)", cursor: "pointer" }}>← Habitaciones</a>
      </div>
      {/* Gallery */}
      <div className="container rd-gallery" style={{ ...rContainer, marginTop: "18px", display: "grid", gridTemplateColumns: subs.length ? "2fr 1fr" : "1fr", gap: "12px" }}>
        <div className="rd-gallery-main" style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", height: "440px" }}>
          {room.video
            ? <video autoPlay muted loop playsInline poster={room.poster || room.image} style={rimg}><source src={room.video} type="video/mp4" /></video>
            : <img src={room.image} alt={room.name} style={rimg} />}
        </div>
        {subs.length > 0 && (
          <div className="rd-gallery-sub" style={{ display: "grid", gridTemplateRows: subs.length > 1 ? "1fr 1fr" : "1fr", gap: "12px", height: "440px" }}>
            {subs.map((s, i) => <div key={i} style={{ borderRadius: "var(--radius-lg)", overflow: "hidden" }}><img src={s} alt={room.name + " detalle"} style={rimg} /></div>)}
          </div>
        )}
      </div>
      {/* Body */}
      <div className="container rd-body" style={{ ...rContainer, padding: "56px 32px 96px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: "56px", alignItems: "start" }}>
        <div>
          <div style={{ display: "flex", gap: "10px", marginBottom: "14px" }}>
            {room.badge && <Badge tone="gold">{room.badge}</Badge>}
            <Badge tone="green" subtle>Disponible</Badge>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "48px", fontWeight: 500, margin: "0 0 8px", color: "var(--text-heading)" }}>{room.name}</h1>
          <div style={{ display: "flex", alignItems: "center", gap: "16px", flexWrap: "wrap", marginBottom: "6px" }}>
            <Rating value={room.rating} showValue />
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)" }}>{room.capacity} · {room.config}</span>
          </div>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "17px", lineHeight: 1.7, color: "var(--text-body)", margin: "18px 0 0", maxWidth: "560px" }}>{room.desc}</p>
          <div style={{ margin: "36px 0" }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: "26px", fontWeight: 600, margin: "0 0 20px", color: "var(--text-heading)" }}>Amenidades</h3>
            <AmenityList columns={2} items={amen} />
          </div>
          <div style={{ background: "var(--cream-100)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", padding: "22px 26px" }}>
            <h4 style={{ fontFamily: "var(--font-sans)", fontSize: "13px", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 700, color: "var(--gold-700)", margin: "0 0 10px" }}>Políticas</h4>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", lineHeight: 1.7, color: "var(--text-muted)", margin: 0 }}>Check-in 14:00 · Check-out 12:00 · Cancelación gratuita hasta 48 h antes · Niños de 0 a 4 años sin costo en camas existentes.</p>
          </div>
        </div>
        {/* Booking sidebar */}
        <div className="rd-aside" style={{ position: "sticky", top: "96px", background: "var(--white)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-md)", padding: "26px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: "20px" }}>
            <PriceTag amount={room.price} size="lg" />
          </div>
          <Button variant="primary" size="lg" href={window.RESERVA_URL} style={{ width: "100%", boxSizing: "border-box", display: "block", textAlign: "center" }}>{bp.mobile ? "Reservar" : "Consultar disponibilidad"}</Button>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--text-subtle)", textAlign: "center", marginTop: "14px" }}>Reserva directa · Confirmación inmediata</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RoomsScreen, RoomDetailScreen });