/* ═══════════════════════════════════════════════════════════
   JORNADA DE TALLERES LPDE — sábado 15 de agosto de 2026
   Página de inscripción (?page=talleres). Reemplaza al
   "II Encuentro Amistoso" en el calendario 2026.

   Fuente del programa: Sheet "Talleres 15 de agosto"
   (1NblmLSdBOsH3ho5Bhgg7wGzZf6oZ4OJrOg8N_kxFU0g).
   Dos bloques de 2 horas, tres talleres simultáneos por bloque:
   cada participante elige UNO por bloque.
   ═══════════════════════════════════════════════════════════ */

const TALLERES_FORM_URL = 'https://forms.gle/QZXwo1ELJ1EwjaE26';
const TALLERES_FECHA = { day: 15, mesNum: 8, year: 2026 };

/* Los seis talleres. `publico`: 'escolares' | 'docentes' (filtro de la página).
   `descBorrador`: la fila del Sheet llegó incompleta; el texto es un borrador
   de la LPDE pendiente de confirmación con el tallerista. */
const TALLERES_PROGRAMA = [
  {
    bloque: 'I', horario: '8:30 – 10:30',
    title: 'Estrategia',
    title_en: 'Strategy',
    desc: '¿Qué entendemos por estrategia en el formato WSDC? En este taller definiremos la estrategia en el formato, expondremos herramientas de toma de decisión durante los debates y construiremos en conjunto filtros de estrategia.',
    desc_en: 'What do we mean by strategy in the WSDC format? In this workshop we define strategy within the format, present decision-making tools to use during debates and build strategy filters together.',
    tallerista: 'Felipe Zenteno Pacheco',
    publico: 'escolares',
  },
  {
    bloque: 'I', horario: '8:30 – 10:30',
    title: 'Análisis probatorio',
    title_en: 'Burden of proof analysis',
    desc: 'Este taller da la base para entender el debate desde una mirada analítica. Argumentar, refutar, ponderar y todas las demás estrategias de debate parten de entender premisas y cargas probatorias. El taller explicará paso a paso qué debemos probar como cierto, cómo hacerlo y qué tanto hacerlo.',
    desc_en: 'This workshop lays the groundwork for understanding debate analytically. Arguing, refuting, weighing and every other debate skill starts from understanding premises and burdens of proof. Step by step, the workshop covers what we must prove true, how to do it and how far we have to go.',
    tallerista: 'Roberto Urquieta',
    publico: 'escolares',
  },
  {
    bloque: 'I', horario: '8:30 – 10:30',
    title: '¿Cómo selecciono debatientes para los diferentes torneos?',
    title_en: 'How do I select debaters for each tournament?',
    desc: 'En este taller exploraremos criterios de selección, tipos de procesos de selección y perfiles de debatientes. Asimismo, exploraremos algunas nociones para establecer un calendario de torneos de debate.',
    desc_en: 'In this workshop we explore selection criteria, types of selection processes and debater profiles. We also look at how to set up a tournament calendar for the year.',
    tallerista: 'Dante León Saavedra',
    publico: 'docentes',
  },
  {
    bloque: 'II', horario: '11:00 – 13:00',
    title: 'Ponderaciones',
    title_en: 'Weighing',
    desc: 'Ponderar no solo se basa en hacer mención de criterios clásicos: es una estrategia argumentativa que implica un análisis más profundo de aquello que buscamos comparar. Este taller explicará cómo ponderar impactos de una misma métrica del debate, cómo ponderar impactos de métricas distintas y, por último, cómo ponderar la probabilidad de que un escenario sea más probable que otro.',
    desc_en: 'Weighing is not just naming the classic criteria: it is an argumentative strategy that demands deeper analysis of whatever we are comparing. This workshop covers how to weigh impacts within a single debate metric, how to weigh impacts across different metrics and, finally, how to weigh the likelihood of one scenario over another.',
    tallerista: 'Roberto Urquieta',
    publico: 'escolares',
  },
  {
    bloque: 'II', horario: '11:00 – 13:00',
    title: '¿Cómo debato sobre temas que no conozco mucho?',
    title_en: 'How do I debate topics I barely know?',
    desc: 'En este taller exploraremos cómo enfrentar mociones sobre temas poco familiares: qué hacer con la información que sí tenemos, cómo razonar desde principios y analogías cuando falta evidencia específica, y cómo aprovechar el tiempo de preparación para cubrir vacíos de conocimiento sin improvisar.',
    desc_en: 'In this workshop we explore how to face motions on unfamiliar topics: what to do with the information we do have, how to reason from principles and analogies when specific evidence is missing, and how to use prep time to cover knowledge gaps without improvising.',
    descBorrador: true,
    tallerista: 'Dante León Saavedra',
    publico: 'escolares',
  },
  {
    bloque: 'II', horario: '11:00 – 13:00',
    title: '¿Cómo se evalúa un debate?: ser un buen juez en el formato WSDC',
    title_en: 'How is a debate judged?: being a good adjudicator in WSDC',
    desc: 'Taller sobre los criterios y técnicas para juzgar debates en el formato WSDC, desde cómo tomar notas hasta cómo justificar una decisión. Ideal para nuevos docentes o entrenadores que quieren entender el debate desde la otra silla.',
    desc_en: 'A workshop on the criteria and techniques for judging WSDC debates, from how to take notes to how to justify a decision. Ideal for new teachers or coaches who want to understand debate from the other chair.',
    tallerista: 'Luis Valverde',
    publico: 'docentes',
  },
];

