const NS = window.HotelManglaresLodgeCaldera_e07d8c;

const container = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };
const section = (extra) => ({ padding: "88px 0", ...extra });

function Feature({ title, body }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: "24px", fontWeight: 600, margin: "0", color: "var(--text-heading)" }}>{title}</h3>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>{body}</p>
    </div>
  );
}

function VideoCard({ src, poster, label }) {
  const [play, setPlay] = React.useState(false);
  return (
    <div onClick={() => setPlay(true)} style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "16 / 10", background: "var(--green-900, #1a2a20)", cursor: play ? "default" : "pointer" }}>
      {play ? (
        <video src={src} autoPlay controls playsInline style={{ width: "100%", height: "100%", objectFit: "contain", display: "block", background: "#141c17" }} />
      ) : (
        <>
          <img src={poster} alt={label} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(20,28,23,0.6), rgba(20,28,23,0.05))" }} />
          <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: "64px", height: "64px", borderRadius: "50%", background: "rgba(253,251,246,0.92)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-md)" }}>
            <span style={{ marginLeft: "5px", width: 0, height: 0, borderStyle: "solid", borderWidth: "11px 0 11px 18px", borderColor: "transparent transparent transparent var(--green-700)" }} />
          </div>
          <span style={{ position: "absolute", left: "18px", bottom: "16px", fontFamily: "var(--font-display)", fontSize: "23px", fontWeight: 600, color: "var(--cream-100)" }}>{label}</span>
        </>
      )}
    </div>
  );
}

