/* eslint-disable react/prop-types */
/**
 * EventosBody · Página Eventos · tabs Próximos/Pasados.
 * Brief 1 §3.11.
 */

const { useState: uS_Ev, useMemo: uM_Ev } = React;

function EventosBody() {
  const EVENTS = window.CK_EVENTS || [];
  const [tab, setTab] = uS_Ev('upcoming');

  const filtered = uM_Ev(() =>
    EVENTS.filter(e => tab === 'upcoming' ? e.upcoming : !e.upcoming),
    [tab, EVENTS]
  );
  const upcomingCount = EVENTS.filter(e => e.upcoming).length;
  const pastCount     = EVENTS.length - upcomingCount;

  return (
    <React.Fragment>
      {/* Prosperia Day — evento ancla del año */}
      <section id="prosperia-day" data-screen-label="01b Prosperia Day Detail" style={evStyles.pdSection}>
        <div style={evStyles.pdBgImage} aria-hidden="true" />
        <div style={evStyles.pdBgOverlay} aria-hidden="true" />

        <div className="container" style={evStyles.pdInner}>
          <window.Reveal style={evStyles.pdHeader}>
            <span style={evStyles.pdEyebrow}>EVENTO PROPIO · CADA PRIMAVERA</span>
            <h2 style={evStyles.pdTitle}>
              <span style={evStyles.pdBrand}>PROSPERIA DAY</span>
            </h2>
            <p style={evStyles.pdSubtitle}>
              Un día al año en Monterrey, todos los actores de la red que sostenemos en una sola mesa.
            </p>
          </window.Reveal>

          <window.Reveal delay={140} style={evStyles.pdBody}>
            <p style={evStyles.pdLead}>
              Clientes, aliados, socios comerciales y autoridades de las ciudades y estados que asesoramos se reúnen para que la red de la que dependemos pueda volver a encontrarse cara a cara. La promesa es triple: <strong style={evStyles.pdStrong}>que no quede nada sin decirse, ningún concepto sin retarse, ningún lazo sin estrecharse.</strong>
            </p>
            <p style={evStyles.pdLead}>
              El día se organiza en 40 foros temáticos. Cada foro lo conducen <strong style={evStyles.pdStrong}>6 moderadores expertos — 240 en total</strong>: voces que provienen de quienes nos contratan, financian, asesoran y desafían todos los días. Conversaciones donde el lujo es la franqueza y el contenido es lo que los participantes traen, no lo que los ponentes recitan.
            </p>
            <p style={evStyles.pdLead}>
              Esos 240 moderadores, sumados al resto de asistentes, son <strong style={evStyles.pdStrong}>la red Prosperia</strong>: clientes, aliados, amigos, consejeros y asociados que han caminado con nosotros durante 18 años.
            </p>
          </window.Reveal>

          <window.Reveal delay={260} style={evStyles.pdStatsRow}>
            <div style={evStyles.pdStat}>
              <span style={evStyles.pdStatNum}>40</span>
              <span style={evStyles.pdStatLabel}>FOROS TEMÁTICOS</span>
            </div>
            <div style={evStyles.pdStat}>
              <span style={evStyles.pdStatNum}>240</span>
              <span style={evStyles.pdStatLabel}>MODERADORES EXPERTOS</span>
              <span style={evStyles.pdStatSub}>6 por foro</span>
            </div>
            <div style={evStyles.pdStat}>
              <span style={evStyles.pdStatNum}>1</span>
              <span style={evStyles.pdStatLabel}>DÍA, CADA PRIMAVERA</span>
            </div>
          </window.Reveal>

          <window.Reveal delay={380} style={evStyles.pdCtaRow}>
            <a href="#contacto" className="btn btn-copper" data-cursor="link" style={evStyles.pdCta}>
              Solicitar invitación
              <window.Icon name="arrow-right" size={16} stroke={1.8} />
            </a>
            <span style={evStyles.pdNote}>Por invitación · cupo limitado por foro</span>
          </window.Reveal>
        </div>
      </section>

      {/* Agenda regular de eventos */}
    <section data-screen-label="02 Eventos" style={evStyles.section}>
      <div className="container">
        <window.Reveal style={evStyles.head}>
          <span className="eyebrow">AGENDA · 2025–2026</span>
          <h2 style={evStyles.h2}>Conferencias, paneles y cátedras donde compartimos lo aprendido.</h2>
        </window.Reveal>

        <div style={evStyles.tabs} role="tablist">
          <button onClick={() => setTab('upcoming')} role="tab" aria-selected={tab === 'upcoming'} data-cursor="link"
            style={{ ...evStyles.tab, ...(tab === 'upcoming' ? evStyles.tabActive : null) }}>
            Próximos
            <span style={evStyles.tabCount}>{upcomingCount}</span>
          </button>
          <button onClick={() => setTab('past')} role="tab" aria-selected={tab === 'past'} data-cursor="link"
            style={{ ...evStyles.tab, ...(tab === 'past' ? evStyles.tabActive : null) }}>
            Pasados
            <span style={evStyles.tabCount}>{pastCount}</span>
          </button>
        </div>

        <ol style={evStyles.list}>
          {filtered.map((e, i) => (
            <window.Reveal as="li" key={i} delay={i * 70} data-cursor="link" style={evStyles.item}>
              <div style={evStyles.dateBlock}>
                <span style={evStyles.day}>{e.day}</span>
                <span style={evStyles.monthYear}>
                  <span style={evStyles.month}>{e.month}</span>
                  <span style={evStyles.year}>{e.year}</span>
                </span>
              </div>

              <div style={evStyles.contentBlock}>
                <div style={evStyles.eventTags}>
                  <span style={evStyles.eventType}>{e.type.toUpperCase()}</span>
                  <span style={evStyles.eventCity}>· {e.city}</span>
                </div>
                <h3 style={evStyles.eventName}>{e.name}</h3>
                <p style={evStyles.eventTopic}>"{e.topic}"</p>
                <div style={evStyles.speakerRow}>
                  <div style={evStyles.speakerAvatar}>{e.speaker.split(' ').slice(0, 2).map(s => s[0]).join('').toUpperCase()}</div>
                  <span style={evStyles.speakerName}>{e.speaker}</span>
                </div>
              </div>

              <div style={evStyles.cta}>
                <a href={e.link} className={e.upcoming ? 'btn btn-copper' : 'btn btn-navy-outline'} data-cursor="link">
                  {e.upcoming ? 'Más información' : 'Ver recap'}
                  <window.Icon name={e.upcoming ? 'arrow-right' : 'arrow-up-right'} size={16} stroke={1.8} />
                </a>
              </div>
            </window.Reveal>
          ))}
        </ol>

        {filtered.length === 0 && (
          <div style={evStyles.empty}>
            <window.Icon name="clock" size={40} stroke={1.4} />
            <p>Sin eventos en esta vista por ahora.</p>
          </div>
        )}
      </div>
    </section>
    </React.Fragment>
  );
}

