/* global React, RIFA_DATA */
const { useState, useMemo, useEffect, useRef } = React;

// ============================================================
// Helpers
// ============================================================
function fmtMoney(n) {
  return n.toLocaleString('es-MX');
}
function pad3(n) {
  return String(n).padStart(3, '0');
}

// Íconos del equipamiento (stroke style flyer)
function EquipIcon({ kind }) {
  const props = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case 'spring':
      return <svg {...props}><path d="M6 4h12M6 8l12 4M6 12l12 4M6 16l12 4M6 20h12"/></svg>;
    case 'wheel':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg>;
    case 'audio':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>;
    case 'check':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>;
    case 'road':
      return <svg {...props}><path d="M4 21 8 3M20 21 16 3M12 3v3M12 10v3M12 17v3"/></svg>;
    case 'shield':
      return <svg {...props}><path d="M12 2 4 5v6c0 5 3.5 9.4 8 11 4.5-1.6 8-6 8-11V5l-8-3Z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'tv':
      return <svg {...props}><rect x="2" y="4" width="20" height="14" rx="1"/><path d="M8 22h8M12 18v4M8 9l4 3 4-3"/></svg>;
    case 'trophy':
      return <svg {...props}><path d="M6 9V4h12v5a6 6 0 0 1-12 0Z"/><path d="M6 5H4a2 2 0 0 0 2 4M18 5h2a2 2 0 0 1-2 4M9 22h6M12 15v7"/></svg>;
    case 'ticket':
      return <svg {...props}><path d="M2 9a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4Z"/><path d="M9 7v10"/></svg>;
    case 'pin':
      return <svg {...props}><path d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13Z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'card':
      return <svg {...props}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M7 15h3"/></svg>;
    case 'bank':
      return <svg {...props}><path d="M3 10 12 4l9 6"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18"/></svg>;
    case 'cash':
      return <svg {...props}><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 10v.01M18 14v.01"/></svg>;
    default:
      return null;
  }
}

