/* Comer Sol — Landing · Colección Montés (Montés Samaná) */
const NS = window.ColecciNMontSDesignSystem_884f38 || {};
const { Button, Eyebrow, Hairline, Badge } = NS;
const { useState, useEffect, useRef } = React;

const A = window.ASSET;
const D = window.CS_DATA;
const wa = (msg) => `https://wa.me/${D.meta.whatsapp}?text=${encodeURIComponent(msg)}`;
const WA_RESERVA = wa("Hola, quiero reservar mi cupo para el retiro Comer Sol (13–16 nov).");

/* ---------- átomos locales ---------- */
function SectionEyebrow({ on = "light", children }) {
  return (
    <div style={{
      fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "var(--fs-eyebrow)",
      letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase",
      color: on === "dark" ? "var(--beige-arena)" : "var(--text-accent)",
    }}>{children}</div>
  );
}

/* ============================ HEADER ============================ */
function Header() {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["El retiro", "#retiro"], ["Itinerario", "#itinerario"],
    ["Talleristas", "#talleristas"], ["Precios", "#precios"], ["FAQ", "#faq"],
  ];
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menu ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menu]);
  const opaque = solid || menu;
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      transition: "background var(--dur) var(--ease-calm), border-color var(--dur) var(--ease-calm)",
      background: opaque ? "var(--verde-bosque)" : "transparent",
      borderBottom: `1px solid ${opaque ? "var(--hairline-on-dark)" : "transparent"}`,
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", gap: 18, height: 72 }}>
        <a href="#top" onClick={() => setMenu(false)} style={{ display: "flex", alignItems: "center", gap: 11, textDecoration: "none" }}>
          <img src={A + "logos/montes-simbolo.png"} alt="" style={{ width: 30, height: 30, objectFit: "contain" }} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, letterSpacing: "0.01em", color: "var(--crema-papel)" }}>Montés Samaná</span>
        </a>
        <nav className="cs-nav" style={{ marginLeft: "auto", display: "flex", gap: 30 }}>
          {links.map(([t, h]) => (
            <a key={h} href={h} className="cs-navlink" style={{
              fontFamily: "var(--font-sans)", fontWeight: 400, fontSize: 12.5, letterSpacing: "0.04em",
              color: "var(--beige-arena)", textDecoration: "none", textTransform: "uppercase",
            }}>{t}</a>
          ))}
        </nav>
        <a href={WA_RESERVA} target="_blank" rel="noopener" className="cs-headcta" style={{
          fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase",
          color: "var(--verde-bosque)", background: "var(--beige-arena)", padding: "10px 20px", textDecoration: "none",
          marginLeft: 4, transition: "opacity var(--dur) var(--ease-calm)",
        }}>Reservar</a>
        <button className="cs-burger" aria-label="Menú" aria-expanded={menu} onClick={() => setMenu(!menu)} style={{
          marginLeft: "auto", display: "none", flexDirection: "column", justifyContent: "center", gap: 5,
          width: 44, height: 44, background: "transparent", border: "none", cursor: "pointer", padding: 0,
        }}>
          <span style={{ display: "block", height: 1.5, width: 24, background: "var(--crema-papel)", transition: "transform var(--dur) var(--ease-calm)", transform: menu ? "translateY(6.5px) rotate(45deg)" : "none" }} />
          <span style={{ display: "block", height: 1.5, width: 24, background: "var(--crema-papel)", transition: "opacity var(--dur) var(--ease-calm)", opacity: menu ? 0 : 1 }} />
          <span style={{ display: "block", height: 1.5, width: 24, background: "var(--crema-papel)", transition: "transform var(--dur) var(--ease-calm)", transform: menu ? "translateY(-6.5px) rotate(-45deg)" : "none" }} />
        </button>
      </div>

      {/* ---- Panel móvil ---- */}
      <div className="cs-mobile-menu" style={{
        position: "fixed", top: 72, left: 0, right: 0, bottom: 0, zIndex: 49,
        background: "var(--verde-bosque)", display: menu ? "flex" : "none", flexDirection: "column",
        padding: "24px clamp(20px,5vw,56px) 40px",
      }}>
        <nav style={{ display: "flex", flexDirection: "column" }}>
          {links.map(([t, h]) => (
            <a key={h} href={h} onClick={() => setMenu(false)} style={{
              fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, letterSpacing: "-0.01em",
              color: "var(--crema-papel)", textDecoration: "none", padding: "18px 0",
              borderBottom: "1px solid var(--hairline-on-dark)",
            }}>{t}</a>
          ))}
        </nav>
        <a href={WA_RESERVA} target="_blank" rel="noopener" onClick={() => setMenu(false)} style={{
          marginTop: 32, textAlign: "center", fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14,
          letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--verde-bosque)",
          background: "var(--beige-arena)", padding: "16px 20px", textDecoration: "none",
        }}>Reservar cupo</a>
      </div>
    </header>
  );
}

