// V2 — Brutalista / Dorsal de carrera
// Crema + rojo dorsal, tipo condensada masiva, bordes negros gruesos,
// elementos rotados, numeración tipo BIB.

const v2c = {
  paper: '#f1ead8',
  ink: '#0e0e0c',
  red:  'var(--v2-accent, #e8201f)',
  red2: '#c81817',
  shadow: '#0e0e0c',
  warn: '#fff4a0',
  cond: '"Anton", "Bebas Neue", Impact, safns-serif',
  body: '"Space Grotesk", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

function V2Brutalist({ tweaks }) {
  const t = tweaks || V2_DEFAULTS;
  return (
    <V2Ctx.Provider value={t}>
      <div style={{
        width: '100%', minHeight: '100%', background: v2c.paper, color: v2c.ink,
        fontFamily: v2c.body, position: 'relative',
        '--v2-accent': t.accent,
      }}>
        <V2Hero />
        <V2Ticker />
        <V2Distancias />
        <V2Categorias />
        <V2Mapa />
        <V2Precios />
        <V2Video />
        <V2Auspiciantes />
        <V2Footer />
      </div>
    </V2Ctx.Provider>
  );
}

/* ───────── Tweaks context ───────── */
const V2_DEFAULTS = {
  accent: '#e8201f',
  highlight: 'TLÓN',
  prefix: 'DUA',
  dateLine1: 'DOM · 02',
  dateLine2: 'AGO 2026',
  subtitle: 'YAGUARCOCHA',
  daysLeft: 40,
};
const V2Ctx = React.createContext(V2_DEFAULTS);
const useV2 = () => React.useContext(V2Ctx);

/* ───────── Hero ───────── */
function V2Hero() {
  const t = useV2();
  return (
    <section style={{
      position: 'relative', padding: '56px 14px 16px', borderBottom: `3px solid ${v2c.ink}`,
    }}>
      {/* nav */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.2em', textTransform: 'uppercase',
      }}>
        <span style={{
          background: v2c.ink, color: v2c.paper, padding: '4px 8px',
        }}>DYR · 2026</span>
        <span style={{ display: 'flex', gap: 14 }}>
          <span>ES</span><span style={{ color: '#9a948a' }}>·</span><span style={{ color: '#9a948a' }}>EN</span>
        </span>
      </div>

      {/* Massive numeric BIB */}
      <div style={{ position: 'relative', marginTop: 24 }}>
        {/* date stamp top-right rotated */}
        <div style={{
          position: 'absolute', top: -8, right: 0, transform: 'rotate(6deg)',
          padding: '6px 9px', background: v2c.ink, color: v2c.warn,
          fontFamily: v2c.cond, fontSize: 22, letterSpacing: '.04em', lineHeight: 1,
          boxShadow: `5px 5px 0 ${v2c.red}`, zIndex: 3,
        }}>
          {t.dateLine1}<br />
          <span style={{ fontSize: 16 }}>{t.dateLine2}</span>
        </div>

        <div style={{
          fontFamily: v2c.cond,
          fontSize: 156,
          lineHeight: 0.82,
          letterSpacing: '-.04em',
          color: v2c.ink,
          textTransform: 'uppercase',
        }}>
          {t.prefix}<br />
          <span style={{ color: v2c.red }}>{t.highlight}</span>
        </div>
      </div>

      {/* Sub-event line */}
      <div style={{
        display: 'flex', gap: 8, alignItems: 'center', marginTop: 6,
        borderTop: `2px solid ${v2c.ink}`, paddingTop: 10,
      }}>
        <span style={{
          background: v2c.red, color: v2c.paper, padding: '4px 8px',
          fontFamily: v2c.cond, fontSize: 20, letterSpacing: '.06em', lineHeight: 1,
        }}>DE&nbsp;RUTA</span>
        <span style={{
          fontFamily: v2c.cond, fontSize: 28, letterSpacing: '-.01em', lineHeight: 1,
        }}>{t.subtitle}</span>
      </div>

      {/* Image slot — race style, hero.svg as default bg */}
      <div style={{
        position: 'relative', marginTop: 18,
        border: `3px solid ${v2c.ink}`, boxShadow: `8px 8px 0 ${v2c.red}`,
        aspectRatio: '4 / 3', overflow: 'hidden',
        backgroundImage: 'url(https://i.postimg.cc/hG8c2Mp2/meta-yaharcocha.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}>
        <image-slot
          id="v2-hero"
          placeholder="Arrastra tu foto aquí"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
        ></image-slot>
        {/* bib number overlay */}
        <div style={{
          position: 'absolute', top: 10, left: 10,
          background: v2c.paper, border: `2px solid ${v2c.ink}`, padding: '4px 8px 2px',
          fontFamily: v2c.cond, fontSize: 22, lineHeight: 1, letterSpacing: '.04em',
        }}>
          N° <span style={{ color: v2c.red }}>0026</span>
        </div>
        <div style={{
          position: 'absolute', bottom: 10, right: 10,
          background: v2c.ink, color: v2c.paper, padding: '4px 8px 3px',
          fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.18em',
        }}>IBARRA · ECUADOR · 2.225m</div>
      </div>

      {/* CTA + countdown row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, marginTop: 16 }}>
        <a href="#inscripcion" style={{
          background: v2c.ink, color: v2c.warn, padding: '16px 14px',
          textDecoration: 'none', fontFamily: v2c.cond, fontSize: 30,
          letterSpacing: '.04em', lineHeight: 1, textAlign: 'center',
          textTransform: 'uppercase', border: `3px solid ${v2c.ink}`,
        }}>
          INSCRIBIRSE →
        </a>
        <div style={{
          border: `3px solid ${v2c.ink}`, padding: '8px 12px',
          background: v2c.paper, textAlign: 'center', minWidth: 88,
        }}>
          <div style={{ fontFamily: v2c.mono, fontSize: 8, letterSpacing: '.2em' }}>FALTAN</div>
          <div style={{ fontFamily: v2c.cond, fontSize: 32, color: v2c.red, lineHeight: 1 }}>{useDaysLeft()}</div>
          <div style={{ fontFamily: v2c.mono, fontSize: 8, letterSpacing: '.2em' }}>DÍAS</div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Días reales restantes ───────── */
const V2_RACE_DATE = new Date(2026, 7, 2, 0, 0, 0); // 02 AGO 2026
function useDaysLeft() {
  const calc = () => Math.max(0, Math.ceil((V2_RACE_DATE - new Date()) / 86_400_000));
  const [days, setDays] = React.useState(calc);
  React.useEffect(() => {
    const id = setInterval(() => setDays(calc()), 60 * 60 * 1000);
    return () => clearInterval(id);
  }, []);
  return days;
}

/* ───────── Ticker ───────── */
function V2Ticker() {
  const items = ['CORRE', 'PEDALEA', 'CORRE', 'RUTA', 'IBARRA', '02·08·26', 'YAGUARCOCHA'];
  const seq = [...items, ...items, ...items, ...items];
  return (
    <div style={{
      background: v2c.ink, color: v2c.paper,
      padding: '10px 0', overflow: 'hidden', whiteSpace: 'nowrap',
      borderBottom: `3px solid ${v2c.ink}`,
    }}>
      <div style={{ display: 'inline-block', fontFamily: v2c.cond, fontSize: 22, letterSpacing: '.06em' }}>
        {seq.map((t, i) => (
          <span key={i} style={{ marginRight: 18 }}>
            {t}
            {i % 3 === 1 && <span style={{ color: v2c.red, marginLeft: 18 }}>★</span>}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ───────── Distancias ───────── */
function V2Distancias() {
  const formats = [
    { code: 'SPR', name: 'SPRINT',  bk: 36, rn: 7,   tag: 'CATEGORÍA COMPETITIVA' },
    { code: 'NOV', name: 'NOVATOS', bk: 16, rn: 3.6, tag: 'DEBUT · INICIACIÓN' },
  ];
  return (
    <section style={{ padding: '36px 14px 28px', borderBottom: `3px solid ${v2c.ink}` }}>
      <V2Eyebrow num="01" label="EL FORMATO" />
      <h2 style={{
        margin: '6px 0 22px', fontFamily: v2c.cond, fontWeight: 400,
        fontSize: 84, lineHeight: 0.82, letterSpacing: '-.02em', textTransform: 'uppercase',
      }}>
        DOS<br />
        DISTANCIAS<br />
        <span style={{ color: v2c.red }}>UNA META.</span>
      </h2>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {formats.map((f, i) => (
          <div key={i} style={{
            border: `3px solid ${v2c.ink}`, background: v2c.paper,
            padding: '14px 14px 16px', position: 'relative',
            boxShadow: i === 0 ? `7px 7px 0 ${v2c.red}` : `5px 5px 0 ${v2c.ink}`,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{
                fontFamily: v2c.cond, fontSize: 52, lineHeight: .9, letterSpacing: '-.01em',
              }}>
                {f.name}
              </div>
              <div style={{
                fontFamily: v2c.mono, fontSize: 10, padding: '4px 7px',
                background: v2c.ink, color: v2c.paper, letterSpacing: '.12em',
              }}>{f.code}-26</div>
            </div>

            <div style={{
              display: 'grid', gridTemplateColumns: '1fr auto 1fr',
              alignItems: 'end', marginTop: 18, gap: 10,
            }}>
              <V2Leg n={f.bk} label="BIKE · RUTA" />
              <span style={{ fontFamily: v2c.cond, fontSize: 44, color: v2c.red, paddingBottom: 6 }}>＋</span>
              <V2Leg n={f.rn} label="RUN · TROTE" />
            </div>

            <div style={{
              marginTop: 16, padding: '6px 10px',
              borderTop: `2px dashed ${v2c.ink}`,
              fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.18em',
              textTransform: 'uppercase',
              display: 'flex', justifyContent: 'space-between',
            }}>
              <span>{f.tag}</span>
              <span style={{ color: v2c.red2 }}>{f.bk + f.rn} KM TOTAL</span>
            </div>
          </div>
        ))}

        {/* POSTAS — relay card */}
        <div style={{
          border: `3px solid ${v2c.ink}`, background: v2c.ink, color: v2c.paper,
          padding: '14px 14px 16px', position: 'relative',
          boxShadow: `5px 5px 0 ${v2c.red}`,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{
              fontFamily: v2c.cond, fontSize: 52, lineHeight: .9, letterSpacing: '-.01em',
            }}>
              POSTAS
            </div>
            <div style={{
              fontFamily: v2c.mono, fontSize: 10, padding: '4px 7px',
              background: v2c.warn, color: v2c.ink, letterSpacing: '.12em',
            }}>PST-26</div>
          </div>

          <div style={{
            fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.16em',
            color: v2c.warn, marginTop: 8, textTransform: 'uppercase',
          }}>
            EQUIPOS DE 2 · BIKE + RUN
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 6, marginTop: 14,
          }}>
            {['SOLO H', 'SOLO M', 'MIXTAS'].map((t, i) => (
              <div key={i} style={{
                border: `2px solid ${v2c.paper}`, padding: '10px 6px',
                textAlign: 'center', background: 'transparent',
              }}>
                <div style={{
                  fontFamily: v2c.cond, fontSize: 24, lineHeight: 1,
                  color: v2c.paper, letterSpacing: '.02em',
                }}>{t}</div>
                <div style={{
                  fontFamily: v2c.mono, fontSize: 8.5, letterSpacing: '.18em',
                  color: 'rgba(241,234,216,.55)', marginTop: 4,
                }}>EQUIPO</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 14, padding: '6px 10px',
            borderTop: `2px dashed rgba(241,234,216,.4)`,
            fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.18em',
            color: 'rgba(241,234,216,.85)', textTransform: 'uppercase',
            display: 'flex', justifyContent: 'space-between',
          }}>
            <span>FORMATO RELEVO</span>
            <span style={{ color: v2c.warn }}>UN ATLETA · UNA POSTA</span>
          </div>
        </div>
      </div>
    </section>
  );
}
function V2Leg({ n, label }) {
  return (
    <div>
      <div style={{
        fontFamily: v2c.cond, fontSize: 72, lineHeight: 0.9, letterSpacing: '-.02em',
      }}>
        {n}<span style={{ fontSize: 20, color: '#6b6258' }}>km</span>
      </div>
      <div style={{ fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.2em', color: v2c.red2, marginTop: 4 }}>
        {label}
      </div>
    </div>
  );
}

/* ───────── Mapa ───────── */
function V2Mapa() {
  return (
    <section style={{ padding: '36px 14px 32px', background: v2c.ink, color: v2c.paper, borderBottom: `3px solid ${v2c.ink}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.22em', color: v2c.red }}>
        <span style={{ color: v2c.warn }}>03</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(241,234,216,.25)' }} />
        <span>EL CIRCUITO</span>
      </div>
      <h2 style={{
        margin: '6px 0 18px', fontFamily: v2c.cond, fontWeight: 400,
        fontSize: 84, lineHeight: 0.82, letterSpacing: '-.02em', textTransform: 'uppercase',
      }}>
        VUELTA A<br />
        LA <span style={{ color: v2c.red }}>PISTA.</span>
      </h2>
      <p style={{
        fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.18em',
        color: 'rgba(241,234,216,.65)', margin: '0 0 16px', textTransform: 'uppercase',
      }}>
        AUTÓDROMO INTERNACIONAL DE YAGUARCOCHA · ASFALTO CERRADO
      </p>

      {/* Track card */}
      <div style={{
        border: `3px solid ${v2c.paper}`, background: '#1a1a17',
        padding: 10, position: 'relative',
      }}>
        <svg viewBox="0 0 320 220" width="100%" height="100%" style={{ display: 'block' }}>
          <defs>
            <pattern id="grid2" width="16" height="16" patternUnits="userSpaceOnUse">
              <path d="M16 0H0V16" fill="none" stroke="rgba(241,234,216,.06)" strokeWidth="1" />
            </pattern>
            {/* dashed stripe overlay for racing kerb feel */}
            <pattern id="kerb" width="14" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(8)">
              <rect width="7" height="6" fill={v2c.red} />
              <rect x="7" width="7" height="6" fill={v2c.paper} />
            </pattern>
          </defs>
          <rect width="320" height="220" fill="url(#grid2)" />

          {/* Race track silhouette — kidney-shaped circuit */}
          <path
            d="M 48 100
               C 30 60, 90 30, 140 38
               C 180 44, 200 70, 230 70
               C 280 70, 300 110, 280 140
               C 260 168, 210 170, 180 156
               C 150 144, 130 168, 90 178
               C 50 188, 24 150, 48 100 Z"
            fill="none" stroke={v2c.paper} strokeWidth="22" strokeLinejoin="round"
          />
          {/* center dashed racing line */}
          <path
            d="M 48 100
               C 30 60, 90 30, 140 38
               C 180 44, 200 70, 230 70
               C 280 70, 300 110, 280 140
               C 260 168, 210 170, 180 156
               C 150 144, 130 168, 90 178
               C 50 188, 24 150, 48 100 Z"
            fill="none" stroke={v2c.red} strokeWidth="2" strokeDasharray="4 4"
          />

          {/* Start/finish line (checkered) */}
          <g transform="translate(60 92) rotate(-70)">
            {[0,1,2,3,4,5].map(i => (
              <rect key={i} x={-12} y={i*4 - 12} width="24" height="4"
                fill={i % 2 === 0 ? v2c.paper : v2c.ink} stroke={v2c.ink} strokeWidth=".5" />
            ))}
          </g>
          <text x="78" y="74" fill={v2c.warn} fontFamily={v2c.cond} fontSize="18" letterSpacing="1">SALIDA</text>
          <text x="78" y="86" fill={v2c.paper} fontFamily={v2c.mono} fontSize="8" letterSpacing="1.5">META</text>

          {/* Transition zone */}
          <rect x="148" y="92" width="28" height="14" fill={v2c.warn} />
          <text x="162" y="103" textAnchor="middle" fill={v2c.ink} fontFamily={v2c.mono} fontSize="9" letterSpacing="1" fontWeight="700">T1·T2</text>

          {/* Corner numbers (turns) */}
          {[
            [86, 38, '1'], [186, 36, '2'], [240, 60, '3'],
            [292, 124, '4'], [228, 168, '5'], [130, 168, '6'], [62, 168, '7'], [32, 118, '8'],
          ].map(([x, y, n], i) => (
            <g key={i}>
              <circle cx={x} cy={y} r="9" fill={v2c.ink} stroke={v2c.red} strokeWidth="1.5" />
              <text x={x} y={y + 3} textAnchor="middle" fontFamily={v2c.mono} fontSize="9" fill={v2c.paper}>{n}</text>
            </g>
          ))}

          {/* Track name */}
          <text x="160" y="116" fontFamily={v2c.cond} fontSize="22" fill="rgba(14,14,12,.6)"
            textAnchor="middle" letterSpacing="1">AUTÓDROMO</text>
        </svg>

        {/* Legend tape */}
        <div style={{
          position: 'absolute', bottom: -12, right: 12,
          background: v2c.red, color: v2c.paper, padding: '4px 8px',
          fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.18em', transform: 'rotate(-2deg)',
          border: `2px solid ${v2c.ink}`,
        }}>
          ASFALTO · CERRADO AL TRÁFICO
        </div>
      </div>

      {/* Stats */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', marginTop: 24,
        gap: 6,
      }}>
        {[
          ['3,6', 'KM / VUELTA'],
          ['8', 'CURVAS'],
          ['2.225', 'm s.n.m.'],
        ].map(([n, l], i) => (
          <div key={i} style={{
            border: `2px solid ${v2c.paper}`, padding: '10px 8px', background: v2c.ink,
          }}>
            <div style={{ fontFamily: v2c.cond, fontSize: 34, lineHeight: 1, color: v2c.warn }}>{n}</div>
            <div style={{ fontFamily: v2c.mono, fontSize: 8.5, letterSpacing: '.18em', color: v2c.paper, marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>

      {/* Vueltas por categoría */}
      <div style={{ marginTop: 18, display: 'grid', gap: 8 }}>
        {[
          { name: 'SPRINT · BIKE',  laps: 10, km: 36 },
          { name: 'SPRINT · RUN',   laps: 2,  km: 7 },
          { name: 'NOVATOS · BIKE', laps: 4,  km: 16 },
          { name: 'NOVATOS · RUN',  laps: 1,  km: 3.6 },
        ].map((v, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr auto auto',
            alignItems: 'baseline', gap: 10,
            padding: '8px 10px', background: 'rgba(241,234,216,.05)',
            borderLeft: `3px solid ${v2c.red}`,
          }}>
            <span style={{ fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.16em', color: v2c.paper }}>
              {v.name}
            </span>
            <span style={{ fontFamily: v2c.cond, fontSize: 22, color: v2c.warn, lineHeight: 1 }}>
              {v.laps}<span style={{ fontSize: 11, color: 'rgba(241,234,216,.6)', fontFamily: v2c.mono, marginLeft: 4 }}>vueltas</span>
            </span>
            <span style={{ fontFamily: v2c.mono, fontSize: 10, color: 'rgba(241,234,216,.55)' }}>
              ≈ {v.km}km
            </span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────── Categorías ───────── */
function V2Categorias() {
  // Categorías por edad — aplican en Sprint y Novatos, hombres y mujeres.
  const cats = [
    ['PREJUVENIL', '13 — 16 AÑOS'],
    ['SUB-23',   '16 — 22 AÑOS'],
    ['SÉNIOR A', '23 — 30 AÑOS'],
    ['SÉNIOR B', '31 — 39 AÑOS'],
    ['MASTER A', '40 — 49 AÑOS'],
    ['MASTER B', '50 — 55 AÑOS'],
    ['MASTER C', '56 EN ADELANTE'],
  ];
  return (
    <section style={{ padding: '36px 14px 30px', borderBottom: `3px solid ${v2c.ink}` }}>
      {/* table */}
      <div style={{ border: `3px solid ${v2c.ink}`, background: v2c.paper }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr',
          padding: '8px 12px', background: v2c.ink, color: v2c.paper,
          fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.18em',
        }}>
          <span>CATEGORÍA</span><span>EDAD</span>
        </div>
        {cats.map(([n, who], i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr 1.2fr',
            alignItems: 'center', padding: '12px 12px',
            borderTop: i === 0 ? 'none' : `1.5px dashed ${v2c.ink}`,
          }}>
            <div style={{ fontFamily: v2c.cond, fontSize: 24, lineHeight: 1 }}>{n}</div>
            <div style={{ fontFamily: v2c.mono, fontSize: 11, letterSpacing: '.1em', color: '#5a5048' }}>{who}</div>
          </div>
        ))}
      </div>

      {/* Categorías abiertas MTB */}
      <div style={{
        marginTop: 14, border: `3px solid ${v2c.ink}`, background: v2c.paper,
        boxShadow: `5px 5px 0 ${v2c.ink}`, padding: '14px 14px 16px',
      }}>
        <div style={{ fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.22em', color: v2c.red2 }}>
          CATEGORÍAS ABIERTAS · MTB
        </div>
        <div style={{
          fontFamily: v2c.cond, fontSize: 30, lineHeight: 1, marginTop: 6, letterSpacing: '-.01em',
        }}>
          GENERAL SIN<br />LÍMITE DE EDAD MTB
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 6, marginTop: 14,
        }}>
          {['SPRINT', 'NOVATOS', 'POSTAS'].map((t, i) => (
            <div key={i} style={{
              border: `2px solid ${v2c.ink}`, padding: '10px 6px',
              textAlign: 'center', background: 'rgba(14,14,12,.04)',
            }}>
              <div style={{
                fontFamily: v2c.cond, fontSize: 22, lineHeight: 1, letterSpacing: '.01em',
              }}>{t}</div>
              <div style={{
                fontFamily: v2c.mono, fontSize: 8.5, letterSpacing: '.16em', color: v2c.red2, marginTop: 4,
              }}>ABIERTA</div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 12, padding: '8px 10px',
          border: `1.5px dashed ${v2c.ink}`,
          fontFamily: v2c.mono, fontSize: 9.5, lineHeight: 1.6, letterSpacing: '.03em',
          color: v2c.red2,
        }}>
          ⚠ Una categoría se abre con mínimo 6 participantes; caso contrario, se suma a la categoría superior.
        </div>
      </div>

      <div style={{ marginTop: 28 }}>
        <V2Eyebrow num="02" label="CATEGORÍAS / PODIO" />
        <h2 style={{
          margin: '6px 0 4px', fontFamily: v2c.cond, fontWeight: 400,
          fontSize: 84, lineHeight: 0.82, letterSpacing: '-.02em', textTransform: 'uppercase',
        }}>
          <span style={{ color: v2c.red }}>PREMIACIÓN.</span>
        </h2>
        <p style={{ fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.18em', color: v2c.ink, marginTop: 14, marginBottom: 0, lineHeight: 1.7 }}>
          SPRINT &amp; NOVATOS · HOMBRES Y MUJERES<br />
          PODIO 1·2·3 POR CATEGORÍA · MEDALLA FINISHER
        </p>
      </div>

      {/* Foto premiación */}
      <div style={{
        marginTop: 14, border: `3px solid ${v2c.ink}`,
        boxShadow: `5px 5px 0 ${v2c.red}`, overflow: 'hidden',
      }}>
        <img
          src="https://i.postimg.cc/6pqjLtWw/IMG-20240528-110814.jpg"
          alt="Premiación Duatlón Yaguarcocha"
          style={{ display: 'block', width: '100%', height: 'auto' }}
        />
        <div style={{
          padding: '6px 10px', background: v2c.ink, color: v2c.paper,
          fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.18em', textAlign: 'center',
        }}>PREMIACIÓN · EDICIÓN ANTERIOR</div>
      </div>

      {/* Premios por categoría */}
      <div style={{
        marginTop: 14, padding: '14px 14px',
        background: v2c.ink, color: v2c.paper,
        border: `3px solid ${v2c.ink}`,
      }}>
        <div style={{ fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.22em', color: v2c.warn }}>
          PREMIOS POR CATEGORÍA
        </div>
        <div style={{
          fontFamily: v2c.cond, fontSize: 30, lineHeight: 1, marginTop: 8, letterSpacing: '-.01em',
        }}>
          TROFEO + KIT DE<br />
          <span style={{ color: v2c.red }}>AUSPICIANTES</span>
        </div>
        <div style={{
          fontFamily: v2c.mono, fontSize: 10, lineHeight: 1.7,
          letterSpacing: '.08em', marginTop: 10, color: 'rgba(241,234,216,.7)',
        }}>
          1º · 2º · 3º DE CADA CATEGORÍA · SPRINT Y NOVATOS · HOMBRES Y MUJERES
        </div>
      </div>
    </section>
  );
}

/* ───────── Precios ───────── */
function V2Precios() {
  const price = { sprint: 34, novatos: 27, postas: 25 };
  return (
    <section id="inscripcion" style={{
      padding: '36px 14px 30px', background: v2c.warn, borderBottom: `3px solid ${v2c.ink}`,
    }}>
      <V2Eyebrow num="04" label="INSCRIPCIÓN" />
      <h2 style={{
        margin: '6px 0 22px', fontFamily: v2c.cond, fontWeight: 400,
        fontSize: 84, lineHeight: 0.82, letterSpacing: '-.02em', textTransform: 'uppercase',
      }}>
        <span style={{ color: v2c.red }}>VALOR</span><br />
        POR<br />
        PERSONA.
      </h2>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{
          border: `3px solid ${v2c.ink}`,
          background: v2c.red,
          color: v2c.paper,
          padding: '14px 14px 16px',
          position: 'relative',
          boxShadow: `6px 6px 0 ${v2c.ink}`,
        }}>
          <div style={{ fontFamily: v2c.cond, fontSize: 30, lineHeight: 1, letterSpacing: '-.005em' }}>
            INSCRIPCIÓN 2026
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 14,
          }}>
            <V2PriceBlock label="SPRINT"  price={price.sprint}  invert />
            <V2PriceBlock label="NOVATOS" price={price.novatos} invert />
            <V2PriceBlock label="POSTAS"  price={price.postas}  invert />
          </div>

          <div style={{
            marginTop: 14, fontFamily: v2c.mono, fontSize: 9.5, letterSpacing: '.18em', opacity: .9,
          }}>
            PRECIOS POR PERSONA
          </div>
        </div>

        <V2Countdown />
        <V2Form />
      </div>

      <a href="#" style={{
        display: 'block', marginTop: 22, padding: '20px 14px',
        background: v2c.ink, color: v2c.warn,
        textDecoration: 'none', textAlign: 'center',
        fontFamily: v2c.cond, fontSize: 36, letterSpacing: '.04em', lineHeight: 1,
        textTransform: 'uppercase', boxShadow: `6px 6px 0 ${v2c.red}`,
      }}>
        ASEGURA TU DORSAL →
      </a>

      <div style={{
        marginTop: 18, border: `3px solid ${v2c.ink}`,
        background: v2c.paper, padding: '12px 14px',
      }}>
        <div style={{
          fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.22em', color: v2c.red2, marginBottom: 8,
        }}>
          ▶ INCLUYE
        </div>
        <ul style={{
          margin: 0, padding: 0, listStyle: 'none',
          fontFamily: v2c.mono, fontSize: 10.5, lineHeight: 1.75, letterSpacing: '.04em',
          color: v2c.ink,
        }}>
          {[
            'Dorsal + chip de cronometraje',
            'Camiseta técnica LAFTECH',
            'Correa de control',
            'Kit de hidratación',
            'Seguro del evento',
            'Medalla finisher',
          ].map((it, i) => (
            <li key={i} style={{ display: 'flex', gap: 8 }}>
              <span style={{ color: v2c.red }}>·</span>
              <span>{it}</span>
            </li>
          ))}
        </ul>
      </div>

      <div style={{
        marginTop: 14, border: `3px solid ${v2c.ink}`,
        boxShadow: `5px 5px 0 ${v2c.ink}`, overflow: 'hidden',
      }}>
        <img
          src="https://i.postimg.cc/Px2hjJsn/Lit-de-la-comtenencia.png"
          alt="Kit de la competencia"
          style={{ display: 'block', width: '100%', height: 'auto' }}
        />
      </div>
    </section>
  );
}

/* ───────── Countdown 48h loop ───────── */
function V2Countdown() {
  // Cycle: 2 days (48h). Counts down to the next midnight that is at
  // least one full day away, then loops back to ~48h automatically.
  const CYCLE_MS = 2 * 24 * 60 * 60 * 1000;
  const getRemaining = () => {
    const now = new Date();
    const anchor = new Date(now);
    anchor.setHours(24, 0, 0, 0);     // tonight's midnight
    anchor.setDate(anchor.getDate() + 1); // → tomorrow's midnight (≈ 24-48h ahead)
    let diff = anchor - now;
    while (diff <= 0) diff += CYCLE_MS;
    const d = Math.floor(diff / 86_400_000);
    const h = Math.floor((diff % 86_400_000) / 3_600_000);
    const m = Math.floor((diff % 3_600_000) / 60_000);
    const s = Math.floor((diff % 60_000) / 1000);
    return { d, h, m, s };
  };
  const [t, setT] = React.useState(getRemaining);
  React.useEffect(() => {
    const id = setInterval(() => setT(getRemaining()), 1000);
    return () => clearInterval(id);
  }, []);

  const pad = (n) => String(n).padStart(2, '0');
  const cell = (n, l) => (
    <div style={{ textAlign: 'center', flex: 1, minWidth: 0 }}>
      <div style={{
        fontFamily: v2c.cond, fontSize: 44, lineHeight: 0.9,
        letterSpacing: '-.02em', color: v2c.warn,
        fontVariantNumeric: 'tabular-nums',
      }}>{pad(n)}</div>
      <div style={{
        fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.2em',
        color: 'rgba(241,234,216,.6)', marginTop: 4,
      }}>{l}</div>
    </div>
  );
  return (
    <div style={{
      border: `3px solid ${v2c.ink}`, background: v2c.ink, color: v2c.paper,
      padding: '14px 14px 16px', boxShadow: `6px 6px 0 ${v2c.red}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* live pulse dot */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.22em', color: v2c.red,
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: '50%', background: v2c.red,
          boxShadow: `0 0 10px ${v2c.red}`, animation: 'v2pulse 1s ease-in-out infinite',
        }} />
        EN VIVO
      </div>

      <div style={{
        fontFamily: v2c.cond, fontSize: 30, lineHeight: 0.9,
        letterSpacing: '-.01em', marginTop: 8, textTransform: 'uppercase',
      }}>
        CUPOS <span style={{ color: v2c.red }}>LIMITADOS</span>
      </div>
      <div style={{
        fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.14em',
        color: 'rgba(241,234,216,.65)', marginTop: 6, textTransform: 'uppercase',
      }}>
        TIEMPO APROXIMADO PARA TERMINAR REGISTROS
      </div>

      <div style={{
        display: 'flex', alignItems: 'flex-end', gap: 2,
        marginTop: 14, padding: '10px 2px 8px',
        borderTop: `2px dashed rgba(241,234,216,.3)`,
      }}>
        {cell(t.d, 'DÍAS')}
        <V2Sep />
        {cell(t.h, 'HORAS')}
        <V2Sep />
        {cell(t.m, 'MIN')}
        <V2Sep />
        {cell(t.s, 'SEG')}
      </div>

      <style>{`
        @keyframes v2pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: .4; transform: scale(1.4); }
        }
      `}</style>
    </div>
  );
}
function V2Sep() {
  return (
    <div style={{
      fontFamily: v2c.cond, fontSize: 32, color: v2c.red,
      lineHeight: 0.9, paddingBottom: 18,
    }}>:</div>
  );
}

/* ───────── Inscripción form (embed) ───────── */
function V2Form() {
  // Load the embed script once.
  React.useEffect(() => {
    const SRC = 'https://link.centralize.es/js/form_embed.js';
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const s = document.createElement('script');
    s.src = SRC;
    s.async = true;
    document.body.appendChild(s);
  }, []);

  return (
    <div style={{
      border: `3px solid ${v2c.ink}`, background: v2c.paper,
      boxShadow: `6px 6px 0 ${v2c.ink}`, padding: '0',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Header bar — matches the brutalist tabs/labels above */}
      <div style={{
        background: v2c.ink, color: v2c.paper,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '10px 14px',
        borderBottom: `3px solid ${v2c.red}`,
      }}>
        <div>
          <div style={{
            fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.22em', color: v2c.red,
          }}>
            ▶ COMPLETA TUS DATOS
          </div>
          <div style={{
            fontFamily: v2c.cond, fontSize: 26, lineHeight: 1, letterSpacing: '-.01em',
            marginTop: 4, textTransform: 'uppercase',
          }}>
            FORMULARIO DE<br/><span style={{ color: v2c.warn }}>INSCRIPCIÓN</span>
          </div>
        </div>
        <div style={{
          fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.18em',
          background: v2c.warn, color: v2c.ink, padding: '4px 8px',
          transform: 'rotate(3deg)',
        }}>
          PASO 01
        </div>
      </div>

      {/* Iframe container — tall enough for typical multi-field forms.
          The embed script auto-resizes when it can. */}
      <div style={{
        background: v2c.paper, padding: '6px',
        borderBottom: `2px dashed ${v2c.ink}`,
      }}>
        <iframe
          src="https://link.centralize.es/widget/form/U1KRjac6WR857lqwyMju"
          style={{ width: '100%', height: 760, border: 'none', borderRadius: 4, display: 'block', background: '#fff' }}
          id="inline-U1KRjac6WR857lqwyMju"
          data-layout='{"id":"INLINE"}'
          data-trigger-type="alwaysShow"
          data-trigger-value=""
          data-activation-type="alwaysActivated"
          data-activation-value=""
          data-deactivation-type="neverDeactivate"
          data-deactivation-value=""
          data-form-name="Duatlon Yaguarcocha 2026"
          data-height="undefined"
          data-layout-iframe-id="inline-U1KRjac6WR857lqwyMju"
          data-form-id="U1KRjac6WR857lqwyMju"
          title="Duatlon Yaguarcocha 2026"
        ></iframe>
      </div>

      <div style={{
        padding: '10px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
        fontFamily: v2c.mono, fontSize: 9.5, letterSpacing: '.18em',
        color: v2c.ink, textTransform: 'uppercase',
      }}>
        <span>
          <span style={{ color: v2c.red, marginRight: 6 }}>✓</span>
          PAGO SEGURO
        </span>
        <span style={{ color: '#5a5048' }}>· CUPOS LIMITADOS ·</span>
        <span>
          <span style={{ color: v2c.red, marginRight: 6 }}>✓</span>
          CONFIRMACIÓN INMEDIATA
        </span>
      </div>
    </div>
  );
}

function V2PriceBlock({ label, price, invert }) {
  const fg = invert ? v2c.paper : v2c.ink;
  const bg = invert ? 'rgba(14,14,12,.2)' : 'rgba(14,14,12,.06)';
  return (
    <div style={{
      padding: '10px 10px', background: bg, borderRadius: 0,
      border: `1px solid ${invert ? 'rgba(241,234,216,.4)' : 'rgba(14,14,12,.2)'}`,
    }}>
      <div style={{
        fontFamily: v2c.mono, fontSize: 9, letterSpacing: '.22em', color: fg, opacity: .85,
      }}>{label}</div>
      <div style={{
        fontFamily: v2c.cond, fontSize: 46, lineHeight: .9, letterSpacing: '-.02em', color: fg, marginTop: 4,
      }}>
        ${price}
      </div>
    </div>
  );
}

/* ───────── Video ───────── */
function V2Video() {
  return (
    <section style={{ padding: '32px 14px 8px', background: v2c.paper, borderBottom: `3px solid ${v2c.ink}` }}>
      <div style={{
        border: `3px solid ${v2c.ink}`, boxShadow: `6px 6px 0 ${v2c.red}`,
        aspectRatio: '16 / 9', overflow: 'hidden', background: v2c.ink,
      }}>
        <iframe
          src="https://www.youtube.com/embed/9We6t_FEqks?rel=0&modestbranding=1&controls=1&showinfo=0&iv_load_policy=3"
          style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          title="Duatlón Yaguarcocha"
        ></iframe>
      </div>
    </section>
  );
}

/* ───────── Auspiciantes ───────── */
function V2Auspiciantes() {
  const logos = [
    'https://i.postimg.cc/gkXhMmsw/Whats-App-Image-2026-01-16-at-3-13-10-PM.jpg',
    'https://i.postimg.cc/tCY3Lhqz/Whats-App-Image-2026-03-31-at-10-16-01.jpg',
    'https://i.postimg.cc/mrNCQjw8/NIKKY.jpg',
  ];
  return (
    <section style={{ padding: '32px 14px 36px', background: v2c.paper, borderBottom: `3px solid ${v2c.ink}` }}>
      <V2Eyebrow num="05" label="AUSPICIANTES" />
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 18,
      }}>
        {logos.map((src, i) => (
          <div key={i} style={{
            border: `2px solid ${v2c.ink}`, background: '#fff',
            aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center',
            overflow: 'hidden', padding: 8,
          }}>
            <img src={src} alt="Auspiciante" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────── Footer ───────── */
function V2Footer() {
  return (
    <footer style={{
      padding: '32px 14px 40px', background: v2c.ink, color: v2c.paper,
    }}>
      <div style={{
        fontFamily: v2c.cond, fontSize: 78, lineHeight: 0.82,
        letterSpacing: '-.02em', textTransform: 'uppercase',
      }}>
        NOS VEMOS<br />
        EN LA<br />
        <span style={{ color: v2c.red }}>SALIDA.</span>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        marginTop: 26, fontFamily: v2c.mono, fontSize: 10,
        letterSpacing: '.15em', color: v2c.paper,
      }}>
        <span>@DUATLONYGC</span>
        <span style={{ textAlign: 'center' }}>IBARRA · EC</span>
        <span style={{ textAlign: 'right' }}>MMXXVI</span>
      </div>
    </footer>
  );
}

/* ───────── helper ───────── */
function V2Eyebrow({ num, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      fontFamily: v2c.mono, fontSize: 10, letterSpacing: '.22em',
      color: v2c.red,
    }}>
      <span style={{ color: v2c.ink }}>{num}</span>
      <span style={{ flex: 1, height: 1, background: v2c.ink }} />
      <span style={{ color: v2c.ink }}>{label}</span>
    </div>
  );
}

window.V2Brutalist = V2Brutalist;