// src/pages-rest.jsx — Formación, SNDE, Admisión, TNDE

/* ═══════════════════════════════════════════════════════════
   FORMACIÓN CONTINUA (redirige a Metadidactas)
   ═══════════════════════════════════════════════════════════ */
const FormacionPage = ({ setPage }) => {
  const { t, lang } = useLang();
  return (
    <Page screen="04 Formación Continua">
      <section style={{ paddingTop: 80, paddingBottom: 56, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
            <div className="reveal">
              <span className="eyebrow">{t('Educación Continua', 'Continuing education')}</span>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 8vw, 120px)', marginTop: 20, maxWidth: '14ch' }}>
                {t('Aprende a ', 'Learn to ')}<em className="it">{t('enseñar', 'teach')}</em>{t(' debate', ' debate')}
              </h1>
            </div>
            <p className="reveal d1" style={{ fontSize: 18, color: 'var(--ink-2)', lineHeight: 1.6 }}>
              <strong style={{ color: 'var(--ink)' }}>Metadidactas</strong>{t(', la consultora de la LPDE, gestiona nuestra oferta de educación continua. La Liga ofrece cursos de especialización en debate desde hace casi una década.', ', the LPDE’s consultancy, runs our continuing education offering. The League has taught specialized debate courses for nearly a decade.')}
            </p>
          </div>
        </div>
      </section>

      {/* Featured banner */}
      <section className="section" style={{ background: 'var(--ink)', color: '#fff' }}>
        <div className="shell">
          <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <span className="tag" style={{ background: 'var(--red)', color: '#fff', borderColor: 'var(--red)' }}>{t('Programa estrella', 'Flagship program')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 20 }}>
                {t('Programa de Formación de ', 'Training Program for ')}<em className="it" style={{ color: 'var(--red)' }}>{t('Entrenadores de Debate', 'Debate Coaches')}</em>.
              </h2>
              <p style={{ color: '#B8B8C0', fontSize: 17, lineHeight: 1.6, marginTop: 20 }}>
                {t('Formación estructurada en las metodologías para entrenar debate escolar competitivo en formato WSDC: análisis de mociones, construcción de casos, discursos y planificación de entrenamientos. Para docentes y entrenadores, sean o no miembros de la Liga.', 'Structured training in the methodologies for coaching competitive school debate in the WSDC format: motion analysis, case building, speeches and practice planning. For teachers and coaches, whether or not their school is a League member.')}
              </p>
              <div style={{ display: 'flex', gap: 24, marginTop: 32, paddingTop: 24, borderTop: '1px solid #2A2A30' }}>
                <div>
                  <div className="stat-num" style={{ fontSize: 56, color: '#fff' }}><CountUp to={18} /></div>
                  <div className="kicker" style={{ color: '#9C9AA0', marginTop: 4 }}>{t('Sesiones', 'Sessions')}</div>
                </div>
                <div>
                  <div className="stat-num" style={{ fontSize: 56, color: '#fff' }}><CountUp to={4} /></div>
                  <div className="kicker" style={{ color: '#9C9AA0', marginTop: 4 }}>{t('Módulos', 'Modules')}</div>
                </div>
                <div>
                  <div className="stat-num" style={{ fontSize: 56, color: 'var(--red)', fontStyle: 'italic' }}>WSDC</div>
                  <div className="kicker" style={{ color: '#9C9AA0', marginTop: 4 }}>{t('Formato', 'Format')}</div>
                </div>
              </div>
              <div style={{ marginTop: 36 }}>
                <a className="btn btn-red" href="https://lpdebate.org/entrenadores-wsdc/" target="_blank" rel="noopener">
                  {t('Ver el programa', 'View the program')} <Icon name="arrow-up-right" size={14} />
                </a>
              </div>
            </div>
            <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--bg-alt)' }}>
              <img src="assets/formacion/clase-formacion.jpg" alt={t('Sesión de formación LPDE', 'LPDE training session')}
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '55% 50%', filter: 'contrast(1.04) saturate(0.85) sepia(0.22) brightness(1.03)' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Course catalogue */}
      <section className="section">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48 }}>
            <span className="eyebrow">{t('Catálogo 2026', '2026 Catalog')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
              {t('Otros programas y nuestras áreas de formación.', 'Other programs and our training areas.')}
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { kind: 'program', status: 'Convocatoria abierta', status_en: 'Enrollment open', open: true, title: 'Habilidades del debate para la vida escolar', title_en: 'Debate Skills for School Life', sub: '4ta edición', sub_en: '4th edition', desc: 'Técnicas de debate académico aplicadas a la vida escolar: exposiciones, investigaciones y evaluaciones orales.', desc_en: 'Academic debate techniques applied to everyday school life: presentations, research projects and oral assessments.', meta: 'Escolares 13–17 · 8 sesiones · Virtual', meta_en: 'Students 13–17 · 8 sessions · Online', href: 'https://lpdebate.org/debate-para-vida-escolar-4taed/' },
              { kind: 'program', status: 'Convocatoria abierta', status_en: 'Enrollment open', open: true, title: 'Un mundo en conflicto: Relaciones Internacionales', title_en: 'A World in Conflict: International Relations', sub: 'FiloNautas · Ciencia Política · Curso 1', sub_en: 'FiloNautas · Political Science · Course 1', desc: 'Introducción a las Relaciones Internacionales: analiza conflictos, alianzas y crisis con las grandes teorías. Parte de cuatro cursos temáticos e independientes que, juntos, ofrecen una introducción completa a la Ciencia Política y las Relaciones Internacionales.', desc_en: 'An introduction to International Relations: analyze conflicts, alliances and crises through the major theories. Part of four stand-alone thematic courses that, together, offer a complete introduction to Political Science and International Relations.', meta: 'Estudiantes 15–18 · 8 semanas · Virtual', meta_en: 'Students 15–18 · 8 weeks · Online', href: 'https://lpdebate.org/filonautas/cursos/relaciones-internacionales/' },
              { kind: 'program', status: 'Próxima edición · fecha TBA', status_en: 'Next edition · date TBA', open: false, title: 'Iniciación al Debate Competitivo', title_en: 'Introduction to Competitive Debate', sub: 'Formato WSDC', sub_en: 'WSDC format', desc: 'Taller práctico que desarrolla comunicación, pensamiento crítico y argumentación en formato WSDC.', desc_en: 'A hands-on workshop that builds communication, critical thinking and argumentation in the WSDC format.', meta: 'Escolares de secundaria · 12 sesiones · Virtual', meta_en: 'Secondary students · 12 sessions · Online', href: 'https://lpdebate.org/iniciacion-debate-competitivo/' },
              { kind: 'program', status: 'Convocatoria abierta', status_en: 'Enrollment open', open: true, title: 'Gestores de talleres de debate', title_en: 'Managing School Debate Programs', sub: 'Nuevo programa · 1ra edición', sub_en: 'New program · 1st edition', desc: 'Capacitación para crear y dirigir talleres, clubes y selecciones de debate escolar: planificación, proyectos educativos, organización de torneos y comunicación.', desc_en: 'Training to create and lead school debate clubs, workshops and teams: planning, educational projects, tournament organization and communication.', meta: 'Docentes y gestores · 18 sesiones · Virtual', meta_en: 'Teachers · 18 sessions · Online', go: 'gestores' },
              { kind: 'free', status: 'Acceso libre', status_en: 'Open access', title: 'Área de formación gratuita', title_en: 'Free training resources', desc: 'Manuales, guías y la revista Dialógica: recursos abiertos para cualquier estudiante o docente, sin costo.', desc_en: 'Handbooks, guides and Dialógica magazine: open resources for any student or teacher, free of charge.', meta: 'Ver materiales', meta_en: 'View materials', go: 'publicaciones' },
              { kind: 'members', status: 'Miembros LPDE', status_en: 'LPDE members', title: 'Formación para colegios miembros', title_en: 'Training for member schools', desc: 'Plataforma privada con seminarios, talleres y material descargable. Acceso con la cuenta del colegio miembro.', desc_en: 'A private platform with seminars, workshops and downloadable materials. Log in with your member school account.', meta: 'Acceder', meta_en: 'Log in', go: 'colegios-miembros' },
            ].map((c, i) => {
              const dark = c.kind === 'members';
              const cream = c.kind === 'free';
              const external = !c.go && c.href && c.href !== '#';
              const internal = !!c.go;
              const handleInternal = (e) => {
                e.preventDefault();
                if (c.go === 'publicaciones') {
                  setPage('noticias');
                  // Esperar a que React monte NoticiasPage antes de hacer scroll
                  setTimeout(() => {
                    const el = document.getElementById('publicaciones');
                    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }, 120);
                } else {
                  setPage(c.go);
                  window.scrollTo({ top: 0, behavior: 'smooth' });
                }
              };
              const internalHref = c.go === 'publicaciones' ? '#publicaciones' : '#';
              return (
                <a key={i}
                  href={internal ? internalHref : c.href}
                  {...(external ? { target: '_blank', rel: 'noopener' } : {})}
                  {...(internal ? { onClick: handleInternal } : {})}
                  className={`reveal d${i % 3 + 1}`}
                  style={{
                    padding: 28, textDecoration: 'none',
                    background: dark ? 'var(--ink)' : (cream ? '#F4F1E8' : 'var(--bg)'),
                    color: dark ? '#fff' : 'var(--ink)',
                    border: '1px solid ' + (dark ? 'var(--ink)' : (cream ? 'transparent' : 'var(--line)')),
                    borderRadius: 4, display: 'flex', flexDirection: 'column',
                    cursor: 'pointer',
                    transition: 'all 280ms ease',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.08)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
                >
                  <div className="kicker" style={{ color: c.open ? 'var(--red)' : (dark ? '#9C9AA0' : 'var(--mute)'), marginBottom: 16 }}>{lang === 'en' && c.status_en ? c.status_en : c.status}</div>
                  <h3 className="display" style={{ fontSize: 26, lineHeight: 1.1, color: dark ? '#fff' : 'var(--ink)', marginBottom: c.sub ? 6 : 12 }}>{lang === 'en' && c.title_en ? c.title_en : c.title}</h3>
                  {c.sub && <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: dark ? '#9C9AA0' : 'var(--mute)', marginBottom: 12 }}>{lang === 'en' && c.sub_en ? c.sub_en : c.sub}</div>}
                  <p style={{ fontSize: 14, color: dark ? '#B8B8C0' : 'var(--ink-2)', lineHeight: 1.55 }}>{lang === 'en' && c.desc_en ? c.desc_en : c.desc}</p>
                  <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid ' + (dark ? '#2A2A30' : 'var(--line)'), display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.04em', color: dark ? '#9C9AA0' : 'var(--ink-2)' }}>{lang === 'en' && c.meta_en ? c.meta_en : c.meta}</span>
                    <Icon name={external ? 'arrow-up-right' : 'arrow'} size={16} />
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* Big CTA — redirect to Metadidactas */}
      <section style={{ background: 'var(--bg-alt)', padding: '96px 0' }}>
        <div className="shell">
          <div className="reveal" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '8px 16px', borderRadius: 999, background: 'var(--bg)', border: '1px solid var(--line)' }}>
              <span style={{ width: 8, height: 8, background: 'var(--red)', borderRadius: 999 }} />
              <span className="kicker">{t('Metadidactas · consultora de la LPDE', 'Metadidactas · the LPDE’s consultancy')}</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', marginTop: 32 }}>
              {t('Toda la oferta vive en ', 'Our full catalog lives on ')}<em className="it">Metadidactas</em>.
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 20 }}>
              {t('La plataforma de formación de Metadidactas, la consultora de la LPDE. Inscripciones, clases, materiales y certificados en un mismo lugar.', 'The training platform of Metadidactas, the LPDE’s consultancy. Enrollment, classes, materials and certificates, all in one place.')}
            </p>
            <div style={{ marginTop: 40, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="https://cidedidactica.org/metadidactas/" target="_blank" rel="noopener">
                {t('Ir a Metadidactas', 'Go to Metadidactas')} <Icon name="arrow-up-right" size={14} />
              </a>
              <button className="btn btn-ghost" onClick={() => setPage('admision')}>{t('Cómo ser miembro', 'How to become a member')}</button>
            </div>
          </div>
        </div>
      </section>
    </Page>);

};

/* ═══════════════════════════════════════════════════════════
   CURSO · GESTORES DE TALLERES DE DEBATE
   ═══════════════════════════════════════════════════════════ */
const GESTORES_FORM_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSfndNleL9sr_kkXZcN8knBvCzQTXJXn9ZtXIkiW3jD9miqmzg/viewform?usp=header';