const TALLERES_BLOQUES = [
  { id: 'I', num: '01', horario: '8:30 – 10:30', label: 'Bloque I', label_en: 'Block I' },
  { id: 'II', num: '02', horario: '11:00 – 13:00', label: 'Bloque II', label_en: 'Block II' },
];

/* Fichas de quienes no están en el directorio del equipo (data.js) */
const TALLERISTAS_INVITADOS = {
  'Roberto Urquieta': {
    name: 'Roberto Urquieta',
    role: 'Tallerista invitado',
    img: 'assets/equipo/roberto-urquieta.jpg',
    bio: '',
  },
};

/* Ficha de cada tallerista: primero el directorio del equipo, luego los invitados. */
const talleristaFicha = (name) => {
  const D = (window.LPDE_DATA && window.LPDE_DATA.team) || [];
  const hit = D.find((m) => m.name === name);
  if (hit) return hit;
  return TALLERISTAS_INVITADOS[name] || { name, role: 'Tallerista invitado', short: '', bio: '', img: null };
};

const TALLERISTAS = ['Felipe Zenteno Pacheco', 'Roberto Urquieta', 'Dante León Saavedra', 'Luis Valverde'];

/* Iniciales para el monograma cuando no hay foto */
const talleristaIniciales = (name) =>
  String(name || '').split(/\s+/).slice(0, 2).map((w) => w[0]).join('').toUpperCase();

/* ─── Descarga del cronograma completo como JPG (1080×1350) ───
   Mismo lenguaje gráfico que la tarjeta de evento del calendario:
   papel crema, rojo LPDE, serif para la fecha, mono para las etiquetas.
   Reutiliza _fitCanvasLines / _wrapCanvasText de pages-main.jsx. */
