/* ═══════════════ IV Torneo Descentralizado Nacional · Cusco (?page=torneo-cusco) ═══════════════
   Fuentes: flyer oficial (corregido: son 6 rondas, no 8), calendario 2026,
   cronograma (Sheet "Cronograma de Actividades"), programa formativo (Doc de
   talleres) y documento de hoteles/transporte/restaurantes de la organización. */

// TODO: reemplazar por el URL del Google Forms de inscripción cuando esté listo.
const TORNEO_CUSCO_FORM_URL = '';

const TC_TALLERES = [
  {
    fecha: ['Lunes 14 de septiembre', 'Monday, September 14'],
    title: ['Introducción al formato WSDC', 'Introduction to the WSDC format'],
    desc: [
      '¿Qué lógica ordena el formato del World Schools Debating Championship (WSDC)? Se aborda la estructura del formato, sus principales características y las funciones de los oradores.',
      'What logic organizes the World Schools Debating Championship (WSDC) format? The session covers the structure of the format, its main features and the roles of each speaker.',
    ],
  },
  {
    fecha: ['Miércoles 16 de septiembre', 'Wednesday, September 16'],
    title: ['Construcción de casos en debate', 'Case building in debate'],
    desc: [
      'Llamamos "caso" al conjunto de argumentos e ideas que un equipo sostiene durante una ronda. En esta sesión aprenderemos cómo construir un caso, qué dinámicas guían su construcción y qué modelos de caso son recurrentes en el debate.',
      'A "case" is the set of arguments and ideas a team defends during a round. In this session we will learn how to build a case, what dynamics guide its construction and which case models come up again and again in debate.',
    ],
  },
  {
    fecha: ['Viernes 18 de septiembre', 'Friday, September 18'],
    title: ['¿Cómo juzgar un debate?', 'How to judge a debate?'],
    desc: [
      'El taller enseña a identificar el núcleo del desacuerdo que decide un debate: el punto de choque. Cómo reconocerlo en los discursos, articularlo como eje de comparación y seguir la dinámica con la que el juez determina qué equipo gana cada punto de choque.',
      'This workshop teaches how to identify the core disagreement that decides a debate: the clash point. How to spot it in speeches, use it as an axis of comparison and follow how the judge decides which team wins each clash.',
    ],
  },
];

