/* eslint-disable */
const SectionHead = ({ id, num, label, title, note }) => (
  <div className="budget-dossier-section-head" id={id}>
    <div className="num">{String(num).padStart(2, "0")}</div>
    <div>
      <p>{label}</p>
      <h2>{title}</h2>
    </div>
    <span>{note}</span>
  </div>
);

const PageHero = () => (
  <section className="types-hero budget-dossier-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(${L2_PAGE.image})` }}></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/budget/">Budget</a>
        <span className="sep">/</span>
        <a href={L2_PAGE.parentPath}>{L2_PAGE.parentTitle}</a>
        <span className="sep">/</span>
        <span className="here">{L2_PAGE.title}</span>
      </div>
      <div className="types-mast budget-dossier-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">{L2_PAGE.desk} - CANONICAL CASE FILE</span>
          </div>
          <h1>{L2_PAGE.title}<em>{L2_PAGE.subtitle}</em></h1>
        </div>
        <div className="budget-file">
          <div className="stamp">RECONCILED</div>
          <p>{L2_PAGE.remember}</p>
          <div className="budget-file-lines">
            {L2_PAGE.stats.map((s) => (
              <div key={s[1]}><strong>{s[0]}</strong><span>{s[1]}</span></div>
            ))}
          </div>
        </div>
      </div>
      <div className="types-rail budget-jump">
        {L2_PAGE.sections.map((s, i) => (
          <a key={s[0]} href={`#${s[0]}`}>
            <span className="n">{String(i + 1).padStart(2, "0")}</span>
            <span className="t">{s[1]}</span>
          </a>
        ))}
      </div>
    </div>
    <div className="hero-coord">TREASURY DESK - SPRING 2026 - ROUTE READY</div>
    <div className="hero-credit">{L2_PAGE.photoCredit}</div>
  </section>
);

const Intake = () => (
  <section className="budget-dossier-intake" id="intake">
    <div className="container">
      <SectionHead num={1} label="Case intake" title="This page replaces the small leaves that were one decision." note={L2_PAGE.parentTitle} />
      <div className="budget-intake-grid">
        <article>
          <span>CANONICAL</span>
          <h3>{L2_PAGE.title}</h3>
          <p>{L2_PAGE.meta}</p>
        </article>
        <article>
          <span>OLD LEAVES</span>
          <div className="leaf-stack">{L2_PAGE.oldLeaves.map((leaf) => <em key={leaf}>{leaf}</em>)}</div>
        </article>
      </div>
    </div>
  </section>
);