const evStyles = {
  // Prosperia Day — sección ancla
  pdSection: {
    position: 'relative',
    background: 'var(--color-navy-deep)',
    color: '#fff',
    paddingBlock: 'clamp(80px, 12vw, 160px)',
    overflow: 'hidden',
  },
  pdBgImage: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("../home/assets/images-distritos/distrito-tec.jpg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center 65%',
    opacity: 0.22,
    filter: 'saturate(0.6)',
  },
  pdBgOverlay: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(15,27,35,0.78) 0%, rgba(15,27,35,0.93) 100%)',
  },
  pdInner: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    gap: 'clamp(28px, 4vw, 56px)',
  },
  pdHeader: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    maxWidth: 880,
  },
  pdEyebrow: {
    fontWeight: 700,
    fontSize: 'clamp(12px, 0.9vw, 14px)',
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  pdTitle: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(40px, 7vw, 96px)',
    lineHeight: 1.0,
    letterSpacing: '-0.02em',
    color: '#fff',
  },
  pdBrand: {
    background: 'linear-gradient(180deg, #fff 0%, #fff 60%, rgba(168,107,45,0.85) 100%)',
    WebkitBackgroundClip: 'text',
    backgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
  },
  pdSubtitle: {
    margin: '12px 0 0',
    fontSize: 'clamp(18px, 1.7vw, 24px)',
    lineHeight: 1.4,
    fontWeight: 700,
    color: 'rgba(255,255,255,0.92)',
    maxWidth: 760,
    textWrap: 'balance',
  },
  pdBody: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    maxWidth: 760,
  },
  pdLead: {
    margin: 0,
    fontSize: 'clamp(15px, 1.2vw, 17px)',
    lineHeight: 1.7,
    color: 'rgba(255,255,255,0.85)',
    textWrap: 'pretty',
  },
  pdStrong: {
    color: '#fff',
    fontWeight: 700,
  },
  pdStatsRow: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 'clamp(16px, 3vw, 48px)',
    paddingTop: 'clamp(24px, 4vw, 48px)',
    paddingBottom: 'clamp(8px, 2vw, 24px)',
    borderTop: '1px solid rgba(255,255,255,0.14)',
  },
  pdStat: { display: 'flex', flexDirection: 'column', gap: 8 },
  pdStatNum: {
    fontWeight: 800,
    fontSize: 'clamp(40px, 7vw, 88px)',
    lineHeight: 1.0,
    color: 'var(--color-copper-fallback)',
    letterSpacing: '-0.02em',
  },
  pdStatLabel: {
    fontWeight: 700,
    fontSize: 'clamp(11px, 0.85vw, 13px)',
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.7)',
    lineHeight: 1.4,
  },
  pdStatSub: {
    fontWeight: 600,
    fontSize: 'clamp(11px, 0.8vw, 12px)',
    color: 'var(--color-copper-fallback)',
    letterSpacing: '0.06em',
    fontStyle: 'italic',
    marginTop: 2,
  },
  pdCtaRow: {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: 20,
  },
  pdCta: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 12,
    paddingInline: 28,
    paddingBlock: 14,
    fontSize: 14,
    fontWeight: 700,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
  },
  pdNote: {
    fontSize: 13,
    color: 'rgba(255,255,255,0.6)',
    fontStyle: 'italic',
  },

  // Agenda regular
  section: { background: 'var(--color-cream)', paddingBlock: 'var(--space-3xl)' },
  head: { display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 48, maxWidth: 880 },
  h2: { margin: 0, fontWeight: 800, fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1.15, color: 'var(--color-navy-deep)', letterSpacing: '-0.005em', textWrap: 'balance' },
  tabs: { display: 'flex', gap: 0, marginBottom: 40, borderBottom: '1px solid rgba(33,52,64,0.12)' },
  tab: { display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 20px', background: 'transparent', border: 0, borderBottom: '2px solid transparent', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--color-navy-medium)', textTransform: 'uppercase', transition: 'color 240ms ease, border-color 240ms ease' },
  tabActive: { color: 'var(--color-navy-deep)', borderBottomColor: 'var(--color-copper-fallback)' },
  tabCount: { fontSize: 10, fontWeight: 700, padding: '3px 8px', background: 'var(--color-navy-deep)', color: '#fff', borderRadius: 999, fontFamily: 'ui-monospace, Menlo, Consolas, monospace', letterSpacing: '0.04em' },

  list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0 },
  item: { display: 'grid', gridTemplateColumns: '1fr', gap: 20, alignItems: 'start', padding: '32px 0', borderTop: '1px solid rgba(33,52,64,0.10)', transition: 'background 240ms ease' },
  dateBlock: { display: 'flex', alignItems: 'baseline', gap: 12 },
  day: { fontWeight: 800, fontSize: 'clamp(30px, 5vw, 64px)', color: 'var(--color-navy-deep)', lineHeight: 0.9, letterSpacing: '-0.02em', fontFamily: 'ui-monospace, Menlo, Consolas, monospace' },
  monthYear: { display: 'flex', flexDirection: 'column', gap: 2 },
  month: { fontSize: 13, fontWeight: 700, letterSpacing: '0.18em', color: 'var(--color-copper-fallback)', textTransform: 'uppercase' },
  year: { fontSize: 11, color: 'var(--color-navy-medium)', letterSpacing: '0.12em', fontFamily: 'ui-monospace, Menlo, Consolas, monospace' },

  contentBlock: { display: 'flex', flexDirection: 'column', gap: 8 },
  eventTags: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, fontSize: 12 },
  eventType: { padding: '3px 8px', background: 'rgba(168,107,45,0.12)', color: 'var(--color-copper-fallback)', fontWeight: 700, letterSpacing: '0.14em', borderRadius: 2 },
  eventCity: { color: 'var(--color-navy-medium)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700 },
  eventName: { margin: 0, fontSize: 'clamp(18px, 2vw, 22px)', fontWeight: 800, lineHeight: 1.25, color: 'var(--color-navy-deep)', letterSpacing: '-0.005em' },
  eventTopic: { margin: 0, fontSize: 16, fontStyle: 'italic', color: 'var(--color-navy-medium)', lineHeight: 1.5, maxWidth: 560 },
  speakerRow: { marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 10 },
  speakerAvatar: { width: 32, height: 32, borderRadius: 999, background: 'var(--color-navy-deep)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11, letterSpacing: '0.05em' },
  speakerName: { fontSize: 13, fontWeight: 700, color: 'var(--color-navy-deep)' },

  cta: { display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-start' },

  empty: { paddingBlock: 80, textAlign: 'center', color: 'var(--color-navy-medium)' },
};

const evMQ = document.createElement('style');
evMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="02 Eventos"] li { grid-template-columns: 200px 1fr 180px !important; gap: 32px !important; align-items: center !important; }
  }
  section[data-screen-label="02 Eventos"] li:hover { background: rgba(168,107,45,0.04); }
`;
document.head.appendChild(evMQ);

window.EventosBody = EventosBody;