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

/* ---- Datos del menú (transcritos de la carta y el menú de desayunos) ---- */
const CARTA = {
  entradas: [
    { name: "Ceviche Tropical", desc: "Ceviche de camarón con toques de mango y cebolla morada." },
    { name: "Anillos del Pacífico", desc: "Aros de calamar dorados con salsa de la casa." },
    { name: "Explosión Manglares", desc: "Camarón, aguacate y tomate en salsa fresca." },
    { name: "Volcán del Pacífico", desc: "Torre de mariscos coronada con salsa rosada." },
    { name: "Muelle 57", desc: "Ceviche cremoso servido en canasta crocante." },
    { name: "Ensalada del Muelle", desc: "Camarón, aguacate y vegetales frescos." },
  ],
  fuertes: [
    { name: "Muelle Grande 1910", desc: "Gran plato de mariscos surtidos para compartir." },
    { name: "La Barca Perdida", desc: "Langosta y camarones a la parrilla con arroz." },
    { name: "El Pulpo del Pacífico", desc: "Pulpo a la parrilla glaseado sobre puré y camarones." },
    { name: "El Naufragio", desc: "Cazuela de mariscos con mejillones, camarón y calamar." },
    { name: "El Manglar Prohibido", desc: "Camarones en salsa criolla con pan artesanal." },
    { name: "El Contrabandista", desc: "Corte de res con camarones y salsa de la casa." },
    { name: "Tierra y Marea", desc: "Surf & turf: steak y camarones con puré y vegetales." },
    { name: "Costilla Volcánica", desc: "Costillas de cerdo en salsa BBQ con maíz." },
    { name: "La Bestia del Puerto", desc: "Hamburguesa doble con tocino y queso." },
    { name: "Kraken Burger", desc: "Hamburguesa de pan negro con aros de calamar." },
    { name: "La Clásica del Muelle", desc: "Hamburguesa clásica con papas." },
  ],
  postres: [
    { name: "Atardecer en Caldera", desc: "Cheesecake con salsa de frutos rojos." },
    { name: "Coco Salvaje", desc: "Postre de coco con crema chantilly." },
  ],
};

const DESAYUNOS = [
  { group: "Típicos", items: [
    { name: "Típico Costarricense", desc: "Gallo pinto, dos huevos al gusto, plátano maduro, queso fresco, natilla, tortillas caseras y café o jugo natural." },
    { name: "Típico con Huevo Picado", desc: "Gallo pinto con huevo picado y olores frescos, plátano maduro, queso, natilla y tortillas caseras." },
    { name: "El Porteño", desc: "Filete de pescado fresco con gallo pinto, huevos al gusto, plátano maduro y tortillas caseras." },
  ]},
  { group: "Omelets", items: [
    { name: "Omelet Clásico", desc: "Queso mozzarella con jamón, tocino o vegetales. Con fruta fresca y tostadas." },
    { name: "Omelet de Camarones", desc: "Camarones salteados, mozzarella y finas hierbas. Con fruta y pan artesanal." },
  ]},
  { group: "Internacionales", items: [
    { name: "Buenos Días, Capitán", desc: "Desayuno americano: huevos, tocino, salchichas, hash brown y tostadas." },
    { name: "Brisa del Manglar", desc: "Continental: croissant o pan artesanal, mermelada casera y frutas de temporada." },
  ]},
  { group: "Especiales de la casa", items: [
    { name: "Pancakes Mareas & Sabores", desc: "Tres pancakes esponjosos con frutas, mantequilla y miel." },
    { name: "Waffles Tropicales", desc: "Waffle dorado con frutas, chantilly y salsa de frutos rojos." },
  ]},
  { group: "Opciones ligeras", items: [
    { name: "Plato Tropical de Frutas", desc: "Frutas de temporada con yogur natural y granola artesanal." },
    { name: "Tostadas con Aguacate", desc: "Pan artesanal, aguacate, tomate cherry y queso fresco." },
  ]},
];

