/* eslint-disable */

// ─── Hero ────────────────────────────────────────────────────────────────────
const BudgetHero = () => (
  <section className="types-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=2400&q=80)` }}
    ></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="types-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/plan/">Plan</a>
        <span className="sep">/</span>
        <span className="here">Budget &amp; Costs</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE MONEY DESK · 8 TIERS</span>
          </div>
          <h1>Budget &amp; Costs<em>what travel actually costs.</em></h1>
        </div>
        <p className="lede">
          The honest number. Not what the blogs quote, not what the Instagram caption implies.
          <em>Pick your tier</em> — under $50, the comfortable middle, boutique, luxury, points, hidden costs, cash — and let it build from there.
        </p>
      </div>

      <div className="types-rail" style={{ gridTemplateColumns: "repeat(8, 1fr)" }}>
        {BUDGET_LANES.map((l) => (
          <a key={l.id} href={`#${l.id}`}>
            <span className="n">{l.num}</span>
            <span className="t">{l.title}{l.titleEm ? ` ${l.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="hero-coord">38°42′N · 09°08′W · LISBON MARKET</div>
    <div className="hero-credit">PHOTO — MONEY DESK Nº 008</div>
  </section>
);

// ─── Lane card ───────────────────────────────────────────────────────────────
const BudgetLane = ({ lane }) => (
  <a href={`#${lane.id}`} className={`lane ${lane.size}`}>
    <div className="img" style={{ backgroundImage: `url(${lane.img})` }}></div>
    <div className="scrim"></div>
    <span className="corner-num">{lane.num}</span>
    {lane.badge && <span className="corner-tag">{lane.badge}</span>}
    <div className="body">
      <div className="topic"><span className="dot"></span>{lane.topic}</div>
      <h3>{lane.title}{lane.titleEm && <em> {lane.titleEm}</em>}</h3>
      <p className="desc">{lane.desc}</p>
      <div className="meta">
        <span>{lane.count}</span>
        <span>·</span>
        <span>{lane.read}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

const BudgetLanes = () => (
  <section className="types-lanes" id="lanes">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The eight <em>cost tiers.</em></h2>
          <p>Same destination, eight completely different budgets. Pick the tier and the planning becomes concrete — what you book, where you sleep, what you eat, what you skip.</p>
        </div>
        <div className="right">All tiers <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {BUDGET_LANES.map((l) => (
          <BudgetLane key={l.id} lane={l} />
        ))}
      </div>
    </div>
  </section>
);

// ─── Essay ───────────────────────────────────────────────────────────────────
const BudgetEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>on travel money.</em></h2>
          <p>From the desk that has read every "budget breakdown" post and found most of them wrong. The pattern that actually holds.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"A budget is not a <em>constraint.</em> It's the shape of your week. Get it wrong and you spend three days anxious about the bill."</p>
          <div className="byline">
            <div
              className="av"
              style={{ backgroundImage: `url(https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=200&q=80)` }}
            ></div>
            <div className="who">
              <div className="name">Celia Hartmann</div>
              <div className="role">Senior Editor · Budget Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>Most travel budget guides quote a number and stop there. Eighteen dollars a day in Thailand, they say — as if that number is a fixed law, as if Thailand in 2026 is Thailand in 2016, as if a hostel dorm in Chiang Mai is the same experience as a guest house in Bangkok.</p>
          <p>The number is not the point. The <em>tier</em> is the point. When you understand which tier you're actually in — not which tier you wish you were in — the planning gets honest. You stop comparing yourself to itineraries you're not actually going to recreate.</p>
          <p>The most common mistake is underestimating by one tier. People planning for $70/day end up spending $110 because they didn't account for the restaurant they chose when they were tired, the taxi they took because the bus was confusing, the attraction they hadn't priced. Budget for who you are on your worst travel day, not your best one.</p>
          <p>The second most common mistake is not separating per-day spend from total trip cost. A six-week trip at $60/day is still $2,520. Add flights, travel insurance, pre-trip gear, and one visa — and the actual outlay is closer to $4,800. Do both calculations. Always.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">$2,100</div><div className="l">Average 14-day trip<br />underestimate</div></div>
        <div className="item"><div className="n">73%</div><div className="l">Travelers who exceed<br />their first-draft budget</div></div>
        <div className="item"><div className="n">1.4x</div><div className="l">Actual vs. planned spend<br />median multiplier</div></div>
        <div className="item"><div className="n">8.7</div><div className="l">Reader rating,<br />budget essay set</div></div>
      </div>
    </div>
  </section>
);

// ─── Daily-Spend Index (replaces Roundtrips section, same dark structure) ───
const BuilderPanel = ({ p }) => (
  <div className="rt-panel">
    <div className="body">
      <span className="pill">{p.tag}</span>
      <h4>{p.title}</h4>
      <p>{p.desc}</p>
    </div>
    <div style={{
      marginTop: "auto",
      paddingTop: 18,
      borderTop: "1px solid rgba(241,235,224,0.1)",
      display: "flex",
      alignItems: "baseline",
      gap: 12,
    }}>
      <span style={{
        fontFamily: "var(--serif)",
        fontStyle: "italic",
        fontSize: 44,
        color: "#e07a3c",
        lineHeight: 1,
        letterSpacing: "-0.02em",
      }}>{p.stat}</span>
      <span style={{
        fontFamily: "var(--mono)",
        fontSize: 10,
        letterSpacing: "0.16em",
        textTransform: "uppercase",
        color: "rgba(241,235,224,0.6)",
        maxWidth: 160,
        lineHeight: 1.4,
      }}>{p.statLabel}</span>
    </div>
  </div>
);

const DailySpendSection = () => (
  <section className="roundtrips-section" id="index">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">THE DAILY-SPEND INDEX</span></div>
          <h2>Where the money<em>actually goes.</em></h2>
        </div>
        <p>Five categories account for 100% of daily spend. Most people track two of them. Here's the real breakdown — by category, by percentage, and by what happens when you stop watching one.</p>
      </div>

      <div className="rt-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        {BUILDER_PANELS.map((p, i) => (
          <BuilderPanel key={i} p={p} />
        ))}
      </div>

      <div className="rt-footer">
        <div className="note">
          The categories don't change by destination. The <em>percentages</em> do — dramatically.
          A street-food city and a restaurant city look nothing alike when you run the numbers.
        </div>
        <div className="actions">
          <a href="/en/budget/" className="btn-rt">Explore the Budget lane</a>
          <a href="/en/plan/" className="link-rt">Back to Plan</a>
        </div>
      </div>
    </div>
  </section>
);

// ─── Decide ──────────────────────────────────────────────────────────────────
const tierResult = (picks) => {
  const [accom, food, length, occasion] = picks;
  if (occasion === 3) return BUDGET_LANES.find((l) => l.id === "luxury");
  if (accom === 0 && food === 0) return BUDGET_LANES.find((l) => l.id === "under-50");
  if (accom >= 2 || food >= 2) return BUDGET_LANES.find((l) => l.id === "100-200");
  if (accom === 1 && food === 1) return BUDGET_LANES.find((l) => l.id === "50-100");
  if (occasion === 2) return BUDGET_LANES.find((l) => l.id === "100-200");
  return BUDGET_LANES.find((l) => l.id === "50-100");
};

const BudgetDecide = () => {
  const [picks, setPicks] = React.useState([1, 1, 1, 1]);
  const result = React.useMemo(() => tierResult(picks), [picks]);

  return (
    <section className="types-decide">
      <div className="container">
        <div className="types-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Not sure? <em>Pick four answers.</em></h2>
            <p>Four small questions. We'll point you at the right tier. Useful when you're honest with yourself about the answers.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR TIER</div>
            <h3>Four answers,<em>one number.</em></h3>
            <p>Click an option in each row. The recommendation updates as you go. No submit button — the result is just a starting point.</p>
            <div className="result">
              <div className="r-lbl">RECOMMENDATION</div>
              <div className="r-type">{result.title}{result.titleEm && <em> {result.titleEm}</em>}</div>
              <div className="r-blurb">{result.desc}</div>
            </div>
          </div>
          <div className="decide-rhs">
            {BUDGET_DECIDE.map((q, qi) => (
              <div key={qi} className="q-block">
                <div className="q-num">Q{String(qi + 1).padStart(2, "0")}</div>
                <div className="q-label">{q.q}</div>
                <div className="q-opts">
                  {q.opts.map((o, oi) => (
                    <button
                      key={oi}
                      className={`q-opt ${picks[qi] === oi ? "sel" : ""}`}
                      onClick={() => {
                        const next = [...picks];
                        next[qi] = oi;
                        setPicks(next);
                      }}
                    >{o}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Reading ─────────────────────────────────────────────────────────────────
const BudgetReading = () => (
  <section className="types-reading" id="reading">
    <div className="container">
      <div className="types-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The reading list <em>for the money desk.</em></h2>
          <p>Six essays from the budget and finance section. Each one is a method, not a manifesto.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {BUDGET_READING.map((r, i) => (
          <a key={i} href="/journal/" className="reading-row-t">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="title">{r.title}{r.em && <em> {r.em}</em>}</div>
            <div className="tag">{r.tag}</div>
            <div className="duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ─── FAQ ─────────────────────────────────────────────────────────────────────
const BudgetFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · BUT QUIETLY · ASKED</div>
            <h3>What people<em>actually ask</em><em>about money.</em></h3>
            <p>Reader letters from the budget desk, lightly edited. The ones that came back more than once.</p>
          </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>
    </section>
  );
};

// ─── CTA ─────────────────────────────────────────────────────────────────────
const BudgetCTA = () => (
  <section className="types-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1533105079780-92b9be482077?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">PICK A TIER · BUILD THE WEEK</div>
      <h2>Set the number.<em>Plan everything else.</em></h2>
      <p>The tier is the frame. Everything else — where you sleep, what you eat, which train you take — follows from it. Choose yours and the rest gets easier.</p>
      <div className="actions">
        <a href="/en/plan/" className="btn-p">Back to Plan</a>
        <a href="/en/budget/" className="btn-g">Explore the Budget lane</a>
      </div>
    </div>
  </section>
);

// ─── Root ─────────────────────────────────────────────────────────────────────
const BudgetApp = () => (
  <>
    <BudgetHero />
    <BudgetLanes />
    <BudgetEssay />
    <DailySpendSection />
    <BudgetDecide />
    <BudgetReading />
    <BudgetFAQ />
    <BudgetCTA />
    <Footer />
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<BudgetApp />);