/* ============================ HERO ============================ */
function Hero() {
  return (
    <section id="top" style={{ position: "relative", minHeight: "100svh", display: "flex", alignItems: "flex-end", overflow: "hidden", background: "var(--verde-bosque-900)" }}>
      <img src={A + "photos/activity-4.png"} alt="Bosque de niebla en Montés Samaná" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(8,20,14,0.55) 0%, rgba(8,20,14,0.18) 32%, rgba(8,20,14,0.28) 56%, rgba(6,16,11,0.86) 100%)" }} />
      <div className="wrap" style={{ position: "relative", paddingBottom: "clamp(56px,9vh,104px)", paddingTop: 120 }}>
        <div style={{ maxWidth: 880 }}>
          <SectionEyebrow on="dark">{D.meta.bajada} · Montés Samaná</SectionEyebrow>
          <h1 style={{
            margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: "clamp(64px, 13vw, 184px)", lineHeight: 0.92, letterSpacing: "-0.02em", color: "var(--crema-papel)",
          }}>Comer Sol.</h1>
          <p style={{
            margin: "26px 0 0", maxWidth: 580, fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(19px, 2.4vw, 26px)", lineHeight: 1.45, color: "var(--beige-arena)", textWrap: "pretty",
          }}>Cuatro días en el bosque donde la luz se vuelve alimento — y el alimento, conciencia.</p>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16, marginTop: 38 }}>
            <Button on="dark" variant="solid" size="lg" href={WA_RESERVA} target="_blank" rel="noopener">Reservar cupo</Button>
            <Button on="dark" variant="outline" size="lg" href="#itinerario">Ver itinerario</Button>
            <span style={{ marginLeft: 4, display: "flex", flexWrap: "wrap", gap: 10 }}>
              <Badge on="dark" variant="outline">{D.meta.fechas}</Badge>
              <Badge on="dark" variant="outline">{D.meta.duracion}</Badge>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ MANIFIESTO ============================ */
