/* eslint-disable */
const PageHero = () => (
  <section className="types-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={L2_PAGE.parentPath}>{L2_PAGE.laneTitle}</a>
        <span className="sep">/</span>
        <span className="here">{L2_PAGE.title}</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">{L2_PAGE.desk} - L2 FIELD FILE</span>
          </div>
          <h1>{L2_PAGE.title}<em>{L2_PAGE.subtitle}</em></h1>
        </div>
        <p className="lede">
          A focused desk for the money decisions travelers usually scatter across too many tabs. {L2_PAGE.cards.length} canonical case files, each deep enough to carry the old search leaves.
        </p>
      </div>
      <div className="types-rail">
        {L2_PAGE.cards.map(c => (
          <a key={c.id} href={c.href}>
            <span className="n">{c.num}</span>
            <span className="t">{c.title}</span>
          </a>
        ))}
      </div>
    </div>
    <div className="hero-coord">FIELD DESK - SPRING 2026 - ROUTE READY</div>
    <div className="hero-credit">PHOTO - HOWTO TRAVEL EDITION</div>
  </section>
);

const PageCard = ({ card }) => (
  <a href={card.href} className={`lane ${card.size}`}>
    <div className="img" style={{ backgroundImage: `url(${card.img})` }}></div>
    <div className="scrim"></div>
    <span className="corner-num">{card.num}</span>
    <div className="body">
      <div className="topic"><span className="dot"></span>{card.topic}</div>
      <h3>{card.title}</h3>
      <p className="desc">{card.desc}</p>
      <div className="meta">
        <span>{card.count}</span>
        <span>-</span>
        <span>{card.read}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

const PageCards = () => (
  <section className="types-lanes" id="cards">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The case files of <em>{L2_PAGE.title.toLowerCase()}.</em></h2>
          <p>The thin leaves are now queued inside fewer, stronger canonical pages.</p>
        </div>
        <div className="right">{L2_PAGE.cards.length} case files <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {L2_PAGE.cards.map(c => <PageCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const PageEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>from the desk.</em></h2>
          <p>The editorial rule: one money job per page, not one page per tiny line item.</p>
        </div>
        <div className="right">{L2_PAGE.theme}</div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"{L2_PAGE.title} is not a pile of money tips. It is a set of controls for the decisions that can actually change the trip."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: "url(https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80)" }}></div>
            <div className="who">
              <div className="name">Iris Mendoza</div>
              <div className="role">Senior Editor - Budget Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>{L2_PAGE.subtitle} The new structure keeps the lane intact while consolidating the small topics into complete control desks.</p>
          <p>Each case file has a ledger, proof table, scenario drawers, mistakes, rescue flow, source box, and a future breakout queue. That gives search room to grow later without making today's reader bounce across thin pages.</p>
          <p>The visual system stays the same: treasury desk, receipts, ledger rows, mono numbers, and restrained gold. The depth is editorial, not decorative.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">{L2_PAGE.cards.length}</div><div className="l">Canonical<br />case files</div></div>
        <div className="item"><div className="n">01</div><div className="l">Budget visual<br />system</div></div>
        <div className="item"><div className="n">EN</div><div className="l">English static<br />route</div></div>
        <div className="item"><div className="n">4x</div><div className="l">Structured data<br />blocks</div></div>
      </div>
    </div>
  </section>
);

const PageFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-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 consolidated Budget desk.</p>
          </div>
          <div className="faq-list">
            {L2_PAGE.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>
  );
};

const PageCTA = () => (
  <section className="types-cta">
    <div className="container">
      <div className="cta-box">
        <div>
          <div className="lbl">NEXT LAYER</div>
          <h2>Open the case file that matches the money job.</h2>
          <p>Then move sideways only when the trip needs it. The old leaves are still queued, but the reader gets the whole control system first.</p>
        </div>
        <a href={L2_PAGE.parentPath} className="btn-g">Back to {L2_PAGE.laneTitle}</a>
      </div>
    </div>
  </section>
);

const App = () => (
  <div data-screen-label={`${L2_PAGE.laneTitle} - ${L2_PAGE.title}`}>
    <PageHero />
    <PageCards />
    <PageEssay />
    <PageFAQ />
    <PageCTA />
    <Footer />
  </div>
);

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