// ===== RIVAMAR Group — Landing EXPONOR 2026 (/exponor) =====
const { useState, useEffect } = React;


function Countdown({ target }) {
  const calc = () => {
    const raw = new Date(target).getTime() - Date.now();
    const live = raw <= 0;
    const diff = Math.max(0, raw);
    return {
      live,
      d: Math.floor(diff / 86400000),
      h: Math.floor((diff / 3600000) % 24),
      m: Math.floor((diff / 60000) % 60),
      s: Math.floor((diff / 1000) % 60),
    };
  };
  const [t, setT] = useState(calc());
  useEffect(() => {
    const id = setInterval(() => setT(calc()), 1000);
    return () => clearInterval(id);
  }, [target]);
  if (t.live) {
    return (
      <div className="rounded-xl bg-exponor/15 border border-exponor/40 px-6 py-4 text-center">
        <div className="inline-flex items-center gap-2 text-exponor font-bold text-lg">
          <span className="flex h-2.5 w-2.5 relative"><span className="animate-ping absolute inline-flex h-2.5 w-2.5 rounded-full bg-exponor opacity-75"></span><span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-exponor"></span></span>
          ¡EXPONOR está en marcha!
        </div>
        <p className="text-sm text-gray-200 mt-1.5">Reserva tu <strong className="text-gold">15% de descuento</strong> — vigente todo junio.</p>
      </div>
    );
  }
  const cell = (v, l) => (
    <div className="flex flex-col items-center">
      <span className="grid place-items-center min-w-[64px] md:min-w-[80px] h-16 md:h-20 rounded-xl bg-carbon border border-gold/30 font-display text-3xl md:text-4xl font-bold text-gold tabular-nums">
        {String(v).padStart(2, '0')}
      </span>
      <span className="text-[10px] uppercase tracking-wider text-gray-400 mt-2">{l}</span>
    </div>
  );
  return (
    <div className="flex gap-3 md:gap-4">
      {cell(t.d, 'Días')}{cell(t.h, 'Horas')}{cell(t.m, 'Min')}{cell(t.s, 'Seg')}
    </div>
  );
}

function Exponor({ go, data, edit, onEdit }) {
  const d = data || {};
  const pasos = [
    ['Reserva online', 'Marca la casilla EXPONOR e ingresa tu número de credencial al reservar.'],
    ['Presenta tu credencial', 'Muestra tu credencial física o digital del evento al solicitar la cuenta.'],
    ['Disfruta el 15%', 'El descuento se aplica automáticamente sobre el total de tu consumo.'],
  ];
  return (
    <main>
      {/* Hero campaña */}
      <section className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0">
          <div className="hero-slider exponor-slider">
            {[d.img, d.img2, d.img3].filter(Boolean).map((src, i) => (
              <div className="hero-slide" key={i}>
                <ImgSlot label="Montaje EXPONOR 2026 — gastronomía para delegaciones" src={src} tone="#C9A24B" className="w-full h-full" />
              </div>
            ))}
          </div>
          <div className="absolute inset-0" style={{ background: 'linear-gradient(to bottom, rgb(var(--c-carbon) / calc(var(--exponor-overlay,0.75) * 1.1)), rgb(var(--c-carbon) / calc(var(--exponor-overlay,0.75) * 1.2)) 55%, rgb(var(--c-carbon)))' }}></div>
        </div>
        <div className="relative max-w-5xl mx-auto px-5 lg:px-8 py-24 text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gold/15 border border-gold/30 text-gold text-xs font-bold uppercase tracking-wider mb-6 reveal">
            ★ EXPONOR CHILE 2026 · 8–11 de junio
          </div>
          <h1 className="font-display text-4xl md:text-6xl font-bold text-gray-50 tracking-tight leading-[1.05] reveal reveal-d1">
            15% de descuento para <span className="text-shimmer">EXPONOR 2026</span>
          </h1>
          <Editable as="p" value={d.cuerpo} path="exponor.cuerpo" edit={edit} onEdit={onEdit}
            className="mt-5 text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed reveal reveal-d2" />
          <div className="mt-10 flex flex-col items-center gap-6">
            <p className="text-xs uppercase tracking-[0.28em] text-gray-500">El beneficio comienza en</p>
            <Countdown target={EXPONOR_INICIO + 'T09:00:00'} />
            <Btn variant="gold" onClick={() => go('reservas', { exponor: true })} className="!px-8 !text-base mt-2 animate-pulse-soft">
              Reservar con descuento EXPONOR
            </Btn>
          </div>
          {/* Prensa minera oficial — destacado bajo el contador */}
          <div className="mt-12 max-w-4xl mx-auto reveal">
            <RevistaMCH />
          </div>
        </div>
      </section>

      {/* Cómo funciona */}
      <section className="max-w-7xl mx-auto px-5 lg:px-8 py-20">
        <SectionHead eyebrow="Cómo aprovecharlo" title="Tres pasos simples" center />
        <div className="grid md:grid-cols-3 gap-6">
          {pasos.map(([t, d], i) => (
            <div key={t} className="bg-iron border border-white/10 rounded-xl p-7 text-center">
              <span className="grid place-items-center w-12 h-12 rounded-full bg-gold text-carbon font-display font-bold text-xl mx-auto">{i + 1}</span>
              <h3 className="font-display font-bold text-gray-50 mt-4">{t}</h3>
              <p className="text-sm text-gray-400 mt-2 leading-relaxed">{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Locales participantes */}
      <section className="border-y border-white/10 bg-steel/30">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 py-16">
          <h2 className="font-display text-2xl font-bold text-gray-50 text-center mb-10">Válido en los tres locales</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {LOCALES.map((l) => (
              <button key={l.id} onClick={() => go('reservas', { local: l.id, exponor: true })}
                className="group bg-iron border border-white/10 rounded-xl overflow-hidden text-left hover:border-gold/40 transition-colors">
                <div className="relative">
                  <ImgSlot label={l.foto} src={l.foto_img} tone={l.tono} ratio="16/9" className="w-full" />
                  <span className="absolute top-3 right-3"><span className="px-2 py-1 rounded bg-gold text-carbon text-[10px] font-bold">−15%</span></span>
                </div>
                <div className="p-5">
                  <h3 className="font-display font-bold text-gray-50">{l.nombre}</h3>
                  <p className="text-sm text-gray-400 mt-1">{l.tagline}</p>
                  <span className="inline-flex items-center gap-1 text-sm font-semibold text-gold mt-3 group-hover:gap-2 transition-all">Reservar aquí →</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Condiciones */}
      <section className="max-w-3xl mx-auto px-5 lg:px-8 py-14 text-center">
        <h3 className="font-display text-lg font-bold text-gray-50">Condiciones del beneficio</h3>
        <p className="text-sm text-gray-400 mt-3 leading-relaxed">
          El descuento del 15% requiere la presentación de la credencial oficial física o digital de EXPONOR 2026 al momento de solicitar la cuenta. Beneficio vigente durante todo el mes del evento (Junio 2026). No acumulable con otras promociones.
        </p>
        <p className="text-xs text-gray-600 mt-4 font-mono">Código de reserva: EXPONOR15</p>
      </section>
    </main>
  );
}

Object.assign(window, { Exponor });