const TC_CRONOGRAMA = [
  {
    label: ['Día 1', 'Day 1'],
    date: ['Sábado 26 de septiembre', 'Saturday, September 26'],
    rows: [
      { h: '8:00 – 8:30', a: ['Check-in', 'Check-in'], d: ['Recepción y registro de las delegaciones en Tabbycat.', 'Delegations arrive and register on Tabbycat.'] },
      { h: '8:30 – 9:00', a: ['Inauguración', 'Opening ceremony'], d: ['Palabras de bienvenida e indicaciones logísticas del evento.', 'Welcome remarks and logistics for the event.'] },
      { h: '9:00 – 10:00', a: ['Taller 1', 'Workshop 1'], d: ['Primera ronda de talleres presenciales para estudiantes y docentes.', 'First block of in-person workshops for students and teachers.'], taller: true },
      { h: '10:00 – 12:00', a: ['Ronda 1', 'Round 1'], d: ['Moción preparada.', 'Prepared motion.'], ronda: true },
      { h: '12:00 – 12:30', a: ['Briefing', 'Briefing'], d: ['Debate de muestra en el auditorio.', 'Demonstration debate in the auditorium.'] },
      { h: '12:30 – 14:00', a: ['Almuerzo', 'Lunch'], d: ['Restaurantes cercanos o delivery (no hay almuerzo en el colegio).', 'Nearby restaurants or delivery (no lunch served at the school).'], meal: true },
      { h: '14:00 – 15:00', a: ['Taller 2', 'Workshop 2'], d: ['Segunda ronda de talleres presenciales.', 'Second block of in-person workshops.'], taller: true },
      { h: '15:00 – 17:30', a: ['Ronda 2', 'Round 2'], d: ['Moción impromptu.', 'Impromptu motion.'], ronda: true },
      { h: '17:30 – 18:00', a: ['Briefing', 'Briefing'], d: ['Debate de muestra en el auditorio.', 'Demonstration debate in the auditorium.'] },
      { h: '18:00 – 20:30', a: ['Ronda 3', 'Round 3'], d: ['Moción impromptu.', 'Impromptu motion.'], ronda: true },
    ],
  },
  {
    label: ['Día 2', 'Day 2'],
    date: ['Domingo 27 de septiembre', 'Sunday, September 27'],
    rows: [
      { h: '8:00 – 8:30', a: ['Check-in', 'Check-in'], d: ['Recepción de los participantes.', 'Participants arrive.'] },
      { h: '8:30 – 9:00', a: ['Briefing', 'Briefing'], d: ['Debate de muestra en el auditorio.', 'Demonstration debate in the auditorium.'] },
      { h: '9:00 – 11:30', a: ['Ronda 4', 'Round 4'], d: ['Moción impromptu.', 'Impromptu motion.'], ronda: true },
      { h: '11:30 – 12:00', a: ['Briefing', 'Briefing'], d: ['Debate de muestra en el auditorio.', 'Demonstration debate in the auditorium.'] },
      { h: '12:00 – 13:30', a: ['Almuerzo', 'Lunch'], d: ['Restaurantes cercanos o delivery.', 'Nearby restaurants or delivery.'], meal: true },
      { h: '13:30 – 14:00', a: ['Anuncio de clasificados', 'Break announcement'], d: ['Se anuncian los equipos clasificados a eliminatorias.', 'Teams advancing to the knockout rounds are announced.'] },
      { h: '14:00 – 16:30', a: ['Semifinal', 'Semifinal'], d: ['Moción impromptu.', 'Impromptu motion.'], ronda: true },
      { h: '16:30 – 17:00', a: ['Anuncio de finalistas', 'Finalists announcement'], d: ['Se anuncia el pase a la final.', 'The finalists are announced.'] },
      { h: '17:00 – 19:30', a: ['Final', 'Grand final'], d: ['Moción impromptu.', 'Impromptu motion.'], ronda: true },
      { h: '19:30 – 20:30', a: ['Premiación y clausura', 'Awards and closing'], d: ['Entrega de reconocimientos y clausura del evento.', 'Awards ceremony and closing of the event.'] },
    ],
  },
];

const TC_HOTELES = [
  {
    name: 'Hotel Willkamayu',
    dir: 'Av. Confederación N.º 420, Sicuani',
    ref: ['A una cuadra del Colegio Mateo Pumacahua', 'One block from Mateo Pumacahua School'],
    tarifas: [['Simple S/ 130 · Doble S/ 200 · incluye desayuno', 'Single S/ 130 · Double S/ 200 · breakfast included']],
    tel: '946 145 264',
  },
  {
    name: 'Hotel Korikancha',
    dir: 'Calle Martín Chávez s/n (cdra. 4 Av. Centenario), Sicuani',
    ref: ['A 5 min del terminal y 10 min del colegio, junto al estadio Túpac Amaru', '5 min from the bus terminal and 10 min from the school, by the Túpac Amaru stadium'],
    tarifas: [['Tarifa corporativa: individual S/ 100 · doble S/ 160 · triple S/ 200', 'Corporate rate: single S/ 100 · double S/ 160 · triple S/ 200']],
  },
  {
    name: 'Hotel Henos Ttito',
    dir: 'Jr. Tacna N.º 219, Sicuani',
    ref: ['Céntrico, a una cuadra de la Plaza de Armas de Sicuani', 'Central location, one block from Sicuani’s main square'],
    tarifas: [['Individual S/ 40 · Doble S/ 75 · Familiar S/ 75', 'Single S/ 40 · Double S/ 75 · Family S/ 75']],
  },
];

