// Presupuesto — hero + Capítulo I (Antes de salir) + Capítulo II (Cómo llegar) — Spanish

const BudgetHero = () => (
  <section className="budget-hero">
    <div className="container">
      <div className="budget-crumbs">
        <a href="/es/">Inicio</a>
        <span className="sep">/</span>
        <span className="here">Presupuesto</span>
      </div>
      <div className="budget-mast">
        <div className="lhs">
          <span className="layer-tag">MESA DEL TESORO · 5 CAPÍTULOS</span>
          <div className="issue-line">
            <span>NÚMERO Nº 015</span>
            <span>MESA DE CAMPO Nº 091</span>
            <span>PRIMAVERA 2026</span>
          </div>
          <h1>Presupuesto<em>como quien guarda los recibos.</em></h1>
          <p className="lede">
            El viaje que puedes pagar es el viaje que de verdad haces. <em>Cinco capítulos.</em> Cifras reales. Pisos y techos diarios, las líneas que nadie te avisa y la hoja de conciliación que se paga sola para el próximo viaje.
          </p>
        </div>
        <div className="rhs">
          <div className="exchange-board">
            <div className="board-head">
              <span>TABLERO DE DIVISAS · BASE USD</span>
              <span className="live-dot">EN VIVO · 25.04</span>
            </div>
            <div className="board-rows">
              {BUDGET_RATES.map(r => (
                <div key={r.from + r.to} className="board-row">
                  <span className="pair">{r.from}/{r.to}</span>
                  <span className="label">{r.label}</span>
                  <span className="rate">{r.rate}</span>
                  <span className={`trend ${r.trend === '↑' ? 'up' : r.trend === '↓' ? 'down' : 'flat'}`}>{r.trend}</span>
                </div>
              ))}
            </div>
            <div className="board-foot">
              <span>FUENTE · MEDIO DE MERCADO</span>
              <span>ACTUALIZADO 06:00 ET</span>
            </div>
          </div>
        </div>
      </div>

      <div className="budget-stats">
        <div className="stat"><div className="n">5</div><div className="l">Capítulos · líneas de gasto</div></div>
        <div className="stat"><div className="n">4.490 $</div><div className="l">Muestra 14 días reconciliada</div></div>
        <div className="stat"><div className="n">8,7 %</div><div className="l">Varianza media vs plan</div></div>
        <div className="stat"><div className="n">±15 %</div><div className="l">Tolerancia — presupuesto sólido</div></div>
      </div>

      <div className="budget-toc">
        <span className="toc-label">En este número</span>
        <a href="#before-you-go"><span className="num">I</span>Antes de salir</a>
        <span className="sep">·</span>
        <a href="#getting-there"><span className="num">II</span>Cómo llegar</a>
        <span className="sep">·</span>
        <a href="#on-the-ground"><span className="num">III</span>Sobre el terreno</a>
        <span className="sep">·</span>
        <a href="#hidden-costs"><span className="num">IV</span>Costos ocultos</a>
        <span className="sep">·</span>
        <a href="#bring-it-home"><span className="num">V</span>Llévalo a casa</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Lecturas y FAQ</a>
      </div>
    </div>
  </section>
);

const BudgetBefore = () => {
  const lane = BUDGET_LANES[0];
  return (
    <section className="budget-before" id="before-you-go">
      <div className="container">
        <div className="before-grid">
          <div className="before-text">
            <div className="chapter-tag">
              <span className="num">{lane.num}</span>
              <span className="label">{lane.chapter}</span>
            </div>
            <h2>{lane.title}<em> — {lane.titleEm}</em></h2>
            <p className="dek">{lane.desc}</p>
            <div className="before-bullets">
              {lane.bullets.map((b, i) => (
                <div key={i} className="row">
                  <span className="bl">{b.l}</span>
                  <span className="bv">{b.v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="savings-ledger" aria-label="Escalera mensual de ahorro">
            <div className="ledger-head">
              <div>
                <div className="lbl">ESCALERA DE AHORRO · META MENSUAL</div>
                <h3>Lo que apartar, según el costo del viaje.</h3>
              </div>
              <div className="stamp">USD · NETO</div>
            </div>
            <table className="ledger-table">
              <thead>
                <tr>
                  <th>Horizonte</th>
                  <th>Viaje 3 mil $</th>
                  <th>Viaje 6 mil $</th>
                  <th>Viaje 12 mil $</th>
                </tr>
              </thead>
              <tbody>
                {BUDGET_SAVINGS.map(r => (
                  <tr key={r.months}>
                    <td>{r.months}</td>
                    <td>{r.trip3k}</td>
                    <td>{r.trip6k}</td>
                    <td>{r.trip12k}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="ledger-foot">DIVIDE EL TOTAL ENTRE LOS MESES · SUMA 15 % DE MARGEN</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const BudgetGetting = () => {
  const lane = BUDGET_LANES[1];
  return (
    <section className="budget-getting" id="getting-there">
      <div className="container">
        <div className="getting-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2>{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc} La tabla de tarifas siguiente es lo que la gente pagó en los últimos 90 días, no el precio de portada del anuncio.</p>
        </div>

        <div className="fare-table" aria-label="Tabla de referencia de tarifas">
          <div className="fare-row head">
            <div>Categoría</div>
            <div>Ruta</div>
            <div>Bajo</div>
            <div>Mediano</div>
            <div>Alto</div>
            <div>Nota de campo</div>
          </div>
          {BUDGET_FARES.map((f, i) => (
            <div key={i} className="fare-row">
              <div className="cat">{f.cat}</div>
              <div className="route">{f.route}</div>
              <div className="price low">{f.low}</div>
              <div className="price">{f.mid}</div>
              <div className="price">{f.high}</div>
              <div className="note">{f.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BudgetHero, BudgetBefore, BudgetGetting });