/* eslint-disable react/prop-types */
/**
 * ProsperiaDay · Sección que comunica el evento anual del grupo.
 *
 * Cada primavera en Monterrey, todos los clientes, aliados, socios y
 * autoridades se reúnen en 40 foros temáticos moderados por 6 expertos
 * para que no quede nada sin decirse, ningún concepto sin retarse,
 * ningún lazo sin estrecharse.
 *
 * Tono: declarativo, ceremonial, sin grandilocuencia comercial.
 * No "regístrate ya" — sí "este es el espacio que sostenemos cada año".
 */

const PD_STATS = [
  { num: '40',  label: 'FOROS TEMÁTICOS' },
  { num: '240', label: 'MODERADORES EXPERTOS', sub: '6 por foro' },
  { num: '1',   label: 'DÍA, CADA PRIMAVERA EN MONTERREY' },
];

function ProsperiaDay() {
  return (
    <section
      data-screen-label="08b Prosperia Day"
      style={pdStyles.section}
    >
      <div style={pdStyles.bgImage} aria-hidden="true" />
      <div style={pdStyles.bgOverlay} aria-hidden="true" />

      <div className="container" style={pdStyles.inner}>
        <window.Reveal style={pdStyles.headerCol}>
          <span style={pdStyles.eyebrow}>PROSPERIA DAY · CADA PRIMAVERA</span>
          <h2 style={pdStyles.title}>
            Una vez al año, todos los que importan en un mismo lugar.
          </h2>
        </window.Reveal>

        <window.Reveal delay={140} style={pdStyles.bodyCol}>
          <p style={pdStyles.lead}>
            Clientes, aliados, socios comerciales y las autoridades de las ciudades y estados que asesoramos se reúnen un día al año en Monterrey. No es un congreso. Es el espacio que sostenemos para que la red de la que dependemos pueda volver a encontrarse cara a cara.
          </p>
          <p style={pdStyles.body}>
            La promesa es triple: <strong style={pdStyles.bodyStrong}>que no quede nada sin decirse</strong>, ningún concepto sin retarse, ningún lazo sin estrecharse. Para llegar ahí, dividimos el día en 40 foros temáticos. Cada foro lo conducen <strong style={pdStyles.bodyStrong}>6 moderadores expertos — 240 en total</strong>, voces que provienen de quienes nos contratan, financian, asesoran y desafían todos los días.
          </p>
          <p style={pdStyles.body}>
            Esos 240 moderadores, sumados al resto de asistentes, son <strong style={pdStyles.bodyStrong}>la red Prosperia</strong>: clientes, aliados, amigos, consejeros y asociados que han caminado con nosotros durante 18 años. El Prosperia Day es el día en que esa red se mira a los ojos.
          </p>
        </window.Reveal>

        <window.Reveal delay={260} style={pdStyles.statsRow}>
          {PD_STATS.map((s, i) => (
            <div key={i} style={pdStyles.stat}>
              <span style={pdStyles.statNum}>{s.num}</span>
              <span style={pdStyles.statLabel}>{s.label}</span>
              {s.sub && <span style={pdStyles.statSub}>{s.sub}</span>}
            </div>
          ))}
        </window.Reveal>

        <window.Reveal delay={380} style={pdStyles.ctaRow}>
          <a
            href="/conocimiento/Eventos.html#prosperia-day"
            className="btn"
            data-cursor="link"
            style={pdStyles.cta}
          >
            Conocer la próxima edición
            <window.Icon name="arrow-right" size={16} stroke={1.8} />
          </a>
        </window.Reveal>
      </div>
    </section>
  );
}

const pdStyles = {
  section: {
    position: 'relative',
    paddingBlock: 'clamp(80px, 12vw, 160px)',
    background: 'var(--color-navy-deep)',
    color: '#fff',
    overflow: 'hidden',
  },
  bgImage: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/images-distritos/distrito-tec.jpg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center 65%',
    opacity: 0.22,
    filter: 'saturate(0.6) contrast(1.05)',
  },
  bgOverlay: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(15,27,35,0.75) 0%, rgba(15,27,35,0.92) 100%)',
  },
  inner: {
    position: 'relative',
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 'clamp(28px, 4vw, 56px)',
  },
  headerCol: {
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    maxWidth: 800,
  },
  eyebrow: {
    fontWeight: 700,
    fontSize: 'clamp(12px, 0.9vw, 14px)',
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(40px, 7vw, 96px)',
    lineHeight: 1.02,
    letterSpacing: '-0.02em',
    textWrap: 'balance',
    color: '#fff',
  },
  bodyCol: {
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
    maxWidth: 820,
  },
  lead: {
    margin: 0,
    fontSize: 'clamp(22px, 2.2vw, 30px)',
    lineHeight: 1.45,
    fontWeight: 700,
    color: '#fff',
    textWrap: 'pretty',
    letterSpacing: '-0.005em',
  },
  body: {
    margin: 0,
    fontSize: 'clamp(17px, 1.45vw, 21px)',
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.92)',
    textWrap: 'pretty',
  },
  bodyStrong: {
    color: '#fff',
    fontWeight: 700,
  },
  statsRow: {
    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)',
  },
  stat: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  statNum: {
    fontWeight: 800,
    fontSize: 'clamp(40px, 7vw, 88px)',
    lineHeight: 1.0,
    color: 'var(--color-copper-fallback)',
    letterSpacing: '-0.02em',
  },
  statLabel: {
    fontWeight: 700,
    fontSize: 'clamp(11px, 0.85vw, 13px)',
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.7)',
    lineHeight: 1.4,
  },
  statSub: {
    fontWeight: 600,
    fontSize: 'clamp(11px, 0.8vw, 12px)',
    color: 'var(--color-copper-fallback)',
    letterSpacing: '0.06em',
    fontStyle: 'italic',
    marginTop: 2,
  },
  ctaRow: {
    display: 'flex',
    marginTop: 'clamp(8px, 2vw, 24px)',
  },
  cta: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 12,
    paddingInline: 28,
    paddingBlock: 16,
    background: 'transparent',
    border: '1.5px solid rgba(255, 255, 255, 0.5)',
    color: '#fff',
    fontWeight: 700,
    fontSize: 14,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    borderRadius: 2,
    transition: 'background 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1)',
  },
};

const pdMQ = document.createElement('style');
pdMQ.textContent = `
  section[data-screen-label="08b Prosperia Day"] a:hover {
    background: rgba(168, 107, 45, 0.18) !important;
    border-color: var(--color-copper-fallback) !important;
    transform: translateY(-2px);
  }
`;
document.head.appendChild(pdMQ);

window.ProsperiaDay = ProsperiaDay;