function Manifiesto() {
  const pasos = [
    ["01", "Bosque", "La fotosíntesis convierte luz solar en materia viva. Todo empieza ahí."],
    ["02", "Alimento", "El territorio la transporta al plato: lo que crece cerca, en su punto."],
    ["03", "Cuerpo", "La recibimos tres veces al día. Por una vez, con atención."],
  ];
  return (
    <section id="retiro" style={{ background: "var(--crema-papel)", color: "var(--text-primary)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap">
        <SectionEyebrow>Bosque · Alimento · Cuerpo</SectionEyebrow>
        <h2 style={{
          margin: "26px 0 0", maxWidth: 18 + "ch", fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: "clamp(34px, 5.4vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.015em",
        }}>El bosque convierte luz solar en vida.</h2>
        <p style={{
          margin: "30px 0 0", maxWidth: 620, fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(18px,2vw,21px)", lineHeight: 1.7, color: "var(--text-secondary)", textWrap: "pretty",
        }}>
          Nosotros la recibimos tres veces al día, y casi nunca nos preguntamos cómo. Comer Sol es un
          retiro de cuatro días en Montés Samaná para seguir esa cadena con las manos — del bosque al plato,
          del plato al cuerpo. No es un retiro de bienestar. Es aprender a comer de otra manera.
        </p>
        <div style={{ marginTop: "clamp(48px,7vh,84px)" }} className="cs-pasos">
          {pasos.map(([n, t, d]) => (
            <div key={n} style={{ paddingTop: 22, borderTop: "1px solid var(--hairline-on-light)" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 12, letterSpacing: "0.16em", color: "var(--samana)" }}>{n}</div>
              <h3 style={{ margin: "16px 0 10px", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(24px,2.6vw,30px)", letterSpacing: "-0.01em" }}>{t}</h3>
              <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 17, lineHeight: 1.65, color: "var(--text-secondary)", textWrap: "pretty" }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ STATEMENT (foto full-bleed) ============================ */
function Statement() {
  return (
    <section style={{ position: "relative", minHeight: "78vh", display: "flex", alignItems: "flex-end", overflow: "hidden", background: "var(--verde-bosque-900)" }}>
      <img src={A + "photos/food-plate.png"} alt="Almuerzo del territorio en Montés Samaná" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,12,6,0.34) 0%, rgba(20,12,6,0.12) 34%, rgba(16,10,5,0.8) 100%)" }} />
      <div className="wrap" style={{ position: "relative", paddingTop: 110, paddingBottom: "clamp(56px,9vh,96px)" }}>
        <SectionEyebrow on="dark">Cuatro días en el bosque</SectionEyebrow>
        <h2 style={{
          margin: "22px 0 0", maxWidth: 16 + "ch", fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: "clamp(34px,6vw,76px)", lineHeight: 1.0, letterSpacing: "-0.02em", color: "var(--crema-papel)",
        }}>No es un retiro de bienestar.</h2>
        <p style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(20px,2.6vw,28px)", color: "var(--beige-arena)" }}>Es aprender a comer de otra manera.</p>
      </div>
    </section>
  );
}

/* ============================ INCLUYE / MENÚ ============================ */
function Incluye() {
  return (
    <section style={{ background: "var(--crema-papel)", color: "var(--text-primary)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap cs-two cs-incluye">
        <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", background: "var(--verde-bosque-900)" }}>
          <img src={A + "photos/cs-zanahoria-sol.jpg"} alt="Zanahoria del huerto bañada en sol" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
        <div>
          <SectionEyebrow>Qué incluye</SectionEyebrow>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(32px,4.4vw,52px)", lineHeight: 1.02, letterSpacing: "-0.015em" }}>Comer sol, literalmente.</h2>
          <p style={{ margin: "18px 0 0", maxWidth: 460, fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 18, lineHeight: 1.7, color: "var(--text-secondary)", textWrap: "pretty" }}>Lo que crece aquí termina en el plato. El plan cubre todo lo que necesitas para vivir la cadena completa, sin preocuparte por la logística.</p>
          <ul style={{ listStyle: "none", margin: "30px 0 0", padding: 0 }}>
            {D.incluye.map((item, i) => (
              <li key={i} style={{ display: "flex", gap: 16, padding: "15px 0", borderTop: "1px solid var(--hairline-on-light)", fontFamily: "var(--font-display)", fontSize: 17, lineHeight: 1.5, color: "var(--text-primary)" }}>
                <span style={{ flexShrink: 0, fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 11, letterSpacing: "0.1em", color: "var(--samana)", marginTop: 5 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ textWrap: "pretty" }}>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ============================ ITINERARIO (acordeón) ============================ */
function DiaRow({ dia, open, onToggle }) {
  return (
    <div style={{ borderTop: "1px solid var(--hairline-on-dark)" }}>
      <button onClick={onToggle} aria-expanded={open} style={{
        width: "100%", background: "transparent", border: "none", cursor: "pointer",
        display: "flex", alignItems: "baseline", gap: "clamp(16px,3vw,40px)", padding: "28px 0", textAlign: "left", color: "var(--crema-papel)",
      }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(30px,4vw,52px)", color: "var(--beige-arena)", lineHeight: 1, minWidth: "1.6em" }}>{dia.n}</span>
        <span style={{ flex: 1 }}>
          <span style={{ display: "block", fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--beige-arena)", marginBottom: 8 }}>{dia.lema}</span>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(26px,3.4vw,40px)", letterSpacing: "-0.01em" }}>{dia.titulo}</span>
        </span>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 26, color: "var(--beige-arena)", transition: "transform var(--dur) var(--ease-calm)", transform: open ? "rotate(45deg)" : "none", lineHeight: 1 }}>+</span>
      </button>
      <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows var(--dur-slow) var(--ease-calm)" }}>
        <div style={{ overflow: "hidden" }}>
          <div className="cs-dia-body" style={{ paddingBottom: 40 }}>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {dia.momentos.map((m, i) => (
                <div key={i} className="cs-momento" style={{ display: "grid", gridTemplateColumns: "150px 1fr", gap: "clamp(16px,3vw,40px)", padding: "16px 0", borderTop: "1px solid var(--hairline-on-dark)" }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontWeight: 400, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--beige-arena)", paddingTop: 4 }}>{m.t}</span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 18, lineHeight: 1.6, color: "var(--crema-papel)", textWrap: "pretty" }}>{m.d}</span>
                </div>
              ))}
            </div>
            {dia.semilla && (
              <div style={{ marginTop: 26, paddingTop: 22, borderTop: "1px solid var(--beige-arena)" }}>
                <span style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--beige-arena)" }}>Última semilla de la noche</span>
                <p style={{ margin: "12px 0 0", fontFamily: "var(--font-display)", fontWeight: 400, fontStyle: "italic", fontSize: "clamp(20px,2.6vw,28px)", lineHeight: 1.3, color: "var(--crema-papel)", maxWidth: "24ch", textWrap: "pretty" }}>{dia.semilla}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function Itinerario() {
  const [open, setOpen] = useState(0);
  return (
    <section id="itinerario" style={{ background: "var(--verde-bosque)", color: "var(--crema-papel)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: "clamp(40px,6vh,72px)" }}>
          <SectionEyebrow on="dark">Itinerario · día a día</SectionEyebrow>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px,5vw,64px)", lineHeight: 1.0, letterSpacing: "-0.015em" }}>Cuatro días, cuatro movimientos.</h2>
          <p style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 18, lineHeight: 1.7, color: "var(--beige-arena)", maxWidth: 560, textWrap: "pretty" }}>Ver, origen, transformación, integración. Cada día sigue un tramo de la cadena que va del bosque al cuerpo, y cierra con una pregunta para llevar a la cama.</p>
        </div>
        <div style={{ borderBottom: "1px solid var(--hairline-on-dark)" }}>
          {D.itinerario.map((dia, i) => (
            <DiaRow key={dia.n} dia={dia} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ TALLERISTAS ============================ */
function Talleristas() {
  return (
    <section id="talleristas" style={{ background: "var(--crema-papel)", color: "var(--text-primary)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap">
        <div style={{ maxWidth: 680, marginBottom: "clamp(40px,6vh,64px)" }}>
          <SectionEyebrow>Quién lo facilita</SectionEyebrow>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px,5vw,60px)", lineHeight: 1.0, letterSpacing: "-0.015em" }}>Dos oficios, una misma pregunta.</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--hairline-on-light)", border: "1px solid var(--hairline-on-light)" }}>
          {D.facilitadores.map((f, i) => (
            <div key={i} className="cs-fac" style={{ display: "grid", gridTemplateColumns: "minmax(0,0.9fr) 1.4fr", background: "var(--crema-papel)" }}>
              <div style={{ position: "relative", aspectRatio: "3/4", overflow: "hidden", background: "var(--verde-bosque-900)" }}>
                <img src={A + f.portrait} alt={f.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 3, background: "var(--samana)" }} />
              </div>
              <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 16, padding: "clamp(28px,4vw,56px)" }}>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)" }}>{f.role}</div>
                <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(28px,3.2vw,42px)", lineHeight: 1.02, letterSpacing: "-0.01em" }}>{f.name}</h3>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 13, color: "var(--samana)", letterSpacing: "0.02em" }}>{f.credential}</div>
                <div style={{ height: 1, background: "var(--hairline-on-light)" }} />
                <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", textWrap: "pretty" }}>{f.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ GALERÍA ============================ */
function Galeria() {
  return (
    <section style={{ background: "var(--negro-profundo)", color: "var(--crema-papel)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap">
        <div style={{ maxWidth: 640, marginBottom: "clamp(36px,5vh,56px)" }}>
          <SectionEyebrow on="dark">El lugar y la mesa</SectionEyebrow>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(32px,4.6vw,56px)", lineHeight: 1.0, letterSpacing: "-0.015em" }}>El bosque, el río y lo que se cocina.</h2>
        </div>
        <div className="cs-gallery">
          {D.galeria.map((g, i) => (
            <figure key={i} className={`cs-gitem ${g.span}`} style={{ margin: 0, position: "relative", overflow: "hidden", background: "var(--verde-bosque-900)" }}>
              <img src={A + g.src} alt={g.cap} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <figcaption style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "30px 18px 14px", fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--crema-papel)", background: "linear-gradient(180deg, rgba(8,20,14,0) 0%, rgba(8,20,14,0.82) 100%)" }}>{g.cap}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ PRECIOS ============================ */
function Precios() {
  const datos = [
    ["Tarifa plena", "$3.200.000 · desde el 1 de agosto"],
    ["Habitación sencilla", "Disponible con suplemento — escríbenos"],
    ["Descuento para grupos", "10% sobre la tarifa por persona"],
    ["Reserva", "50% para asegurar tu cupo"],
  ];
  return (
    <section id="precios" style={{ background: "var(--crema-papel)", color: "var(--text-primary)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap cs-two" style={{ alignItems: "stretch" }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <SectionEyebrow>La inversión</SectionEyebrow>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px,5vw,60px)", lineHeight: 1.0, letterSpacing: "-0.015em" }}>Tu cupo en Comer Sol.</h2>
          <p style={{ margin: "20px 0 0", maxWidth: 440, fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 18, lineHeight: 1.7, color: "var(--text-secondary)", textWrap: "pretty" }}>Cuatro días con todo resuelto — alojamiento, alimentación, transporte terrestre y cada taller. Cupos limitados a veinte personas.</p>
        </div>
        <div style={{ background: "var(--surface-raised)", border: "1px solid var(--hairline-on-light)", borderTop: "2px solid var(--samana)", padding: "clamp(32px,4vw,48px)" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)" }}>Por persona · hab. doble</span>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--verde-bosque)", background: "var(--beige-arena)", padding: "5px 10px" }}>Early bird</span>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(44px,6vw,72px)", letterSpacing: "-0.02em", lineHeight: 1 }}>$2.800.000</span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)" }}>COP</span>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 10 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--text-muted)", textDecoration: "line-through" }}>$3.200.000</span>
            <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 12.5, letterSpacing: "0.04em", color: "var(--samana)" }}>Ahorras $400.000 · hasta el 31 de julio</span>
          </div>
          <div style={{ marginTop: 26 }}>
            {datos.map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 18, padding: "14px 0", borderTop: "1px solid var(--hairline-on-light)" }}>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-muted)" }}>{k}</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "var(--text-primary)", textAlign: "right", maxWidth: "20ch", textWrap: "pretty" }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 30 }}>
            <Button on="light" variant="solid" size="lg" href={WA_RESERVA} target="_blank" rel="noopener" style={{ width: "100%" }}>Reservar por WhatsApp</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ DETALLES + QUÉ LLEVAR ============================ */
function Detalles() {
  const facts = [
    ["Fechas", D.meta.fechas], ["Duración", D.meta.duracion],
    ["Punto de encuentro", "Aeropuerto JMC, Rionegro — antes de las 9 am del 13 nov"],
    ["Grupo", D.meta.cupo],
  ];
  return (
    <section style={{ background: "var(--verde-bosque)", color: "var(--crema-papel)", padding: "clamp(72px,10vh,120px) 0" }}>
      <div className="wrap cs-two" style={{ alignItems: "start" }}>
        <div>
          <SectionEyebrow on="dark">Detalles prácticos</SectionEyebrow>
          <div style={{ marginTop: 28 }}>
            {facts.map(([k, v]) => (
              <div key={k} style={{ padding: "18px 0", borderTop: "1px solid var(--hairline-on-dark)" }}>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--beige-arena)" }}>{k}</div>
                <div style={{ marginTop: 8, fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 19, lineHeight: 1.5, color: "var(--crema-papel)", textWrap: "pretty" }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <SectionEyebrow on="dark">Qué llevar</SectionEyebrow>
          <ul className="cs-llevar" style={{ listStyle: "none", margin: "28px 0 0", padding: 0 }}>
            {D.llevar.map((item, i) => (
              <li key={i} style={{ display: "flex", gap: 14, padding: "12px 0", borderTop: "1px solid var(--hairline-on-dark)", fontFamily: "var(--font-display)", fontSize: 16.5, lineHeight: 1.5, color: "var(--beige-arena)" }}>
                <span style={{ color: "var(--beige-arena)", flexShrink: 0, marginTop: 2 }}>—</span>
                <span style={{ textWrap: "pretty" }}>{item}</span>
              </li>
            ))}
          </ul>
          <p style={{ marginTop: 20, fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 12.5, lineHeight: 1.6, letterSpacing: "0.02em", color: "var(--beige-arena)", opacity: 0.85 }}>La bitácora se entrega en el retiro. Ven con el celular en modo avión — el bosque invita al silencio — y con ropa que pueda ensuciarse: habrá trabajo con tierra, agua y fuego.</p>
        </div>
      </div>
    </section>
  );
}

/* ============================ FAQ ============================ */
function FaqRow({ item, open, onToggle }) {
  return (
    <div style={{ borderTop: "1px solid var(--hairline-on-light)" }}>
      <button onClick={onToggle} aria-expanded={open} style={{ width: "100%", background: "transparent", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 24, padding: "24px 0", textAlign: "left", color: "var(--text-primary)" }}>
        <span style={{ flex: 1, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(19px,2.2vw,24px)", letterSpacing: "-0.01em", lineHeight: 1.2 }}>{item.q}</span>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 24, color: "var(--samana)", transition: "transform var(--dur) var(--ease-calm)", transform: open ? "rotate(45deg)" : "none", lineHeight: 1 }}>+</span>
      </button>
      <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows var(--dur-slow) var(--ease-calm)" }}>
        <div style={{ overflow: "hidden" }}>
          <p style={{ margin: 0, paddingBottom: 26, maxWidth: "62ch", fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 17.5, lineHeight: 1.75, color: "var(--text-secondary)", textWrap: "pretty" }}>{item.a}</p>
        </div>
      </div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = useState(-1);
  return (
    <section id="faq" style={{ background: "var(--crema-papel)", color: "var(--text-primary)", padding: "clamp(80px,12vh,140px) 0" }}>
      <div className="wrap cs-two" style={{ alignItems: "start", gridTemplateColumns: "0.7fr 1.3fr" }}>
        <div>
          <SectionEyebrow>Preguntas</SectionEyebrow>
          <h2 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(32px,4vw,48px)", lineHeight: 1.0, letterSpacing: "-0.015em" }}>Antes de venir.</h2>
        </div>
        <div style={{ borderBottom: "1px solid var(--hairline-on-light)" }}>
          {D.faq.map((item, i) => (
            <FaqRow key={i} item={item} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ CTA FINAL ============================ */
function CtaFinal() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--verde-bosque-900)", padding: "clamp(96px,16vh,180px) 0", textAlign: "center" }}>
      <img src={A + "photos/section.jpg"} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5 }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(6,16,11,0.86) 0%, rgba(6,16,11,0.72) 50%, rgba(6,16,11,0.92) 100%)" }} />
      <div className="wrap" style={{ position: "relative" }}>
        <SectionEyebrow on="dark">Cupos limitados · máximo 20 personas</SectionEyebrow>
        <h2 style={{ margin: "24px auto 0", maxWidth: "16ch", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(40px,7vw,92px)", lineHeight: 0.98, letterSpacing: "-0.02em", color: "var(--crema-papel)" }}>Ven a comer sol.</h2>
        <p style={{ margin: "22px auto 0", maxWidth: "30ch", fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(18px,2.2vw,22px)", lineHeight: 1.5, color: "var(--beige-arena)", textWrap: "pretty" }}>{D.meta.fechas} · {D.meta.lugar}</p>
        <div style={{ marginTop: 38, display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 14 }}>
          <Button on="dark" variant="solid" size="lg" href={WA_RESERVA} target="_blank" rel="noopener">Reservar cupo</Button>
          <Button on="dark" variant="outline" size="lg" href={wa("Hola, tengo una pregunta sobre el retiro Comer Sol.")} target="_blank" rel="noopener">Escribir por WhatsApp</Button>
        </div>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
function Footer() {
  return (
    <footer style={{ background: "var(--negro-profundo)", color: "var(--beige-arena)", padding: "clamp(56px,8vh,88px) 0 40px" }}>
      <div className="wrap">
        <p style={{ margin: 0, maxWidth: "26ch", fontFamily: "var(--font-display)", fontWeight: 400, fontStyle: "italic", fontSize: "clamp(20px,3vw,30px)", lineHeight: 1.3, color: "var(--crema-papel)", textWrap: "pretty" }}>La forma en que nos alimentamos también es la forma en que habitamos el mundo.</p>
        <div style={{ height: 1, background: "var(--hairline-on-dark)", margin: "clamp(36px,6vh,56px) 0 28px" }} />
        <div className="cs-foot" style={{ display: "flex", flexWrap: "wrap", gap: 28, alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 26 }}>
            <img src={A + "logos/montes-logo.png"} alt="Colección Montés" style={{ height: 30, objectFit: "contain" }} />
            <img src={A + "logos/samana-logo.png"} alt="Montés Samaná" style={{ height: 30, objectFit: "contain" }} />
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 22, fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 12, letterSpacing: "0.04em" }}>
            <span>@montes_samana</span>
            <span>@amano.cocinacotidiana</span>
            <span>@martinvanmeerbeke</span>
          </div>
        </div>
        <div style={{ marginTop: 28, fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--beige-arena)", opacity: 0.6 }}>Comer Sol · Retiro de alimentación y conciencia · {D.meta.lugar}</div>
      </div>
    </footer>
  );
}

/* ============================ APP ============================ */
function App() {
  return (
    <React.Fragment>
      <Header />
      <Hero />
      <Manifiesto />
      <Statement />
      <Incluye />
      <Itinerario />
      <Talleristas />
      <Galeria />
      <Precios />
      <Detalles />
      <Faq />
      <CtaFinal />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);