const downloadCronogramaJPG = (lang) => {
  const css = getComputedStyle(document.body);
  const RED = (css.getPropertyValue('--red') || '#E30613').trim();
  const INK = (css.getPropertyValue('--ink') || '#0F0F12').trim();
  const CREAM = (css.getPropertyValue('--bg-alt') || '#F7F5EF').trim();
  const W = 1080, H = 1350, M = 72, CW = W - M * 2;
  const SERIF = '"Instrument Serif", Georgia, serif';
  const SANS = '"Source Sans 3", Arial, sans-serif';
  const MONO = '"JetBrains Mono", monospace';
  const sub = '#4B4B53';
  const mute = '#6B7280';
  const L = (es, en) => (lang === 'en' ? en : es);

  const draw = (logoImg) => {
    const canvas = document.createElement('canvas');
    canvas.width = W; canvas.height = H;
    const ctx = canvas.getContext('2d');
    const CONTENT_TOP = 268;
    const CONTENT_BOTTOM = H - 168; // el pie es fijo: nada lo invade

    // Dibuja (o solo mide, con dry=true) el cuerpo a escala S; devuelve la y final.
    // `offset` centra verticalmente el cuerpo cuando sobra aire.
    const render = (S, dry, offset) => {
      const rowTitle = Math.round(29 * S), rowTitleLH = Math.round(36 * S);
      const rowMeta = Math.round(21 * S);
      const rowPad = Math.round(22 * S);
      const blockGap = Math.round(34 * S);
      let y = CONTENT_TOP + (offset || 0);

      TALLERES_BLOQUES.forEach((b, bi) => {
        // Cabecera del bloque: banda oscura con nombre + horario
        const bandH = Math.round(52 * S);
        if (!dry) {
          ctx.fillStyle = INK;
          ctx.fillRect(M, y, CW, bandH);
          ctx.fillStyle = '#FFFFFF';
          ctx.font = '700 ' + Math.round(22 * S) + 'px ' + MONO;
          ctx.fillText((lang === 'en' ? b.label_en : b.label).toUpperCase(), M + 20, y + bandH * 0.66);
          ctx.textAlign = 'right';
          ctx.fillStyle = '#FFFFFF';
          ctx.font = '500 ' + Math.round(22 * S) + 'px ' + MONO;
          ctx.fillText(b.horario, W - M - 20, y + bandH * 0.66);
          ctx.textAlign = 'left';
        }
        y += bandH;

        TALLERES_PROGRAMA.filter((w) => w.bloque === b.id).forEach((w) => {
          const x = M + 20;
          const innerW = CW - 40 - Math.round(120 * S);
          let ry = y + rowPad;
          ctx.font = '700 ' + rowTitle + 'px ' + SANS;
          const titleLines = _fitCanvasLines(ctx, lang === 'en' ? w.title_en : w.title, innerW, 2);
          titleLines.forEach((l) => {
            if (!dry) { ctx.fillStyle = INK; ctx.fillText(l, x, ry + rowTitle * 0.78); }
            ry += rowTitleLH;
          });
          ry += Math.round(6 * S);
          if (!dry) {
            ctx.fillStyle = sub;
            ctx.font = '400 ' + rowMeta + 'px ' + SANS;
            ctx.fillText(w.tallerista, x, ry + rowMeta * 0.78);
            // Etiqueta de público, alineada a la derecha
            const tag = w.publico === 'docentes'
              ? L('DOCENTES / ENTRENADORES', 'TEACHERS / COACHES')
              : L('ESCOLARES', 'STUDENTS');
            ctx.font = '500 ' + Math.round(17 * S) + 'px ' + MONO;
            ctx.textAlign = 'right';
            ctx.fillStyle = w.publico === 'docentes' ? RED : mute;
            ctx.fillText(tag, W - M - 20, ry + rowMeta * 0.78);
            ctx.textAlign = 'left';
          }
          ry += rowMeta + rowPad;
          if (!dry) {
            ctx.strokeStyle = '#D4D2CC';
            ctx.lineWidth = 1;
            ctx.beginPath(); ctx.moveTo(M, ry); ctx.lineTo(W - M, ry); ctx.stroke();
          }
          y = ry;
        });
        if (bi < TALLERES_BLOQUES.length - 1) y += blockGap;
      });
      return y;
    };

    // 1) Medir y bajar de escala hasta que quepa; el aire sobrante se reparte
    //    arriba y abajo para que el cuerpo quede ópticamente centrado.
    const scales = [1, 0.94, 0.88, 0.82, 0.76, 0.7];
    let S = scales[scales.length - 1];
    for (const s of scales) {
      if (render(s, true, 0) <= CONTENT_BOTTOM) { S = s; break; }
    }
    const sobra = Math.max(0, CONTENT_BOTTOM - render(S, true, 0));
    const offsetY = Math.round(sobra / 2);

    // 2) Fondo y cabecera fija
    ctx.fillStyle = CREAM;
    ctx.fillRect(0, 0, W, H);
    try { ctx.letterSpacing = '3px'; } catch (e) {}

    if (logoImg) {
      const lh = 50, lw = lh * (logoImg.width / logoImg.height);
      ctx.drawImage(logoImg, M, M - 4, lw, lh);
    } else {
      ctx.fillStyle = RED;
      ctx.font = '900 42px ' + SANS;
      ctx.fillText('LPDE', M, M + 36);
    }
    ctx.fillStyle = mute;
    ctx.font = '500 21px ' + MONO;
    ctx.textAlign = 'right';
    ctx.fillText(L('TALLERES GRATUITOS · VIRTUAL', 'FREE WORKSHOPS · ONLINE'), W - M, M + 32);
    ctx.textAlign = 'left';

    ctx.fillStyle = RED;
    ctx.font = 'italic 400 54px ' + SERIF;
    ctx.fillText(L('Sábado 15 de agosto de 2026', 'Saturday, 15 August 2026'), M, 168);
    ctx.fillStyle = INK;
    ctx.font = '900 40px ' + SANS;
    ctx.fillText(L('Jornada de Talleres LPDE', 'LPDE Workshop Day'), M, 218);
    ctx.strokeStyle = '#D4D2CC';
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(M, 244); ctx.lineTo(W - M, 244); ctx.stroke();

    // 3) Cuerpo
    render(S, false, offsetY);

    // 4) Pie fijo
    ctx.fillStyle = RED;
    ctx.fillRect(M, H - 130, 56, 4);
    ctx.fillStyle = sub;
    ctx.font = '500 21px ' + MONO;
    ctx.fillText(L('ELIGE UN TALLER POR BLOQUE · GRATUITO', 'CHOOSE ONE WORKSHOP PER BLOCK · FREE'), M, H - 92);
    ctx.fillStyle = mute;
    ctx.fillText('lpdebate.org/?page=talleres', M, H - 56);
    ctx.font = '500 17px ' + MONO;
    ctx.textAlign = 'right';
    ctx.fillText(L('LIGA PERUANA DE DEBATE ESCOLAR', 'PERUVIAN SCHOOL DEBATE LEAGUE'), W - M, H - 56);
    ctx.textAlign = 'left';

    canvas.toBlob((blob) => {
      if (!blob) return;
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'lpde-jornada-talleres-15-agosto.jpg';
      a.click();
      setTimeout(() => URL.revokeObjectURL(a.href), 4000);
    }, 'image/jpeg', 0.92);
  };

  const start = () => {
    const logo = new Image();
    logo.onload = () => draw(logo);
    logo.onerror = () => draw(null);
    logo.src = 'assets/logo-lpde-red.png';
  };
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(start);
  else start();
};

