// ============================================================
// Speakers + Pricing modules
// ============================================================
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

// ---------- Speakers ----------
function SpeakersSection({ limit = 18, showAll = true }) {
  const [hover, setHover] = useStateM(-1);
  const placeholderImage = "assets/incognito.jpg";
  // 18 placeholders
  const names = [
    "Ponente 01", "Ponente 02", "Ponente 03", "Ponente 04", "Ponente 05", "Ponente 06",
    "Ponente 07", "Ponente 08", "Ponente 09", "Ponente 10", "Ponente 11", "Ponente 12",
    "Ponente 13", "Ponente 14", "Ponente 15", "Ponente 16", "Ponente 17", "Ponente 18",
  ];
  const roles = [
    "Keynote · Estrategia", "Keynote · Ventas", "Panel · Inversión", "Workshop · Finanzas",
    "Keynote · Liderazgo", "Panel · Innovación", "Keynote · Marketing", "Workshop · IA",
    "Keynote · Propósito", "Panel · Galicia", "Keynote · Crecimiento", "Workshop · Marca",
    "Keynote · Equipos", "Panel · Fondos", "Keynote · Futuro", "Workshop · Ventas",
    "Keynote · Resiliencia", "Cierre · Inspiración",
  ];

  return (
    <section className="speakers-section" id="ponentes-invitados">
      <div className="speakers-header">
        <Reveal className="section-eyebrow">
          <span className="eyebrow-line" />
          <span>Ponentes · Edición 2026</span>
        </Reveal>
        <Reveal as="h2" className="section-title speakers-title" delay={80}>
          18 voces que están <em>cambiando</em> el emprendimiento hispano.
        </Reveal>
        <Reveal className="speakers-lede" delay={160}>
          Un line-up internacional cuidadosamente seleccionado. Founders de éxito,
          inversores, formadores y referentes del habla hispana que compartirán
          casos reales y aprendizajes aplicables desde el lunes.
        </Reveal>
      </div>

      {/* Fila destacada — 3 ponentes grandes */}
      <div className="speakers-featured">
        {names.slice(0, 3).map((n, i) => (
          <Reveal key={i} delay={i * 70}>
            <div
              className={`speaker-card speaker-card--featured ${hover === i ? "is-hover" : ""}`}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(-1)}
              data-cursor="Próximamente"
            >
              <div className="speaker-frame">
                <div className="speaker-featured-tag">Keynote</div>
                <div className="speaker-silhouette">
                  <img src={placeholderImage} alt={n} />
                </div>
                <div className="speaker-glass">
                  <div className="speaker-tbc">
                    <span className="mono">// confirmación próxima</span>
                  </div>
                </div>
              </div>
              <div className="speaker-info">
                <b>{n}</b>
                <span>{roles[i]}</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Resto de ponentes — cuadrícula equitativa */}
      <div className="speakers-grid">
        {names.slice(3, limit).map((n, i) => (
          <Reveal key={i + 3} delay={(i % 5) * 50}>
            <div
              className={`speaker-card ${hover === i + 3 ? "is-hover" : ""}`}
              onMouseEnter={() => setHover(i + 3)}
              onMouseLeave={() => setHover(-1)}
              data-cursor="Próximamente"
            >
              <div className="speaker-frame">
                <div className="speaker-silhouette">
                  <img src={placeholderImage} alt={n} />
                </div>
                <div className="speaker-glass">
                  <div className="speaker-tbc">
                    <span className="mono">// confirmación próxima</span>
                  </div>
                </div>
              </div>
              <div className="speaker-info">
                <b>{n}</b>
                <span>{roles[i + 3]}</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {showAll && (
        <Reveal className="speakers-foot" delay={80}>
          <p>Estamos confirmando los últimos ponentes. Anuncios semanales en nuestras redes.</p>
          <a href="/agenda/" className="btn btn-ghost" data-cursor="Ver agenda">
            Ver programa completo
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </Reveal>
      )}
    </section>
  );
}

// ---------- Pricing ----------
function PricingSection() {
  const tiers = [
    {
      key: "basica",
      name: "Entrada Básica",
      price: "59",
      plazas: 1222,
      color: "var(--c-suave)",
      badge: null,
      feat: [
        "Acceso al auditorio durante toda la jornada",
        "Plaza asignada en patio de butacas",
        "16 sesiones: keynotes, panels y workshops",
        "Acceso a la zona expo y patrocinadores",
        "Welcome pack oficial del foro",
        "Grabaciones disponibles 3 meses",
      ],
      cta: "Reservar plaza",
    },
    {
      key: "premium",
      name: "Entrada Premium",
      price: "250",
      plazas: 160,
      color: "var(--c-lima)",
      badge: "Más elegida",
      feat: [
        "Todo lo de la Entrada Básica, más:",
        "Asiento preferente en las primeras filas",
        "Coffee break y cóctel de mediodía incluidos",
        "Acceso a la zona de networking estructurado",
        "Sesión de speed-networking por sectores",
        "Acceso prioritario a workshops limitados",
        "Grabaciones disponibles 12 meses",
      ],
      cta: "Reservar Premium",
    },
    {
      key: "vip",
      name: "Entrada VIP",
      price: "650",
      plazas: 43,
      color: "var(--c-oliva)",
      badge: "Solo 43 plazas",
      feat: [
        "Todo lo de la Entrada Premium, más:",
        "Asiento en tribuna superior junto a ponentes",
        "Coffee break y cóctel con los ponentes",
        "Cena privada con el panel de speakers",
        "Mentorías 1:1 reservables con 2 ponentes",
        "Lounge VIP durante toda la jornada",
        "Acceso al after-party de organización",
        "Grabaciones + transcripciones de por vida",
      ],
      cta: "Reservar VIP",
    },
  ];

  return (
    <section className="pricing-section" id="entradas-foro">
      <div className="pricing-header">
        <Reveal className="section-eyebrow">
          <span className="eyebrow-line" />
          <span>Entradas · Aforo limitado</span>
        </Reveal>
        <Reveal as="h2" className="section-title pricing-title" delay={80}>
          Elige tu forma de <em>vivir el foro</em>.
        </Reveal>
        <Reveal className="pricing-lede" delay={160}>
          1.425 plazas totales. Todos los niveles incluyen acceso completo al evento.
          Elige el que mejor se ajuste a cómo quieres sacarle partido al día.
        </Reveal>
      </div>

      <div className="pricing-grid">
        {tiers.map((t, i) => (
          <Reveal key={t.key} className={`price-card price-${t.key}`} delay={i * 100}>
            {t.badge && <div className="price-badge" style={{ background: t.color }}>{t.badge}</div>}
            <div className="price-head">
              <div className="price-name">{t.name}</div>
              <div className="price-amount">
                <span className="price-currency">€</span>
                <span className="price-num">{t.price}</span>
                <span className="price-per">/ persona</span>
              </div>
              <div className="price-plazas">
                <span className="price-plazas-dot" style={{ background: t.color }} />
                {t.plazas.toLocaleString("es-ES")} plazas disponibles
              </div>
            </div>
            <ul className="price-list">
              {t.feat.map((f, j) => (
                <li key={j} className={j === 0 && f.includes("más:") ? "is-parent" : ""}>
                  {j === 0 && f.includes("más:") ? (
                    <span className="price-parent-label">{f}</span>
                  ) : (
                    <>
                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12l5 5L20 7"/></svg>
                      <span>{f}</span>
                    </>
                  )}
                </li>
              ))}
            </ul>
            <a href="#contacto-reservas" className={`btn ${t.key === "premium" ? "btn-primary" : "btn-ghost"} btn-lg`} data-cursor={t.cta}>
              {t.cta}
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          </Reveal>
        ))}
      </div>

      <Reveal className="pricing-note" delay={100}>
        <div className="mono">// Todas las entradas incluyen IVA. Política de cancelación hasta 15 días antes del evento.</div>
        <div className="mono">// Descuento grupos 4+ personas: -15%. Early bird hasta junio: -20%.</div>
      </Reveal>
    </section>
  );
}

Object.assign(window, { SpeakersSection, PricingSection });