// Presupuesto — Capítulo III (Sobre el terreno) + IV (Costos ocultos) + V (Llévalo a casa) + CTA + Lecturas + FAQ — Spanish
const { useState: useBudgetState } = React;

const BudgetGround = () => {
  const lane = BUDGET_LANES[2];
  return (
    <section className="budget-ground-tier" id="on-the-ground">
      <div className="container">
        <div className="tier-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}</p>
        </div>
        <div className="tier-grid">
          {BUDGET_TIERS.map(t => (
            <article key={t.tier} className="tier-cell">
              <div className="tier-band">
                <span>NIVEL {t.tier}</span>
                <span className="tier-stamp">PER DIEM</span>
              </div>
              <div className="tier-range">{t.range}</div>
              <p className="tier-desc">{t.desc}</p>
              <div className="tier-cities">
                {t.cities.map(c => <span key={c} className="city">{c}</span>)}
              </div>
              <div className="tier-breakdown">
                {t.breakdown.map(b => (
                  <div key={b.l} className="bd-row">
                    <span className="l">{b.l}</span>
                    <span className="v">{b.v}</span>
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const BudgetHidden = () => {
  const lane = BUDGET_LANES[3];
  return (
    <section className="budget-hidden" id="hidden-costs">
      <div className="container">
        <div className="hidden-head">
          <div className="chapter-tag light">
            <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>
        <div className="hidden-grid">
          {BUDGET_HIDDEN.map(h => (
            <article key={h.title} className="hidden-cell">
              <div className="top">
                <div className="glyph">{h.glyph}</div>
                <span className="coord">{h.coord}</span>
              </div>
              <h3>{h.title}</h3>
              <p>{h.desc}</p>
              <div className="spec">{h.spec}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const BudgetBring = () => {
  const lane = BUDGET_LANES[4];
  return (
    <section className="budget-bring" id="bring-it-home">
      <div className="container">
        <div className="bring-grid">
          <div className="bring-text">
            <div className="chapter-tag light">
              <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="pull">
              <p>Cinco minutos por noche durante catorce noches te compran los datos que hacen que el próximo viaje sea la mitad de caro de planear. Los recibos que guardas son los recibos que te devuelven el dinero.</p>
              <cite>— Iris Mendoza, Mesa del Tesoro</cite>
            </div>
          </div>

          <div className="bring-ledger" aria-label="Conciliación de muestra de viaje de dos semanas">
            <div className="led-head">
              <div>
                <div className="lbl">CONCILIACIÓN · 14 DÍAS EUROPA</div>
                <h3>El libro mayor post viaje.</h3>
              </div>
              <div className="stamp">RECONCILIADO</div>
            </div>
            <table className="recon-table">
              <thead>
                <tr>
                  <th>Fila</th>
                  <th>Categoría</th>
                  <th>Plan</th>
                  <th>Real</th>
                  <th>Varianza</th>
                  <th>Nota</th>
                </tr>
              </thead>
              <tbody>
                {BUDGET_LEDGER.map(r => {
                  const isTotal = r.cat === 'TOTAL';
                  const varClass = r.variance.startsWith('+') ? 'var-pos' : 'var-neg';
                  return (
                    <tr key={r.row} className={isTotal ? 'total' : ''}>
                      <td>{r.row}</td>
                      <td>{r.cat}</td>
                      <td>{r.planned}</td>
                      <td>{r.actual}</td>
                      <td className={varClass}>{r.variance}</td>
                      <td className="note">{r.note}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
};

const BudgetCTA = () => (
  <section className="budget-cta">
    <div className="container">
      <div className="cta-grid">
        <div>
          <div className="kicker">ROUNDTRIPS · CONSTRUIDO PARA EL PRESUPUESTO</div>
          <h2>Deja de adivinar. <em>Empieza a contar.</em></h2>
          <p>RoundTrips es el espacio de presupuesto que construimos para nosotros: pisos y techos por destino, alertas de tarifas, matemática de divisas, el registro de recibos que se concilia solo. Una pestaña. Un viaje. Un total.</p>
          <div className="cta-actions">
            <a href="https://roundtrips.org" className="btn-primary">Abrir RoundTrips →</a>
            <a href="/journal/japan-on-a-budget" className="btn-ghost">Explora 248 itinerarios</a>
          </div>
        </div>
        <div className="cta-receipt" aria-label="Recibo de presupuesto de muestra">
          <div className="receipt-head">
            <span>HOWTO · TRAVEL EDITION</span>
            <span>Nº 091</span>
          </div>
          <div className="receipt-row"><span>Vuelos · NYC → LIS</span><span className="v">1.180 $</span></div>
          <div className="receipt-row"><span>Hotel · 13 noches</span><span className="v">1.520 $</span></div>
          <div className="receipt-row"><span>Comida · 14 días</span><span className="v">840 $</span></div>
          <div className="receipt-row"><span>Transporte · terreno</span><span className="v">235 $</span></div>
          <div className="receipt-row"><span>Actividades · entradas</span><span className="v">420 $</span></div>
          <div className="receipt-row"><span>Líneas ocultas</span><span className="v">295 $</span></div>
          <div className="receipt-total"><span>TOTAL · 14 DÍAS</span><span className="v">4.490 $</span></div>
          <div className="receipt-foot">RECONCILIADO · +8,7 % VS PLAN · DENTRO DE TOLERANCIA</div>
        </div>
      </div>
    </div>
  </section>
);

const BudgetReading = () => {
  const [open, setOpen] = useBudgetState(0);
  return (
    <section className="budget-reading" id="reading">
      <div className="container">
        <div className="reading-grid">
          <div className="read-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VI · LA LISTA DE LECTURAS</div>
              <h3>Cuatro piezas, <em>antes de gastar.</em></h3>
            </div>
            <div className="card-rows">
              {BUDGET_READING.map(r => (
                <a key={r.slug} href={`/journal/${r.slug}`} className="reading-card">
                  <div className="rc-img" style={{ backgroundImage: `url(${r.img})` }}></div>
                  <div className="rc-body">
                    <div className="rc-meta">
                      <span className="tag">{r.tag}</span>
                      <span className="dur">{r.duration}</span>
                    </div>
                    <h4>{r.title}</h4>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <div className="faq-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VII · PREGUNTAS QUE NOS HACEN MUCHO</div>
              <h3>Las preguntas, <em>respondidas.</em></h3>
            </div>
            <div className="faq-list">
              {BUDGET_FAQS.map((f, i) => (
                <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                  <div className="q">
                    <span>{f.q}</span>
                    <span className="toggle">+</span>
                  </div>
                  <div className="a">{f.a}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BudgetGround, BudgetHidden, BudgetBring, BudgetCTA, BudgetReading });