const GESTORES_MODULOS = [
  {
    code: 'FF I', title: 'Fundamentos del formato WSDC', title_en: 'Foundations of the WSDC Format',
    intro: 'La lógica, los roles y las mociones del formato World Schools Debating Championship: el lenguaje común del circuito escolar.',
    intro_en: 'The logic, roles and motions of the World Schools Debating Championship format: the common language of the school debate circuit.',
    sesiones: [
      { n: 1, title: 'Lógica del formato WSDC', title_en: 'The Logic of the WSDC Format', resp: 'Luis Valverde', desc: '¿Qué lógica ordena el formato del World Schools Debating Championship (WSDC)? Aprenderás a guiar un debate en WSDC y conocerás estrategias para enseñar a debatir en este formato.', desc_en: 'What logic governs the World Schools Debating Championship (WSDC) format? You will learn to guide a WSDC debate and pick up strategies for teaching students to debate in this format.' },
      { n: 2, title: 'Tipos de orador y sus funciones en WSDC', title_en: 'Speaker Roles and Their Duties in WSDC', resp: 'Luis Valverde', desc: 'Cada orador tiene tareas específicas, pero, como equipo, todos comparten misiones en común. Veremos las funciones de cada orador, sus limitaciones y alcances, y cómo interactúan dentro de un mismo equipo.', desc_en: 'Each speaker has specific tasks, yet, as a team, they all share common goals. We will cover each speaker’s duties, their limits and scope, and how they interact within a single team.' },
      { n: 3, title: 'Mociones en el formato WSDC', title_en: 'Motions in the WSDC Format', resp: 'Luis Valverde', desc: 'Las mociones presentan características que permiten el correcto desarrollo del debate —balance, desafío y claridad— y reglas que limitan la naturaleza de la argumentación. Las entenderemos en profundidad para orientar a un equipo de debate.', desc_en: 'Motions have features that allow a debate to unfold properly — balance, challenge and clarity — and rules that constrain the nature of the argumentation. We will examine them in depth so you can guide a debate team.' },
    ],
  },
  {
    code: 'PO', title: 'Planificación y Organización', title_en: 'Planning and Organization',
    intro: 'Del enfoque pedagógico al proyecto concreto: justificar, programar y redactar los documentos que dan vida a una sociedad de debate.',
    intro_en: 'From pedagogical approach to concrete project: justifying, scheduling and drafting the documents that bring a debate society to life.',
    sesiones: [
      { n: 4, title: 'Debate competitivo y debate formativo', title_en: 'Competitive and Formative Debate', resp: 'Felipe Zenteno', desc: 'El debate puede desarrollarse de forma competitiva o formativa. Ambos enfoques no son mutuamente excluyentes, pero tienen estructuras y prioridades distintas. Se presentan ambos modelos, sus ventajas, desventajas y oportunidades.', desc_en: 'Debate can be run competitively or formatively. The two approaches are not mutually exclusive, but they have different structures and priorities. We present both models, with their advantages, drawbacks and opportunities.' },
      { n: 5, title: 'Justificación pedagógica', title_en: 'The Pedagogical Case for Debate', resp: 'Dante León', desc: 'Cuando se presentan proyectos de debate a espacios de gestión (la dirección del colegio, una UGEL o DRE) se exige una justificación de la actividad. ¿Por qué hacer debate? ¿Qué justificaciones tenemos? ¿Cómo presentar la mejor justificación posible?', desc_en: 'When debate projects are presented to decision-makers (school leadership or a local or regional education authority), a justification of the activity is required. Why do debate? What justifications do we have? How do we make the strongest possible case?' },
      { n: 6, title: 'Programación y contratación', title_en: 'Curriculum Planning and Hiring', resp: 'Sofía Pacheco', desc: 'Guías para la macroprogramación curricular de debate, con indicadores de éxito en la planificación. Además, los requisitos y formas de evaluación de entrenadores de debate para la contratación de formadores en las instituciones educativas.', desc_en: 'Guidelines for the long-range curricular planning of debate, with success indicators for the planning stage. Plus the requirements and assessment methods schools use when hiring debate coaches.' },
      { n: 7, title: 'Normas de convivencia en debate escolar', title_en: 'Community Standards in School Debate', resp: 'Felipe Zenteno', desc: 'La construcción de normas importa por la sana convivencia en entornos competitivos y la formación de comunidad. Se presentan lineamientos éticos del debate escolar con el objetivo de construir comunidades que debaten.', desc_en: 'Building shared norms matters: it sustains healthy coexistence in competitive environments and builds community. We present ethical guidelines for school debate aimed at building communities that debate.' },
      { n: 8, title: 'Modelos de liderazgo', title_en: 'Leadership Models', resp: 'Dante León', desc: 'Parte de crecer en debate es construir líderes: estudiantes que toman decisiones, guían a otros y crecen en comunidad. Modelos de liderazgo enfocados en los perfiles que el debate construye: capitanías o directivas, jueces o retroalimentadores.', desc_en: 'Part of growing in debate is building leaders: students who make decisions, guide others and grow in community. Leadership models focused on the profiles debate develops: captains and student boards, adjudicators and feedback-givers.' },
      { n: 9, title: 'Proyectos educativos en debate I', title_en: 'Educational Debate Projects I', resp: 'Sofía Pacheco', desc: 'Análisis de proyectos educativos en debate: su estructura y los criterios para evaluarlos. Nos enfocamos en la redacción de proyectos que buscan constituir una sociedad, club o taller extracurricular de debate dentro de la institución educativa.', desc_en: 'An analysis of educational debate projects: their structure and the criteria for evaluating them. We focus on drafting projects that establish a debate society, club or extracurricular workshop within the school.' },
      { n: 10, title: 'Proyectos educativos en debate II', title_en: 'Educational Debate Projects II', resp: 'Sofía Pacheco', desc: 'Continuación de la sesión anterior: redacción de proyectos de debate como torneos, encuentros amistosos y proyectos sociales de debate.', desc_en: 'A continuation of the previous session: drafting debate projects such as tournaments, friendly meets and debate-based outreach projects.' },
    ],
  },
  {
    code: 'DC', title: 'Dirección y Control', title_en: 'Management and Oversight',
    intro: 'La operación diaria de una sociedad de debate: admisiones, torneos, monitoreo, comunicación, viajes y contextos virtuales.',
    intro_en: 'The day-to-day operation of a debate society: admissions, tournaments, monitoring, communication, travel and online settings.',
    sesiones: [
      { n: 11, title: 'Procesos de admisión', title_en: 'Admissions Processes', resp: 'Sofía Pacheco', desc: 'Las metodologías para incorporar nuevos miembros a las sociedades de debate son diversas: torneo interno, pruebas de evaluación o debates. Se exponen estas metodologías, sus ventajas, desventajas y oportunidades.', desc_en: 'There are many methodologies for bringing new members into a debate society: internal tournaments, assessment tests or tryout debates. We lay out these methodologies with their advantages, drawbacks and opportunities.' },
      { n: 12, title: 'Esquema de un torneo', title_en: 'Anatomy of a Tournament', resp: 'Luis Valverde', desc: 'El proceso de inscripción y participación en un torneo de debate: las fases de un torneo, los principales focos de atención durante la competencia y el acompañamiento ronda a ronda.', desc_en: 'The process of registering for and competing in a debate tournament: the phases of a tournament, the main points of attention during competition and round-by-round support.' },
      { n: 13, title: 'Organización de torneos', title_en: 'Organizing Tournaments', resp: 'Dante León', desc: 'Parte de ser gestor es organizar torneos: internos, intersedes o abiertos al público. Repasamos los equipos y el flujo de trabajo para organizar un torneo, y las condiciones de calidad de un torneo de debate escolar.', desc_en: 'Part of being a program manager is organizing tournaments: internal, inter-campus or open to the public. We review the teams and workflow needed to run a tournament, and the quality standards of a school debate tournament.' },
      { n: 14, title: 'Amistoso y debate de muestra', title_en: 'Friendly Meets and Showcase Debates', resp: 'Felipe Zenteno', desc: 'Las actividades en debate escolar no se agotan en lo competitivo. Construiremos espacios de aprendizaje con lógica pedagógica y deportiva, y veremos el debate de muestra como forma de evidenciar el aprendizaje ante la comunidad educativa.', desc_en: 'School debate activities go beyond competition. We will design learning spaces with both pedagogical and sporting logic, and explore the showcase debate as a way of making learning visible to the school community.' },
      { n: 15, title: 'Herramientas de monitoreo y toma de decisiones', title_en: 'Monitoring and Decision-Making Tools', resp: 'Dante León', desc: '¿Cómo seleccionar a qué torneos ir? ¿Con cuánto tiempo preparar un torneo? ¿Cómo sé que mi equipo está creciendo? Herramientas para la gestión de un club o selección, cómo presentar avances y qué indicadores usar para monitorear el desempeño.', desc_en: 'How do you choose which tournaments to attend? How far ahead should you prepare? How do you know your team is growing? Tools for managing a club or team, how to report progress and which indicators to use to monitor performance.' },
      { n: 16, title: 'Comunicación interna y externa', title_en: 'Internal and External Communication', resp: 'Felipe Zenteno', desc: '¿Cómo posicionar el debate como una actividad relevante para la comunidad educativa? Proyectos de visibilización del aprendizaje de forma interna (profesores, alumnos y colegas) y externa (otros estudiantes, familias e interesados).', desc_en: 'How do you position debate as a relevant activity for the school community? Projects for making learning visible internally (teachers, students and colleagues) and externally (other students, families and prospective members).' },
      { n: 17, title: 'Planificación de viajes', title_en: 'Planning Debate Travel', resp: 'Sofía Pacheco', desc: 'El panorama de oportunidades de viajes académicos del circuito de debate, junto con los lineamientos y particularidades de los viajes de debate, distintos de los viajes de estudio regulares de los colegios.', desc_en: 'The landscape of academic travel opportunities on the debate circuit, along with the guidelines and particularities of debate trips, which differ from schools’ regular study trips.' },
      { n: 18, title: 'Contextos virtuales', title_en: 'Online Settings', resp: 'Luis Valverde', desc: 'El circuito tiene torneos virtuales, presenciales o híbridos. Se exponen las principales herramientas que se usan en estos eventos, así como los protocolos y reglas de comportamiento durante los eventos virtuales de debate.', desc_en: 'The circuit includes online, in-person and hybrid tournaments. We cover the main tools used at these events, as well as the protocols and codes of conduct for online debate events.' },
    ],
  },
];

// Fechas oficiales por sesión (martes, 7:00–9:00 p. m.) — calendario 2026 confirmado
const GESTORES_FECHAS = {
  1: ['21 jul', 'Jul 21'], 2: ['4 ago', 'Aug 4'], 3: ['18 ago', 'Aug 18'], 4: ['25 ago', 'Aug 25'],
  5: ['1 sep', 'Sep 1'], 6: ['8 sep', 'Sep 8'], 7: ['15 sep', 'Sep 15'], 8: ['22 sep', 'Sep 22'],
  9: ['29 sep', 'Sep 29'], 10: ['6 oct', 'Oct 6'], 11: ['20 oct', 'Oct 20'], 12: ['27 oct', 'Oct 27'],
  13: ['3 nov', 'Nov 3'], 14: ['10 nov', 'Nov 10'], 15: ['17 nov', 'Nov 17'], 16: ['24 nov', 'Nov 24'],
  17: ['1 dic', 'Dec 1'], 18: ['8 dic', 'Dec 8'],
};

