/* 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 part of the trip people usually leave too late. Ten chapters, one decision path, and the links that become the next layer of the guide.
        </p>
      </div>
      <div className="types-rail">
        {L2_PAGE.cards.slice(0, 10).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 ten <em>chapters</em> of {L2_PAGE.title.toLowerCase()}.</h2>
          <p>Each card is a future article slot. The route is live now; the deeper guide can fill in without changing the structure.</p>
        </div>
        <div className="right">All chapters <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: do the boring thing early so the trip can feel easy later.</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 vibe. It is a sequence. Miss the sequence and the trip starts charging interest."</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 · {L2_PAGE.laneTitle} Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>{L2_PAGE.subtitle} The job of this page is to turn vague trip anxiety into a visible sequence. If a decision has a deadline, a fee, a document, a local rule, or a recovery path, it gets pulled out of the mental pile and given a route.</p>
          <p>The best travel systems are not complicated. They are repeatable. Check the source. Save the document. Print the proof. Keep a copy somewhere else. Know the first phone call. Then stop thinking about it until the moment you need it.</p>
          <p>The next layer is intentionally modular: every chapter card points to a future article route. That lets the desk grow article by article without rebuilding the hub again.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">10</div><div className="l">Article paths<br />reserved</div></div>
        <div className="item"><div className="n">01</div><div className="l">Desk standard<br />held</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>Six answers for the practical decisions behind this 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>Start with the chapter that can block the trip.</h2>
          <p>Then move sideways. The point is not to read everything. The point is to remove the one unknown that would cost you time at the worst possible moment.</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 />);