function GFeature({ 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 MenuItem({ name, desc }) {
  return (
    <div style={{ padding: "13px 0", borderBottom: "1px solid var(--border-soft)" }}>
      <span style={{ fontFamily: "var(--font-display)", fontSize: "20px", fontWeight: 600, color: "var(--text-heading)", display: "block" }}>{name}</span>
      {desc && <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", lineHeight: 1.5, color: "var(--text-muted)", margin: "3px 0 0" }}>{desc}</p>}
    </div>
  );
}

function MenuGroup({ title, items }) {
  return (
    <div style={{ marginBottom: "24px" }}>
      <h4 style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 700, color: "var(--gold-700)", margin: "0 0 4px" }}>{title}</h4>
      {items.map((it) => <MenuItem key={it.name} {...it} />)}
    </div>
  );
}

function GastronomiaScreen({ onNavigate }) {
  const { SectionHeader, Button, Badge } = GNS;
  return (
    <div>
      {/* Hero */}
      <section style={{ position: "relative", background: "var(--green-800)", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 120% at 50% -10%, rgba(198,161,91,0.16), transparent 55%)", pointerEvents: "none" }} />
        <div className="container" style={{ ...gContainer, position: "relative", padding: "150px 32px 96px", textAlign: "center" }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.24em", textTransform: "uppercase", fontWeight: 600, color: "var(--gold-400)" }}>Restaurante del hotel</span>
          <h1 className="hero-title" style={{ fontFamily: "var(--font-display)", fontSize: "60px", lineHeight: 1.05, fontWeight: 500, color: "var(--cream-100)", margin: "16px 0 6px" }}>Entre Mareas <span style={{ fontStyle: "italic" }}>y</span> Sabores</h1>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "24px", fontStyle: "italic", color: "var(--gold-300)", margin: "0 0 16px" }}>Cocina de autor frente al mar</p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "17px", lineHeight: 1.6, color: "rgba(251,247,239,0.82)", margin: "0 auto", maxWidth: "600px" }}>Los sabores del Pacífico costarricense servidos con mariscos frescos del Golfo de Nicoya, cortes a la parrilla y recetas de autor. Caldera, Puntarenas.</p>
          <div style={{ display: "flex", gap: "12px", justifyContent: "center", marginTop: "30px", flexWrap: "wrap" }}>
            <Button variant="primary" href="https://wa.me/50689062992">Reservar mesa</Button>
            <Button variant="outline" onClick={() => onNavigate("contact")}>Contacto</Button>
          </div>
        </div>
      </section>

      {/* Concepto */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--surface-app)" }}>
        <div className="container" style={gContainer}>
          <SectionHeader title="Del Golfo de Nicoya a tu mesa" align="center" intro="Celebramos el mar que nos rodea con ingredientes frescos y locales, presentaciones cuidadas y el sabor honesto de la costa del Pacífico. Desayuno, almuerzo y cena con vista al estuario de Mata Limón." />
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "40px", marginTop: "56px" }}>
            <GFeature title="Mariscos del Pacífico" body="Camarón, pulpo, pescado y calamar fresco del Golfo de Nicoya, en ceviches y platos fuertes." />
            <GFeature title="Cocina de autor" body="Platos insignia creados por nuestra cocina, con nombre y personalidad propios." />
            <GFeature title="Frente al mar" body="Un ambiente relajado, con la brisa y la vista del manglar como acompañantes." />
          </div>
        </div>
      </section>

      {/* Carta */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--surface-warm)" }}>
        <div className="container" style={gContainer}>
          <SectionHeader title="Nuestra carta" align="center" intro="Entradas del mar, platos fuertes de tierra y marea, y postres para cerrar." />
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", marginTop: "48px", alignItems: "start" }}>
            <div>
              <MenuGroup title="Entradas" items={CARTA.entradas} />
              <MenuGroup title="Postres" items={CARTA.postres} />
            </div>
            <div>
              <MenuGroup title="Platos fuertes" items={CARTA.fuertes} />
            </div>
          </div>
        </div>
      </section>

      {/* Desayunos */}
      <section className="section-pad" style={{ padding: "88px 0", background: "var(--surface-app)" }}>
        <div className="container" style={gContainer}>
          <SectionHeader title="Desayunos con vista al mar" align="center" intro="Servidos de 6:30 a 9:30 a. m., para huéspedes y público externo. Todos con opción de café costarricense o jugo natural." />
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", marginTop: "48px", alignItems: "start" }}>
            <div>
              {DESAYUNOS.slice(0, 3).map((g) => <MenuGroup key={g.group} title={g.group} items={g.items} />)}
            </div>
            <div>
              {DESAYUNOS.slice(3).map((g) => <MenuGroup key={g.group} title={g.group} items={g.items} />)}
              <div style={{ marginTop: "8px" }}>
                <h4 style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 700, color: "var(--gold-700)", margin: "0 0 10px" }}>Bebidas</h4>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}><strong style={{ color: "var(--text-body)" }}>Calientes:</strong> café costarricense, café con leche, cappuccino, espresso, chocolate y té.<br /><strong style={{ color: "var(--text-body)" }}>Frías:</strong> jugos naturales (naranja, piña, sandía, maracuyá), batidos (banano, papaya) y agua natural.</p>
              </div>
            </div>
          </div>
          <div style={{ background: "var(--green-700)", borderRadius: "var(--radius-lg)", padding: "26px 30px", marginTop: "44px" }}>
            <h4 style={{ fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: "var(--gold-400)", margin: "0 0 10px" }}>Desayuno buffet</h4>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "15px", lineHeight: 1.65, color: "rgba(251,247,239,0.85)", margin: 0 }}>Incluido para grupos hospedados (+15 pax): estación típica costarricense, panadería, frutas, fríos, bebidas y una estación <strong style={{ color: "var(--cream-100)" }}>WOW</strong> que cambia cada día.</p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-pad" style={{ padding: "80px 0", background: "var(--surface-warm)" }}>
        <div className="container" style={{ ...gContainer, textAlign: "center", maxWidth: "720px" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "36px", fontWeight: 500, margin: "0 0 12px", color: "var(--text-heading)" }}>Reserva tu mesa frente al mar</h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "16px", lineHeight: 1.6, color: "var(--text-muted)", margin: "0 0 26px" }}>Abierto para huéspedes y público externo. Reserva o consulta el menú del día por WhatsApp.</p>
          <div style={{ display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" href="https://wa.me/50689062992">Reservar por WhatsApp</Button>
            <Button variant="outline" size="lg" onClick={() => onNavigate("rooms")}>Ver habitaciones</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { GastronomiaScreen });