/* global React, ReactDOM */
/* app.jsx — HOME — usa shared.jsx */
const { useState: useState_, useEffect: useEffect_, useRef: useRef_ } = React;

/* ────────── HERO (HOME) ────────── */
function HomeHero({ variant = 'v1' }) {
  const imgRef = useRef_(null);
  useEffect_(() => {
    const onScroll = () => {
      if (!imgRef.current) return;
      imgRef.current.style.transform = `translateY(${window.scrollY * 0.35}px) scale(1.05)`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const img = variant === 'v2' ? IMG.hero2 : variant === 'v3' ? IMG.hero3 : IMG.hero;
  return (
    <section className="hero" id="inicio" data-variant={variant} data-screen-label="01 Hero">
      <div className="hero-bg">
        <video
          ref={imgRef}
          className="hero-img hero-video"
          src="uploads/hero-bg.mp4"
          poster={img}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
        />
        <div className="blob b1"></div>
        <div className="blob b2"></div>
        <div className="blob b3"></div>
      </div>
      <Particles count={18} />
      <div className="hero-corner-tr">Refugio Privado</div>
      <div className="hero-line"></div>
      <div className="hero-content">
        <div className="hero-text">
          <div className="tag reveal"><span className="float-label">Diseño, naturaleza y exclusividad en Querétaro</span></div>
          <h1 className="display split-line">
            <span className="line-row">{splitWords('El Tiempo es el')}</span>
            <span className="line-row"><span className="it">{splitWords('verdadero')}</span> {splitWords('lujo.')}</span>
          </h1>
          <p className="reveal" style={{ transitionDelay: '0.6s' }}>
            Quinta Mompaní es un refugio rodeado de naturaleza y diseño contemporáneo en Querétaro, creado para celebrar momentos que merecen quedarse para siempre. Más que un jardín para eventos, somos un espacio pensado para acompañar bodas, celebraciones y encuentros especiales con calma, belleza y atención genuina.
          </p>
          <div className="hero-actions reveal" style={{ transitionDelay: '0.8s' }}>
            <MagneticBtn href="https://wa.link/vtlfzu" target="_blank" rel="noopener noreferrer" className="btn btn-light">Conoce nuestras experiencias. <span className="arrow"></span></MagneticBtn>
          </div>
        </div>
      </div>
      <div className="scroll-indicator">Scroll<div className="line"></div></div>
    </section>);
}

/* ────────── CONCEPTO ────────── */
function Concepto() {
  return (
    <section className="concepto" id="concepto" data-screen-label="02 Concepto">
      <div className="container">
        <div className="section-head reveal-stagger">
          <div>
            
            <h2 className="display">Tu Celebración. <br /><span className="it">Tu refugio.</span></h2>
          </div>
          <p>Dos caminos para un día legendario. Eliges la intensidad de la celebración o la profundidad de la conexión, y nosotros nos adaptamos a tu visión.</p>
        </div>
        <div className="dual reveal-stagger">
          <div className="dual-card" style={{ backgroundColor: "rgb(255, 255, 255)" }}>
            <svg className="card-border-svg" aria-hidden="true"><rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" pathLength="1" /></svg>
            <div>
              <span className="num">— Opción 01</span>
              <h3>Celebraciones Íntimas <span className="it"> |</span> Entre Semana</h3>
              <p style={{ color: "#1a1410" }}>Creamos el escenario perfecto para comidas especiales, aniversarios, pedidas de
                mano, cumpleaños, brunches y reuniones privadas rodeadas de naturaleza y
                calma.</p>
              <p style={{ color: "#1a1410" }}>Nuestro espacio entre semana se transforma en un refugio íntimo donde la
                conversación fluye, el tiempo se disfruta sin prisa y cada detalle se vive de forma
                más cercana y auténtica.</p>
            </div>
            <a href="/tu-evento" className="arrow-link">Conoce más</a>
          </div>
          <div className="dual-card">
            <svg className="card-border-svg" aria-hidden="true"><rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" pathLength="1" /></svg>
            <div>
              <span className="num">— Opción 02</span>
              <h3>Celebraciones  <span className="it">Sociales y Bodas</span> </h3>
              <p style={{ color: "#1a1410" }}>Nuestros jardines y escenarios fueron diseñados para recibir bodas, aniversarios,
                XV años, bautizos y eventos sociales en un entorno donde la naturaleza, la
                arquitectura y la hospitalidad crean una experiencia elegante y profundamente
                humana.</p>
            </div>
            <a href="/tu-evento" className="arrow-link">Conoce más</a>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────── EXPERIENCIAS ────────── */
function Experiencias() {
  const cards = [
  { no: '01', title: 'Bodas', text: 'Celebraciones espectaculares de un día o la experiencia completa de estancia.', cta: 'Diseña tu Boda', href: '/tu-evento', img: IMG.expBoda },
  { no: '02', title: 'Celebraciones Íntimas', text: 'Bautizos, cumpleaños y comuniones en nuestro acogedor Jardín Jacarandas.', cta: 'Explora Eventos Sociales', href: 'intimas.html', img: IMG.expInt }];

  return null;
  /*return (
    <section className="experiences" id="experiencias" data-screen-label="03 Experiencias">
      <div className="container">
        <div className="section-head reveal-stagger">
          <div>
            <div className="eyebrow">Para cada historia</div>
            <h2 className="display">Un escenario <br /><span className="it">para cada</span> historia.</h2>
          </div>
          <p>Tres caminos. Tres atmósferas. Cada una pensada para revelar lo extraordinario en lo cotidiano.</p>
        </div>
        <div className="exp-grid reveal-stagger">
          {cards.map((c, i) =>
          <a key={i} href={c.href} className="exp-card">
              <div className="exp-img" style={{ backgroundImage: `url(${c.img})` }}></div>
              <div>
                <span className="exp-no">— {c.no}</span>
                <h3 className="display">{c.title}</h3>
                <p>{c.text}</p>
              </div>
              <span className="exp-link">{c.cta}</span>
            </a>
          )}
        </div>
      </div>
    </section>);*/

}

/* ────────── PILARES ────────── */
function Pilares() {
  const pilares = [
  { no: '01', title: 'Belleza Curada y Conveniente', text: 'Olvida la logística de rentas. Nuestros paquetes incluyen mobiliario de diseño que eleva tu celebración.' },
  { no: '02', title: 'Flexibilidad Inteligente', text: 'Soluciones creativas que se adaptan a tu visión, ya sea un evento de un día o una experiencia de estancia.' },
  { no: '03', title: 'Servicio de Anfitrión', text: 'Somos anfitriones, no proveedores. Nuestro equipo se anticipa a tus necesidades.' },
  { no: '04', title: 'Detalles que Importan', text: 'Ambientación acuática, antorchas, barras de roble, mobiliario de parota. La magia vive en lo pequeño.' }];

  const trackRef = useRef_(null);
  const [active, setActive] = useState_(0);
  const onTrackScroll = () => {
    const el = trackRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    const frac = max > 0 ? el.scrollLeft / max : 0;
    setActive(Math.round(frac * (pilares.length - 1)));
  };
  const goTo = (i) => {
    const el = trackRef.current;
    if (!el || !el.children[i]) return;
    el.children[i].scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
  };
  return (
    <section className="pilares" data-screen-label="04 Pilares">
      <div className="container">
        <div className="section-head reveal-stagger">
          <div>
            <div className="eyebrow">Pilares de valor</div>
            <h2 className="display">Diseño, conveniencia <span className="it">y calidez.</span></h2>
          </div>
        </div>
        <div ref={trackRef} onScroll={onTrackScroll} className="pilares-track reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2rem' }}>
          {pilares.map((p, i) =>
          <div key={i} className="pilar">
              <span className="pilar-no">— {p.no}</span>
              <h3>{p.title}</h3>
              <p>{p.text}</p>
            </div>
          )}
        </div>
        <div className="pilares-dots" aria-label="Navegación de pilares">
          {pilares.map((_, i) =>
          <button key={i} type="button" className={`pdot ${i === active ? 'on' : ''}`} aria-label={`Pilar ${i + 1}`} aria-current={i === active} onClick={() => goTo(i)} />
          )}
        </div>
      </div>
    </section>);

}

/* ────────── SOBRE (parallax bg full-bleed) ────────── */
function Sobre() {
  return (
    <ParallaxSection image={IMG.sobre} overlay="dark" minHeight={95} speed={0.18} className="sobre-bg">
      <div className="bg-section-inner reveal-stagger">
        <div className="eyebrow" style={{ color: 'var(--gold)' }}>Sobre el refugio</div>
        <h2 className="display" style={{ color: 'var(--cream)' }}>Un lugar donde el <br /><span className="it">tiempo se detiene.</span></h2>
        <p style={{ color: 'rgba(236,234,230,0.92)' }}>
          Quinta Mompaní nació de la creencia de que las celebraciones más importantes merecen un escenario que esté a la altura. Más que un lugar, somos un refugio diseñado para que cada conexión, cada brindis y cada pausa sea recordada para siempre.
        </p>
        <p style={{ color: 'rgba(236,234,230,0.82)' }}>
          Aquí, la naturaleza dicta el ritmo y nosotros nos encargamos de cada detalle, para que tu única tarea sea disfrutar el momento presente con quienes más amas.
        </p>
        <div className="signature">— El equipo Mompaní</div>
      </div>
    </ParallaxSection>);

}

/* ────────── ESPACIOS (slider) ────────── */
function Espacios() {
  const [active, setActive] = useState_(0);
  const espacios = [
  { no: '01', title: 'La Explanada', subtitle: 'Escenario principal', text: 'El corazón de tus eventos espectaculares. Un escenario amplio y moderno con mobiliario de diseño incluido.', img: IMG.espExpl },
  { no: '02', title: 'Jardín Jacarandas', subtitle: 'Escenario íntimo', text: 'Un rincón cálido e íntimo pensado para reuniones especiales, brunches, ceremonias pequeñas y celebraciones rodeadas de calma y vegetación madura.', img: IMG.espJard },
  { no: '03', title: 'La Ready Room', subtitle: 'Refugio exclusivo', text: 'Un santuario privado para prepararte, compartir momentos con tus personas más cercanas y vivir la emoción previa al evento con tranquilidad y comodidad.', img: IMG.espCasa },
  { no: '04', title: 'Los Jardines de Mompaní', subtitle: 'Detalles que cuidan', text: 'Senderos, árboles y espacios abiertos que conectan cada experiencia con la naturaleza, creando escenarios perfectos para ceremonias, fotografías y momentos memorables.', img: IMG.espAmen }];

  const prev = () => setActive(a => (a - 1 + espacios.length) % espacios.length);
  const next = () => setActive(a => (a + 1) % espacios.length);

  return (
    <section id="refugio" data-screen-label="06 Espacios" className="esp-slider-section">
      <div className="esp-header reveal-stagger">
        <div className="eyebrow">Los Espacios</div>
        <h2 className="display">Cuatro <span className="it">atmósferas.</span><br />Un mismo refugio.</h2>
      </div>

      <div className="esp-slider">
        {espacios.map((e, i) => (
          <div key={i} className={`esp-slide ${i === active ? 'esp-slide--active' : ''}`} aria-hidden={i !== active}>
            <img className="esp-slide-img" src={e.img} alt={e.title} />
            <div className="esp-slide-veil" />
            <div className="esp-slide-text">
              <span className="esp-no">{e.no} / 0{espacios.length}</span>
              <hr className="esp-rule" />
              <span className="esp-sub">{e.subtitle}</span>
              <h3 className="esp-title">{e.title}</h3>
              <p className="esp-body">{e.text}</p>
            </div>
          </div>
        ))}

        {/* Flechas */}
        <button className="esp-arrow esp-arrow--prev" onClick={prev} aria-label="Anterior">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M13 4L7 10L13 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button className="esp-arrow esp-arrow--next" onClick={next} aria-label="Siguiente">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M7 4L13 10L7 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>

        {/* Puntos */}
        <div className="esp-dots">
          {espacios.map((_, i) => (
            <button key={i} className={`esp-dot ${i === active ? 'esp-dot--active' : ''}`} onClick={() => setActive(i)} aria-label={`Ir a espacio ${i + 1}`} />
          ))}
        </div>
      </div>
    </section>);
}

/* ────────── MANIFIESTO ────────── */
function Manifiesto() {
  return (
    <section className="filosofia" id="filosofia" data-screen-label="07 Filosofia">
      <div className="container">
        <div className="eyebrow reveal" style={{ color: 'var(--gold)', textAlign: 'center', display: 'block', marginBottom: '3rem' }}>Filosofía</div>
        <p className="manifiesto reveal">
          Creemos que la verdadera <span className="it">conexión humana</span> es el lujo más raro en un mundo acelerado.
          Es <span className="it">el recuerdo que se forja</span> no solo en la fiesta, sino en la pausa.
          Es <span className="it">la conversación</span> que se extiende hasta el amanecer.
          Es <span className="it">el silencio compartido</span> bajo las jacarandas.
          Por eso construimos un refugio que <span className="it">desacelera el tiempo</span> para que cada momento dure el doble.
        </p>
      </div>
    </section>);

}

/* ────────── GALERÍA (parallax bg con grid sobrepuesta) ────────── */
function Galeria() {
  const clsCycle = ['gal-1','gal-2','gal-3','gal-4','gal-5','gal-6','gal-7','gal-8','gal-9'];
  const items = [
  { title: 'Ceremonia bajo las jacarandas', meta: 'Bodas', img: 'uploads/sesion/Mompani (1).webp', cls: clsCycle[0] },
  { title: 'Jardín Jacarandas', meta: 'Espacios', img: 'uploads/sesion/Mompani (2).webp', cls: clsCycle[1] },
  { title: 'Explanada principal', meta: 'Espacios', img: 'uploads/sesion/Mompani (3).webp', cls: clsCycle[2] },
  { title: 'Mesa de honor', meta: 'Bodas', img: 'uploads/sesion/Mompani (4).webp', cls: clsCycle[3] },
  { title: 'Decoración floral', meta: 'Detalles', img: 'uploads/sesion/Mompani (5).webp', cls: clsCycle[4] },
  { title: 'Coctel de bienvenida', meta: 'Celebraciones', img: 'uploads/sesion/Mompani (6).webp', cls: clsCycle[5] },
  { title: 'Ambientación nocturna', meta: 'Detalles', img: 'uploads/sesion/Mompani (7).webp', cls: clsCycle[6] },
  { title: 'Jardín en flor', meta: 'Espacios', img: 'uploads/sesion/Mompani (8).webp', cls: clsCycle[7] },
  { title: 'Brindis en la explanada', meta: 'Bodas', img: 'uploads/sesion/Mompani (9).webp', cls: clsCycle[8] },
  { title: 'Antorchas y cascada', meta: 'Detalles', img: 'uploads/sesion/Mompani (10).webp', cls: clsCycle[0] },
  { title: 'La Casa Principal', meta: 'Espacios', img: 'uploads/sesion/Mompani (11).webp', cls: clsCycle[1] },
  { title: 'Ceremonia íntima', meta: 'Celebraciones Íntimas', img: 'uploads/sesion/Mompani (12).webp', cls: clsCycle[2] },
  { title: 'Pérgola de madera', meta: 'Espacios', img: 'uploads/sesion/Mompani (13).webp', cls: clsCycle[3] },
  { title: 'Mesa dulce', meta: 'Detalles', img: 'uploads/sesion/Mompani (14).webp', cls: clsCycle[4] },
  { title: 'Iluminación en árboles', meta: 'Detalles', img: 'uploads/sesion/Mompani (15).webp', cls: clsCycle[5] },
  { title: 'Pista de baile', meta: 'Bodas', img: 'uploads/sesion/Mompani (16).webp', cls: clsCycle[6] },
  { title: 'Bienvenida al refugio', meta: 'Espacios', img: 'uploads/sesion/Mompani (17).webp', cls: clsCycle[7] },
  { title: 'Banquete', meta: 'Bodas', img: 'uploads/sesion/Mompani (18).webp', cls: clsCycle[8] },
  { title: 'Barricas de roble', meta: 'Detalles', img: 'uploads/sesion/Mompani (19).webp', cls: clsCycle[0] },
  { title: 'Atardecer en la quinta', meta: 'Espacios', img: 'uploads/sesion/Mompani (20).webp', cls: clsCycle[1] },
  { title: 'Recepción', meta: 'Bodas', img: 'uploads/sesion/Mompani (21).webp', cls: clsCycle[2] },
  { title: 'Sesión fotográfica', meta: 'Bodas', img: 'uploads/sesion/Mompani (22).webp', cls: clsCycle[3] },
  { title: 'Estacionamiento privado', meta: 'Espacios', img: 'uploads/sesion/Mompani (23).webp', cls: clsCycle[4] },
  { title: 'Jardín jacarandas de noche', meta: 'Detalles', img: 'uploads/sesion/Mompani (24).webp', cls: clsCycle[5] },
  { title: 'Centro de mesa', meta: 'Detalles', img: 'uploads/sesion/Mompani (25).webp', cls: clsCycle[6] },
  { title: 'Bautizo en jardín', meta: 'Celebraciones Íntimas', img: 'uploads/sesion/Mompani (26).webp', cls: clsCycle[7] },
  { title: 'Ambiente de fiesta', meta: 'Celebraciones', img: 'uploads/sesion/Mompani (27).webp', cls: clsCycle[8] },
  { title: 'Salida de proveedores', meta: 'Detalles', img: 'uploads/sesion/Mompani (28).webp', cls: clsCycle[0] },
  { title: 'Zona de ceremonia', meta: 'Bodas', img: 'uploads/sesion/Mompani (29).webp', cls: clsCycle[1] },
  { title: 'Pasillo de entrada', meta: 'Espacios', img: 'uploads/sesion/Mompani (30).webp', cls: clsCycle[2] },
  { title: 'Ambientación acuática', meta: 'Detalles', img: 'uploads/sesion/Mompani (31).webp', cls: clsCycle[3] },
  { title: 'Vista aérea de la quinta', meta: 'Espacios', img: 'uploads/sesion/Mompani (32).webp', cls: clsCycle[4] },
  { title: 'Noche de bodas', meta: 'Bodas', img: 'uploads/sesion/Mompani (33).webp', cls: clsCycle[5] },
  { title: 'Before the Wedding', meta: 'Bodas', img: 'uploads/sesion/Mompani (34).webp', cls: clsCycle[6] },
  { title: 'Anfitriones', meta: 'Detalles', img: 'uploads/sesion/Mompani (35).webp', cls: clsCycle[7] },
  { title: 'Quinceañera en el jardín', meta: 'Celebraciones Íntimas', img: 'uploads/sesion/Mompani (36).webp', cls: clsCycle[8] },
  { title: 'Fuegos artificiales', meta: 'Celebraciones', img: 'uploads/sesion/Mompani (37).webp', cls: clsCycle[0] },
  { title: 'La pérgola al amanecer', meta: 'Espacios', img: 'uploads/sesion/Mompani (38).webp', cls: clsCycle[1] },
  { title: 'Detalle de mantelería', meta: 'Detalles', img: 'uploads/sesion/Mompani (39).webp', cls: clsCycle[2] },
  { title: 'Explanada de día', meta: 'Espacios', img: 'uploads/sesion/Mompani (40).webp', cls: clsCycle[3] },
  { title: 'Pastel de bodas', meta: 'Bodas', img: 'uploads/sesion/Mompani (41).webp', cls: clsCycle[4] },
  { title: 'Baby shower', meta: 'Celebraciones Íntimas', img: 'uploads/sesion/Mompani (42).webp', cls: clsCycle[5] },
  { title: 'Jacarandas en flor', meta: 'Espacios', img: 'uploads/sesion/Mompani (43).webp', cls: clsCycle[6] },
  { title: 'Primer baile', meta: 'Bodas', img: 'uploads/sesion/Mompani (44).webp', cls: clsCycle[7] },
  { title: 'Cumpleaños en la quinta', meta: 'Celebraciones Íntimas', img: 'uploads/sesion/Mompani (46).webp', cls: clsCycle[8] },
  { title: 'Brunch al día siguiente', meta: 'Celebraciones', img: 'uploads/sesion/Mompani (48).webp', cls: clsCycle[0] },
  { title: 'Privacidad y naturaleza', meta: 'Espacios', img: 'uploads/sesion/Mompani (49).webp', cls: clsCycle[1] },
  ];

  const [lb, setLb] = useState_(null);
  const [visible, setVisible] = useState_(9);
  const allShown = visible >= items.length;
  const showMore = () => setVisible(v => Math.min(v + 3, items.length));
  const showLess = () => { setVisible(9); window.scrollTo({ top: document.getElementById('galeria').offsetTop - 80, behavior: 'smooth' }); };

  const lbTotal = visible;
  const prev = () => setLb(i => (i - 1 + lbTotal) % lbTotal);
  const next = () => setLb(i => (i + 1) % lbTotal);
  const close = () => setLb(null);

  useEffect_(() => {
    if (lb === null) return;
    const onKey = e => {
      if (e.key === 'Escape') close();
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [lb]);

  return (
    <section className="galeria" id="galeria" data-screen-label="11 Galeria">
      <div className="container">
        <div className="section-head reveal-stagger">
          <div>
            <div className="eyebrow">Galería</div>
            <h2 className="display">Historias reales. <br /><span className="it">Recuerdos</span> inolvidables.</h2>
          </div>
          <p style={{ color: "rgb(210, 163, 72)" }}>Más que un portafolio, esta es nuestra galería de historias. Cada celebración es única.</p>
        </div>
        <div className="gal-grid reveal-stagger">
          {items.slice(0, visible).map((it, i) =>
          <div key={i} className={`gal-item lift ${it.cls}`} onClick={() => setLb(i)} style={{ cursor: 'pointer' }}>
              <img src={it.img} alt={it.title} />
              <div className="gal-caption">
                <h4 style={{ fontSize: '0.72rem', letterSpacing: '0.28em', textTransform: 'uppercase', fontFamily: 'var(--mono-cap)', fontWeight: 500, color: 'var(--gold)' }}>Quinta Mompaní</h4>
              </div>
            </div>
          )}
        </div>
        <div className="gal-load-wrap">
          {allShown
            ? <button className="gal-load-btn" onClick={showLess}>Mostrar menos</button>
            : <button className="gal-load-btn" onClick={showMore}>Cargar más</button>
          }
        </div>

      {lb !== null && (
        <div className="lb-overlay" onClick={close}>
          <button className="lb-close" onClick={close} aria-label="Cerrar">✕</button>
          <div className="lb-counter">{String(lb + 1).padStart(2,'0')} / {String(lbTotal).padStart(2,'0')}</div>
          <div className="lb-stage" onClick={e => e.stopPropagation()}>
            <img className="lb-img" src={items[lb].img} alt={items[lb].title} />
            <div className="lb-caption">
              <h4 className="lb-title" style={{ fontSize: '0.72rem', letterSpacing: '0.28em', textTransform: 'uppercase', fontFamily: 'var(--mono-cap)', fontWeight: 500, color: 'var(--gold)' }}>Quinta Mompaní</h4>
            </div>
          </div>
          <button className="lb-arrow lb-prev" onClick={e => { e.stopPropagation(); prev(); }} aria-label="Anterior">&#8592;</button>
          <button className="lb-arrow lb-next" onClick={e => { e.stopPropagation(); next(); }} aria-label="Siguiente">&#8594;</button>
        </div>
      )}
      </div>
    </section>);

}

/* ────────── TESTIMONIOS ────────── */
function Testimonios() {
  const testis = [
  { quote: 'Sentimos que nuestra boda no fue un evento, fue un fin de semana entero suspendido en el tiempo.', name: 'Mariana & Diego', meta: 'Boda de fin de semana · 2024' },
  { quote: 'Buscábamos un lugar para los 3 años de Sofía y encontramos un refugio.', name: 'Familia Hernández', meta: 'Celebración Íntima · 2025' },
  { quote: 'No rentamos un jardín. Recibimos hospitalidad. Esa es la diferencia.', name: 'Paola & Luis', meta: 'Boda · 2025' },
  { quote: 'El jardín jacarandas fue el escenario perfecto para el bautizo de Emilio. Todo el equipo hizo que nos sintiéramos como en casa.', name: 'Familia Reyes Montoya', meta: 'Celebración Íntima · 2025' },
  { quote: 'Organizamos el cumpleaños de mamá y fue mágico. Un espacio que tiene alma propia, eso no se encuentra en cualquier lugar.', name: 'Carolina Ibarra', meta: 'Festejo Familiar · 2024' }];

  const [tIdx, setTIdx] = useState_(0);
  const trackRef = useRef_(null);
  const dragStart = useRef_(null);

  const goTo = (i) => setTIdx(i);
  const prev = () => goTo(Math.max(tIdx - 1, 0));
  const next = () => goTo(Math.min(tIdx + 1, testis.length - 1));

  const onDragStart = (clientX) => { dragStart.current = clientX; };
  const onDragEnd   = (clientX) => {
    if (dragStart.current === null) return;
    const delta = dragStart.current - clientX;
    if (Math.abs(delta) > 50) delta > 0 ? next() : prev();
    dragStart.current = null;
  };

  useEffect_(() => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.children[tIdx];
    if (!card) return;
    track.scrollTo({ left: card.offsetLeft - track.offsetLeft, behavior: 'smooth' });
  }, [tIdx]);

  return (
    <section className="testimonios" data-screen-label="12 Testimonios">
      <div className="container">
        <div className="section-head reveal-stagger">
          <div>
            <div className="eyebrow">Testimonios</div>
            <h2 className="display">Las voces de <br /><span className="it">nuestro refugio.</span></h2>
          </div>
          <p>Lo que nos cuentan después del último brindis.</p>
        </div>
      </div>
      <div className="testi-track reveal-stagger" ref={trackRef}
        onMouseDown={e => onDragStart(e.clientX)}
        onMouseUp={e => onDragEnd(e.clientX)}
        onMouseLeave={() => { dragStart.current = null; }}
        onTouchStart={e => onDragStart(e.touches[0].clientX)}
        onTouchEnd={e => onDragEnd(e.changedTouches[0].clientX)}
      >
        {testis.map((t, i) =>
        <div key={i} className="testi-card">
            <span className="quote-mark">"</span>
            <blockquote>{t.quote}</blockquote>
            <cite><span className="name">{t.name}</span>{t.meta}</cite>
          </div>
        )}
      </div>
      <div className="testi-nav">
        <button className="testi-arrow" onClick={prev} disabled={tIdx === 0} aria-label="Anterior">&#8592;</button>
        <div className="testi-dots">
          {testis.map((_, i) => <span key={i} className={`testi-dot${tIdx === i ? ' active' : ''}`} onClick={() => goTo(i)} />)}
        </div>
        <button className="testi-arrow" onClick={next} disabled={tIdx === testis.length - 1} aria-label="Siguiente">&#8594;</button>
      </div>
    </section>);

}

/* ────────── BLOG ────────── */
const SANITY_PROJECT = 'gyrzd1m5';
const SANITY_DATASET = 'production';
const SANITY_API = `https://${SANITY_PROJECT}.api.sanity.io/v2024-01-01/data/query/${SANITY_DATASET}`;

function Blog() {
  const [posts, setPosts] = useState_([]);
  const [loading, setLoading] = useState_(true);

  useEffect_(() => {
    const q = encodeURIComponent(
      `*[_type=="post"] | order(publishedAt desc) [0...3] { title, "slug": slug.current, category, readTime, excerpt, "imageUrl": mainImage.asset->url }`
    );
    fetch(`${SANITY_API}?query=${q}`)
      .then(r => r.json())
      .then(d => { setPosts(d.result || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  return (
    <section className="blog-section" id="blog" data-screen-label="13 Blog">
      <div className="container">
        <div className="section-head reveal-stagger">
          <div>
            <div className="eyebrow">Diario del refugio</div>
            <h2 className="display">Notas desde <span className="it">Mompaní.</span></h2>
          </div>
          <p>Reflexiones sobre el arte de recibir y la celebración consciente.</p>
        </div>
        <div className="blog-grid reveal-stagger">
          {loading ? (
            [0,1,2].map(i => (
              <div key={i} className="blog-card blog-skeleton">
                <div className="blog-skeleton-img" />
                <div className="blog-skeleton-line w-sm" />
                <div className="blog-skeleton-line w-lg" />
                <div className="blog-skeleton-line w-md" />
              </div>
            ))
          ) : posts.length === 0 ? (
            <p style={{ color: 'var(--moss)', gridColumn: '1/-1', textAlign: 'center', padding: '3rem 0' }}>Próximamente, el diario del refugio.</p>
          ) : (
            posts.map((p, i) => (
              <a key={i} href={`/blog?slug=${p.slug || ''}`} className="blog-card">
                <div className="blog-img">
                  {p.imageUrl
                    ? <img src={p.imageUrl} alt={p.title} />
                    : <div className="blog-img-placeholder" />}
                </div>
                <div className="blog-meta">{p.category}{p.readTime ? ` · ${p.readTime} min` : ''}</div>
                <h3>{p.title}</h3>
                <p>{p.excerpt}</p>
                <span className="blog-link">Leer más →</span>
              </a>
            ))
          )}
        </div>
        <div className="blog-more-wrap">
          <a href="/blog" className="blog-more-link">
            Ver todos los artículos
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    </section>);

}

/* ────────── APP ────────── */
function App() {
  useReveal();
  useParallax();
  useBgParallax();
  return (
    <>
      <CustomCursor />
      <Nav home="#inicio" />
      <HomeHero variant="v1" />
      <Concepto />
      <Experiencias />
      <Pilares />
      <Sobre />
      <Espacios />
      <Manifiesto />
      <Galeria />
      <Testimonios />
      <Blog />
      <Contacto />
      <Footer />
      <WhatsAppFloat />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);