const TorneoCuscoPage = ({ setPage }) => {
  const { t: tr, lang } = useLang();
  const L = (es, en) => (lang === 'en' ? en : es);
  const [tcDay, setTcDay] = React.useState(0);
  const day = TC_CRONOGRAMA[tcDay];
  const inscripcionAbierta = Boolean(TORNEO_CUSCO_FORM_URL);
  return (
    <Page screen="Torneo Cusco">
      <div style={{ '--red': '#8C2F1B', '--red-deep': '#4A160D', '--red-tint': '#F7E8E0' }}>

        {/* Hero — split */}
        <section style={{ background: 'var(--red-deep)', color: '#fff', position: 'relative', overflow: 'hidden', paddingTop: 48, paddingBottom: 0 }}>
          <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center', width: '100%', paddingBottom: 56 }}>
            <div>
              <div className="reveal" 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 Descentralizado Nacional de Debate Escolar', 'National Decentralized School Debate Tournament')}
              </div>
              <h1 className="display reveal d1" style={{ color: '#fff', fontSize: 'clamp(56px, 8vw, 130px)', lineHeight: 0.94 }}>
                {tr('IV Torneo', 'IV Tournament')}<br />
                <em style={{ fontStyle: 'italic', opacity: 0.92 }}>Cusco 2026</em>
              </h1>
              <p className="reveal d2" style={{ color: 'rgba(255,255,255,0.92)', fontSize: 21, marginTop: 28, maxWidth: 520, lineHeight: 1.45 }}>
                {tr('Sábado 26 y domingo 27 de septiembre', 'Saturday, September 26 and Sunday, September 27')}<br />
                {tr('Colegio Emblemático Mateo Pumacahua · Sicuani, Cusco', 'Mateo Pumacahua Emblematic School · Sicuani, Cusco')}
              </p>
              <div className="reveal d3" style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap', alignItems: 'center' }}>
                {inscripcionAbierta ? (
                  <a className="btn" href={TORNEO_CUSCO_FORM_URL} target="_blank" rel="noopener"
                    style={{ background: '#fff', color: 'var(--red-deep)', fontWeight: 700, boxShadow: '0 8px 24px rgba(0,0,0,0.25)' }}>
                    {tr('Inscríbete ahora', 'Register now')} <Icon name="arrow-up-right" size={14} />
                  </a>
                ) : (
                  <span className="btn" style={{ background: 'rgba(255,255,255,0.14)', color: '#fff', fontWeight: 700, border: '1px solid rgba(255,255,255,0.35)', cursor: 'default' }}>
                    {tr('Inscripciones: muy pronto', 'Registration opens soon')}
                  </span>
                )}
                <a href="#cronograma" onClick={(e) => { e.preventDefault(); const el = document.getElementById('cronograma'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }}
                  className="btn btn-light">
                  {tr('Ver cronograma', 'See the schedule')} <Icon name="arrow" size={14} />
                </a>
                <a href="#viaje" onClick={(e) => { e.preventDefault(); const el = document.getElementById('viaje'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }}
                  className="btn btn-light">
                  {tr('Cómo llegar y dónde dormir', 'Travel and lodging')} <Icon name="arrow" size={14} />
                </a>
              </div>
            </div>
            <div className="reveal d2" style={{ aspectRatio: '1/1', overflow: 'hidden', background: 'var(--red-deep)', alignSelf: 'stretch', minHeight: 320 }}>
              <img src="assets/torneo-cusco/cusco-retrato.jpg" alt={tr('Ilustración andina del torneo', 'Andean illustration of the tournament')} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
            </div>
          </div>
          {/* Franja pictórica del flyer oficial */}
          <div style={{ height: 180, overflow: 'hidden' }}>
            <img src="assets/torneo-cusco/cusco-hero.jpg" alt="" aria-hidden="true" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', display: 'block' }}/>
          </div>
        </section>

        {/* Quick facts strip */}
        <section style={{ background: 'var(--ink)', color: '#fff', padding: '40px 0' }}>
          <div className="shell">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 32 }}>
              {[
                { num: 6, label: tr('Rondas: 4 preliminares, semifinal y final', 'Rounds: 4 prelims, semifinal and final') },
                { num: 2, label: tr('Días de torneo · 100 % presencial', 'Tournament days · fully in person') },
                { num: 3, label: tr('Talleres formativos previos', 'Pre-tournament workshops') },
                { num: tr('Gratuita', 'Free'), label: tr('Participación sin costo de inscripción', 'No registration fee') },
              ].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 : 34, lineHeight: 1, color: '#fff', 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>

        {/* Detalles del evento */}
        <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 torneo', 'The tournament')}</span>
                <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16 }}>
                  {tr('El debate llega a ', 'Debate comes to ')}<em className="it">Cusco</em>
                </h2>
                <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 24, maxWidth: '42ch' }}>
                  {tr('Desde la Liga creemos que un buen debatiente puede venir de cualquier lado. El Torneo Descentralizado busca cerrar las brechas entre Lima y provincias: en su cuarta edición, organizado junto con el Colegio Emblemático Mateo Pumacahua, reúne a colegios de todo el país en Sicuani, Cusco, en formato World Schools (WSDC).',
                      'At the League we believe a great debater can come from anywhere. The Decentralized Tournament works to close the gap between Lima and the provinces: for its fourth edition, co-organized with the Mateo Pumacahua Emblematic School, it brings schools from across the country to Sicuani, Cusco, in the World Schools (WSDC) format.')}
                </p>
              </div>
              <div className="reveal d1" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16, alignContent: 'start' }}>
                {[
                  { k: tr('Fechas', 'Dates'), v: tr('Sábado 26 y domingo 27 de septiembre de 2026', 'Saturday, Sep 26 and Sunday, Sep 27, 2026') },
                  { k: tr('Sede', 'Venue'), v: tr('Colegio Emblemático Mateo Pumacahua, Sicuani (Cusco)', 'Mateo Pumacahua Emblematic School, Sicuani (Cusco)') },
                  { k: tr('Organizan', 'Organized by'), v: tr('Colegio Emblemático Mateo Pumacahua y LPDE', 'Mateo Pumacahua Emblematic School and the LPDE') },
                  { k: tr('Formato', 'Format'), v: tr('WSDC · 6 rondas: 4 preliminares (1 preparada, 3 impromptu), semifinal y final', 'WSDC · 6 rounds: 4 prelims (1 prepared, 3 impromptu), semifinal and final') },
                  { k: tr('Dirigido a', 'Open to'), v: tr('Escolares de secundaria', 'Secondary school students') },
                  { k: tr('Costo', 'Cost'), v: tr('La participación es gratuita. Transporte y hospedaje corren por cuenta de cada delegación.', 'Participation is free. Travel and lodging are covered by each delegation.') },
                ].map((c, i) => (
                  <div key={i} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '22px 24px' }}>
                    <div className="kicker" style={{ color: 'var(--red)', marginBottom: 8 }}>{c.k}</div>
                    <div style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.5 }}>{c.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Quiénes participan */}
            <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
              <div className="reveal" style={{ background: 'var(--ink)', color: '#fff', padding: '32px 32px', borderRadius: 4 }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Colegios miembros LPDE', 'LPDE member schools')}</span>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 24, marginTop: 10, color: '#fff' }}>{tr('De todo el país', 'From across the country')}</h3>
                <p style={{ fontSize: 14, color: '#C9C7CE', lineHeight: 1.6, marginTop: 10 }}>
                  {tr('Los colegios miembros de la LPDE pueden participar a nivel nacional, vengan de donde vengan.', 'LPDE member schools may participate nationwide, wherever they come from.')}
                </p>
                <button className="btn btn-link" onClick={() => setPage('colegios')} style={{ marginTop: 14, color: '#fff' }}>
                  {tr('Revisa si tu colegio es miembro', 'Check if your school is a member')} <Icon name="arrow" size={14} />
                </button>
              </div>
              <div className="reveal d1" style={{ background: 'var(--red-tint)', padding: '32px 32px', borderRadius: 4 }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Colegios no miembros', 'Non-member schools')}</span>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 24, marginTop: 10, color: 'var(--ink)' }}>{tr('Únicamente de provincia', 'Provinces only')}</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 10 }}>
                  {tr('Los colegios que aún no son miembros de la Liga pueden participar únicamente si son de provincia (fuera de Lima Metropolitana).', 'Schools that are not yet League members may participate only if they are from the provinces (outside Metropolitan Lima).')}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Programa formativo */}
        <section className="section" style={{ background: 'var(--bg)' }}>
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 40 }}>
              <span className="eyebrow">{tr('Programa formativo', 'Training program')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
                {tr('Tres talleres antes de ', 'Three workshops before ')}<em className="it">{tr('competir', 'competing')}</em>
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 16, maxWidth: '58ch' }}>
                {tr('La semana previa al torneo dictaremos tres talleres para familiarizar a los participantes con el formato WSDC y sus dinámicas propias: las mociones impromptu y la adjudicación del debate. Cada taller dura dos horas pedagógicas; el horario se anunciará a los inscritos. Además, durante el sábado del torneo habrá dos bloques de talleres presenciales.',
                    'The week before the tournament we will run three workshops to familiarize participants with the WSDC format and its dynamics: impromptu motions and debate adjudication. Each workshop lasts two teaching hours; times will be announced to registered participants. In addition, two in-person workshop blocks will run on tournament Saturday.')}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
              {TC_TALLERES.map((w, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 28px', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--red)', textTransform: 'uppercase' }}>
                    {L(w.fecha[0], w.fecha[1])}
                  </div>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 23, lineHeight: 1.15, marginTop: 12, color: 'var(--ink)' }}>{L(w.title[0], w.title[1])}</h3>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 12 }}>{L(w.desc[0], w.desc[1])}</p>
                  <div className="kicker" style={{ color: 'var(--mute)', marginTop: 'auto', paddingTop: 16 }}>{tr('Horario por confirmar', 'Time to be confirmed')}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Cronograma */}
        <section id="cronograma" className="section bg-cool">
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 40 }}>
              <span className="eyebrow">{tr('Cronograma', 'Schedule')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '18ch' }}>
                {tr('Dos días de ', 'Two days of ')}<em className="it">{tr('debate', 'debate')}</em>{tr(', ronda por ronda', ', round by round')}
              </h2>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 16, maxWidth: '54ch' }}>
                {tr('Cuatro rondas preliminares, semifinal y final. Horarios sujetos a ajustes de la organización.', 'Four preliminary rounds, semifinal and final. Times are subject to changes by the organizing team.')}
              </p>
            </div>

            <div className="reveal d1" style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
              {TC_CRONOGRAMA.map((d, i) => (
                <button key={i} onClick={() => setTcDay(i)} aria-pressed={tcDay === i} className="kicker" style={{
                  padding: '10px 18px', borderRadius: 4, cursor: 'pointer', transition: 'all 200ms',
                  border: '1px solid ' + (tcDay === i ? 'var(--red)' : 'var(--line-strong)'),
                  background: tcDay === i ? 'var(--red)' : 'transparent',
                  color: tcDay === i ? '#fff' : 'var(--ink-2)',
                }}>
                  {L(d.label[0], d.label[1])} · {L(d.date[0], d.date[1])}
                </button>
              ))}
            </div>

            <div className="reveal d2" style={{ border: '1px solid var(--line)', background: 'var(--bg)' }}>
              <div style={{ background: 'var(--ink)', color: '#fff', padding: '24px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
                <div>
                  <span className="kicker" style={{ color: 'var(--red)' }}>{L(day.label[0], day.label[1])}</span>
                  <h3 className="display" style={{ color: '#fff', fontSize: 26, marginTop: 6 }}>{L(day.date[0], day.date[1])}</h3>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="kicker" style={{ color: '#9C9AA0', marginBottom: 4 }}>{tr('Sede', 'Venue')}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: '#fff', fontStyle: 'italic' }}>Colegio Emblemático Mateo Pumacahua</div>
                </div>
              </div>
              <div>
                {day.rows.map((r, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '130px 1fr', alignItems: 'baseline', gap: 20,
                    padding: '14px 28px', borderTop: i > 0 ? '1px solid var(--line)' : 'none',
                    background: r.ronda ? 'var(--red-tint)' : (r.meal ? 'var(--bg-alt)' : 'transparent'),
                  }}>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-2)', letterSpacing: '0.02em' }}>{r.h}</div>
                    <div>
                      <span style={{ fontSize: 15, color: 'var(--ink)', fontWeight: (r.ronda || r.meal) ? 600 : 500 }}>{L(r.a[0], r.a[1])}</span>
                      <span style={{ fontSize: 14, color: 'var(--ink-2)' }}> — {L(r.d[0], r.d[1])}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Tiempos por ronda */}
            <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
              {[
                {
                  t: tr('Rondas con moción impromptu', 'Impromptu rounds'),
                  rows: [
                    [tr('Anuncio de la moción', 'Motion announcement'), '15 min'],
                    [tr('Tiempo de preparación', 'Preparation time'), '45 min'],
                    [tr('Debate', 'Debate'), '60 min'],
                    [tr('Deliberación y justificación', 'Deliberation and oral adjudication'), '30 min'],
                  ],
                },
                {
                  t: tr('Ronda con moción preparada', 'Prepared round'),
                  rows: [
                    [tr('Anuncio de bancadas', 'Side announcement'), '15 min'],
                    [tr('Tiempo de preparación', 'Preparation time'), '15 min'],
                    [tr('Debate', 'Debate'), '60 min'],
                    [tr('Deliberación y justificación', 'Deliberation and oral adjudication'), '30 min'],
                  ],
                },
              ].map((b, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '24px 28px' }}>
                  <div className="kicker" style={{ color: 'var(--red)', marginBottom: 14 }}>{b.t}</div>
                  {b.rows.map((r, j) => (
                    <div key={j} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, padding: '8px 0', borderTop: j > 0 ? '1px solid var(--line)' : 'none', fontSize: 14 }}>
                      <span style={{ color: 'var(--ink-2)' }}>{r[0]}</span>
                      <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)' }}>{r[1]}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Viaje: transporte, hospedaje, restaurantes */}
        <section id="viaje" className="section" style={{ background: 'var(--bg)' }}>
          <div className="shell">
            <div className="reveal" style={{ marginBottom: 48 }}>
              <span className="eyebrow">{tr('Guía de viaje', 'Travel guide')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
                {tr('Cómo llegar, dónde dormir y dónde ', 'Getting there, where to stay and where to ')}<em className="it">{tr('comer', 'eat')}</em>
              </h2>
            </div>

            {/* Transporte */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 48 }}>
              <div className="reveal" style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--red)' }}>
                  <Icon name="map" size={18}/><span className="kicker" style={{ color: 'var(--red)' }}>{tr('Desde Lima y el resto del país', 'From Lima and the rest of the country')}</span>
                </div>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 14 }}>
                  {tr('Vuela al aeropuerto Alejandro Velasco Astete (Cusco). Del aeropuerto, toma un taxi al terminal de la empresa Los Rápidos, recomendada por la organización para el viaje directo a Sicuani. El pasaje habitual Cusco–Sicuani es de S/ 15 por persona, por tramo.',
                      'Fly into Alejandro Velasco Astete airport (Cusco). From the airport, take a taxi to the Los Rápidos bus terminal — the company recommended by the organizers for the direct trip to Sicuani. The usual Cusco–Sicuani fare is S/ 15 per person each way.')}
                </p>
              </div>
              <div className="reveal d1" style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--red)' }}>
                  <Icon name="map" size={18}/><span className="kicker" style={{ color: 'var(--red)' }}>{tr('Desde regiones cercanas a Cusco', 'From regions near Cusco')}</span>
                </div>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 14 }}>
                  {tr('Las delegaciones de las regiones aledañas a Cusco pueden llegar por vía terrestre directamente hasta la ciudad de Sicuani.',
                      'Delegations from regions near Cusco can travel overland directly to the city of Sicuani.')}
                </p>
              </div>
            </div>

            {/* Hoteles */}
            <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 20, paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
              <h3 className="display" style={{ fontSize: 26 }}>{tr('Hospedajes recomendados en Sicuani', 'Recommended lodging in Sicuani')}</h3>
              <div className="kicker" style={{ marginLeft: 'auto' }}>{tr('Reserva directa con cada hotel', 'Book directly with each hotel')}</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20, marginBottom: 48 }}>
              {TC_HOTELES.map((h, i) => (
                <div key={i} className={`reveal d${i + 1}`} style={{ border: '1px solid var(--line)', background: 'var(--bg-alt)', padding: '26px 28px', display: 'flex', flexDirection: 'column', borderRadius: 4 }}>
                  <h4 style={{ fontFamily: 'var(--serif)', fontSize: 21, color: 'var(--ink)' }}>{h.name}</h4>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 8 }}>{h.dir}</div>
                  <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 4, fontStyle: 'italic' }}>{L(h.ref[0], h.ref[1])}</div>
                  <div style={{ fontSize: 14, color: 'var(--ink)', marginTop: 14, lineHeight: 1.55 }}>{L(h.tarifas[0][0], h.tarifas[0][1])}</div>
                  {h.tel && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 'auto', paddingTop: 14, fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-2)' }}>
                      <Icon name="phone" size={14}/> {h.tel}
                    </div>
                  )}
                </div>
              ))}
            </div>

            {/* Restaurantes + turismo */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div className="reveal" style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Almuerzos y restaurantes', 'Lunch and restaurants')}</span>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 12 }}>
                  {tr('Hay gran variedad de restaurantes a 5–10 minutos a pie del colegio. El menú cuesta entre S/ 10 y S/ 15 por persona y por día; también se puede pedir delivery de platos a la carta (S/ 20 a S/ 30). No habrá almuerzo en el colegio.',
                      'There is a wide variety of restaurants a 5–10 minute walk from the school. A set lunch costs S/ 10–15 per person per day; à la carte delivery is also available (S/ 20–30). Lunch will not be served at the school.')}
                </p>
              </div>
              <div className="reveal d1" style={{ border: '1px solid var(--line)', background: 'var(--bg)', padding: '28px 32px' }}>
                <span className="kicker" style={{ color: 'var(--red)' }}>{tr('Turismo en Cusco', 'Tourism in Cusco')}</span>
                <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, marginTop: 12 }}>
                  {tr('El día de turismo recomendado es el lunes 28 de septiembre. La organización no planificará una actividad conjunta, pero ese día algunos miembros del equipo seguirán en Sicuani, atentos a cualquier apoyo. Las delegaciones también pueden llegar días antes para conocer la ciudad de Cusco.',
                      'The recommended tourism day is Monday, September 28. The organizers will not plan a joint activity, but some team members will still be in Sicuani that day, available to help. Delegations may also arrive a few days early to visit the city of Cusco.')}
                </p>
              </div>
            </div>

            {/* Precisión de costos */}
            <div className="reveal d2" style={{ marginTop: 24, border: '1px dashed var(--line-strong)', background: 'var(--red-tint)', padding: '24px 32px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <span style={{ color: 'var(--red)', flexShrink: 0, marginTop: 2 }}><Icon name="info" size={18}/></span>
              <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.6 }}>
                {tr('La participación en el torneo no tiene costo. El transporte hasta el torneo y el hospedaje corren íntegramente por cuenta de cada delegación participante.',
                    'Participating in the tournament is free of charge. Travel to the tournament and lodging are entirely each delegation’s responsibility.')}
              </p>
            </div>
          </div>
        </section>

        {/* Consultas */}
        <section className="section" style={{ background: 'var(--ink)', color: '#fff' }}>
          <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center' }}>
            <div className="reveal">
              <span className="eyebrow" style={{ color: 'var(--red)' }}>{tr('Consultas', 'Questions')}</span>
              <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>
                {tr('¿Tienes alguna ', 'Have a ')}<em className="it">{tr('pregunta', 'question')}</em>?
              </h2>
              <p style={{ fontSize: 16, color: '#C9C7CE', lineHeight: 1.6, marginTop: 16, maxWidth: '48ch' }}>
                {tr('Escríbenos y te responderemos a la brevedad. También puedes dejar tu consulta en nuestro formulario y hacerle seguimiento en línea.',
                    'Write to us and we will get back to you shortly. You can also leave your question in our form and track it online.')}
              </p>
            </div>
            <div className="reveal d1" style={{ display: 'grid', gap: 12 }}>
              <a className="btn" href="mailto:contacto@lpdebate.org" style={{ background: '#fff', color: 'var(--ink)', fontWeight: 700, justifyContent: 'center' }}>
                <Icon name="mail" size={15}/> contacto@lpdebate.org
              </a>
              <button className="btn btn-light" onClick={() => setPage('consultas')} style={{ justifyContent: 'center', cursor: 'pointer' }}>
                {tr('Deja tu consulta en línea', 'Leave your question online')} <Icon name="arrow" size={14} />
              </button>
            </div>
          </div>
        </section>

      </div>
    </Page>
  );
};

Object.assign(window, { TorneoCuscoPage });