function HomeScreen({ onNavigate }) {
  const { SectionHeader, BookingBar, RoomCard, ExperienceCard, AmenityList, Rating, Button, Badge } = NS;
  const bp = window.useBP ? window.useBP() : { mobile: false };
  return (
    <div>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: "660px", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <video autoPlay muted loop playsInline poster="../../assets/img/hero.jpg" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}>
            <source src="../../assets/video/hero.mp4" type="video/mp4" />
          </video>
        </div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(20,28,23,0.86) 0%, rgba(20,28,23,0.30) 45%, rgba(20,28,23,0.55) 100%)", 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={{ ...container, position: "relative", paddingBottom: "64px", paddingTop: "120px", width: "100%", boxSizing: "border-box" }}>
          <div style={{ maxWidth: "640px", pointerEvents: "none" }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.24em", textTransform: "uppercase", fontWeight: 600, color: "var(--gold-300)" }}>Caldera · Puntarenas · Costa Rica</span>
            <h1 className="hero-title" style={{ fontFamily: "var(--font-display)", fontSize: "68px", lineHeight: 1.02, fontWeight: 500, color: "var(--cream-100)", margin: "14px 0 18px" }}>Hotel Manglares Lodge</h1>
            <p className="hero-lead" style={{ fontFamily: "var(--font-sans)", fontSize: "19px", lineHeight: 1.55, color: "rgba(251,247,239,0.9)", margin: 0, maxWidth: "540px" }}>Descansa, disfruta y vive una experiencia única entre naturaleza, gastronomía y hospitalidad.</p>
          </div>
          <div style={{ marginTop: "34px", display: "flex", gap: "18px", alignItems: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" href={window.RESERVA_URL}>Reservar ahora</Button>
            <a onClick={() => onNavigate("rooms")} style={{ fontFamily: "var(--font-sans)", fontSize: "15px", fontWeight: 600, color: "var(--cream-100)", cursor: "pointer", borderBottom: "2px solid var(--gold-400)", paddingBottom: "3px" }}>Ver habitaciones →</a>
          </div>
        </div>
      </section>

      {/* Por qué hospedarse */}
      <section className="section-pad" style={{ ...section(), background: "var(--surface-app)" }}>
        <div className="container" style={container}>
          <SectionHeader title="Un refugio entre el manglar y el mar" align="center" intro="Trece habitaciones inspiradas en la fauna local, restaurante propio y la calidez de un hotel familiar en la costa del Pacífico." />
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "40px", marginTop: "56px" }}>
            <Feature title="Naturaleza" body="A pasos del estuario de Mata Limón y sus manglares, entre iguanas, monos y aves." />
            <Feature title="Gastronomía" body="Restaurante propio con desayuno incluido, servido cada mañana de 6:30 a 9:30." />
            <Feature title="Hospitalidad" body="Atención personalizada y reserva directa con nosotros, sin intermediarios." />
          </div>
        </div>
      </section>

      {/* Habitaciones */}
      <section className="section-pad" style={{ ...section(), background: "var(--surface-warm)" }}>
        <div className="container" style={container}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "24px", flexWrap: "wrap" }}>
            <SectionHeader title="Espacios para cada viaje" />
            <Button variant="ghost" onClick={() => onNavigate("rooms")}>Ver todas →</Button>
          </div>
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "26px", marginTop: "44px" }}>
            <RoomCard name="Iguana" capacity="2 personas" config="1 cama matrimonial" amenities={["A/C", "TV", "Desayuno"]} price={35000} rating={4.7} image="../../assets/img/lapa.jpg" onCta={() => onNavigate("room")} />
            <RoomCard name="Tucán" 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" onCta={() => onNavigate("room")} />
            <RoomCard name="Cabaña Ecológica" 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" onCta={() => onNavigate("room")} />
          </div>
        </div>
      </section>

      {/* Video tour */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--green-800)" }}>
        <div className="container" style={container}>
          <SectionHeader onDark title="Recorre nuestros espacios" align="center" intro="Un vistazo real a las habitaciones y cabañas del Hotel Manglares Lodge." />
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginTop: "48px" }}>
            <VideoCard src="../../assets/video/rancho-loma.mp4" poster="../../assets/video/rancho-loma-poster.jpg?v=2" label="Cabaña Rancho Loma" />
            <VideoCard src="../../assets/video/mariposa-tour.mp4" poster="../../assets/video/mariposa-tour-poster.jpg?v=2" label="Mariposa" />
            <VideoCard src="../../assets/video/tucan.mp4" poster="../../assets/video/tucan-poster.jpg?v=2" label="Tucán" />
            <VideoCard src="../../assets/video/colibri-tour.mp4" poster="../../assets/video/colibri-tour-poster.jpg?v=2" label="Colibrí" />
          </div>
        </div>
      </section>

      {/* Experiencias */}
      <section className="section-pad" style={{ ...section(), background: "var(--surface-app)" }}>
        <div className="container" style={container}>
          <SectionHeader title="Qué hacer alrededor" align="center" />
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px", marginTop: "48px" }}>
            <ExperienceCard category="Naturaleza" distance="A 5 min" title="Manglares de Mata Limón" description="Recorrido en kayak por el estuario y su fauna." image="../../assets/img/grounds-sea.jpg" />
            <ExperienceCard category="Playa" distance="A 5 min" title="Playa Caldera" description="Arena y atardeceres sobre el Pacífico." image="../../assets/img/exp-playa.jpg" />
            <ExperienceCard category="Tour" distance="A 25 min" title="Isla San Lucas" description="Historia y senderos en el Parque Nacional." image="../../assets/img/exp-isla.jpg" />
          </div>
        </div>
      </section>

      {/* Servicios / Amenidades band */}
      <section style={{ background: "var(--green-700)" }}>
        <div className="container" style={{ ...container, padding: "80px 32px" }}>
          <div className="home-band" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "64px", alignItems: "center" }}>
            <SectionHeader onDark title="Todo lo que necesitas para descansar" intro="Cada habitación equipada para tu comodidad; áreas comunes para disfrutar en familia." />
            <div className="amenity-dark" style={{ background: "rgba(251,247,239,0.06)", borderRadius: "var(--radius-lg)", padding: "34px" }}>
              <AmenityList columns={2} items={[
                { icon: "wifi", label: "WiFi" }, { icon: "ac", label: "Aire acondicionado" },
                { icon: "breakfast", label: "Desayuno incluido" }, { icon: "pool", label: "Piscina" },
                { icon: "parking", label: "Parqueo" }, { icon: "sea", label: "Vista al mar" },
                { icon: "tv", label: "TV" }, { icon: "minibar", label: "Minibar" }]} />
            </div>
          </div>
        </div>
      </section>

      {/* Opiniones */}
      <section className="section-pad" style={{ ...section(), background: "var(--surface-warm)" }}>
        <div className="container" style={{ ...container, maxWidth: "760px", textAlign: "center" }}>
          <Rating value={5} size={20} />
          <p style={{ fontFamily: "var(--font-display)", fontSize: "32px", fontStyle: "italic", lineHeight: 1.35, color: "var(--text-heading)", margin: "20px 0 18px" }}>“Un lugar tranquilo, familiar y rodeado de naturaleza. El desayuno y la atención fueron excelentes. Volveremos.”</p>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 600, color: "var(--text-muted)", letterSpacing: "0.04em" }}>María J. · Huésped verificada</span>
        </div>
      </section>

      {/* Ubicación */}
      <section className="section-pad" style={{ ...section({ paddingTop: "72px", paddingBottom: "0" }) }}>
        <div className="container" style={container}>
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", alignItems: "center", paddingBottom: "88px" }}>
            <div>
              <SectionHeader title="Cómo llegar" intro="100 m al sur del Restaurante Linda Mar, detrás de la iglesia católica de Mata Limón, Caldera, Puntarenas." />
              <div style={{ marginTop: "24px", display: "flex", gap: "12px", flexWrap: "wrap" }}>
                <Button variant="secondary" href="https://www.google.com/maps/search/Puntarenas%2C+Costa+Rica/">Abrir en Google Maps</Button>
                <Button variant="outline" onClick={() => onNavigate("contact")}>Contacto</Button>
              </div>
            </div>
            <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "4/3", 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>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen });