// Budget page — hero + Chapter I (Before You Go) + Chapter II (Getting There)

const BudgetHero = () => (
  <section className="budget-hero">
    <div className="container">
      <div className="budget-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <span className="here">Budget</span>
      </div>
      <div className="budget-mast">
        <div className="lhs">
          <span className="layer-tag">THE TREASURY DESK · 5 CHAPTERS</span>
          <div className="issue-line">
            <span>ISSUE Nº 015</span>
            <span>FIELD DESK Nº 091</span>
            <span>SPRING 2026</span>
          </div>
          <h1>Budget<em>like a person who keeps the receipts.</em></h1>
          <p className="lede">
            The trip you can afford is the trip you actually take. <em>Five chapters.</em> Real numbers. Daily floors and ceilings, the line items nobody warns you about, and the reconciliation spreadsheet that pays for itself by the next trip.
          </p>
        </div>
        <div className="rhs">
          <div className="exchange-board">
            <div className="board-head">
              <span>EXCHANGE BOARD · USD BASE</span>
              <span className="live-dot">LIVE · 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>SOURCE · INDICATIVE MID-MARKET</span>
              <span>UPDATED 06:00 ET</span>
            </div>
          </div>
        </div>
      </div>

      <div className="budget-stats">
        <div className="stat"><div className="n">5</div><div className="l">Chapters · spend lanes</div></div>
        <div className="stat"><div className="n">$4,490</div><div className="l">Sample 14-day reconciled</div></div>
        <div className="stat"><div className="n">8.7%</div><div className="l">Avg variance vs plan</div></div>
        <div className="stat"><div className="n">±15%</div><div className="l">Tolerance — solid budget</div></div>
      </div>

      <div className="budget-toc">
        <span className="toc-label">In this issue</span>
        <a href="#before-you-go"><span className="num">I</span>Before You Go</a>
        <span className="sep">·</span>
        <a href="#getting-there"><span className="num">II</span>Getting There</a>
        <span className="sep">·</span>
        <a href="#on-the-ground"><span className="num">III</span>On the Ground</a>
        <span className="sep">·</span>
        <a href="#hidden-costs"><span className="num">IV</span>Hidden Costs</a>
        <span className="sep">·</span>
        <a href="#bring-it-home"><span className="num">V</span>Bring It Home</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Reading &amp; 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="Monthly savings ladder">
            <div className="ledger-head">
              <div>
                <div className="lbl">SAVINGS LADDER · MONTHLY TARGET</div>
                <h3>What to set aside, by trip cost.</h3>
              </div>
              <div className="stamp">USD · NET</div>
            </div>
            <table className="ledger-table">
              <thead>
                <tr>
                  <th>Time horizon</th>
                  <th>$3k trip</th>
                  <th>$6k trip</th>
                  <th>$12k trip</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 TRIP TOTAL BY MONTHS · ADD 15% BUFFER</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} The fare table below is what people actually paid in the last 90 days, not the headline ad price.</p>
        </div>

        <div className="fare-table" aria-label="Fare reference table">
          <div className="fare-row head">
            <div>Category</div>
            <div>Route</div>
            <div>Low</div>
            <div>Median</div>
            <div>High</div>
            <div>Field note</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 });