// ============================================================
// NAV
// ============================================================
function Nav({ onCtaClick }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="brand" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <span className="brand-mark">RSP</span>
          <span>Rifa San Pedro</span>
        </a>
        <button className="btn-gold nav-cta" onClick={onCtaClick} style={{ ['--h']: '44px', padding: '0 22px', fontSize: '15px' }}>
          Aparta tus boletos
        </button>
      </div>
    </nav>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero({ ocupados, vendidos, onCtaClick }) {
  const D = RIFA_DATA;
  const universo = D.boletos.universoTotal;
  const lugares = D.boletos.lugaresTotales;
  const pct = (vendidos / lugares) * 100;

  return (
    <section className="hero">
      <div className="hero-glow" aria-hidden="true"></div>
      <div className="container hero-inner">
        <div>
          <span className="hero-tag">
            <span className="dot"></span>
            San Pedro Garza García, N.L. · 500 lugares
          </span>

          <h1 className="hero-title">
            <span className="line stroke">Silverado</span>
            <span className="line">2026</span>
          </h1>

          <p className="hero-sub">
            Chevrolet Silverado <b style={{ color: 'var(--ink)' }}>Regular Cab 4×4 2026</b>, blanca,
            con suspensión arriba, rines deportivos y sonido <b style={{ color: 'var(--ink)' }}>JL Audio</b>.
            Sorteo por <b style={{ color: 'var(--ink)' }}>Lotería Nacional</b>.
          </p>

          <div className="hero-meta">
            <div className="meta-block counter">
              <div className="label">Lugares vendidos</div>
              <div className="counter-row">
                <span className="counter-sold">{String(vendidos).padStart(3, '0')}</span>
                <span className="counter-sep">/</span>
                <span className="counter-total">{lugares}</span>
              </div>
              <div className="counter-bar"><div style={{ width: `${pct}%` }}></div></div>
              <div className="counter-cap">
                {ocupados} de {universo.toLocaleString('es-MX')} números ocupados
              </div>
            </div>
            <div className="divider"></div>
            <div className="meta-block date">
              <div className="label">Sorteo</div>
              <div className="value">Por confirmar</div>
              <span className="small">Últimos 3 dígitos · Lotería Nacional</span>
            </div>
          </div>

          <div className="hero-cta">
            <button className="btn-gold is-lg" onClick={onCtaClick}>
              Aparta tus boletos
              <span aria-hidden="true">→</span>
            </button>
            <span className="price-tag">$<b>{fmtMoney(D.boletos.precioLugar)}</b> MXN <span>· 2 números</span></span>
          </div>

          {/* CLAIM: doble oportunidad */}
          <div className="hero-claim">
            <div className="claim-text">
              <b>Doble oportunidad de ganar</b>
              <span>Eliges <b>1 número del 000 al 499</b> y te asignamos su par automáticamente. Cada lugar = 2 oportunidades por $2,400. Son 500 lugares — cuando se llenen, el universo del sorteo (000–999) queda cubierto y siempre hay ganador.</span>
            </div>
          </div>

        </div>

        <div className="hero-photo">
          <image-slot
            id="hero-photo"
            src="flyer.jpg"
            placeholder="Flyer Rifa San Pedro"
            shape="rounded"
          ></image-slot>
        </div>
      </div>

    </section>
  );
}

// ============================================================
// GALERÍA
// ============================================================
function Galeria() {
  // Fotos en /gallery/ — el `pos` es object-position vertical (50%=centro, 100%=base).
  // Subir el valor muestra más de la parte inferior (llantas, defensa).
  const photos = [
    { src: '/gallery/1.jpg', pos: 'center 58%' },
    { src: '/gallery/2.jpg', pos: 'center 65%' },
    { src: '/gallery/3.jpg', pos: 'center center' },
    { src: '/gallery/4.jpg', pos: 'center 70%' },
    { src: '/gallery/5.jpg', pos: 'center center' },
    { src: '/gallery/6.jpg', pos: 'center center' },
  ];
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const [inView, setInView] = useState(false);
  const touchStartX = useRef(0);
  const resumeTimer = useRef(null);
  const carouselRef = useRef(null);

  // Detecta cuándo la galería está visible — sólo entonces arranca el auto-avance.
  // Evita que el usuario aterrice en la foto 3 ó 4 después de cargar la página.
  useEffect(() => {
    const el = carouselRef.current;
    if (!el || !('IntersectionObserver' in window)) {
      setInView(true);
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((entry) => setInView(entry.isIntersecting));
    }, { threshold: 0.35 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  // Auto-avance cada 4.5s sólo mientras la galería está visible y no hay interacción reciente
  useEffect(() => {
    if (!inView || paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % photos.length), 4500);
    return () => clearInterval(t);
  }, [inView, paused, photos.length]);

  function go(n) {
    setIdx(((n % photos.length) + photos.length) % photos.length);
    setPaused(true);
    clearTimeout(resumeTimer.current);
    // Reactiva el auto-avance 8s después del último toque
    resumeTimer.current = setTimeout(() => setPaused(false), 8000);
  }

  function onTouchStart(e) {
    touchStartX.current = e.touches[0].clientX;
  }
  function onTouchEnd(e) {
    const dx = e.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(dx) < 50) return;
    go(dx < 0 ? idx + 1 : idx - 1);
  }

  return (
    <section id="galeria" className="gallery-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Galería</span>
          <h2 className="section-title">Mírala bien.</h2>
          <p className="section-sub">El que se la lleve, se lleva <b style={{ color: 'var(--y)' }}>esto</b>. Tal cual, como sale en las fotos.</p>
        </div>
        <div
          className="carousel"
          ref={carouselRef}
          onTouchStart={onTouchStart}
          onTouchEnd={onTouchEnd}
        >
          <button
            className="carousel-arrow left"
            onClick={() => go(idx - 1)}
            aria-label="Foto anterior"
            type="button"
          >‹</button>
          <div
            className="carousel-track"
            style={{ transform: `translateX(-${idx * 100}%)` }}
          >
            {photos.map((p, i) => (
              <div className="carousel-slide" key={i}>
                <img
                  src={p.src}
                  alt={`Silverado ${i + 1}`}
                  loading={i === 0 ? 'eager' : 'lazy'}
                  style={{ objectPosition: p.pos }}
                />
              </div>
            ))}
          </div>
          <button
            className="carousel-arrow right"
            onClick={() => go(idx + 1)}
            aria-label="Foto siguiente"
            type="button"
          >›</button>
        </div>
        <div className="carousel-dots" role="tablist" aria-label="Selector de foto">
          {photos.map((_, i) => (
            <button
              key={i}
              type="button"
              className={`carousel-dot ${i === idx ? 'active' : ''}`}
              onClick={() => go(i)}
              aria-label={`Ir a foto ${i + 1}`}
              aria-selected={i === idx}
              role="tab"
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FICHA TÉCNICA
// ============================================================
function FichaTecnica() {
  const D = RIFA_DATA.premio;
  return (
    <section id="ficha" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Ficha técnica</span>
          <h2 className="section-title">El fierro,<br/>al detalle.</h2>
          <p className="section-sub">Sin letras chiquitas. Esto es exactamente lo que estás jugando.</p>
        </div>
        <div className="spec-wrap">
          <div className="spec-photo">
            <image-slot id="ficha-photo" placeholder="Foto 3/4 trasera de la Silverado" shape="rounded"></image-slot>
          </div>
          <ul className="spec-list">
            {D.fichaTecnica.map((row, i) => (
              <li key={i}>
                <span className="k">{row.etiqueta}</span>
                <span className="v">{row.valor}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CÓMO FUNCIONA (3 pasos nuevos)
// ============================================================
function ComoFunciona({ onCtaClick }) {
  const pasos = [
    {
      n: '01',
      t: 'Elige tu número',
      d: 'Toca un número del 000 al 499. Su par (tu número + 500) sale automático. Cada lugar = 2 oportunidades por $2,400. Si quieres más lugares, sigue eligiendo del grid.',
    },
    {
      n: '02',
      t: 'Paga como prefieras',
      d: 'Por transferencia bancaria o en efectivo. Tus números quedan apartados a tu nombre desde que los reservas, hasta que confirmemos tu pago.',
    },
    {
      n: '03',
      t: 'Recibe tus boletos por WhatsApp',
      d: 'En cuanto validamos el pago, te llegan tus boletos digitales con tu nombre, tus números y toda la info del sorteo. Listo, ya estás dentro.',
    },
  ];
  return (
    <section id="como-funciona">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Cómo funciona</span>
          <h2 className="section-title">Tres pasos.<br/>El sueño puede ser tuyo.</h2>
          <p className="section-sub">Apartar tus boletos te toma menos de lo que dura una canción.</p>
        </div>
        <div className="steps">
          {pasos.map((p) => (
            <div className="step" key={p.n}>
              <div className="num">{p.n}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
        <div className="cta-center">
          <button className="btn-gold is-lg" onClick={onCtaClick}>Aparta tus boletos<span aria-hidden="true">→</span></button>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// MECÁNICA DEL SORTEO — Lotería Nacional
// ============================================================
function Mecanica() {
  // Animación: dígitos girando estilo "reloj" del sorteo
  const [d1, setD1] = useState(0);
  const [d2, setD2] = useState(0);
  const [d3, setD3] = useState(0);

  useEffect(() => {
    let raf, t1 = 0, t2 = 0, t3 = 0;
    const tick = (t) => {
      if (t - t1 > 70) { setD1((x) => (x + 1) % 10); t1 = t; }
      if (t - t2 > 110) { setD2((x) => (x + 1) % 10); t2 = t; }
      if (t - t3 > 170) { setD3((x) => (x + 1) % 10); t3 = t; }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section id="mecanica" className="mecanica">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Mecánica del sorteo</span>
          <h2 className="section-title">Lotería<br/>Nacional.</h2>
          <p className="section-sub">El sorteo más viejo y limpio de México decide quién se lleva la camioneta. Lo ves en TV, igual que todos.</p>
        </div>

        <div className="mecanica-card">
          <div>
            <h3 className="mech-h">Los últimos 3 dígitos del Sorteo Mayor.</h3>
            <p className="mech-p">
              El día del sorteo (<b style={{ color: 'var(--y)' }}>fecha por confirmar</b>), la Lotería Nacional publica
              el número ganador. Tomamos sus <b style={{ color: 'var(--ink)' }}>últimos 3 dígitos</b> — un número entre 000 y 999.
              Si compraste ese número, te llevas la Silverado.
            </p>
            <ul className="mecanica-points">
              <li>
                <span className="tick">✓</span>
                <span>El sorteo es <b>público y transmitido en TV nacional</b>. Nadie lo puede manipular — ni nosotros, ni nadie.</span>
              </li>
              <li>
                <span className="tick">✓</span>
                <span>Son <b>500 lugares</b> a la venta. Eliges <b>1 número del 000 al 499</b> y su par <b>+500</b> sale automático (000↔500, 001↔501, …, 499↔999). Por eso el sorteo cubre el universo de 1,000 números.</span>
              </li>
              <li>
                <span className="tick">✓</span>
                <span>Cuando se llenan los 500 lugares, <b>el universo entero está cubierto</b> y siempre hay ganador.</span>
              </li>
              <li>
                <span className="tick">✓</span>
                <span>Te avisamos por WhatsApp con la fecha exacta del sorteo para que lo veas en vivo si quieres.</span>
              </li>
            </ul>
          </div>

          <div className="mecanica-visual">
            <div className="loteria-ticket">
              <div className="lt-head">
                <div className="lt-seal" aria-hidden="true">
                  <svg viewBox="0 0 40 40" width="28" height="28"><circle cx="20" cy="20" r="16" fill="none" stroke="currentColor" strokeWidth="1.6"/><circle cx="20" cy="20" r="9" fill="none" stroke="currentColor" strokeWidth="1.6"/><circle cx="20" cy="20" r="3" fill="currentColor"/></svg>
                </div>
                <div>
                  <div className="lt-kicker">Sorteo Mayor</div>
                  <div className="lt-title">Lotería Nacional</div>
                </div>
              </div>
              <div className="lt-divider"></div>
              <div className="lt-label">Últimos 3 dígitos · ganador</div>
              <div className="lt-digits">
                <span>{d1}</span>
                <span>{d2}</span>
                <span>{d3}</span>
              </div>
              <div className="lt-footnote">— Demo —<br/>Así se ve el número el día del sorteo</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function FAQ() {
  const items = [
    {
      q: '¿Cómo eligen al ganador?',
      a: 'Usamos los últimos 3 dígitos del Sorteo Mayor de la Lotería Nacional del día del sorteo. Es público, transmitido en televisión nacional. Nosotros no podemos manipularlo. Si tienes ese número, ganas.',
    },
    {
      q: '¿Por qué eligo solo un número y aparecen dos?',
      a: 'Cada lugar incluye 2 números, pero solo eliges 1. El segundo sale automático sumando 500 a tu elección: 000 va con 500, 001 con 501, …, 499 con 999. Por $2,400 te llevas el par — el doble de probabilidades en el sorteo.',
    },
    {
      q: 'Solo veo 500 números en el grid, ¿qué pasa con los otros 500?',
      a: 'En el grid solo se muestran del 000 al 499 — los que tú puedes elegir. Los del 500 al 999 son los pares automáticos de cada uno (000↔500, 001↔501, …, 499↔999). El sorteo de la Lotería Nacional usa los 1,000 números completos.',
    },
    {
      q: '¿Puedo comprar más de un lugar?',
      a: 'Sí. Cada lugar son 2 números (tu elección + su par +500) por $2,400. Puedes apartar 2, 3, 5… lugares — los que quieras, mientras haya disponibles. El precio se calcula automáticamente.',
    },
    {
      q: '¿Cómo pago mis boletos?',
      a: 'Dos opciones: por transferencia bancaria (SPEI) o en efectivo. Se validan manualmente — te confirmamos por WhatsApp en menos de 24 horas.',
    },
    {
      q: '¿Cuánto duran mis números apartados?',
      a: 'Quedan a tu nombre hasta que confirmemos tu pago. No se liberan automáticamente. Si por alguna razón no puedes completar el pago, escríbenos por WhatsApp y coordinamos.',
    },
    {
      q: '¿Qué pasa si el número que sale no lo compró nadie?',
      a: 'Si los 3 dígitos del sorteo no corresponden a ningún boleto vendido, se reasigna al siguiente sorteo de la Lotería Nacional y avisamos al grupo por WhatsApp. (Reglas finales se confirman en el grupo antes de publicar.)',
    },
    {
      q: '¿Cómo se entrega la camioneta?',
      a: 'En persona, en San Pedro Garza García, N.L., con factura original a nombre del ganador. Si vive en otra ciudad, coordinamos traslado por su cuenta o nos vemos a la mitad del camino.',
    },
    {
      q: '¿Quién cubre placas, tenencia y trámites?',
      a: 'La camioneta se entrega plaqueada y con tenencia del año pagada. Los trámites de cambio de propietario (refrendo, verificación posterior, etc.) corren por cuenta del ganador, igual que en cualquier compraventa.',
    },
  ];
  return (
    <section id="faq" style={{ background: 'var(--bg-2)' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="section-head">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 className="section-title">Lo que<br/>siempre nos preguntan.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <details className="faq-item" key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="plus" aria-hidden="true">+</span>
              </summary>
              <div className="faq-body">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA BANNER
// ============================================================
function CtaBanner({ onCtaClick, vendidos }) {
  const D = RIFA_DATA;
  const restantes = D.boletos.lugaresTotales - vendidos;
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="cta-banner">
          <span className="eyebrow" style={{ marginBottom: 8 }}>No te quedes fuera</span>
          <h3>{restantes} lugares<br/>todavía libres.</h3>
          <p>Eliges 1 número del 000 al 499 y se te asigna su par +500. Si te toca, te toca con todo: rines, JL Audio y suspensión arriba.</p>
          <button className="btn-gold is-lg" onClick={onCtaClick}>
            Aparta tus boletos ahora <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  const D = RIFA_DATA;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div>
            <h5>Contacto directo</h5>
            <a className="wa-block" href={D.contacto.whatsappLink} target="_blank" rel="noreferrer">
              <span className="ico" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11 11 0 0 0 3.6 17.3L2 22l4.8-1.5A11 11 0 1 0 20.5 3.5ZM12 20.2c-1.7 0-3.4-.4-4.8-1.3l-.3-.2-2.9.9.9-2.8-.2-.3A8.9 8.9 0 1 1 12 20.2Zm5.1-6.7c-.3-.1-1.6-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1a7 7 0 0 1-2-1.3 7.6 7.6 0 0 1-1.4-1.8c-.1-.3 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.7-1.7c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.2.3-1 1-1 2.4s1 2.8 1.1 3c.2.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.6-.7 1.8-1.3.2-.7.2-1.2.2-1.3 0-.1-.3-.2-.6-.3Z"/></svg>
              </span>
              <span className="stack">
                <span>WhatsApp</span>
                <b>{D.contacto.whatsapp}</b>
              </span>
            </a>
            <p style={{ marginTop: 14, fontSize: 14, color: 'var(--ink-dim)', maxWidth: '36ch' }}>
              Respondemos rapidito de lunes a domingo, de 9 am a 10 pm.
            </p>
            <p style={{ marginTop: 8, fontSize: 13, color: 'var(--ink-dim)', display: 'flex', alignItems: 'center', gap: 6 }}>
              <EquipIcon kind="pin" /> {D.contacto.ciudad}
            </p>
          </div>

          <div>
            <h5>Navega</h5>
            <p><a href="#galeria">Galería</a></p>
            <p><a href="#ficha">Ficha técnica</a></p>
            <p><a href="#como-funciona">Cómo funciona</a></p>
            <p><a href="#mecanica">Mecánica del sorteo</a></p>
            <p><a href="#selector">Boletos</a></p>
            <p><a href="#faq">Preguntas frecuentes</a></p>
            <p style={{ marginTop: 14 }}>
              <a
                href="/api/disponibles-pdf"
                target="_blank"
                rel="noreferrer"
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '8px 14px',
                  border: '1px solid rgba(255, 208, 0, 0.4)',
                  borderRadius: 6,
                  color: 'var(--y)',
                  fontFamily: 'var(--f-mono)',
                  fontSize: 11,
                  letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                  textDecoration: 'none'
                }}
              >
                📄 Descargar lista de boletos (PDF)
              </a>
            </p>
          </div>

          <div>
            <h5>{D.marca.nombre}</h5>
            <p style={{ color: 'var(--ink-mute)' }}>
              Rifa privada entre amigos y conocidos.
              Sorteo por Lotería Nacional, entrega notariada,
              cero secretos.
            </p>
            <p style={{ color: 'var(--ink-dim)', fontSize: 13, marginTop: 10 }}>
              ¿Quieres ver la camioneta en persona antes de apartar?
              Escríbenos por WhatsApp y agendamos.
            </p>
            <p style={{ color: 'var(--y)', fontSize: 12, marginTop: 14, fontFamily: 'var(--f-mono)', letterSpacing: '0.12em' }}>
              {D.marca.dominio}
            </p>
          </div>
        </div>

        <div className="legal">
          <span>© 2026 {D.marca.nombre} · Sorteo privado entre conocidos.</span>
          <span>Hecho con cariño y mucha suerte 🍀</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// FLOATING CTA mobile — adaptativo según selección
// ============================================================
function FloatCta({ onCtaClick, selected, total }) {
  const D = RIFA_DATA.boletos;
  const offset = D.desplazamientoPar;
  if (selected && selected.length > 0) {
    // DEC-028: cada selección es 1 lugar (par +500 automático). Mostramos
    // el mismo formato que el botón principal del Selector.
    const sorted = [...selected].sort((a, b) => a - b);
    let topText;
    if (sorted.length === 1) {
      const n = sorted[0];
      topText = `Separar mi lugar #${pad3(n)} + #${pad3(n + offset)}`;
    } else {
      topText = `Separar mis ${sorted.length} lugares`;
    }
    return (
      <div className="float-cta has-selection">
        <span className="price">
          <span>{topText}</span>
          <b>${fmtMoney(total)} MXN</b>
        </span>
        <button className="btn-gold" onClick={onCtaClick}>
          Apartar
          <span aria-hidden="true">→</span>
        </button>
      </div>
    );
  }
  return (
    <div className="float-cta">
      <span className="price">
        <span>Por lugar · 2 números</span>
        <b>${fmtMoney(D.precioLugar)} MXN</b>
      </span>
      <button className="btn-gold cta-pulse" onClick={onCtaClick}>
        Busca tu número
        <span aria-hidden="true">→</span>
      </button>
    </div>
  );
}

Object.assign(window, {
  Nav, Hero, Galeria, FichaTecnica, ComoFunciona, Mecanica,
  FAQ, CtaBanner, Footer, FloatCta, EquipIcon,
  fmtMoney, pad3,
});