const GestoresPage = ({ setPage }) => {
  const { t, lang } = useLang();
  const D = window.LPDE_DATA;
  const [openSesion, setOpenSesion] = React.useState(null);
  const [perfil, setPerfil] = React.useState(null); // modal de perfil del equipo docente
  // window.TEAM_EN (definido en pages-main.jsx) traduce role/short cuando lang === 'en'
  const localizeTeam = (m) => (lang === 'en' && window.TEAM_EN && window.TEAM_EN[m.name]) ? { ...m, ...window.TEAM_EN[m.name] } : m;
  const facilitadores = ['Felipe Zenteno Pacheco', 'Dante León Saavedra', 'Sofía Pacheco', 'Luis Valverde']
    .map((n) => D.team.find((m) => m.name === n)).filter(Boolean).map(localizeTeam);

  return (
    <Page screen="04b Curso Gestores">
      {/* Hero */}
      <section style={{ paddingTop: 80, paddingBottom: 64, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div className="reveal">
            <span className="eyebrow">{t('Educación Continua · Nuevo programa', 'Continuing education · New program')}</span>
            <h1 className="display" style={{ fontSize: 'clamp(34px, 5vw, 64px)', marginTop: 20, maxWidth: '20ch' }}>
              {t('Programa especializado en ', 'A specialized program in ')}<em className="it">{t('gestión de proyectos', 'debate project management')}</em>{t(' de debate escolar', ' for schools')}
            </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('Un programa para docentes, coordinadores y gestores que dirigen —o quieren crear— un taller, club o selección de debate en su institución educativa. Desde la lógica del formato WSDC hasta la organización de torneos, los proyectos educativos y la comunicación del aprendizaje.', 'A program for teachers, coordinators and program managers who lead — or want to start — a debate club, workshop or team at their school. From the logic of the WSDC format to tournament organization, educational projects and communicating what students learn.')}
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a className="btn btn-red" href={GESTORES_FORM_URL} target="_blank" rel="noopener" style={{ justifyContent: 'center' }}>
                {t('Inscríbete ahora', 'Enroll now')} <Icon name="arrow-up-right" size={14} />
              </a>
              <div className="kicker" style={{ textAlign: 'center' }}>{t('Del 21 de julio al 8 de diciembre de 2026', 'July 21 – December 8, 2026')}</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={18} />, label: t('Sesiones', 'Sessions') },
              { num: <CountUp to={3} />, label: t('Módulos', 'Modules') },
              { num: t('Martes', 'Tuesdays'), label: t('7:00 – 9:00 p. m.', '7:00 – 9:00 p.m.'), it: true },
              { num: t('Virtual', 'Online'), label: t('100% en línea', '100% online'), it: true },
              { num: 'S/ 490', label: t('Público general', 'General public') },
            ].map((s, i) => (
              <div key={i}>
                <div className="stat-num" style={{ fontSize: 44, color: i === 4 ? '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>

      {/* Para quién */}
      <section className="section">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
            <div className="reveal">
              <span className="eyebrow">{t('¿Para quién es este curso?', 'Who is this course for?')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 16 }}>
                {t('Para quienes hacen que el debate ', 'For the people who make debate ')}<em className="it">{t('ocurra', 'happen')}</em>.
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7, marginTop: 20 }}>
                {t('Detrás de cada equipo de debate hay alguien que planifica, justifica el proyecto ante la dirección, organiza torneos y sostiene la comunidad. Este curso está dedicado a ese rol: el gestor. No necesitas experiencia previa en debate competitivo — el programa parte desde el nivel principiante.', 'Behind every debate team there is someone who plans, makes the case to school leadership, organizes tournaments and sustains the community. This course is devoted to that role: the program manager. No prior experience in competitive debate is required — the program starts at beginner level.')}
              </p>
              <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 16 }}>
                {t('¿Lo tuyo es preparar equipos para competir —casos, discursos, adjudicación—? Ese es nuestro ', 'Is your focus preparing teams to compete — cases, speeches, adjudication —? That’s our ')}<a href="https://lpdebate.org/entrenadores-wsdc/" target="_blank" rel="noopener" style={{ color: 'var(--red)', fontWeight: 600 }}>{t('Programa de Formación de Entrenadores de Debate', 'Training Program for Debate Coaches')}</a>.
              </p>
            </div>
            <div className="reveal d1" style={{ display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid var(--line)' }}>
              {[
                t('Docentes que dirigen o quieren fundar un taller o club de debate', 'Teachers who run or want to found a debate club or workshop'),
                t('Coordinadores académicos y de actividades extracurriculares', 'Academic and extracurricular activities coordinators'),
                t('Directivos que evalúan incorporar el debate a su institución', 'School leaders weighing whether to bring debate to their institution'),
                t('Entrenadores que asumen la gestión integral de su sociedad de debate', 'Coaches taking on the full management of their debate society'),
              ].map((t, 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 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Contenido: módulos y sesiones */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 56 }}>
            <span className="eyebrow">{t('Contenido del programa', 'Program content')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '22ch' }}>
              {t('18 sesiones en 3 módulos, de los fundamentos a la gestión completa.', '18 sessions across 3 modules, from the fundamentals to full program management.')}
            </h2>
          </div>
          {GESTORES_MODULOS.map((mod, mi) => (
            <div key={mod.code} className="reveal" style={{ marginBottom: mi < GESTORES_MODULOS.length - 1 ? 56 : 0 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'start' }}>
                <div>
                  <div className="kicker" style={{ color: 'var(--red)' }}>{t('Módulo', 'Module')} {mi + 1} · {mod.sesiones.length} {t('sesiones', 'sessions')}</div>
                  <h3 className="display" style={{ fontSize: 30, marginTop: 10, lineHeight: 1.1 }}>{lang === 'en' && mod.title_en ? mod.title_en : mod.title}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 12 }}>{lang === 'en' && mod.intro_en ? mod.intro_en : mod.intro}</p>
                </div>
                <div style={{ borderTop: '1px solid var(--line-strong, var(--line))' }}>
                  {mod.sesiones.map((s) => {
                    const open = openSesion === s.n;
                    return (
                      <div key={s.n} style={{ borderBottom: '1px solid var(--line)' }}>
                        <button
                          onClick={() => setOpenSesion(open ? null : s.n)}
                          aria-expanded={open}
                          style={{ width: '100%', display: 'flex', alignItems: 'baseline', gap: 18, padding: '16px 4px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', font: 'inherit' }}
                        >
                          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--mute)', flexShrink: 0, width: 24 }}>{String(s.n).padStart(2, '0')}</span>
                          <span style={{ fontSize: 16.5, fontWeight: 600, color: open ? 'var(--red)' : 'var(--ink)', flexGrow: 1, lineHeight: 1.35 }}>{lang === 'en' && s.title_en ? s.title_en : s.title}</span>
                          {GESTORES_FECHAS[s.n] && (
                            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: open ? 'var(--red)' : 'var(--mute)', flexShrink: 0 }}>
                              {lang === 'en' ? GESTORES_FECHAS[s.n][1] : GESTORES_FECHAS[s.n][0]}
                            </span>
                          )}
                          <span style={{ color: open ? 'var(--red)' : 'var(--mute)', flexShrink: 0, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 200ms ease', display: 'inline-flex' }}><Icon name="plus" size={16} /></span>
                        </button>
                        {open && (
                          <div style={{ padding: '0 4px 20px 42px' }}>
                            <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.65 }}>{lang === 'en' && s.desc_en ? s.desc_en : s.desc}</p>
                            <div className="kicker" style={{ marginTop: 10 }}>
                              {t('Dicta', 'Taught by')} · {s.resp}
                              {GESTORES_FECHAS[s.n] && <> &nbsp;·&nbsp; {t('Martes ', 'Tuesday, ')}{lang === 'en' ? GESTORES_FECHAS[s.n][1] : GESTORES_FECHAS[s.n][0]} · 7:00–9:00 p.m.</>}
                            </div>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Facilitadores */}
      <section className="section">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48 }}>
            <span className="eyebrow">{t('Equipo docente', 'Teaching team')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
              {t('Cuatro gestores con años en el circuito.', 'Four program managers with years on the circuit.')}
            </h2>
          </div>
          {/* Mismas tarjetas que la página Equipo: clic → modal con el perfil completo */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {facilitadores.map((f, i) => (
              <TeamCard key={f.name} member={f} idx={i} onClick={() => setPerfil(f)} />
            ))}
          </div>
          <TeamModal member={perfil} onClose={() => setPerfil(null)} />
        </div>
      </section>

      {/* Inversión + CTA final */}
      <section className="section" style={{ background: 'var(--ink)', color: '#fff' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div className="reveal">
              <span className="tag" style={{ background: 'var(--red)', color: '#fff', borderColor: 'var(--red)' }}>{t('Convocatoria abierta', 'Enrollment open')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 20 }}>
                {t('Reserva tu lugar en la ', 'Reserve your spot in the ')}<em className="it" style={{ color: 'var(--red)' }}>{t('primera edición', 'first edition')}</em>.
              </h2>
              <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  [t('Inicio', 'Starts'), t('Martes 21 de julio de 2026', 'Tuesday, July 21, 2026')],
                  [t('Cierre', 'Ends'), t('Martes 8 de diciembre de 2026', 'Tuesday, December 8, 2026')],
                  [t('Horario', 'Schedule'), t('Martes de 7:00 a 9:00 p. m.', 'Tuesdays, 7:00 to 9:00 p.m.')],
                  [t('Modalidad', 'Format'), t('Virtual · sesiones en vivo los martes', 'Online · live sessions on Tuesdays')],
                  [t('Nivel', 'Level'), t('Principiantes · no requiere experiencia previa', 'Beginner-friendly · no prior experience required')],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', gap: 16, paddingBottom: 12, borderBottom: '1px solid #2A2A30' }}>
                    <span className="kicker" style={{ color: '#9C9AA0', width: 110, flexShrink: 0 }}>{k}</span>
                    <span style={{ fontSize: 15, color: '#E8E8EC' }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="reveal d1" style={{ background: '#1A1A20', border: '1px solid #2A2A30', borderRadius: 4, padding: 40 }}>
              <div className="kicker" style={{ color: '#9C9AA0' }}>{t('Categorías de inscripción', 'Enrollment categories')}</div>
              <div style={{ display: 'flex', flexDirection: 'column', marginTop: 16 }}>
                {[
                  {
                    nombre: t('Público general', 'General public'),
                    desc: t('Docentes de colegios NO miembros de la LPDE.', 'Teachers from schools that are NOT LPDE members.'),
                    precio: 'S/ 490',
                  },
                  {
                    nombre: t('Miembros LPDE', 'LPDE members'),
                    desc: <>{t('Docentes de colegios miembros de la LPDE 2025 y 2026 (revisa si tu colegio es miembro ', 'Teachers from LPDE member schools 2025 and 2026 (check if your school is a member ')}<a onClick={(e) => { e.preventDefault(); setPage('colegios'); }} href="#" style={{ color: 'var(--red)', fontWeight: 600, cursor: 'pointer' }}>{t('aquí', 'here')}</a>{t(').', ').')}</>,
                    precio: 'S/ 440',
                  },
                  {
                    nombre: t('Antiguos alumnos', 'Alumni'),
                    desc: t('Docentes que llevaron las versiones anteriores del programa de entrenadores (2019–24) o gestores, lo hayan finalizado o no, y sean o no miembros LPDE.', 'Teachers who took previous editions of the coaches or program managers program (2019–24), whether or not they finished it, and whether or not they are LPDE members.'),
                    precio: 'S/ 410',
                  },
                  {
                    nombre: t('Inscripción corporativa', 'Corporate enrollment'),
                    desc: <>{t('Para 3 o más docentes, sean miembros de la LPDE o no. No te inscribas con el formulario: escríbenos a ', 'For 3 or more teachers, whether LPDE members or not. Don’t use the enrollment form: write to ')}<a href="mailto:contacto@lpdebate.org" style={{ color: 'var(--red)', fontWeight: 600 }}>contacto@lpdebate.org</a>{t(' para explicarte el proceso.', ' and we’ll walk you through the process.')}</>,
                    precio: 'S/ 410',
                  },
                  {
                    nombre: t('Extranjeros no residentes', 'Non-resident foreigners'),
                    desc: t('Para participantes que no se encuentran en el Perú.', 'For participants who are not in Peru.'),
                    precio: 'USD 170',
                  },
                ].map((c, i) => (
                  <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'baseline', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid #2A2A30' }}>
                    <div>
                      <div style={{ fontSize: 14.5, fontWeight: 650, color: '#fff' }}>{c.nombre}</div>
                      <div style={{ fontSize: 12.5, color: '#9C9AA0', lineHeight: 1.5, marginTop: 3 }}>{c.desc}</div>
                    </div>
                    <span className="display" style={{ fontSize: 26, color: i === 0 ? 'var(--red)' : '#fff', whiteSpace: 'nowrap', flexShrink: 0 }}>{c.precio}</span>
                  </div>
                ))}
              </div>
              <p style={{ fontSize: 13.5, color: '#9C9AA0', lineHeight: 1.6, marginTop: 14 }}>
                {t('Los precios no incluyen IGV: si requieres factura, se añade el 18%.', 'Prices do not include IGV (Peruvian VAT): if you need an invoice, 18% is added.')}
              </p>
              <div style={{ marginTop: 24, paddingTop: 24, borderTop: '1px solid #2A2A30', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[t('18 sesiones en vivo con el equipo LPDE', '18 live sessions with the LPDE team'), t('Materiales y formatos de gestión descargables', 'Downloadable materials and management templates'), t('Certificación sujeta a asistencia mínima', 'Certificate subject to minimum attendance')].map((item, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
                    <span style={{ color: 'var(--red)', flexShrink: 0 }}><Icon name="check" size={14} /></span>
                    <span style={{ fontSize: 14, color: '#C9C9D0' }}>{item}</span>
                  </div>
                ))}
              </div>
              <a className="btn btn-red" href={GESTORES_FORM_URL} target="_blank" rel="noopener"
                style={{ marginTop: 28, width: '100%', justifyContent: 'center' }}>
                {t('Ir al formulario de inscripción', 'Go to the enrollment form')} <Icon name="arrow-up-right" size={14} />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Modalidades de pago — misma información bancaria y links que entrenadores-wsdc */}
      <section className="section" style={{ background: 'var(--bg-alt)' }} id="pago">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 40 }}>
            <span className="eyebrow">{t('Modalidades de pago', 'Payment methods')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
              {t('Tres formas de pagar tu inscripción.', 'Three ways to pay for your enrollment.')}
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              {
                titulo: t('Depósito o transferencia', 'Deposit or bank transfer'),
                lineas: [
                  [t('Banco', 'Bank'), 'Interbank'],
                  [t('Cuenta', 'Account'), '200-3005217677'],
                  [t('Titular', 'Holder'), 'METADIDACTAS SAC'],
                  [t('CCI (interbancaria)', 'CCI (interbank code)'), '003-200-003005217677-30'],
                ],
              },
              {
                titulo: 'Yape',
                lineas: [
                  [t('Número', 'Number'), '947 357 797'],
                  [t('Titular', 'Holder'), 'Raí Dante León Saavedra'],
                ],
              },
              {
                titulo: t('Tarjeta de débito o crédito', 'Debit or credit card'),
                lineas: [
                  [t('Pasarela', 'Gateway'), 'MercadoPago'],
                  [t('Cuotas', 'Installments'), t('Pago directo o hasta 3 cuotas sin intereses', 'One-time payment or up to 3 interest-free installments')],
                ],
                nota: t('Usa los links según tu categoría ↓', 'Use the links for your category ↓'),
              },
            ].map((m, i) => (
              <div key={i} className={`reveal d${i + 1}`} style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 4, padding: 28 }}>
                <div className="kicker" style={{ color: 'var(--red)' }}>{String(i + 1).padStart(2, '0')}</div>
                <h3 className="display" style={{ fontSize: 24, marginTop: 10, marginBottom: 16 }}>{m.titulo}</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {m.lineas.map(([k, v]) => (
                    <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 1, paddingBottom: 8, borderBottom: '1px solid var(--line)' }}>
                      <span className="kicker" style={{ fontSize: 10 }}>{k}</span>
                      <span style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)', fontFamily: 'var(--mono)', letterSpacing: '0.01em' }}>{v}</span>
                    </div>
                  ))}
                </div>
                {m.nota && <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 14 }}>{m.nota}</p>}
              </div>
            ))}
          </div>

          {/* Links de MercadoPago por categoría */}
          <div className="reveal" style={{ marginTop: 40, background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 4, padding: 28 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
              <div>
                <div className="kicker" style={{ marginBottom: 14 }}>{t('Links sin IGV', 'Links without IGV')}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <a className="btn btn-ghost" href="https://mpago.la/1kgqejF" target="_blank" rel="noopener" style={{ justifyContent: 'space-between' }}>{t('Público general', 'General public')} <span>S/ 490</span></a>
                  <a className="btn btn-ghost" href="https://mpago.la/338rG3o" target="_blank" rel="noopener" style={{ justifyContent: 'space-between' }}>{t('Miembros LPDE', 'LPDE members')} <span>S/ 440</span></a>
                  <a className="btn btn-ghost" href="https://mpago.la/1FGH4KL" target="_blank" rel="noopener" style={{ justifyContent: 'space-between' }}>{t('Antiguos alumnos', 'Alumni')} <span>S/ 410</span></a>
                </div>
              </div>
              <div>
                <div className="kicker" style={{ marginBottom: 14 }}>{t('Links con IGV (para factura)', 'Links with IGV (for invoice)')}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <a className="btn btn-ghost" href="https://mpago.la/2338S1U" target="_blank" rel="noopener" style={{ justifyContent: 'space-between' }}>{t('Público general', 'General public')} <span>S/ 578.20</span></a>
                  <a className="btn btn-ghost" href="https://mpago.la/2vDiFx7" target="_blank" rel="noopener" style={{ justifyContent: 'space-between' }}>{t('Miembros LPDE', 'LPDE members')} <span>S/ 519.20</span></a>
                  <a className="btn btn-ghost" href="https://mpago.la/2nrZQUK" target="_blank" rel="noopener" style={{ justifyContent: 'space-between' }}>{t('Antiguos alumnos', 'Alumni')} <span>S/ 410</span></a>
                </div>
              </div>
            </div>
            <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
              {t('La inscripción corporativa y los extranjeros no residentes también pueden pagar con tarjeta: escríbenos a ', 'Corporate enrollments and non-resident foreigners can also pay by card: write to ')}<a href="mailto:contacto@lpdebate.org" style={{ color: 'var(--red)', fontWeight: 600 }}>contacto@lpdebate.org</a>{t(' y te generamos un link especial.', ' and we’ll generate a special link for you.')}
            </p>
            <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 10 }}>
              {t('Una vez realizado el pago, adjunta el comprobante en el formulario de inscripción. Si tienes alguna complicación con el formulario, envía la captura a contacto@lpdebate.org con el asunto PAGO PROGRAMA FORMACIÓN DEBATE, indicando tus nombres y apellidos, el colegio en el que laboras (o si eres independiente) y tu especialidad.', 'Once you have paid, attach the receipt to the enrollment form. If you have any trouble with the form, send a screenshot to contacto@lpdebate.org with the subject PAGO PROGRAMA FORMACIÓN DEBATE, stating your full name, the school where you work (or that you are independent) and your specialty.')}
            </p>
          </div>
        </div>
      </section>

      {/* Volver a Formación */}
      <section className="section-tight">
        <div className="shell" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <button className="btn btn-ghost" onClick={() => setPage('formacion')}>{t('← Ver todos los programas', '← View all programs')}</button>
          <a href="mailto:contacto@lpdebate.org" className="kicker" style={{ color: 'var(--ink-2)', textDecoration: 'none' }}>{t('¿Dudas? contacto@lpdebate.org', 'Questions? contacto@lpdebate.org')}</a>
        </div>
      </section>
    </Page>
  );
};

