/* Bistro — pantalla Eventos privados & Empresas (alquiler de la sala) */
function EventsScreen({ onBack }) {
  // Correo formal pre-redactado (canal principal para empresas) + WhatsApp (canal rápido).
  const mailHref = "mailto:" + SITE.contact.email +
    "?subject=" + encodeURIComponent(SITE.events.emailSubject) +
    "&body=" + encodeURIComponent(SITE.events.emailBody);
  const waHref = SITE.contact.whatsappUrl + "?text=" + encodeURIComponent(SITE.events.quoteMessage);

  // Casos de uso de la sala privatizada.
  const useCases = [
    ["Conferencias & Capacitaciones",
     "Reuniones de equipo, charlas y talleres con presentación en 4K, micrófono y la comodidad de una butaca premium.",
     PATHS.present, "events/conferencia.jpg"],
    ["Lanzamientos & Activaciones",
     "Presenta tu producto o tu marca con sonido envolvente y una puesta en escena digna de una premier.",
     PATHS.star, "events/activacion.jpg"],
    ["Funciones privadas",
     "Reserva la película que quieras y vívela con tu grupo en una sala entera para ustedes.",
     PATHS.ticket, "events/fiesta.jpg"],
    ["Celebraciones",
     "Cumpleaños, aniversarios y despedidas con la cocina del bistró y atención dedicada de principio a fin.",
     PATHS.pop, "events/celebracion.jpg"],
  ];

  // Cifras de confianza (aforo y capacidades técnicas).
  const stats = [
    [SITE.events.capacity, "Privada para tu grupo"],
    ["Proyección 4K", "HDMI · laptop · streaming"],
    ["Sonido envolvente", "Micrófonos e iluminación"],
    ["Cocina del bistró", "Menú y coctelería a medida"],
  ];

  // Qué incluye la renta.
  const includes = [
    "Sala completa privatizada con butacas premium",
    "Proyección 4K y conexión directa para tu laptop",
    "Sonido envolvente, micrófonos e iluminación",
    "Menú del bistró y coctelería a la carta",
    "Coordinador de evento dedicado",
    "Climatización y parqueo gratuito en sitio",
  ];

  // Cómo reservar.
  const steps = [
    ["Cuéntanos tu evento",
     "Escríbenos por WhatsApp con la fecha, el tipo de evento y cuántas personas asistirán."],
    ["Diseñamos la experiencia",
     "Te enviamos una propuesta a tu medida: sala, proyección, menú y tiempos."],
    ["Confirmamos la fecha",
     "Reservas con anticipación y dejamos todo listo para tu día."],
    ["Disfruta en pantalla grande",
     "Llegas, presentas o celebras, y nosotros nos encargamos del resto."],
  ];

  return (
    <div className="ev-screen fade-up">
      {/* ── Hero ───────────────────────────────────────────── */}
      <section className="ev-hero">
        <div className="ev-hero-bg" />
        <image-slot id="ev-hero" src="events/fiesta.jpg" placeholder="Soltar foto del evento" radius="0"></image-slot>
        <div className="ev-hero-scrim" />
        <div className="wrap ev-hero-inner">
          <button className="btn btn-ghost btn-sm back-btn" onClick={onBack}>
            <Ico d={PATHS.chevL} size={16} /> Volver al inicio
          </button>
          <div className="ev-hero-copy">
            <div className="eyebrow">Eventos privados &amp; Empresas</div>
            <h1 className="ev-hero-title">Privatiza el cine para tu próximo gran evento</h1>
            <p className="ev-hero-lead">
              Conferencias, capacitaciones, lanzamientos de producto y funciones privadas
              en la pantalla grande de {SITE.brand.city} — con la cocina del bistró y un
              coordinador dedicado de principio a fin.
            </p>
            <div className="row gap12 ev-hero-actions">
              <a className="btn btn-gold btn-lg" href={mailHref}>
                <Ico d={PATHS.mail} size={18} /> Solicita tu cotización
              </a>
              <a className="btn btn-ghost btn-lg" href={waHref} target="_blank" rel="noopener noreferrer">
                <Ico d={PATHS.chat} size={16} style={{ color: "var(--gold)" }} /> WhatsApp
              </a>
            </div>
            <div className="ev-hero-note">{SITE.events.response} · {SITE.contact.email}</div>
          </div>
        </div>
      </section>

      {/* ── Cifras ─────────────────────────────────────────── */}
      <div className="wrap">
        <div className="ev-stats">
          {stats.map(([big, small]) => (
            <div key={small} className="ev-stat">
              <div className="ev-stat-big">{big}</div>
              <div className="ev-stat-small">{small}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Casos de uso ───────────────────────────────────── */}
      <section className="wrap section ev-pad">
        <div className="section-head">
          <div>
            <div className="eyebrow">Para lo que necesites</div>
            <h2 className="section-title">Un escenario, muchas ocasiones</h2>
          </div>
          <p className="muted ev-head-lead">
            Desde una junta de directorio hasta un cumpleaños inolvidable, adaptamos la sala a tu evento.
          </p>
        </div>
        <div className="ev-grid">
          {useCases.map(([t, d, icon, img], i) => (
            <div key={t} className="ev-card">
              <image-slot id={"ev-uc-" + i} src={img} shape="rect" placeholder="Soltar foto"></image-slot>
              <div className="ev-card-body">
                <div className="ev-card-icon"><Ico d={icon} size={22} /></div>
                <h3 className="ev-card-title">{t}</h3>
                <p className="muted">{d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Qué incluye ────────────────────────────────────── */}
      <section className="ev-includes-band">
        <div className="wrap ev-includes">
          <div className="ev-includes-copy">
            <div className="eyebrow">Todo listo, sin complicaciones</div>
            <h2 className="section-title">Qué incluye tu evento</h2>
            <p className="muted ev-includes-text">
              Reservas la sala completa y nosotros nos encargamos de la técnica, la comida y la
              logística para que solo te ocupes de tus invitados.
            </p>
            <a className="btn btn-gold btn-lg ev-includes-cta" href={mailHref}>
              <Ico d={PATHS.mail} size={18} /> Solicita tu cotización
            </a>
          </div>
          <ul className="ev-includes-list">
            {includes.map((it) => (
              <li key={it}>
                <span className="ev-check"><Ico d={PATHS.check} size={15} /></span>
                <span>{it}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ── Cómo reservar ──────────────────────────────────── */}
      <section className="wrap section ev-pad">
        <div className="section-head">
          <div>
            <div className="eyebrow">Así de fácil</div>
            <h2 className="section-title">Cómo reservar</h2>
          </div>
        </div>
        <div className="ev-steps">
          {steps.map(([t, d], i) => (
            <div key={t} className="ev-step">
              <span className="ev-step-n">{String(i + 1).padStart(2, "0")}</span>
              <h3 className="ev-step-title">{t}</h3>
              <p className="muted">{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ── CTA final ──────────────────────────────────────── */}
      <section className="wrap ev-pad" style={{ paddingTop: 0 }}>
        <div className="ev-cta">
          <div className="ev-cta-inner">
            <div>
              <div className="eyebrow">Hablemos de tu evento</div>
              <h2 className="ev-cta-title">Reserva la pantalla más grande de {SITE.brand.city}</h2>
              <p className="soft ev-cta-text">
                Cuéntanos la fecha y el tipo de evento. Te enviamos una propuesta a tu medida, sin compromiso.
              </p>
            </div>
            <div className="ev-cta-actions">
              <a className="btn btn-gold btn-lg" href={mailHref}>
                <Ico d={PATHS.mail} size={18} /> Escríbenos por correo
              </a>
              <div className="ev-cta-contact">
                <a href={mailHref}>{SITE.contact.email}</a>
                <a href={waHref} target="_blank" rel="noopener noreferrer">
                  <Ico d={PATHS.chat} size={13} style={{ verticalAlign: "-2px", marginRight: 5 }} />WhatsApp {SITE.contact.whatsapp}
                </a>
                <a className="ev-cta-addr" href={SITE.contact.mapsUrl} target="_blank" rel="noopener noreferrer">{SITE.contact.address}</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { EventsScreen });