const TalleresPage = ({ setPage }) => {
  const { t, lang } = useLang();
  const [publico, setPublico] = React.useState('todos');
  const [perfil, setPerfil] = React.useState(null);

  const filtros = [
    { id: 'todos', label: t('Todos', 'All') },
    { id: 'escolares', label: t('Escolares', 'Students') },
    { id: 'docentes', label: t('Docentes y entrenadores', 'Teachers and coaches') },
  ];
  const visibles = TALLERES_PROGRAMA.filter((w) => publico === 'todos' || w.publico === publico);

  const publicoLabel = (p) => (p === 'docentes'
    ? t('Docentes / Entrenadores', 'Teachers / Coaches')
    : t('Escolares', 'Students'));

  return (
    <Page screen="08b Jornada de Talleres">
      {/* Hero */}
      <section style={{ paddingTop: 80, paddingBottom: 64, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div className="reveal">
            <span className="eyebrow">{t('Jornada de talleres · Sábado 15 de agosto de 2026', 'Workshop day · Saturday 15 August 2026')}</span>
            <h1 className="display" style={{ fontSize: 'clamp(42px, 6.5vw, 96px)', marginTop: 20, maxWidth: '15ch' }}>
              {t('Seis talleres, ', 'Six workshops, ')}<em className="it">{t('una mañana', 'one morning')}</em>
            </h1>
          </div>
          <div className="reveal d1" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'start', marginTop: 32 }}>
            <p style={{ fontSize: 19, color: 'var(--ink-2)', lineHeight: 1.65, maxWidth: 640 }}>
              {t('Una mañana de formación abierta y gratuita para la comunidad LPDE. Dos bloques de dos horas, tres talleres simultáneos en cada uno: estrategia, análisis probatorio y ponderaciones para escolares; selección de debatientes y adjudicación para docentes y entrenadores. Cada participante elige un taller por bloque.', 'A free, open morning of training for the LPDE community. Two two-hour blocks with three simultaneous workshops each: strategy, burden of proof and weighing for students; debater selection and adjudication for teachers and coaches. Each participant chooses one workshop per block.')}
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a className="btn btn-red" href={TALLERES_FORM_URL} target="_blank" rel="noopener" style={{ justifyContent: 'center' }}>
                {t('Inscríbete gratis', 'Sign up for free')} <Icon name="arrow-up-right" size={14} />
              </a>
              <button className="btn btn-ghost" onClick={() => downloadCronogramaJPG(lang)} style={{ justifyContent: 'center' }}>
                <Icon name="download" size={14} /> {t('Descargar cronograma (JPG)', 'Download schedule (JPG)')}
              </button>
              <div className="kicker" style={{ textAlign: 'center', color: 'var(--red)' }}>{t('Gratuito · Virtual vía Zoom', 'Free · Online via Zoom')}</div>
              <div className="kicker" style={{ textAlign: 'center' }}>{t('8:30 a. m. a 1:00 p. m.', '8:30 a.m. to 1:00 p.m.')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Datos clave */}
      <section className="section-tight" style={{ background: 'var(--ink)', color: '#fff' }}>
        <div className="shell">
          <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
            {[
              { num: <CountUp to={6} />, label: t('Talleres', 'Workshops') },
              { num: '2', label: t('Bloques de 2 horas', 'Two-hour blocks') },
              { num: '4', label: t('Talleristas', 'Instructors') },
              { num: '15 AGO', label: t('Sábado · Virtual', 'Saturday · Online'), it: true },
              { num: t('Gratis', 'Free'), label: t('Inscripción abierta', 'Open registration'), red: true, it: true },
            ].map((s, i) => (
              <div key={i}>
                <div className="stat-num" style={{ fontSize: 44, color: s.red ? 'var(--red)' : '#fff', fontStyle: s.it ? 'italic' : 'normal' }}>{s.num}</div>
                <div className="kicker" style={{ color: '#9C9AA0', marginTop: 6 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cómo funciona */}
      <section className="section">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
            <div className="reveal">
              <span className="eyebrow">{t('Cómo funciona', 'How it works')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 16, maxWidth: '16ch' }}>
                {t('Eliges ', 'You choose ')}<em className="it">{t('un taller por bloque', 'one workshop per block')}</em>
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7, marginTop: 20 }}>
                {t('Los tres talleres de cada bloque se dictan a la misma hora, en salas distintas de Zoom. Al inscribirte marcas tu opción del Bloque I y tu opción del Bloque II; el enlace de tu sala llega por correo el día previo.', 'The three workshops in each block run at the same time, in separate Zoom rooms. When you register you pick your option for Block I and your option for Block II; the link to your room arrives by email the day before.')}
              </p>
            </div>
            <div className="reveal d1" style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid var(--line)' }}>
              {[
                t('Inscríbete en el formulario y marca un taller del Bloque I y uno del Bloque II', 'Fill in the form and pick one workshop from Block I and one from Block II'),
                t('Recibirás por correo el enlace de Zoom de cada sala que elegiste', 'You will receive by email the Zoom link for each room you chose'),
                t('Entre bloques hay 30 minutos de pausa (10:30 a 11:00 a. m.)', 'There is a 30-minute break between blocks (10:30 to 11:00 a.m.)'),
                t('La jornada es gratuita y abierta a la comunidad LPDE', 'The day is free and open to the LPDE community'),
              ].map((txt, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'baseline', padding: '18px 0', borderBottom: '1px solid var(--line)' }}>
                  <span style={{ color: 'var(--red)', flexShrink: 0 }}><Icon name="check" size={16} /></span>
                  <span style={{ fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{txt}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Programa */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 32 }}>
            <span className="eyebrow">{t('El programa', 'The programme')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '22ch' }}>
              {t('Dos bloques, ', 'Two blocks, ')}<em className="it">{t('seis talleres', 'six workshops')}</em>
            </h2>
          </div>

          {/* Filtro por público */}
          <div className="reveal d1" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center', marginBottom: 40 }}>
            <span className="kicker" style={{ color: 'var(--mute)', marginRight: 4 }}>{t('Dirigido a', 'For')}</span>
            {filtros.map((f) => (
              <button key={f.id} onClick={() => setPublico(f.id)} style={{
                padding: '8px 16px', borderRadius: 999,
                background: publico === f.id ? 'var(--red)' : 'transparent',
                color: publico === f.id ? '#fff' : 'var(--ink-soft)',
                border: '1px solid ' + (publico === f.id ? 'var(--red)' : 'var(--line-strong)'),
                fontSize: 13, fontWeight: 600, fontFamily: 'var(--sans)',
                cursor: 'pointer', transition: 'all 180ms',
              }}>{f.label}</button>
            ))}
          </div>

          {TALLERES_BLOQUES.map((b) => {
            const lista = visibles.filter((w) => w.bloque === b.id);
            if (!lista.length) return null;
            return (
              <div key={b.id} style={{ marginBottom: 56 }}>
                <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginBottom: 24, paddingBottom: 14, borderBottom: '1px solid var(--line-strong)' }}>
                  <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--red)' }}>{b.num}</span>
                  <h3 className="display" style={{ fontSize: 32 }}>{lang === 'en' ? b.label_en : b.label}</h3>
                  <div className="kicker" style={{ marginLeft: 'auto' }}>{b.horario}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
                  {lista.map((w, i) => (
                    <article key={w.title} className={`reveal d${(i % 3) + 1}`}
                      style={{
                        background: 'var(--bg)', border: '1px solid var(--line)', borderTop: '3px solid ' + (w.publico === 'docentes' ? 'var(--red)' : 'var(--ink)'),
                        padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
                        transition: 'all 280ms ease',
                      }}
                      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.06)'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
                    >
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--mute)' }}>{w.horario}</span>
                        <span style={{
                          padding: '3px 8px', borderRadius: 3,
                          background: w.publico === 'docentes' ? 'rgba(227,6,19,0.08)' : 'var(--bg-alt)',
                          color: w.publico === 'docentes' ? 'var(--red)' : 'var(--ink-soft)',
                          fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', fontFamily: 'var(--mono)', textTransform: 'uppercase', textAlign: 'right',
                        }}>{publicoLabel(w.publico)}</span>
                      </div>
                      <h4 style={{ fontFamily: 'var(--serif)', fontSize: 21, lineHeight: 1.25 }}>
                        {lang === 'en' ? w.title_en : w.title}
                      </h4>
                      <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6, flexGrow: 1 }}>
                        {lang === 'en' ? w.desc_en : w.desc}
                      </p>
                      <div style={{ paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                        <div className="kicker" style={{ color: 'var(--mute)' }}>{t('Tallerista', 'Instructor')}</div>
                        <div style={{ fontSize: 14, fontWeight: 650, color: 'var(--ink-soft)', marginTop: 4 }}>{w.tallerista}</div>
                      </div>
                    </article>
                  ))}
                </div>
              </div>
            );
          })}

          {/* Descarga del cronograma */}
          <div className="reveal" style={{ border: '1px solid var(--line-strong)', background: 'var(--bg)', padding: '28px 32px', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 40, alignItems: 'center' }}>
            <div>
              <div className="kicker" style={{ color: 'var(--red)' }}>{t('Cronograma en imagen', 'Schedule as an image')}</div>
              <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 10 }}>
                {t('Descarga el cronograma completo de la jornada en JPG para compartirlo con tu equipo, tu colegio o por redes.', 'Download the full schedule as a JPG to share it with your team, your school or on social media.')}
              </p>
            </div>
            <button className="btn btn-primary" onClick={() => downloadCronogramaJPG(lang)} style={{ justifyContent: 'center' }}>
              <Icon name="download" size={14} /> {t('Descargar JPG', 'Download JPG')}
            </button>
          </div>
        </div>
      </section>

      {/* Talleristas */}
      <section className="section">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 40 }}>
            <span className="eyebrow">{t('Quiénes dictan', 'Who teaches')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 16, maxWidth: '20ch' }}>
              {t('Cuatro ', 'Four ')}<em className="it">{t('talleristas', 'instructors')}</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {TALLERISTAS.map((name, i) => {
              const m = talleristaFicha(name);
              const dicta = TALLERES_PROGRAMA.filter((w) => w.tallerista === name);
              const clickable = !!m.bio;
              return (
                <article key={name} className={`reveal d${(i % 4) + 1}`}
                  onClick={() => clickable && setPerfil(m)}
                  style={{
                    border: '1px solid var(--line)', background: 'var(--bg)',
                    display: 'flex', flexDirection: 'column',
                    cursor: clickable ? 'pointer' : 'default', transition: 'all 280ms ease',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.06)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; }}
                >
                  <div style={{ aspectRatio: '4/5', background: 'var(--bg-alt)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {m.img
                      ? <img src={m.img} alt={name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.04) saturate(0.85) sepia(0.22) brightness(1.03)' }} />
                      : <span style={{ fontFamily: 'var(--serif)', fontSize: 56, color: 'var(--line-strong)' }}>{talleristaIniciales(name)}</span>}
                  </div>
                  <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 8, flexGrow: 1 }}>
                    <div className="kicker" style={{ color: 'var(--red)' }}>{m.role || t('Tallerista', 'Instructor')}</div>
                    <h3 style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.25 }}>{name}</h3>
                    <ul style={{ listStyle: 'none', padding: 0, margin: '4px 0 0', display: 'flex', flexDirection: 'column', gap: 6, flexGrow: 1 }}>
                      {dicta.map((w) => (
                        <li key={w.title} style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.45, display: 'flex', gap: 8 }}>
                          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--mute)', flexShrink: 0, paddingTop: 2 }}>{w.bloque}</span>
                          <span>{lang === 'en' ? w.title_en : w.title}</span>
                        </li>
                      ))}
                    </ul>
                    {clickable && (
                      <div className="kicker" style={{ color: 'var(--mute)', marginTop: 6 }}>{t('Ver perfil', 'View profile')}</div>
                    )}
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA final */}
      <section className="section" style={{ background: 'var(--ink)', color: '#fff' }}>
        <div className="shell" style={{ textAlign: 'center' }}>
          <span className="eyebrow" style={{ color: '#9C9AA0', justifyContent: 'center' }}>{t('Inscripciones abiertas', 'Registration open')}</span>
          <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(36px, 5vw, 64px)', marginTop: 16, maxWidth: '20ch', marginLeft: 'auto', marginRight: 'auto' }}>
            {t('Nos vemos el ', 'See you on ')}<em className="it" style={{ color: 'var(--red)' }}>{t('15 de agosto', '15 August')}</em>
          </h2>
          <p style={{ fontSize: 16, color: '#B8B8C0', lineHeight: 1.7, maxWidth: 620, margin: '20px auto 0' }}>
            {t('La jornada es gratuita, virtual y abierta a escolares, docentes y entrenadores de la comunidad LPDE. Escríbenos a contacto@lpdebate.org si tienes dudas.', 'The workshop day is free, online and open to students, teachers and coaches in the LPDE community. Write to contacto@lpdebate.org if you have any questions.')}
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 32 }}>
            <a className="btn btn-red" href={TALLERES_FORM_URL} target="_blank" rel="noopener">
              {t('Inscríbete gratis', 'Sign up for free')} <Icon name="arrow-up-right" size={14} />
            </a>
            <button className="btn btn-light" onClick={() => setPage('calendario')}>
              {t('Ver el calendario 2026', 'View the 2026 calendar')} <Icon name="arrow" size={14} />
            </button>
          </div>
        </div>
      </section>

      {/* Perfil del tallerista — mismo modal del directorio del equipo */}
      <TeamModal member={perfil} onClose={() => setPerfil(null)} />
    </Page>
  );
};