/* ─── TNDE · "Avísame cuando se abra": el mailto lleva lo escrito en el body ─── */
// Web App de consultas (Apps Script): guarda en el Sheet "Consultas LPDE" y
// notifica a contacto@lpdebate.org. La comparten el form de Admisión y el del TNDE.
const CONSULTAS_WEBAPP_URL = 'https://script.google.com/macros/s/AKfycbxSrnPxbP_8F6MYfG_MDlhD34ayGQUxZOYYC809p-PX4bu-k4r6LGaNNnvijPVOJOUk/exec';

const TndeAvisoForm = ({ email }) => {
  const { t, lang } = useLang();
  const [colegio, setColegio] = React.useState('');
  const [profesor, setProfesor] = React.useState('');
  const [correo, setCorreo] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [status, setStatus] = React.useState(null);

  const buildMensaje = () => (lang === 'en'
    ? `School: ${colegio}\nLead teacher: ${profesor}\nSchool email: ${correo}\n\nWe would like to be notified when registration for TNDE 2026 opens.`
    : `Colegio: ${colegio}\nProfesor responsable: ${profesor}\nCorreo institucional: ${correo}\n\nQueremos recibir el aviso cuando se abran las inscripciones del TNDE 2026.`);

  const fallbackMailto = () => {
    const subject = t('Aviso TNDE 2026', 'TNDE 2026 — notify me when registration opens');
    window.location.href = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(buildMensaje())}`;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!colegio.trim() || !profesor.trim() || !correo.trim()) {
      setStatus({ kind: 'error', msg: t('Por favor completa colegio, profesor y correo.', 'Please fill in school, teacher and email.') });
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(correo.trim())) {
      setStatus({ kind: 'error', msg: t('El correo no tiene un formato válido.', 'That email address doesn’t look valid.') });
      return;
    }
    setBusy(true);
    setStatus({ kind: 'ok', msg: t('Enviando…', 'Sending…') });
    try {
      // text/plain para evitar el preflight CORS contra Apps Script (mismo patrón que Admisión)
      const r = await fetch(CONSULTAS_WEBAPP_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'text/plain;charset=utf-8' },
        body: JSON.stringify({
          nombre: profesor.trim(),
          correo: correo.trim(),
          colegio: colegio.trim(),
          motivo: 'Aviso TNDE 2026',
          mensaje: buildMensaje(),
          ua: navigator.userAgent || '',
        }),
        redirect: 'follow',
      });
      const data = await r.json().catch(() => ({ ok: false }));
      if (data && data.ok) {
        setStatus({ kind: 'ok', msg: t('¡Listo! Te escribiremos en cuanto se publiquen las bases del TNDE 2026.', 'Done! We’ll write to you as soon as the TNDE 2026 rules are published.') });
        setColegio(''); setProfesor(''); setCorreo('');
      } else {
        setStatus({ kind: 'warn', msg: t('No pudimos registrar tu solicitud automáticamente. Abriendo tu cliente de correo como respaldo…', 'We couldn’t register your request automatically. Opening your email client as a backup…') });
        fallbackMailto();
      }
    } catch (err) {
      setStatus({ kind: 'warn', msg: t('Sin conexión al servidor. Abriendo tu cliente de correo como respaldo…', 'No connection to the server. Opening your email client as a backup…') });
      fallbackMailto();
    } finally {
      setBusy(false);
    }
  };

  return (
    <form onSubmit={submit} style={{ background: '#15151A', padding: 40, borderRadius: 4, border: '1px solid #2A2A30' }}>
      <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, color: '#fff', marginBottom: 16 }}>{t('Avísame cuando se abra', 'Notify me when it opens')}</h3>
      <p style={{ fontSize: 13, color: '#9C9AA0', marginBottom: 20, lineHeight: 1.6 }}>{t('Déjanos el contacto de tu colegio y te escribimos en cuanto se publiquen las bases del TNDE 2026.', 'Leave us your school’s contact details and we’ll write to you as soon as the TNDE 2026 rules are published.')}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <input className="input" placeholder={t('Nombre del colegio', 'School name')} value={colegio} onChange={(e) => setColegio(e.target.value)} style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff' }} />
        <input className="input" placeholder={t('Profesor responsable', 'Lead teacher')} value={profesor} onChange={(e) => setProfesor(e.target.value)} style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff' }} />
        <input className="input" placeholder={t('Correo institucional', 'School email')} value={correo} onChange={(e) => setCorreo(e.target.value)} style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff' }} />
        <button type="submit" disabled={busy} className="btn btn-red" style={{ justifyContent: 'center', marginTop: 8, opacity: busy ? 0.7 : 1, cursor: busy ? 'wait' : 'pointer' }}>
          {busy ? t('Enviando…', 'Sending…') : <>{t('Quiero el aviso', 'Notify me')} <Icon name="arrow" /></>}
        </button>
        {status && (
          <p style={{ fontSize: 13, fontWeight: 600, textAlign: 'center', margin: 0, color: status.kind === 'ok' ? '#7DD87D' : (status.kind === 'warn' ? '#E6A23C' : '#FF8A8A') }}>{status.msg}</p>
        )}
        <p style={{ fontSize: 12, color: '#9C9AA0', textAlign: 'center', marginTop: 4 }}>{t('Nos llegará un correo con tus datos a ', 'We’ll receive an email with your details at ')}{email}.</p>
      </div>
    </form>
  );
};

/* ═══════════════════════════════════════════════════════════
   SELECCIÓN NACIONAL (SNDE)
   ═══════════════════════════════════════════════════════════ */
const SNDEPage = () => {
  const { t, lang } = useLang();
  const D = window.LPDE_DATA;
  // Roster y cuerpo técnico ocultos hasta tener fotos y perfiles completos (decisión 2026-06-04)
  const SHOW_SELECCION_PERFILES = false;
  // Noticias de la Selección ocultas: el contenido actual es demo/placeholder (decisión 2026-06-04)
  const SHOW_SELECCION_NOTICIAS = false;
  const [divFilter, setDivFilter] = React.useState('Todos');
  const divisions = ['Todos', 'Mayor', 'Junior'];
  const visible = divFilter === 'Todos' ? D.seleccion : D.seleccion.filter((p) => p.div === divFilter);
  const initials = (n) => n.split(' ').filter(Boolean).slice(0, 2).map((w) => w[0]).join('').toUpperCase();

  return (
    <Page screen="05 Selección Nacional">
      {/* Hero — editorial salon de la fama */}
      <section style={{ background: 'var(--ink)', color: '#fff', paddingTop: 96, paddingBottom: 64, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, right: -100, fontFamily: 'var(--serif)', fontSize: 'clamp(280px, 40vw, 600px)', color: 'rgba(227,6,19,0.08)', lineHeight: 0.8, fontStyle: 'italic', pointerEvents: 'none', userSelect: 'none' }}>3×</div>
        <div className="shell" style={{ position: 'relative' }}>
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
            <Icon name="trophy" size={24} />
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--red)' }}>
              {t('Tricampeones del Mundial Escolar de Debate', 'Three-time champions of the Spanish-language World Schools Debating Championship')}
            </span>
          </div>
          <h1 className="display reveal d1" style={{ color: '#fff', fontSize: 'clamp(64px, 10vw, 160px)', maxWidth: '12ch' }}>
            {t('La Selección', 'The National')}<br />
            <em className="it" style={{ color: 'var(--red)' }}>{t('Nacional', 'Team')}</em>
          </h1>
          <p className="reveal d2" style={{ color: '#B8B8C0', fontSize: 20, lineHeight: 1.5, maxWidth: 580, marginTop: 32 }}>
            {t('Nuestros estudiantes representan al Perú cada año en el Mundial Escolar de Debate. Tres títulos consecutivos —Virtual 2023, Panamá 2024, Chile 2025— hablan por sí solos.', 'Our students represent Peru every year at the Spanish-language World Schools Debating Championship (MED). Three consecutive titles — Online 2023, Panama 2024, Chile 2025 — speak for themselves.')}
          </p>
          <div className="reveal d3" style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 36 }}>
            <span className="kicker" style={{ color: '#9C9AA0' }}>{t('Sigue a la Selección', 'Follow the National Team')}</span>
            <a href="https://www.instagram.com/snde.lpde/" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 18px', borderRadius: 999, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.18)', color: '#fff', fontSize: 13, fontWeight: 600, fontFamily: 'var(--sans)', transition: 'all 200ms' }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--red)'; e.currentTarget.style.borderColor = 'var(--red)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.18)'; }}
            >
              <Icon name="instagram" size={16}/> @snde.lpde
            </a>
          </div>
        </div>
      </section>

      {/* Trophy timeline */}
      <section style={{ background: 'var(--ink)', color: '#fff', paddingBottom: 96 }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, borderTop: '1px solid #2A2A30', paddingTop: 48 }}>
            {D.titles.map((t, i) =>
            <div key={i} className={`reveal d${i + 1}`} style={{ padding: 0 }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--red)' }}>MED {t.year}</div>
                <div className="display" style={{ fontSize: 'clamp(56px, 7vw, 96px)', color: '#fff', marginTop: 12, lineHeight: 0.95 }}>{t.place}</div>
                <p style={{ color: '#9C9AA0', marginTop: 12, fontSize: 15 }}>{t.note}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Qué es la Selección */}
      <section className="section">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'center' }}>
            <div className="reveal">
              <span className="eyebrow">{t('Qué es la Selección', 'About the National Team')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16 }}>
                {t('Una comunidad que vive el debate en ', 'A community that lives debate ')}<em className="it">{t('lo cotidiano', 'day to day')}</em>{t(' y lo celebra, de vez en cuando, en competencia.', ' and celebrates it, every so often, in competition.')}
              </h2>
            </div>
            <div className="reveal d1">
              <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-soft)' }}>
                {t('La Selección Nacional de Debate Escolar (SNDE) es el equipo que representa al Perú en el MED. Nuestros debatientes y un equipo técnico —entrenadores, jueces y team managers— son convocados anualmente tras pruebas abiertas.', 'The National School Debate Team (SNDE) is the squad that represents Peru at the MED. Our debaters and technical staff — coaches, adjudicators and team managers — are selected every year through open trials.')}
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', marginTop: 18 }}>
                {t('La preparación arranca en febrero: tres entrenamientos semanales, dos retiros residenciales, ronda completa de prep simulada con jueces extranjeros. En julio se viaja.', 'Preparation begins in February: three practices a week, two residential retreats, and a full mock prep round with international adjudicators. In July, the team travels.')}
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
                {[{ n: '4', l: t('Años de representación continua', 'Years of continuous representation') }, { n: '2', l: t('Divisiones · junior y mayor', 'Divisions · junior and senior') }, { n: '55', l: t('Oradores activos', 'Active speakers') }].map((x, i) =>
                <div key={i}>
                    <div className="stat-num" style={{ fontSize: 48 }}>{x.n}</div>
                    <div className="kicker" style={{ marginTop: 6 }}>{x.l}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Roster + Cuerpo técnico — se publicarán pronto */}
      {!SHOW_SELECCION_PERFILES &&
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="shell">
          <div className="reveal" style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto', padding: '56px 40px', background: 'var(--bg)', border: '1px solid var(--line)' }}>
            <span className="eyebrow" style={{ justifyContent: 'center' }}>{t('Roster 2026 · Cuerpo técnico', 'Roster 2026 · Technical staff')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 16 }}>
              {t('Se publicará ', 'Coming ')}<em className="it">{t('pronto', 'soon')}</em>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 16, lineHeight: 1.6 }}>
              {t('Estamos completando los perfiles de nuestros oradores y del cuerpo técnico de la Selección 2026.', 'We are completing the profiles of our speakers and of the 2026 National Team’s technical staff.')}
            </p>
          </div>
        </div>
      </section>}

      {/* Roster */}
      {SHOW_SELECCION_PERFILES &&
      <section className="section" style={{ background: 'var(--bg-alt)', paddingTop: 64 }}>
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }} className="reveal">
            <div>
              <span className="eyebrow">Roster 2026</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>
                {divFilter === 'Todos'
                  ? <>Nuestros <span style={{ color: 'var(--red)' }}>oradores</span></>
                  : <>División <span style={{ color: 'var(--red)' }}>{divFilter}</span></>}
              </h2>
            </div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
              {divisions.map((dv) =>
              <button key={dv} onClick={() => setDivFilter(dv)} style={{
                padding: '10px 20px', borderRadius: 999,
                background: divFilter === dv ? 'var(--ink)' : 'transparent',
                color: divFilter === dv ? '#fff' : 'var(--ink-soft)',
                border: '1px solid ' + (divFilter === dv ? 'var(--ink)' : 'var(--line-strong)'),
                fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 500,
                transition: 'all 180ms'
              }}>{dv}</button>
              )}
              <span className="kicker" style={{ marginLeft: 8 }}>{visible.length} oradores</span>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
            {visible.map((p, i) =>
            <div key={p.name} className={`reveal d${i % 4 + 1}`} style={{ background: 'var(--bg)', overflow: 'hidden', border: '1px solid var(--line)', transition: 'all 280ms' }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 14px 36px rgba(0,0,0,0.08)';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';}}>

                <div style={{ aspectRatio: '3/4', overflow: 'hidden', background: 'var(--bg-alt)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 'clamp(32px, 3vw, 46px)', color: 'var(--line-strong)', lineHeight: 1 }}>{initials(p.name)}</span>
                  <span style={{ position: 'absolute', bottom: 10, left: 0, right: 0, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 8.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)' }}>Foto por actualizar</span>
                </div>
                <div style={{ padding: 16 }}>
                  <div className="kicker" style={{ color: 'var(--red)', marginBottom: 6, fontSize: 10 }}>{p.div}</div>
                  <h4 style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.15, marginBottom: 4 }}>{p.name}</h4>
                  <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>{p.school}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>}

      {/* Cuerpo técnico */}
      {SHOW_SELECCION_PERFILES &&
      <section className="section bg-pale">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
            <div>
              <span className="eyebrow">Cuerpo técnico</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16, maxWidth: '14ch' }}>
                Detrás de cada <em className="it">final</em>, todo un equipo.
              </h2>
            </div>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 460 }}>
              Coaches, coordinadores y un director técnico acompañan a la Selección durante los doce meses de preparación, desde las pruebas de noviembre hasta el viaje al Mundial.
            </p>
          </div>

          <div className="reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', marginBottom: 24, borderRadius: 999, background: 'var(--bg)', border: '1px solid var(--line)' }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--red)' }} />
            <span className="kicker">Estamos completando los perfiles del cuerpo técnico · 20 integrantes</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
            {D.cuerpoTecnico.map((c, i) => {
              const pending = c.name === 'Por actualizar';
              return (
            <div key={i} className={`reveal d${i % 3 + 1}`}
            style={{ background: 'var(--bg)', padding: 0, display: 'grid', gridTemplateColumns: '120px 1fr', transition: 'background 220ms' }}
            onMouseEnter={(e) => {e.currentTarget.style.background = 'var(--bg-alt)';}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'var(--bg)';}}>

                <div style={{ background: 'var(--bg-alt)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {c.img
                    ? <img src={c.img} alt={c.name} 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)', fontStyle: 'italic', fontSize: 26, color: 'var(--line-strong)' }}>{String(c.n || i + 1).padStart(2, '0')}</span>}
                </div>
                <div style={{ padding: '24px 24px 24px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div>
                    <div className="kicker" style={{ color: 'var(--red)', fontSize: 10 }}>{c.area}</div>
                    <h4 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.1, marginTop: 6, color: pending ? 'var(--mute)' : 'var(--ink)', fontStyle: pending ? 'italic' : 'normal' }}>{c.name}</h4>
                    {c.role && <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4, fontWeight: 600 }}>{c.role}</div>}
                    <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 10, fontStyle: pending ? 'italic' : 'normal' }}>{c.bio}</p>
                  </div>
                  {c.email
                    ? <a href={`mailto:${c.email}`} style={{ fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 1, alignSelf: 'flex-start', marginTop: 12 }}>{c.email}</a>
                    : <span style={{ fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mute)', marginTop: 12 }}>Correo por actualizar</span>}
                </div>
              </div>
              );
            })}
          </div>
        </div>
      </section>}

      {/* Noticias de la Selección — oculta (contenido demo) */}
      {SHOW_SELECCION_NOTICIAS &&
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24 }}>
            <div>
              <span className="eyebrow">En las noticias</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16, maxWidth: '18ch' }}>
                La Selección, por <em className="it">titulares</em>
              </h2>
            </div>
            <a href="#" className="btn btn-link">Ver todas las noticias</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 24 }}>
            {[
              { tag: 'MUNDIAL', date: '28 MAR 2026', title: 'Perú confirmado para el WSDC 2026 en Cape Town', excerpt: 'La delegación viajará en julio para defender el título mundial obtenido por tercer año consecutivo.', img: 'https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=1200&auto=format&q=80', featured: true },
              { tag: 'PRENSA', date: '20 MAR 2026', title: 'El Comercio: "Los chicos que ganaron tres mundiales seguidos"', excerpt: 'Perfil de cinco páginas en el suplemento dominical sobre la Selección.', img: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=1000&auto=format&q=80' },
              { tag: 'CONVOCATORIA', date: '12 MAR 2026', title: 'Abierta la postulación a la Selección 2027', excerpt: 'Las pruebas se realizarán del 5 al 12 de noviembre en Lima.', img: 'https://images.unsplash.com/photo-1523580494863-6f3031224c94?w=1000&auto=format&q=80' },
            ].map((n, i) => (
              <article key={i} className={`reveal d${i+1}`} style={{ background: 'var(--bg)', overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
                onMouseEnter={(e) => { e.currentTarget.querySelector('img').style.transform = 'scale(1.04)'; }}
                onMouseLeave={(e) => { e.currentTarget.querySelector('img').style.transform = 'scale(1)'; }}
              >
                <div style={{ aspectRatio: n.featured ? '16/10' : '4/3', overflow: 'hidden', background: 'var(--bg-alt)' }}>
                  <img src={n.img} alt={n.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 500ms ease', filter: 'grayscale(0.2)' }}/>
                </div>
                <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
                    <span className="tag red">{n.tag}</span>
                    <span className="kicker">{n.date}</span>
                  </div>
                  <h3 className="display" style={{ fontSize: n.featured ? 26 : 20, lineHeight: 1.15, marginBottom: 10 }}>{n.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 }}>{n.excerpt}</p>
                  <div style={{ marginTop: 'auto', paddingTop: 16, display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600 }}>
                    Leer más <Icon name="arrow" size={14}/>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>}

      {/* CTA */}
      <section style={{ background: 'var(--bg)', padding: '96px 0' }}>
        <div className="shell">
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }} className="reveal">
            <span className="eyebrow">{t('¿Quieres entrar a la próxima Selección?', 'Want to join the next National Team?')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>
              {t('Las pruebas abren cada ', 'Trials open every ')}<em className="it">{t('noviembre', 'November')}</em>.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 20 }}>
              {t('Cualquier debatiente puede postular, pertenezca o no a un colegio miembro de la LPDE. Lleva clases con nosotros, debate y participa de nuestras entrevistas.', 'Any debater may apply, whether or not their school is an LPDE member. Take classes with us, debate, and take part in our interviews.')}
            </p>
            <a href="https://linktr.ee/sndelpde" target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 32 }}>{t('Ver bases de admisión', 'View the tryout guidelines')} <Icon name="arrow" /></a>
          </div>
        </div>
      </section>
    </Page>);

};

/* ═══════════════════════════════════════════════════════════
   ADMISIÓN (Cómo ser miembro)
   ═══════════════════════════════════════════════════════════ */
const AdmisionPage = () => {
  // Formulario de consultas — controlado.
  // Envío preferido: POST al Apps Script Web App (CONSULTAS_WEBAPP_URL).
  //   El backend guarda en un Sheet ("Consultas LPDE") y notifica por
  //   correo a contacto@lpdebate.org. Ver apps_script_consultas.gs.
  // Fallback: si la URL no está configurada o falla la red, abrimos
  //   mailto: con los campos pre-llenados — el usuario no se queda colgado.
  //
  // Nota CORS: enviamos Content-Type: text/plain para evitar el preflight
  //   OPTIONS (Apps Script no responde headers CORS). El body es JSON,
  //   parseado por el Apps Script desde e.postData.contents.
  // CONSULTAS_WEBAPP_URL es compartida (definida arriba, junto a TndeAvisoForm).
  const { t, lang } = useLang();
  const MOTIVOS = ['Postulación colegio', 'Postulación individual', 'Dudas sobre cuotas', 'Otro'];
  // Etiquetas EN para mostrar; el valor interno (y lo que se registra) sigue en español.
  const MOTIVOS_EN = { 'Postulación colegio': 'School application', 'Postulación individual': 'Individual application', 'Dudas sobre cuotas': 'Questions about fees', 'Otro': 'Other' };
  const motivoLabel = (m) => (lang === 'en' && MOTIVOS_EN[m] ? MOTIVOS_EN[m] : m);
  const [form, setForm] = React.useState({ nombre: '', correo: '', colegio: '', motivo: MOTIVOS[0], mensaje: '' });
  const [status, setStatus] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const onField = (k) => (e) => { setForm((s) => ({ ...s, [k]: e.target.value })); setStatus(null); };
  const setMotivo = (m) => { setForm((s) => ({ ...s, motivo: m })); setStatus(null); };

  const fallbackMailto = (nombre, correo, mensaje) => {
    const subject = lang === 'en'
      ? `[LPDE · ${motivoLabel(form.motivo)}] inquiry from ${nombre}`
      : `[LPDE · ${form.motivo}] consulta de ${nombre}`;
    const lines = lang === 'en' ? [
      `Name: ${nombre}`,
      `Email: ${correo}`,
      form.colegio.trim() ? `School: ${form.colegio.trim()}` : null,
      `Reason: ${motivoLabel(form.motivo)}`,
      '',
      '— Message —',
      mensaje,
    ].filter((x) => x !== null) : [
      `Nombre: ${nombre}`,
      `Correo: ${correo}`,
      form.colegio.trim() ? `Colegio: ${form.colegio.trim()}` : null,
      `Motivo: ${form.motivo}`,
      '',
      '— Mensaje —',
      mensaje,
    ].filter((x) => x !== null);
    const body = lines.join('\n');
    window.location.href = `mailto:contacto@lpdebate.org?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };

  const submitConsulta = async (e) => {
    e.preventDefault();
    const nombre = form.nombre.trim(), correo = form.correo.trim(), mensaje = form.mensaje.trim();
    if (!nombre || !correo || !mensaje) {
      setStatus({ kind: 'error', msg: t('Por favor completa nombre, correo y mensaje.', 'Please fill in your name, email and message.') });
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(correo)) {
      setStatus({ kind: 'error', msg: t('El correo no tiene un formato válido.', 'That email address doesn’t look valid.') });
      return;
    }

    // Sin endpoint configurado → fallback inmediato a mailto
    if (!CONSULTAS_WEBAPP_URL) {
      setStatus({ kind: 'ok', msg: t('Abriendo tu cliente de correo…', 'Opening your email client…') });
      fallbackMailto(nombre, correo, mensaje);
      return;
    }

    setBusy(true);
    setStatus({ kind: 'ok', msg: t('Enviando…', 'Sending…') });
    try {
      const r = await fetch(CONSULTAS_WEBAPP_URL, {
        method: 'POST',
        // text/plain para evitar preflight CORS contra Apps Script
        headers: { 'Content-Type': 'text/plain;charset=utf-8' },
        body: JSON.stringify({
          nombre, correo, mensaje,
          colegio: form.colegio.trim(),
          motivo: form.motivo,
          ua: navigator.userAgent || '',
        }),
        redirect: 'follow',
      });
      const data = await r.json().catch(() => ({ ok: false, error: 'invalid_response' }));
      if (data && data.ok) {
        setStatus({ kind: 'ok', msg: t('¡Gracias! Recibimos tu consulta. Te respondemos en máximo 48 horas hábiles.', 'Thank you! We received your inquiry. We’ll reply within two business days.') });
        setForm({ nombre: '', correo: '', colegio: '', motivo: MOTIVOS[0], mensaje: '' });
      } else {
        // Error de servidor → ofrecer mailto como red de seguridad
        setStatus({ kind: 'warn', msg: t('No pudimos enviar tu consulta automáticamente. Abriendo tu cliente de correo como respaldo…', 'We couldn’t send your inquiry automatically. Opening your email client as a backup…') });
        fallbackMailto(nombre, correo, mensaje);
      }
    } catch (err) {
      console.warn('[consultas] POST failed:', err);
      setStatus({ kind: 'warn', msg: t('Sin conexión al servidor. Abriendo tu cliente de correo como respaldo…', 'No connection to the server. Opening your email client as a backup…') });
      fallbackMailto(nombre, correo, mensaje);
    } finally {
      setBusy(false);
    }
  };

  const scrollToConsultas = (motivo) => {
    if (motivo) setMotivo(motivo);
    setTimeout(() => {
      const el = document.getElementById('consultas');
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 60);
  };

  return (
    <Page screen="06 Admisión">
      <section style={{ paddingTop: 80, paddingBottom: 64, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
            <div className="reveal">
              <span className="eyebrow">{t('Cómo ser miembro', 'How to become a member')}</span>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 8vw, 120px)', marginTop: 20 }}>
                {t('Sé parte de la ', 'Join the ')}<em className="it">{t('red', 'network')}</em>
              </h1>
            </div>
            <div className="reveal d1">
              <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6 }}>
                {t('La LPDE acoge colegios, profesores y debatientes. Tres caminos, una misma comunidad.', 'The LPDE welcomes schools, teachers and debaters. Three paths, one community.')}
              </p>
              <a href="https://drive.google.com/file/d/1QA8bLq327JT5FK4G8eHMef6HszGn8IbI/view" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 14, marginTop: 28, padding: '14px 18px', border: '1px solid var(--line-strong)', borderRadius: 4, background: 'var(--bg)', transition: 'all 220ms', textDecoration: 'none' }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--ink)'; e.currentTarget.querySelectorAll('*').forEach(el => el.style.color = '#fff'); }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--bg)'; e.currentTarget.style.borderColor = 'var(--line-strong)'; e.currentTarget.querySelectorAll('.pdf-icon').forEach(el => el.style.color = 'var(--red)'); e.currentTarget.querySelectorAll('.pdf-title').forEach(el => el.style.color = 'var(--ink)'); e.currentTarget.querySelectorAll('.pdf-sub').forEach(el => el.style.color = 'var(--ink-2)'); }}
              >
                <span className="pdf-icon" style={{ width: 40, height: 48, border: '1.5px solid var(--red)', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--mono)', fontSize: 9, fontWeight: 700, color: 'var(--red)', letterSpacing: '0.05em', flexShrink: 0, transition: 'color 220ms' }}>PDF</span>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <div className="pdf-title" style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', transition: 'color 220ms' }}>{t('Reglamento LPDE 2026', 'LPDE Rulebook 2026')}</div>
                  <div className="pdf-sub" style={{ fontSize: 12, color: 'var(--ink-2)', fontFamily: 'var(--mono)', letterSpacing: '0.04em', transition: 'color 220ms' }}>{t('Abrir en Google Drive', 'Open in Google Drive')}</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Three paths */}
      <section className="section">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
            // imgPos / imgScale / imgOrigin: encuadre editorial per-foto
            //  · Colegios (ESAN, 16:9): zoom 1.20 para cortar la cabeza del fotógrafo de la base
            //  · Profesor (DSC_0554, 3:2): leve zoom + desplazado a la derecha (sujeto vive ahí)
            //  · SNDE (final MED): zoom 1.75 sobre el orador, que sin zoom queda perdido en la sala
            { tag: t('01 / Colegio', '01 / School'), title: t('Colegios miembros', 'Member schools'), price: t('Membresía anual', 'Annual membership'), desc: t('Acceso prioritario al TNDE, a los circuitos regionales, capacitación de profesores y descuentos en Metadidactas. Auditoría pedagógica cada dos años.', 'Priority access to the TNDE and the regional circuits, teacher training and Metadidactas discounts. A pedagogical audit every two years.'), perks: [t('Cupo en TNDE', 'Priority TNDE slot'), t('Capacitación incluida', 'Training included'), t('Amistosos y seminarios mensuales', 'Monthly friendlies and seminars'), t('Logo en plataforma', 'Logo on our platform'), t('Sede de circuito (opcional)', 'Circuit host venue (optional)')], img: 'assets/admision/colegios-miembros.jpg', imgPos: '50% 28%', imgScale: 1.20, imgOrigin: '50% 28%', motivo: 'Postulación colegio' },
            { tag: t('02 / Persona', '02 / Individual'), title: t('Profesor o coach', 'Teacher or coach'), price: t('Pase individual', 'Individual pass'), desc: t('Si tu colegio aún no es miembro, puedes capacitarte directamente con la LPDE y juzgar torneos abiertos.', 'If your school is not yet a member, you can train directly with the LPDE and adjudicate at open tournaments.'), perks: [t('Inscripción a cursos de Metadidactas', 'Enrollment in Metadidactas courses'), t('Participación como juez en torneos', 'Adjudicating at tournaments'), 'Newsletter'], img: 'assets/admision/profesor-coach.jpg', featured: true, imgPos: '52% 45%', imgScale: 1.10, imgOrigin: '52% 45%', motivo: 'Postulación individual' },
            { tag: t('03 / Estudiante', '03 / Student'), title: t('Sé parte de la SNDE', 'Join the SNDE'), price: t('Gratuito', 'Free'), desc: t('Si quieres debatir y tu colegio no tiene equipo, postúlate al programa "Selección Nacional de Debate Escolar" — podrás participar del Mundial Escolar de Debate y diferentes torneos internacionales.', 'If you want to debate and your school has no team, apply to the National School Debate Team (SNDE) program — you’ll be able to compete at the Spanish-language World Schools Debating Championship (MED) and other international tournaments.'), perks: [t('Mentor asignado', 'Assigned mentor'), t('Inscripción a torneos', 'Tournament registration'), t('Acceso a materiales', 'Access to materials'), t('Formación continua', 'Continuing education')], img: 'assets/admision/snde.jpg', imgPos: '60% 50%', imgScale: 1.75, imgOrigin: '60% 50%', motivo: 'Postulación individual' }].
            map((p, i) =>
            <div key={i} className={`reveal d${i + 1}`}
            style={{ background: p.featured ? 'var(--ink)' : 'var(--bg)', color: p.featured ? '#fff' : 'var(--ink)', border: '1px solid ' + (p.featured ? 'var(--ink)' : 'var(--line)'), overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

                <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--bg-alt)' }}>
                  <img src={p.img} alt={p.title} style={{
                    width: '100%', height: '100%',
                    objectFit: 'cover',
                    objectPosition: p.imgPos || 'center',
                    transform: p.imgScale ? `scale(${p.imgScale})` : 'none',
                    transformOrigin: p.imgOrigin || 'center',
                    filter: 'grayscale(0.25)',
                  }} />
                </div>
                <div style={{ padding: 28, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div className="kicker" style={{ color: p.featured ? 'var(--red)' : 'var(--mute)' }}>{p.tag}</div>
                  <h3 className="display" style={{ fontSize: 32, color: p.featured ? '#fff' : 'var(--ink)', marginTop: 12, marginBottom: 8 }}>{p.title}</h3>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.1em', color: p.featured ? 'var(--red)' : 'var(--ink-2)', textTransform: 'uppercase', marginBottom: 16 }}>{p.price}</div>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: p.featured ? '#B8B8C0' : 'var(--ink-2)', marginBottom: 20 }}>{p.desc}</p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {p.perks.map((perk, j) =>
                  <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: p.featured ? '#E0DED7' : 'var(--ink-soft)' }}>
                        <Icon name="check" size={14} /> {perk}
                      </li>
                  )}
                  </ul>
                  <div style={{ marginTop: 'auto', paddingTop: 28 }}>
                    <button type="button" onClick={() => scrollToConsultas(p.motivo)} className="btn" style={{ background: p.featured ? 'var(--red)' : 'var(--ink)', color: '#fff', width: '100%', justifyContent: 'center', cursor: 'pointer' }}>
                      {t('Postular', 'Apply')} <Icon name="arrow" />
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Beneficios */}
      <section className="section bg-pale">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
            <div>
              <span className="eyebrow">{t('Beneficios de ser miembro', 'Membership benefits')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16, maxWidth: '14ch' }}>
                {t('Lo que recibes cuando entras a la ', 'What you get when you join the ')}<em className="it">{t('red', 'network')}</em>
              </h2>
            </div>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 460 }}>
              {t('Una membresía activa abre puertas en torneos, formación, jueces y representación internacional. Estos son los principales beneficios institucionales.', 'An active membership opens doors in tournaments, training, adjudication and international representation. These are the main institutional benefits.')}
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
            {[
              { n: '01', t: t('Cupo prioritario al TNDE', 'Priority slot at the TNDE'), d: t('Plaza prioritaria en el Torneo Nacional. Acceso a formación continua para el TNDE.', 'A priority place at the National Tournament. Access to ongoing TNDE-focused training.') },
              { n: '02', t: t('Capacitación incluida', 'Training included'), d: t('Dos cursos por año de Metadidactas sin costo. Diplomados con 30% de descuento.', 'Two Metadidactas courses per year at no cost. Diploma programs at 30% off.') },
              { n: '03', t: t('Participación en capacitación de jueces', 'Adjudicator training'), d: t('Acceso a la capacitación nacional de jueces certificados WSDC para los torneos internos.', 'Access to the national WSDC adjudicator certification course for your internal tournaments.') },
              { n: '04', t: t('Biblioteca digital', 'Digital library'), d: t('Manuales, mociones, casos prep, videos de finales y rúbricas oficiales de la LPDE.', 'Handbooks, motions, prep cases, videos of grand finals and official LPDE rubrics.') },
              { n: '05', t: t('Logo en plataforma', 'Logo on our platform'), d: t('Tu colegio listado en lpdebate.org y en todos los programas de torneos oficiales.', 'Your school listed on lpdebate.org and in every official tournament program.') },
              { n: '06', t: t('Ranking nacional', 'National ranking'), d: t('Tus debatientes acumulan puntos en el ranking por colegio en español e inglés.', 'Your debaters earn points in the school ranking in both Spanish and English.') },
              { n: '07', t: t('Postulación a la Selección', 'National Team eligibility'), d: t('Tus estudiantes pueden postular a la Selección Nacional rumbo al MED.', 'Your students may try out for the National Team on the road to the MED.') },
              { n: '08', t: t('Red regional', 'Regional network'), d: t('Acceso al coordinador regional, encuentros zonales y sede rotativa de circuitos.', 'Access to your regional coordinator, zone meets and rotating circuit venues.') },
              { n: '09', t: t('Soporte pedagógico', 'Pedagogical support'), d: t('Una hora trimestral de asesoría con un especialista para tu equipo de profesores.', 'A quarterly one-hour advisory session with a specialist for your teaching team.') },
            ].map((b, i) => (
              <div key={i} className={`reveal d${(i % 3) + 1}`} style={{ background: 'var(--bg)', padding: '32px 28px', transition: 'background 220ms' }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--bg)'; }}
              >
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--red)' }}>{b.n}</span>
                  <div style={{ height: 1, flex: 1, background: 'var(--line)' }}/>
                </div>
                <h4 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.15, marginBottom: 10 }}>{b.t}</h4>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Costos de membresía */}
      <section className="section bg-cream">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
            <div>
              <span className="eyebrow">{t('Costos de membresía', 'Membership fees')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16, maxWidth: '16ch' }}>
                {t('Cuotas ', '')}<em className="it">{t('transparentes', 'Transparent')}</em>{t(', ajustadas por contexto', ' fees, adjusted to context')}
              </h2>
            </div>
            <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 460 }}>
              {t('Cuota anual en soles, con pago único por año. La escala se define según la pensión mensual del colegio; los colegios públicos y sin pensión están coberturados.', 'An annual fee in Peruvian soles, paid once a year. The tier is set by the school’s monthly tuition; public and tuition-free schools are covered.')}
            </p>
          </div>

          <div style={{ background: 'var(--bg)', border: '1px solid var(--line)' }}>
            {[
              { tier: t('Colegios coberturados', 'Covered schools'), desc: t('Colegios públicos (incl. emblemáticos y COAR), mixtos sin pensión, parroquiales y administrados por ONG. Participan en al menos una actividad por trimestre.', 'Public schools (incl. flagship schools and COAR), tuition-free mixed-funding, parochial and NGO-run schools. They take part in at least one activity per term.'), price: '0', period: t('Gratuito', 'Free'), tag: t('Coberturado', 'Covered'), red: true },
              { tier: t('Escala 1', 'Tier 1'), desc: t('Colegios con pensión mensual menor o igual a S/ 999.', 'Schools with a monthly tuition of S/ 999 or less.'), price: '590', period: t('/ año', '/ year') },
              { tier: t('Escala 2', 'Tier 2'), desc: t('Colegios con pensión mensual entre S/ 1,000 y S/ 1,999.', 'Schools with a monthly tuition between S/ 1,000 and S/ 1,999.'), price: '1,180', period: t('/ año', '/ year') },
              { tier: t('Escala 3', 'Tier 3'), desc: t('Colegios con pensión mensual de S/ 2,000 a más.', 'Schools with a monthly tuition of S/ 2,000 or more.'), price: '1,770', period: t('/ año', '/ year') },
            ].map((c, i) => (
              <div key={i} className={`reveal d${(i % 3) + 1}`} style={{ display: 'grid', gridTemplateColumns: '1.4fr 2fr 1fr 140px', gap: 24, padding: '28px 32px', borderTop: i > 0 ? '1px solid var(--line)' : 'none', alignItems: 'center', transition: 'background 220ms' }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--bg)'; }}
              >
                <div>
                  <h4 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2 }}>{c.tier}</h4>
                  {c.tag && (
                    <span style={{ display: 'inline-block', marginTop: 8, padding: '3px 10px', borderRadius: 999, background: c.red ? 'var(--red-tint)' : 'var(--bg-alt)', color: c.red ? 'var(--red-deep)' : 'var(--ink-soft)', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--sans)' }}>
                      {c.tag}
                    </span>
                  )}
                </div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 }}>{c.desc}</p>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                    {c.price !== '0' && <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)' }}>S/</span>}
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 38, lineHeight: 1, color: 'var(--ink)' }}>{c.price === '0' ? '—' : c.price}</span>
                  </div>
                  <div className="kicker" style={{ marginTop: 4 }}>{c.period}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <button type="button" onClick={() => scrollToConsultas('Postulación colegio')} className="btn btn-link" style={{ fontSize: 13, cursor: 'pointer' }}>{t('Postular', 'Apply')} <Icon name="arrow" size={12}/></button>
                </div>
              </div>
            ))}
          </div>

          <p className="reveal d2" style={{ fontSize: 13, color: 'var(--mute)', marginTop: 24, maxWidth: 720 }}>
            {t('* Todas las cuotas incluyen IGV y se pagan una vez al año. La escala depende de la pensión mensual del colegio. Los colegios coberturados reciben los mismos beneficios que los pagantes. Consulta el reglamento para las condiciones y formas de pago.', '* All fees include IGV (Peruvian VAT) and are paid once a year. The tier depends on the school’s monthly tuition. Covered schools receive the same benefits as paying members. See the rulebook for terms and payment methods.')}
          </p>
        </div>
      </section>

      {/* Process */}
      <section className="section bg-dots">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 56 }}>
            <span className="eyebrow">{t('Proceso de admisión', 'Membership process')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16, maxWidth: '16ch' }}>
              {t('Cuatro pasos para sumarte a la ', 'Four steps to join the ')}<em className="it">{t('red', 'network')}</em>.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--line-strong)' }}>
            {[
            { n: '01', t: t('Revisa fechas y reglamento', 'Check the dates and rulebook'), d: t('Inscripción abierta hasta el 31 de marzo de 2026. Revisa el reglamento con las obligaciones y beneficios de la membresía.', 'Applications are open until March 31, 2026. Review the rulebook covering membership duties and benefits.') },
            { n: '02', t: t('Acepta los principios', 'Accept the principles'), d: t('Confirma que tu colegio comparte los fines institucionales de la Liga.', 'Confirm that your school shares the League’s institutional aims.') },
            { n: '03', t: t('Envía tu carta', 'Send your letter'), d: t('Redacta la carta de intención firmada por la dirección, con el formato que te damos, y envíala junto al voucher de pago a contacto@lpdebate.org.', 'Draft the letter of intent signed by your school’s leadership, using the template we provide, and send it with the payment receipt to contacto@lpdebate.org.') },
            { n: '04', t: t('Evaluación', 'Review'), d: t('El Consejo Directivo revisa tu solicitud y te responde durante la semana siguiente.', 'The Board reviews your application and replies within a week.') }].
            map((s, i) =>
            <div key={i} className={`reveal d${i + 1}`} style={{ padding: '40px 24px', borderRight: i < 3 ? '1px solid var(--line-strong)' : 'none', position: 'relative' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 80, lineHeight: 0.8, color: 'var(--red)', fontStyle: 'italic', marginBottom: 24 }}>{s.n}</div>
                <h3 className="display" style={{ fontSize: 26, marginBottom: 14, lineHeight: 1.1 }}>{s.t}</h3>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6 }}>{s.d}</p>
              </div>
            )}
          </div>
          <p className="reveal" style={{ fontSize: 13, color: 'var(--mute)', marginTop: 24 }}>
            {t('Reincorporaciones de exmiembros 2025: hasta el 8 de abril de 2026.', 'Returning 2025 members may rejoin until April 8, 2026.')}
          </p>
        </div>
      </section>

      {/* Formulario de consultas */}
      <section id="consultas" className="section" style={{ background: 'var(--ink)', color: '#fff', scrollMarginTop: 'var(--nav-h)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }}>
            <div className="reveal">
              <span className="eyebrow" style={{ color: 'var(--red)' }}>{t('Consultas y postulaciones', 'Inquiries and applications')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 20 }}>
                {t('¿Tienes dudas?', 'Questions?')}<br/>{t('Hablemos en ', 'Let’s talk within ')}<em className="it" style={{ color: 'var(--red)' }}>{t('48 horas', '48 hours')}</em>
              </h2>
              <p style={{ color: '#B8B8C0', fontSize: 17, lineHeight: 1.6, marginTop: 24, maxWidth: 440 }}>
                {t('Cuéntanos tu caso. Nos llegará un correo con tus datos a ', 'Tell us about your case. We’ll receive an email with your details at ')}<strong style={{ color: '#fff' }}>contacto@lpdebate.org</strong>{t('. Un coordinador te responderá en un máximo de 48 horas hábiles.', '. A coordinator will reply within two business days.')}
              </p>
              <div style={{ marginTop: 36, paddingTop: 28, borderTop: '1px solid #2A2A30', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: '#15151A', border: '1px solid #2A2A30', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--red)' }}><Icon name="mail" size={16}/></span>
                  <div>
                    <div className="kicker" style={{ color: '#9C9AA0' }}>{t('Correo directo', 'Email us directly')}</div>
                    <a href="mailto:contacto@lpdebate.org" style={{ color: '#fff', fontSize: 15, fontWeight: 600 }}>contacto@lpdebate.org</a>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: '#15151A', border: '1px solid #2A2A30', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--red)' }}><Icon name="phone" size={16}/></span>
                  <div>
                    <div className="kicker" style={{ color: '#9C9AA0' }}>{t('Teléfono', 'Phone')}</div>
                    <a href="tel:+51944123447" style={{ color: '#fff', fontSize: 15, fontWeight: 600 }}>+51 944 123 447</a>
                  </div>
                </div>
              </div>
            </div>

            <form className="reveal d1" onSubmit={submitConsulta} style={{ background: '#15151A', padding: 36, borderRadius: 4, border: '1px solid #2A2A30', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, color: '#fff', marginBottom: 8 }}>{t('Envíanos tu consulta', 'Send us your inquiry')}</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label htmlFor="consulta-nombre" style={{ display: 'block', fontSize: 11, color: '#9C9AA0', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{t('Nombre *', 'Name *')}</label>
                  <input id="consulta-nombre" className="input" value={form.nombre} onChange={onField('nombre')} placeholder={t('Tu nombre', 'Your name')} autoComplete="name" style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff' }}/>
                </div>
                <div>
                  <label htmlFor="consulta-correo" style={{ display: 'block', fontSize: 11, color: '#9C9AA0', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{t('Correo *', 'Email *')}</label>
                  <input id="consulta-correo" className="input" type="email" value={form.correo} onChange={onField('correo')} placeholder={t('tu@correo.pe', 'you@email.com')} autoComplete="email" style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff' }}/>
                </div>
              </div>
              <div>
                <label htmlFor="consulta-colegio" style={{ display: 'block', fontSize: 11, color: '#9C9AA0', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{t('Colegio o institución (opcional)', 'School or institution (optional)')}</label>
                <input id="consulta-colegio" className="input" value={form.colegio} onChange={onField('colegio')} placeholder={t('Nombre del colegio', 'School name')} autoComplete="organization" style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff' }}/>
              </div>
              <div>
                <label style={{ display: 'block', fontSize: 11, color: '#9C9AA0', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{t('Motivo', 'Reason')}</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                  {MOTIVOS.map((m, i) => {
                    const checked = form.motivo === m;
                    return (
                      <label key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--ink)', border: '1px solid ' + (checked ? 'var(--red)' : '#2A2A30'), borderRadius: 999, cursor: 'pointer', fontSize: 13, color: '#E0DED7', transition: 'all 180ms' }}
                        onMouseEnter={(e) => { if (!checked) e.currentTarget.style.borderColor = 'var(--red)'; }}
                        onMouseLeave={(e) => { if (!checked) e.currentTarget.style.borderColor = '#2A2A30'; }}
                      >
                        <input type="radio" name="motivo" checked={checked} onChange={() => setMotivo(m)} style={{ accentColor: 'var(--red)' }}/>
                        {motivoLabel(m)}
                      </label>
                    );
                  })}
                </div>
              </div>
              <div>
                <label htmlFor="consulta-mensaje" style={{ display: 'block', fontSize: 11, color: '#9C9AA0', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{t('Mensaje *', 'Message *')}</label>
                <textarea id="consulta-mensaje" className="input" rows={4} value={form.mensaje} onChange={onField('mensaje')} placeholder={t('Cuéntanos brevemente tu consulta o interés...', 'Tell us briefly about your inquiry or interest...')}
                  style={{ background: 'var(--ink)', borderColor: '#2A2A30', color: '#fff', borderRadius: 16, resize: 'vertical', fontFamily: 'var(--sans)', minHeight: 100 }}
                />
              </div>
              {status && (
                <div role="alert" style={{
                  padding: '12px 16px',
                  background: status.kind === 'error' ? 'rgba(227,6,19,0.12)' : 'rgba(255,255,255,0.05)',
                  borderLeft: '3px solid ' + (status.kind === 'error' ? 'var(--red)' : status.kind === 'warn' ? '#E6A23C' : '#4ade80'),
                  fontSize: 13, color: '#fff', lineHeight: 1.5,
                }}>{status.msg}</div>
              )}
              <button type="submit" disabled={busy} className="btn btn-red" style={{ justifyContent: 'center', marginTop: 8, opacity: busy ? 0.7 : 1, cursor: busy ? 'wait' : 'pointer' }}>
                {busy ? t('Enviando…', 'Sending…') : <>{t('Enviar consulta', 'Send inquiry')} <Icon name="arrow"/></>}
              </button>
              <p style={{ fontSize: 12, color: '#9C9AA0', textAlign: 'center' }}>
                {CONSULTAS_WEBAPP_URL
                  ? t('Tu consulta se enviará a contacto@lpdebate.org y quedará registrada en nuestro sistema.', 'Your inquiry will be sent to contacto@lpdebate.org and logged in our system.')
                  : t('Al enviar se abrirá tu cliente de correo con los datos hacia contacto@lpdebate.org.', 'When you submit, your email client will open with the details addressed to contacto@lpdebate.org.')}
              </p>
            </form>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="shell-narrow">
          <div className="reveal" style={{ marginBottom: 48, textAlign: 'center' }}>
            <span className="eyebrow muted">{t('Preguntas frecuentes', 'Frequently asked questions')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>{t('Antes de postular', 'Before you apply')}</h2>
          </div>
          <div>
            {[
            { q: t('¿La membresía tiene costo?', 'Does membership have a cost?'), a: t('Sí, los colegios miembros pagan una membresía anual que cubre acceso a torneos y capacitación. Profesores independientes pagan por curso. Los debatientes independientes participan gratis.', 'Yes. Member schools pay an annual fee covering tournament access and training. Independent teachers pay per course. Independent debaters take part for free.') },
            { q: t('¿Cómo se calcula la cuota institucional?', 'How is the school fee calculated?'), a: t('Depende de la pensión mensual del colegio: Escala 1 (hasta S/ 999), Escala 2 (de S/ 1,000 a 1,999) y Escala 3 (de S/ 2,000 a más). Los colegios públicos y sin pensión están coberturados y reciben los mismos beneficios.','It depends on the school’s monthly tuition: Tier 1 (up to S/ 999), Tier 2 (S/ 1,000 to 1,999) and Tier 3 (S/ 2,000 and above). Public and tuition-free schools are covered and receive the same benefits.') },
            { q: t('¿Pueden ser miembros colegios públicos?', 'Can public schools become members?'), a: t('Sí. Tenemos un programa de membresía gratuita para colegios públicos con plan de debate sostenido, financiado por aliados.', 'Yes. We run a free membership program for public schools with a sustained debate plan, funded by partners.') },
            { q: t('¿Hasta cuándo puedo postular?', 'When is the application deadline?'), a: t('La inscripción de cada año cierra el 31 de marzo; las reincorporaciones de exmiembros, el 8 de abril. Recomendamos postular con tiempo para participar del calendario completo.', 'Each year’s applications close on March 31; returning former members have until April 8. We recommend applying early so you can enjoy the full season calendar.') },
            { q: t('¿Puede un colegio del extranjero ser miembro?', 'Can schools outside Peru become members?'), a: t('En este momento la LPDE es exclusivamente para colegios con sede en Perú. Tenemos convenios bilaterales con ligas hermanas en Chile, Ecuador y Colombia.', 'At the moment the LPDE is exclusively for schools based in Peru. We hold bilateral agreements with sister leagues in Chile, Ecuador and Colombia.') }].
            map((f, i) => <FAQItem key={i} faq={f} idx={i} />)}
          </div>
        </div>
      </section>

      {/* Reglamento descarga — final de página */}
      <section style={{ background: 'var(--bg-alt)', padding: '96px 0', borderTop: '1px solid var(--line)' }}>
        <div className="shell">
          <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">{t('Documento oficial', 'Official document')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16, maxWidth: '16ch' }}>
                {t('Descarga el ', 'Download the LPDE ')}<em className="it">{t('Reglamento', 'Rulebook')}</em>{t(' de la LPDE', '')}
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 20, maxWidth: 480 }}>
                {t('Contiene los términos de membresía, costos detallados, derechos y deberes de los miembros, sistema de competencias y código de convivencia. Recomendamos leerlo antes de postular.', 'It contains the membership terms, detailed fees, members’ rights and duties, the competition system and the code of conduct. We recommend reading it before applying.')}
              </p>
            </div>

            <a href="https://drive.google.com/file/d/1QA8bLq327JT5FK4G8eHMef6HszGn8IbI/view" target="_blank" rel="noopener" style={{ display: 'flex', gap: 28, padding: 32, background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 4, textDecoration: 'none', color: 'var(--ink)', transition: 'all 260ms', cursor: 'pointer' }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.08)'; e.currentTarget.style.borderColor = 'var(--ink)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--line)'; }}
            >
              {/* Visual PDF "page" */}
              <div style={{ flexShrink: 0, position: 'relative', width: 96, height: 124, background: '#fff', border: '1px solid var(--line-strong)', borderRadius: 3, overflow: 'hidden', boxShadow: '0 4px 12px rgba(0,0,0,0.08)' }}>
                <div style={{ position: 'absolute', top: 0, right: 0, width: 22, height: 22, background: 'var(--bg-alt)', borderLeft: '1px solid var(--line-strong)', borderBottom: '1px solid var(--line-strong)' }}/>
                <div style={{ position: 'absolute', top: 12, left: 10, right: 10, display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ height: 4, background: 'var(--red)', width: '60%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '85%', marginTop: 4 }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '78%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '92%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '70%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '88%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '50%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '82%', marginTop: 8 }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '76%' }}/>
                  <div style={{ height: 2, background: 'var(--ink-2)', opacity: 0.3, width: '94%' }}/>
                </div>
                <div style={{ position: 'absolute', bottom: 8, left: 10, right: 10, fontFamily: 'var(--mono)', fontSize: 7, color: 'var(--red)', fontWeight: 700, letterSpacing: '0.1em' }}>LPDE · 2026</div>
              </div>

              {/* Info */}
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: 'var(--red-tint)', color: 'var(--red-deep)', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--sans)', marginBottom: 12 }}>{t('Edición 2026', '2026 edition')}</div>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.15 }}>{t('Reglamento LPDE', 'LPDE Rulebook')}</h3>
                  <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 8 }}>{t('Documento oficial · PDF en Google Drive', 'Official document · PDF on Google Drive')}</p>
                </div>
                <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid var(--line)', fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>
                  <Icon name="download" size={16}/> {t('Descargar documento', 'Download document')}
                </div>
              </div>
            </a>
          </div>
        </div>
      </section>
    </Page>);

};

const FAQItem = ({ faq, idx }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`reveal d${idx % 4 + 1}`} style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', background: 'none', border: 'none', padding: '24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
        textAlign: 'left', fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)'
      }}>
        <span>{faq.q}</span>
        <span style={{ transform: open ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 240ms ease', color: 'var(--red)', flexShrink: 0 }}>
          <Icon name="plus" size={20} />
        </span>
      </button>
      <div style={{ maxHeight: open ? 200 : 0, overflow: 'hidden', transition: 'max-height 320ms ease' }}>
        <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, paddingBottom: 24, maxWidth: '60ch' }}>{faq.a}</p>
      </div>
    </div>);

};

