// Budget page — Chapter III (On the Ground) + IV (Hidden Costs) + V (Bring It Home) + CTA + Reading + FAQ
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>{t.tier} 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>Five minutes a night for fourteen nights buys you the data that makes the next trip half as expensive to plan. The receipts you keep are the receipts that pay you back.</p>
              <cite>— Iris Mendoza, Treasury Desk</cite>
            </div>
          </div>

          <div className="bring-ledger" aria-label="Sample two-week trip reconciliation">
            <div className="led-head">
              <div>
                <div className="lbl">RECONCILIATION · 14-DAY EUROPE</div>
                <h3>The post-trip ledger.</h3>
              </div>
              <div className="stamp">RECONCILED</div>
            </div>
            <table className="recon-table">
              <thead>
                <tr>
                  <th>Row</th>
                  <th>Category</th>
                  <th>Planned</th>
                  <th>Actual</th>
                  <th>Variance</th>
                  <th>Note</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 · BUILT TO BUDGET</div>
          <h2>Stop guessing. <em>Start counting.</em></h2>
          <p>RoundTrips is the budget workspace we built for ourselves: per-diem floors and ceilings by destination, fare alerts, currency math, the receipt log that reconciles itself. One tab. One trip. One total.</p>
          <div className="cta-actions">
            <a href="https://roundtrips.org" className="btn-primary">Open RoundTrips →</a>
            <a href="/journal/japan-on-a-budget" className="btn-ghost">Browse 248 itineraries</a>
          </div>
        </div>
        <div className="cta-receipt" aria-label="Sample budget receipt">
          <div className="receipt-head">
            <span>HOWTO · TRAVEL EDITION</span>
            <span>Nº 091</span>
          </div>
          <div className="receipt-row"><span>Flights · NYC → LIS</span><span className="v">$1,180</span></div>
          <div className="receipt-row"><span>Hotel · 13 nights</span><span className="v">$1,520</span></div>
          <div className="receipt-row"><span>Food · 14 days</span><span className="v">$840</span></div>
          <div className="receipt-row"><span>Transport · ground</span><span className="v">$235</span></div>
          <div className="receipt-row"><span>Activities · entries</span><span className="v">$420</span></div>
          <div className="receipt-row"><span>Hidden line items</span><span className="v">$295</span></div>
          <div className="receipt-total"><span>TOTAL · 14 DAYS</span><span className="v">$4,490</span></div>
          <div className="receipt-foot">RECONCILED · +8.7% VS PLAN · WITHIN TOLERANCE</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 · THE READING LIST</div>
              <h3>Four pieces, <em>before you spend.</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 · QUESTIONS WE GET A LOT</div>
              <h3>The questions, <em>answered.</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 });