/* global React, ReactDOM */
/* lp-bodas.jsx */
const { useEffect: useEff_b } = React;

function BodasContent() {
  useReveal();useParallax();useBgParallax();

  const opciones = [
  { no: '01', title: 'Boda de un día', text: 'Celebra en grande en nuestra explanada. Mobiliario de diseño incluido, ambientación, equipo de anfitriones y libertad creativa para tu visión.', cta: 'Cotizar boda de un día' },
  { no: '02', title: 'Boda con estancia', text: 'Transforma tu día en un fin de semana inolvidable. Suma la casa principal para tu círculo más cercano: hospedaje, brunch al día siguiente, conversaciones largas.', cta: 'Cotizar experiencia completa' }];

  const incluye = [
  'Uso del espacio para sesión fotográfica (con previa programación)',
  '1 hora de cortesía para ceremonia el mismo día del evento',
  'Uso del Jardín Jacarandas para Before the Wedding (3 horas un día previo, sin costoadicional)',
  '4 barricas de roble con tablones de madera (barras)',
  '30 antorchas',
  'Ambientación acuática con chorros, cascada e iluminación',
  'Personal de servicio e insumos en sanitarios durante el evento'];


  return (
    <>
      <CustomCursor />
      <Nav />
      <PageHero
        image={IMG.bodas}
        eyebrow="Bodas en Quinta Mompaní"
        title={<>Hablemos de tu evento. <span className="it"></span></>}
        lead="Desde ceremonias íntimas hasta celebraciones de gran formato, acompañamos
cada momento con atención al detalle, espacios versátiles y una atmósfera que
transforma cualquier evento en un recuerdo inolvidable."
        cta="Cotizar mi evento" />
      

      <section className="lp-intro">
        <div className="container reveal-stagger">
          <div className="eyebrow" style={{ color: 'var(--gold)' }}>Nuestra propuesta</div>
          <h2 className="display">Diseñamos el escenario. <br /><span className="it">Tú diseñas el recuerdo.</span></h2>
          <p>Olvida la logística de cien proveedores. En Mompaní integramos espacio, mobiliario, ambientación y anfitrionazgo en una sola conversación. Tu única tarea es soñar.</p>
        </div>
      </section>

      <section className="lp-options">
        <div className="container">
          <div className="bopt2-grid reveal-stagger">

            <div className="bopt2-col">
              <div className="bopt2-head">
                <span className="bopt2-eyebrow">— 01</span>
                <h3 className="bopt2-title">Celebraciones Íntimas<br /><em>Entre Semana</em></h3>
                <span className="bopt2-head-num" aria-hidden="true">01</span>
              </div>
              <div className="bopt2-body">
                <p className="bopt2-venue">Jardín Jacarandas</p>
                <div className="bopt2-specs">
                  <div><span>Duración</span><span>5 horas de experiencia</span></div>
                  <div><span>Horario máximo</span><span>11:45 p.m.</span></div>
                </div>
                <div className="bopt2-areas">
                  <p className="bopt2-areas-label">Áreas designadas</p>
                  <ul>
                    <li>Jardín Jacarandas</li>
                    <li>Estacionamiento privado</li>
                    <li>Sanitarios</li>
                    <li>Bodega de apoyo</li>
                  </ul>
                  <p className="bopt2-note">La salida de proveedores se realiza el mismo día al concluir el evento.</p>
                </div>
                <div className="bopt2-footer">
                  <div className="bopt2-cap">
                    <span className="bopt2-cap-num">1–60</span>
                    <span className="bopt2-cap-label">personas</span>
                  </div>
                  <a href="https://wa.link/vtlfzu" target="_blank" rel="noopener noreferrer" className="bopt2-cta">Cotiza tu evento</a>
                </div>
              </div>
            </div>

            <div className="bopt2-col">
              <div className="bopt2-head">
                <span className="bopt2-eyebrow">— 02</span>
                <h3 className="bopt2-title">Celebraciones Sociales<br /><em>y Bodas</em></h3>
                <span className="bopt2-head-num" aria-hidden="true">02</span>
              </div>
              <div className="bopt2-body">
                <p className="bopt2-venue">Explanada Principal + Jardín Jacarandas</p>
                <div className="bopt2-specs">
                  <div><span>Duración</span><span>8 horas a partir de la recepción</span></div>
                </div>
                <div className="bopt2-areas">
                  <p className="bopt2-areas-label">Áreas designadas</p>
                  <ul>
                    <li>Jardín de ceremonias con pérgola de madera</li>
                    <li>Jardín Jacarandas con guías de iluminación en árboles</li>
                    <li>Jardín principal</li>
                    <li>Explanada 15 × 30 m</li>
                    <li>Estacionamiento privado y de proveedores</li>
                    <li>Cocina para montaje</li>
                    <li>Bodega y sanitarios</li>
                  </ul>
                </div>
                <div className="bopt2-footer">
                  <div className="bopt2-cap">
                    <span className="bopt2-cap-num">1–350</span>
                    <span className="bopt2-cap-label">personas</span>
                  </div>
                  <a href="https://wa.link/vtlfzu" target="_blank" rel="noopener noreferrer" className="bopt2-cta">Cotiza tu evento</a>
                </div>
              </div>
            </div>

          </div>
          <p className="boda-tagline">Naturaleza, privacidad y un espacio diseñado para celebrar sin prisa.</p>
        </div>
      </section>

      <div className="lp-incluye reveal-stagger" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?auto=format&fit=crop&w=2400&q=85)' }}>
        <div className="lp-incluye-veil" />
        <div className="container lp-incluye-inner">
          <div className="lp-incluye-head">
            <span className="eyebrow" style={{ color: 'var(--gold)' }}>Lo que incluye</span>
            <h2 className="display" style={{ color: 'var(--cream)' }}>Todo lo que importa, <span className="it">curado para ti.</span></h2>
          </div>
          <ul className="lp-incluye-list">
            {incluye.map((x, i) => <li key={i}>{x}</li>)}
          </ul>
        </div>
      </div>

      <Ornament glyph="❀" />

      <section className="lp-proceso">
        <div className="container">
          <div className="section-head reveal-stagger">
            <div>
              <div className="eyebrow">Cómo lo hacemos</div>
              <h2 className="display">Cuatro pasos. <br /><span className="it">Cero estrés.</span></h2>
            </div>
            <p>Nuestro proceso está diseñado para que disfrutes la planeación tanto como el día mismo.</p>
          </div>
          <div className="pilares-track reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2rem' }}>
            {[
            { no: '01', title: 'Conversación inicial', text: 'Por WhatsApp, en minutos. Entendemos tu visión y resolvemos dudas al instante.' },
            { no: '02', title: 'Visita guiada', text: 'Te recibimos en el refugio. Caminamos los espacios y dibujamos tu día.' },
            { no: '03', title: 'Propuesta a medida', text: 'Recibes un mapa claro del evento, los espacios y la inversión total.' },
            { no: '04', title: 'El gran día', text: 'Llegamos antes que tú. Nos aseguramos de que solo tengas que disfrutar.' }].
            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>
      </section>

      <Contacto />
      <Footer />
      <WhatsAppFloat />
    </>);

}

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