/* ═══════════════════════════════════════════════════════════
   TNDE
   ═══════════════════════════════════════════════════════════ */
const TNDEPage = () => {
  // OJO: aquí `t` es el objeto de datos del TNDE; el traductor se llama `tr`.
  const { t: tr } = useLang();
  const D = window.LPDE_DATA;
  const t = D.tnde;
  return (
    <Page screen="07 TNDE">
      <div style={{ '--red': '#63191E', '--red-deep': '#3D0F12', '--red-tint': '#F4E2E3' }}>
      {/* Hero — split */}
      <section style={{ background: 'var(--red)', color: '#fff', position: 'relative', overflow: 'hidden', paddingTop: 48, paddingBottom: 64 }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center', width: '100%' }}>
          <div>
            <div className="reveal" style={{ marginBottom: 16 }}>
              <img src={t.emblemWhite} alt={tr('Emblema TNDE', 'TNDE emblem')} style={{ height: 110, width: 'auto', maxWidth: 'none', display: 'block', opacity: 0.98 }}/>
            </div>
            <div className="reveal d1" style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'rgba(255,255,255,0.85)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24 }}>
              <span style={{ width: 32, height: 1, background: '#fff' }} />
              {tr('Torneo Nacional de Debate Escolar', 'National School Debate Tournament')}
            </div>
            <h1 className="display reveal d2" style={{ color: '#fff', fontSize: 'clamp(72px, 11vw, 200px)', lineHeight: 0.92 }}>
              TNDE<br />
              <em style={{ fontStyle: 'italic', opacity: 0.9 }}>2026</em>
            </h1>
            <p className="reveal d2" style={{ color: 'rgba(255,255,255,0.92)', fontSize: 22, marginTop: 32, maxWidth: 480, lineHeight: 1.4 }}>
              {t.edition} · {t.dates}<br />
              {t.venue}
            </p>
            <div className="reveal d3" style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <button className="btn" style={{ background: '#fff', color: 'var(--red)', opacity: 0.5, cursor: 'not-allowed' }} disabled>{tr('Inscripciones · TBA', 'Registration · TBA')}</button>
              <button className="btn btn-light" style={{ opacity: 0.5, cursor: 'not-allowed' }} disabled>{tr('Bases · TBA', 'Rules · TBA')}</button>
            </div>
          </div>
          <div className="reveal d2" style={{ aspectRatio: '3/4', overflow: 'hidden', background: 'var(--red-deep)' }}>
            <img src={t.heroPhoto} alt={tr('TNDE en debate', 'TNDE debate in action')} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
          </div>
        </div>
      </section>

      {/* Quick facts strip */}
      <section style={{ background: 'var(--ink)', color: '#fff', padding: '40px 0' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
            { num: t.teams, label: tr('Equipos', 'Teams') },
            { num: t.schools, label: tr('Colegios', 'Schools') },
            { num: t.judges, label: tr('Jueces', 'Adjudicators') },
            { num: t.prize, label: tr('En premios', 'In prizes') }].
            map((s, i) => {
              const isNum = typeof s.num === 'number';
              return (
                <div key={i} className={`reveal d${i + 1}`} style={{ borderLeft: '2px solid var(--red)', paddingLeft: 20 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: isNum ? 48 : 28, lineHeight: 1, color: isNum ? '#fff' : 'rgba(255,255,255,0.55)', fontStyle: isNum ? 'normal' : 'italic' }}>
                    {isNum ? <CountUp to={s.num} /> : s.num}
                  </div>
                  <div className="kicker" style={{ color: '#9C9AA0', marginTop: 8 }}>{s.label}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Format & schedule */}
      <section className="section bg-cool">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
            <div className="reveal">
              <span className="eyebrow">{tr('El formato', 'The format')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16 }}>
                {tr('Formato ', 'The ')}<em className="it">WSDC</em>{tr('.', ' format.')}<br />{tr('Libre inscripción.', 'Open registration.')}<br />{tr('Para todo el Perú.', 'For all of Peru.')}
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 24, maxWidth: '40ch' }}>
                {tr('Formato World Schools Debating Championship. Equipos de tres oradores más reply. Mociones preparadas y de impromptu. Categorías en español e inglés (desde 2021). Primer torneo de debate de libre inscripción del país.', 'The World Schools Debating Championship format. Teams of three speakers plus a reply speech. Prepared and impromptu motions. Spanish and English categories (since 2021). Peru’s first open-registration debate tournament.')}
              </p>
            </div>
            <div className="reveal d1">
              <div style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '48px 32px', textAlign: 'center' }}>
                <span className="eyebrow muted">{tr('Cronograma', 'Schedule')}</span>
                <h3 className="display" style={{ fontSize: 32, marginTop: 16, color: 'var(--ink)' }}>{tr('Por anunciar', 'To be announced')}</h3>
                <p style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)', marginTop: 16 }}>
                  {tr('Las fechas, sede y schedule de la XII edición', 'The dates, venue and schedule of the 12th edition')}<br/>{tr('se publicarán cuando la dirección 2026 los confirme.', 'will be published once the 2026 organizing team confirms them.')}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Previous edition */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24 }}>
            <div>
              <span className="eyebrow">{tr('Ediciones anteriores', 'Past editions')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>{tr('El TNDE en imágenes', 'The TNDE in pictures')}</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridAutoRows: '200px', gap: 12 }}>
            {t.gallery.map((src, i) => {
              const spans = [
                { c: 'span 2', r: 'span 2' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 2', r: 'span 1' },
                { c: 'span 1', r: 'span 2' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 2', r: 'span 1' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 1', r: 'span 1' },
                { c: 'span 2', r: 'span 1' },
              ];
              const s = spans[i % spans.length];
              return (
                <div key={src} className={`reveal d${(i % 4) + 1}`} style={{ gridColumn: s.c, gridRow: s.r, overflow: 'hidden', background: 'var(--ink)' }}>
                  <img src={src} alt={`TNDE ${i + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 600ms ease, filter 400ms ease', filter: 'grayscale(0.15)' }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.05)'; e.currentTarget.style.filter = 'grayscale(0)'; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.filter = 'grayscale(0.15)'; }}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Historia del TNDE */}
      <section className="section bg-dots">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
            <div>
              <span className="eyebrow">{tr('Historia del TNDE', 'History of the TNDE')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 16, maxWidth: '16ch' }}>
                {tr('Once ediciones,', 'Eleven editions,')}<br/>{tr('una ', 'one ')}<em className="it">{tr('tradición', 'tradition')}</em>
              </h2>
            </div>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 460 }}>
              {tr('Nació en 2015 como TIDE (Torneo Interescolar de Debate en Español): el primer torneo de debate del Perú de inscripción abierta y gratuita, con la misión de juntar a colegios públicos y privados en la misma cancha. En 2024 la LPDE asumió las riendas y lo convirtió en el Torneo Nacional de Debate Escolar. Hoy reúne a los 103 colegios miembros de la Liga en todo el país.', 'It was born in 2015 as TIDE (Torneo Interescolar de Debate en Español): Peru’s first debate tournament with open, free registration, on a mission to bring public and private schools onto the same playing field. In 2024 the LPDE took the reins and turned it into the National School Debate Tournament. Today it brings together the League’s 103 member schools across the country.')}
            </p>
          </div>

          {/* Coorganizadores */}
          <div style={{ marginBottom: 72 }}>
            <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--line)' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--red)' }}>01</span>
              <h3 className="display" style={{ fontSize: 28 }}>{tr('Organización', 'Organization')}</h3>
              <div className="kicker" style={{ marginLeft: 'auto' }}>{tr('Edición 2026', '2026 edition')}</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
              {[
                { name: 'LPDE', sub: tr('Liga Peruana de Debate Escolar', 'Peruvian School Debate League'), role: tr('Anfitrión', 'Host'), tba: false },
                { name: 'TBA', sub: tr('Co-organizador escolar', 'School co-organizer'), role: tr('Por anunciar', 'To be announced'), tba: true },
                { name: 'TBA', sub: tr('Sede universitaria', 'University venue'), role: tr('Por anunciar', 'To be announced'), tba: true },
                { name: 'TBA', sub: tr('Aliado institucional', 'Institutional partner'), role: tr('Por anunciar', 'To be announced'), tba: true },
              ].map((o, i) => (
                <div key={i} className={`reveal d${(i % 4) + 1}`} style={{ padding: 24, background: 'var(--bg-alt)', borderRadius: 4, opacity: o.tba ? 0.6 : 1 }}>
                  <div style={{ width: 48, height: 48, background: o.tba ? 'transparent' : 'var(--ink)', color: o.tba ? 'var(--mute)' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 24, marginBottom: 16, borderRadius: 4, border: o.tba ? '1px dashed var(--line-strong)' : 'none' }}>
                    {o.tba ? '?' : o.name.charAt(0)}
                  </div>
                  <h4 style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.15, marginBottom: 6, fontStyle: o.tba ? 'italic' : 'normal', color: o.tba ? 'var(--mute)' : 'var(--ink)' }}>{o.name}</h4>
                  <p style={{ fontSize: 13, color: 'var(--ink-2)', marginBottom: 12 }}>{o.sub}</p>
                  <span className="kicker" style={{ color: o.tba ? 'var(--mute)' : 'var(--red)' }}>{o.role}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Directores históricos */}
          <div style={{ marginBottom: 72 }}>
            <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--line)' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--red)' }}>02</span>
              <h3 className="display" style={{ fontSize: 28 }}>{tr('Dirección 2026', 'Leadership 2026')}</h3>
              <div className="kicker" style={{ marginLeft: 'auto' }}>{tr('Director general', 'Tournament director')}</div>
            </div>
            <div className="reveal d1" style={{ background: 'var(--ink)', color: '#fff', marginBottom: 32, display: 'grid', gridTemplateColumns: '320px 1fr', alignItems: 'stretch' }}>
              <div style={{ overflow: 'hidden', background: 'var(--red-deep)' }}>
                <img src={t.director.photo} alt={t.director.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
              </div>
              <div style={{ padding: '40px 44px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Director general · 2026', 'Tournament director · 2026')}</span>
                <h4 className="display" style={{ color: '#fff', fontSize: 'clamp(32px, 3.6vw, 48px)', marginTop: 12, lineHeight: 1.05 }}>{t.director.name}</h4>
                <p style={{ fontSize: 16, color: '#D8D6CF', lineHeight: 1.65, marginTop: 20, maxWidth: '60ch' }}>{t.director.bio}</p>
                <p style={{ fontSize: 14, color: '#B8B8C0', lineHeight: 1.6, marginTop: 16, maxWidth: '60ch', fontStyle: 'italic' }}>{t.director.highlights}</p>
              </div>
            </div>
            <div className="reveal d2" style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 16, marginTop: 48 }}>
              <h4 className="display" style={{ fontSize: 22 }}>{tr('Directores anteriores', 'Past directors')}</h4>
              <div className="kicker" style={{ marginLeft: 'auto' }}>I — XI</div>
            </div>
            <div style={{ background: 'var(--bg)', border: '1px solid var(--line)' }}>
              {t.directorsHistory.slice(0, -1).reverse().map((d, i) => (
                <div key={d.ed} style={{ display: 'grid', gridTemplateColumns: '70px 80px 1.4fr 1.6fr', alignItems: 'center', padding: '18px 28px', borderTop: i > 0 ? '1px solid var(--line)' : 'none', transition: 'background 200ms' }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
                >
                  <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--red)' }}>{d.ed}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)' }}>{d.year}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 19, color: 'var(--ink)' }}>{d.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{d.org}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Campeones */}
          <div>
            <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--line)' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--red)' }}>03</span>
              <h3 className="display" style={{ fontSize: 28 }}>{tr('Salón de campeones', 'Hall of champions')}</h3>
              <div className="kicker" style={{ marginLeft: 'auto' }}>{tr('I — XI Edición', 'Editions I — XI')}</div>
            </div>
            <div style={{ background: 'var(--bg)', border: '1px solid var(--line)' }}>
              {t.champions.map((c, i) => (
                <div key={c.ed} className={`reveal d${(i % 3) + 1}`} style={{ display: 'grid', gridTemplateColumns: '80px 80px 1.4fr 1.2fr 40px', alignItems: 'center', padding: '20px 28px', borderTop: i > 0 ? '1px solid var(--line)' : 'none', transition: 'background 200ms' }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
                >
                  <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--red)' }}>{c.ed}</div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)' }}>{c.year}</div>
                  <div>
                    <div className="kicker" style={{ marginBottom: 4 }}>{tr('Campeón · Español', 'Champion · Spanish')}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--ink)' }}>{c.champ}</div>
                  </div>
                  <div>
                    <div className="kicker" style={{ marginBottom: 4 }}>{tr('Campeón · Inglés', 'Champion · English')}</div>
                    <div style={{ fontSize: 14, color: c.english ? 'var(--ink-soft)' : 'var(--mute)', fontStyle: c.english ? 'normal' : 'italic' }}>{c.english || '—'}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}><Icon name="trophy" size={18}/></div>
                </div>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--mute)', marginTop: 16, textTransform: 'uppercase' }}>
              {tr('Categoría inglés se incorpora desde la VII edición (2021).', 'The English category was introduced in the 7th edition (2021).')}
            </p>
          </div>
        </div>
      </section>

      {/* Noticias TNDE */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24 }}>
            <div>
              <span className="eyebrow">{tr('Noticias del TNDE', 'TNDE news')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>
                {tr('Lo que se viene contando sobre el ', 'What’s being said about the ')}<em className="it">{tr('torneo', 'tournament')}</em>
              </h2>
            </div>
          </div>
          <div className="reveal" style={{ background: 'var(--bg)', border: '1px dashed var(--line-strong)', padding: '64px 32px', textAlign: 'center' }}>
            <span className="eyebrow muted">{tr('Cobertura editorial', 'Editorial coverage')}</span>
            <h3 className="display" style={{ fontSize: 28, marginTop: 16 }}>{tr('Sin publicaciones aún', 'No stories yet')}</h3>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--mute)', marginTop: 16, maxWidth: '52ch', margin: '16px auto 0' }}>
              {tr('Las noticias de la edición XII se publicarán a lo largo de la temporada,', 'News from the 12th edition will be published throughout the season,')}<br/>{tr('desde las inscripciones hasta la gran final.', 'from registration to the grand final.')}
            </p>
          </div>
        </div>
      </section>

      {/* Contacto TNDE: redes + correo */}
      <section style={{ background: 'var(--red)', color: '#fff', padding: '64px 0' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32, alignItems: 'center' }}>
            <div className="reveal">
              <img src={t.emblemWhite} alt={tr('Emblema TNDE', 'TNDE emblem')} style={{ height: 110, width: 'auto', maxWidth: 'none', display: 'block', marginBottom: 16, opacity: 0.96 }}/>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>{tr('Conecta con el TNDE', 'Connect with the TNDE')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(28px, 3vw, 42px)', marginTop: 12, lineHeight: 1.05 }}>
                {tr('Sigue cada ronda, cada moción, cada ', 'Follow every round, every motion, every ')}<em className="it">{tr('final', 'final')}</em>
              </h2>
            </div>
            <a href={t.social.instagram} target="_blank" rel="noopener" className="reveal d1" style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 24, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)', textDecoration: 'none', color: '#fff', transition: 'all 240ms' }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.16)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <Icon name="instagram" size={28}/>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.1 }}>Instagram</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', marginTop: 4 }}>{t.social.instagramHandle}</div>
              </div>
            </a>
            <a href={t.social.facebook} target="_blank" rel="noopener" className="reveal d2" style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 24, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)', textDecoration: 'none', color: '#fff', transition: 'all 240ms' }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.16)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <Icon name="facebook" size={28}/>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.1 }}>Facebook</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', marginTop: 4 }}>{t.social.facebookHandle}</div>
              </div>
            </a>
            <a href={`mailto:${t.social.email}`} className="reveal d3" style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 24, background: '#fff', color: 'var(--red)', textDecoration: 'none', transition: 'all 240ms' }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.background = '#FAFAF9'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.background = '#fff'; }}
            >
              <Icon name="mail" size={28}/>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.1 }}>{tr('Escríbenos', 'Write to us')}</div>
                <div style={{ fontSize: 13, marginTop: 4 }}>{t.social.email}</div>
              </div>
            </a>
          </div>
        </div>
      </section>

      {/* Inscription CTA */}
      <section style={{ background: 'var(--ink)', color: '#fff', padding: '72px 0' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="reveal">
            <div>
              <img src={t.emblemWhite} alt={tr('Emblema TNDE', 'TNDE emblem')} style={{ height: 110, width: 'auto', maxWidth: 'none', display: 'block', marginBottom: 16, opacity: 0.96 }}/>
              <span className="eyebrow" style={{ color: 'var(--red)' }}>{tr('Inscripciones', 'Registration')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(48px, 6vw, 88px)', marginTop: 20, lineHeight: 0.95 }}>
                {tr('Apertura ', 'Opening ')}<span style={{ color: 'var(--red)', fontStyle: 'italic' }}>TBA</span>.
              </h2>
              <p style={{ color: '#B8B8C0', fontSize: 18, marginTop: 24, maxWidth: 480, lineHeight: 1.55 }}>
                {tr('Las fechas exactas, el cierre de inscripciones y las condiciones de la ', 'The exact dates, the registration deadline and the terms of the ')}<strong style={{ color: '#fff' }}>{tr('XII edición', '12th edition')}</strong>{tr(' se publicarán cuando la dirección 2026 los confirme. Mientras tanto, escríbenos para que te avisemos en cuanto abramos.', ' will be published once the 2026 organizing team confirms them. In the meantime, write to us and we’ll let you know as soon as registration opens.')}
              </p>
            </div>
            <TndeAvisoForm email={t.social.email} />
          </div>
        </div>
      </section>
      </div>
    </Page>);

};

Object.assign(window, { FormacionPage, GestoresPage, SNDEPage, AdmisionPage, TNDEPage });