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

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

const NEARBY = [
  ["Playa Caldera", "A 5 min"],
  ["Manglares de Mata Limón", "A 5 min"],
  ["Puerto de Puntarenas", "A 15 min"],
  ["Isla San Lucas", "A 25 min"],
];

function NosotrosScreen({ onNavigate }) {
  const { SectionHeader, Button } = XNS;
  return (
    <div>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: "460px", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <img src="../../assets/img/grounds-sea.jpg" alt="Hotel Manglares Lodge, frente al estuario de Mata Limón" 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.9), rgba(20,28,23,0.4))", 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={{ ...xContainer, position: "relative", paddingBottom: "52px", paddingTop: "150px", width: "100%", boxSizing: "border-box" }}>
          <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: "56px", lineHeight: 1.05, fontWeight: 500, color: "var(--cream-100)", margin: "12px 0 0", maxWidth: "640px" }}>Un hotel familiar frente al mar</h1>
        </div>
      </section>

      {/* Historia */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--surface-app)" }}>
        <div className="container" style={xContainer}>
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", alignItems: "center" }}>
            <div>
              <SectionHeader title="Nuestra historia" />
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "17px", lineHeight: 1.75, color: "var(--text-body)", margin: "18px 0 0" }}>Hotel Manglares Lodge nació del deseo de compartir la calma de la costa del Pacífico costarricense. En Mata Limón, Caldera —entre el estuario, el manglar y el mar— ofrecemos un descanso auténtico, con la calidez de un hotel familiar.</p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "17px", lineHeight: 1.75, color: "var(--text-body)", margin: "18px 0 0" }}>Cada una de nuestras trece habitaciones lleva el nombre de la fauna que nos rodea —iguanas, tucanes, colibríes, monos— porque aquí la naturaleza es parte de la experiencia. Reserva directa, atención personalizada y las ganas de que te sientas como en casa.</p>
            </div>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "4/3" }}>
              <img src="../../assets/img/hero.jpg" alt="Áreas comunes del Hotel Manglares Lodge" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* Lo que nos define */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--surface-warm)" }}>
        <div className="container" style={xContainer}>
          <SectionHeader title="Lo que nos define" align="center" intro="Naturaleza, familia y buena mesa: la esencia de Manglares Lodge." />
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "40px 56px", marginTop: "52px" }}>
            <Value title="Naturaleza" body="Rodeados de manglares, aves y vida silvestre, a pasos del estuario de Mata Limón." />
            <Value title="Hospitalidad familiar" body="Atención cercana y personalizada. Reservas directas con nosotros, sin intermediarios." />
            <Value title="Gastronomía" body="Restaurante propio, Entre Mareas y Sabores, con mariscos frescos del Golfo de Nicoya." />
            <Value title="Descanso frente al mar" body="Habitaciones y cabañas con vista al mar, piscina y áreas para disfrutar en familia." />
          </div>
        </div>
      </section>

      {/* Frase de marca */}
      <section style={{ background: "var(--green-800)" }}>
        <div className="container" style={{ ...xContainer, padding: "80px 32px", textAlign: "center", maxWidth: "820px" }}>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "34px", fontStyle: "italic", lineHeight: 1.35, color: "var(--cream-100)", margin: 0 }}>“Descansa, disfruta y vive una experiencia única entre naturaleza, gastronomía y hospitalidad.”</p>
        </div>
      </section>

      {/* Entorno */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--surface-app)" }}>
        <div className="container" style={xContainer}>
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px", alignItems: "center" }}>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "4/3" }}>
              <img src="../../assets/img/exp-playa.jpg" alt="Playa Caldera, cerca del hotel" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div>
              <SectionHeader title="Nuestro entorno" intro="Estamos en Mata Limón, Caldera, a orillas del estuario y a pocos minutos de la playa, el puerto y los principales atractivos de la zona." />
              <div style={{ marginTop: "24px" }}>
                {NEARBY.map(([place, dist]) => (
                  <div key={place} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", padding: "13px 0", borderBottom: "1px solid var(--border-soft)" }}>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: "16px", fontWeight: 600, color: "var(--text-heading)" }}>{place}</span>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: "13px", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--gold-700)", whiteSpace: "nowrap" }}>{dist}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: "26px", display: "flex", gap: "12px", flexWrap: "wrap" }}>
                <Button variant="secondary" onClick={() => onNavigate("experiences")}>Ver experiencias</Button>
                <Button variant="outline" onClick={() => onNavigate("contact")}>Cómo llegar</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-pad" style={{ padding: "80px 0", background: "var(--surface-warm)" }}>
        <div className="container" style={{ ...xContainer, textAlign: "center", maxWidth: "720px" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "36px", fontWeight: 500, margin: "0 0 12px", color: "var(--text-heading)" }}>Ven a conocernos</h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "16px", lineHeight: 1.6, color: "var(--text-muted)", margin: "0 0 26px" }}>Reserva directa, sin intermediarios. Con gusto te ayudamos a planear tu estadía.</p>
          <div style={{ display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" href={window.RESERVA_URL}>Reservar ahora</Button>
            <Button variant="outline" size="lg" onClick={() => onNavigate("rooms")}>Ver habitaciones</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { NosotrosScreen });
