/* eslint-disable */
const SectionHead = ({ id, num, label, title, note }) => (
  <div className="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 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={L2_PAGE.parentPath}>{L2_PAGE.laneTitle}</a>
        <span className="sep">/</span>
        <span className="here">{L2_PAGE.title}</span>
      </div>
      <div className="types-mast dossier-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">{L2_PAGE.desk} - CANONICAL DOSSIER</span>
          </div>
          <h1>{L2_PAGE.title}<em>{L2_PAGE.subtitle}</em></h1>
        </div>
        <div className="dossier-hero-file">
          <div className="stamp">CONTROLLED</div>
          <p>{L2_PAGE.remember}</p>
          <div className="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 dossier-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">FIELD DESK - SPRING 2026 - ROUTE READY</div>
    <div className="hero-credit">{L2_PAGE.photoCredit}</div>
  </section>
);

const Intake = () => (
  <section className="dossier-intake" id="intake">
    <div className="container">
      <SectionHead num={1} label="Case intake" title="Start with the desk sequence." note={L2_PAGE.theme} />
      <div className="case-tabs">
        {L2_PAGE.caseTabs.map((tab, i) => (
          <article key={tab[0]} className={i === 0 ? "active" : ""}>
            <span>{String(i + 1).padStart(2, "0")}</span>
            <h3>{tab[0]}</h3>
            <p>{tab[1]}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Packet = () => (
  <section className="dossier-packet" id="packet">
    <div className="container">
      <SectionHead num={2} label="Packet build" title="The documents that earn their place." note="File folder" />
      <div className="packet-grid">
        {L2_PAGE.packet.map((item) => (
          <article key={item[0]} className="packet-card">
            <div className="tag">{item[2]}</div>
            <h3>{item[0]}</h3>
            <p>{item[1]}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Proof = () => (
  <section className="dossier-proof" id="proof">
    <div className="container">
      <SectionHead num={3} label="Proof table" title="What each desk is really checking." note="Evidence" />
      <div className="proof-table" role="table">
        <div className="row head" role="row"><span>Desk</span><span>Show</span><span>Proves</span><span>Failure mode</span></div>
        {L2_PAGE.proofTable.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 Timing = () => (
  <section className="dossier-timing" id="timing">
    <div className="container">
      <SectionHead num={4} label="Timing strip" title="Move the work earlier than the anxiety." note="Checklist" />
      <div className="timeline-strip">
        {L2_PAGE.timeline.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 Desk = () => (
  <section className="dossier-desk" id="desk">
    <div className="container desk-grid">
      <div>
        <SectionHead num={5} label="At the desk" title="Show the answer, not the whole archive." note="Desk script" />
        <p className="desk-copy">The desk version should be small enough to use under pressure. Lead with the document that answers the question, keep the rest in order, and avoid turning a simple verification into a scattered search.</p>
      </div>
      <ol className="desk-script">
        {L2_PAGE.deskScript.map((line) => <li key={line}>{line}</li>)}
      </ol>
    </div>
  </section>
);

const Scenarios = () => (
  <section className="dossier-scenarios" id="scenarios">
    <div className="container">
      <SectionHead num={6} label="Scenario drawers" title="When the clean plan meets a real trip." note="Open file" />
      <div className="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 Errors = () => (
  <section className="dossier-errors" id="errors">
    <div className="container error-grid">
      <div>
        <SectionHead num={7} label="Mistakes" title="The boring failures are the expensive ones." note="Red stamp" />
        <ul className="mistake-list">
          {L2_PAGE.mistakes.map((m) => <li key={m}>{m}</li>)}
        </ul>
      </div>
      <div className="emergency-card">
        <div className="stamp">IF IT FAILS</div>
        <h3>Emergency flow</h3>
        <ol>
          {L2_PAGE.emergency.map((e) => <li key={e}>{e}</li>)}
        </ol>
      </div>
    </div>
  </section>
);

const Sources = () => (
  <section className="dossier-sources" id="sources">
    <div className="container">
      <SectionHead num={8} label="Source box" title="Use editorial advice to find the real rule." note="Official links" />
      <div className="source-grid">
        {L2_PAGE.sources.map((source) => (
          <a href={source.href} key={source.href}>
            <span>OFFICIAL</span>
            <strong>{source.label}</strong>
            <em>{source.href.replace("https://", "")}</em>
          </a>
        ))}
      </div>
      <div className="queue-box">
        <div>
          <p>Future breakout queue</p>
          <h3>Search-driven leaves stay queued under the canonical dossier.</h3>
        </div>
        <div className="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 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 control-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 dossier-cta">
    <div className="bg" style={{ backgroundImage: `url(${L2_PAGE.image})` }}></div>
    <div className="inner">
      <div className="kicker">DOCUMENT CONTROL</div>
      <h2>Keep the file small. Keep the proof strong.</h2>
      <p>The point is not to read every future leaf. The point is to carry the right packet when the desk asks the one question that matters.</p>
      <div className="actions"><a href={L2_PAGE.parentPath} className="btn-p">Back to Visas & Docs</a></div>
    </div>
  </section>
);

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

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