const Ledger = () => (
  <section className="budget-dossier-ledger" id="ledger">
    <div className="container">
      <SectionHead num={2} label="Control ledger" title="The rows that make the money visible." note="Ledger" />
      <div className="budget-ledger-table" role="table">
        <div className="row head" role="row"><span>Line</span><span>Track</span><span>Proves</span><span>Failure mode</span></div>
        {L2_PAGE.rows.map((row) => (
          <div className="row" role="row" key={row[0]}>
            {row.map((cell) => <span role="cell" key={cell}>{cell}</span>)}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Packet = () => (
  <section className="budget-dossier-packet" id="packet">
    <div className="container">
      <SectionHead num={3} label="Packet build" title="The checks that earn a place in the file." note="Desk packet" />
      <div className="budget-packet-grid">
        {L2_PAGE.packet.map((item) => (
          <article key={item[0]} className="budget-packet-card">
            <div className="tag">{item[2]}</div>
            <h3>{item[0]}</h3>
            <p>{item[1]}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Proof = () => (
  <section className="budget-dossier-proof" id="proof">
    <div className="container">
      <SectionHead num={4} label="Proof table" title="What the number has to prove." note="Evidence" />
      <div className="budget-proof-board">
        {L2_PAGE.proofTable.map((row) => (
          <article key={row[0]}>
            <span>{row[0]}</span>
            <h3>{row[1]}</h3>
            <p>{row[2]}</p>
            <em>Avoid: {row[3]}</em>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Timing = () => (
  <section className="budget-dossier-timing" id="timing">
    <div className="container">
      <SectionHead num={5} label="Timing strip" title="Move the money work earlier." note="Calendar" />
      <div className="budget-timeline">
        {L2_PAGE.timing.map((step, i) => (
          <article key={step[0]}>
            <span>{String(i + 1).padStart(2, "0")}</span>
            <h3>{step[0]}</h3>
            <p>{step[1]}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Rules = () => (
  <section className="budget-dossier-rules" id="rules">
    <div className="container">
      <SectionHead num={6} label="Decision rules" title="The rules that keep the file human." note="Desk note" />
      <div className="budget-rule-grid">
        {L2_PAGE.rules.map((rule) => (
          <article key={rule[0]}>
            <h3>{rule[0]}</h3>
            <p>{rule[1]}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Scenarios = () => (
  <section className="budget-dossier-scenarios" id="scenarios">
    <div className="container">
      <SectionHead num={7} label="Scenario drawers" title="When the clean plan meets a real trip." note="Open file" />
      <div className="budget-scenario-list">
        {L2_PAGE.scenarios.map((item, i) => (
          <details key={item[0]} defaultOpen={i === 0}>
            <summary><span>{String(i + 1).padStart(2, "0")}</span>{item[0]}</summary>
            <p>{item[1]}</p>
          </details>
        ))}
      </div>
    </div>
  </section>
);

const Mistakes = () => (
  <section className="budget-dossier-mistakes" id="mistakes">
    <div className="container budget-error-grid">
      <div>
        <SectionHead num={8} label="Mistakes" title="The boring leaks are the expensive ones." note="Audit" />
        <ul className="budget-mistake-list">
          {L2_PAGE.mistakes.map((m) => <li key={m}>{m}</li>)}
        </ul>
      </div>
      <div className="budget-rescue-card" id="rescue">
        <div className="stamp">IF IT FAILS</div>
        <h3>Rescue flow</h3>
        <ol>
          {L2_PAGE.emergency.map((e) => <li key={e}>{e}</li>)}
        </ol>
      </div>
    </div>
  </section>
);

const Sources = () => (
  <section className="budget-dossier-sources" id="sources">
    <div className="container">
      <SectionHead num={10} label="Source box" title="Verify before money moves." note="Links" />
      <div className="budget-source-grid">
        {L2_PAGE.sources.map((source) => (
          <a href={source.href} key={source.href}>
            <span>SOURCE</span>
            <strong>{source.label}</strong>
            <em>{source.href.replace("https://", "")}</em>
          </a>
        ))}
      </div>
      <div className="budget-queue-box">
        <div>
          <p>Future breakout queue</p>
          <h3>The old leaves stay queued as search-driven breakouts.</h3>
        </div>
        <div className="budget-queue-links">
          {L2_PAGE.queue.map((q) => <span key={q.title}>{q.title}</span>)}
        </div>
      </div>
    </div>
  </section>
);

const PageFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq budget-dossier-faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY - BUT QUIETLY - ASKED</div>
            <h3>What travelers <em>actually ask.</em></h3>
            <p>Short answers for the treasury-desk version of the page.</p>
          </div>
          <div className="faq-list">
            {L2_PAGE.faqs.map((f, i) => (
              <div key={f.q} 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>
  );
};

const PageCTA = () => (
  <section className="types-cta budget-dossier-cta">
    <div className="container">
      <div className="cta-box">
        <div>
          <div className="lbl">TREASURY CONTROL</div>
          <h2>Keep the number honest. Keep the trip generous.</h2>
          <p>The point is not to spend less everywhere. The point is to know what deserves money, what needs proof, and what should stop leaking.</p>
        </div>
        <a href={L2_PAGE.parentPath} className="btn-g">Back to {L2_PAGE.parentTitle}</a>
      </div>
    </div>
  </section>
);

const App = () => (
  <div data-screen-label={`${L2_PAGE.laneTitle} - ${L2_PAGE.title}`}>
    <PageHero />
    <Intake />
    <Ledger />
    <Packet />
    <Proof />
    <Timing />
    <Rules />
    <Scenarios />
    <Mistakes />
    <Sources />
    <PageFAQ />
    <PageCTA />
    <Footer />
  </div>
);

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