// Visas & Docs — Chapter III (Entry) + IV (Stack) + V (Wrong) + CTA + Reading + FAQ
const { useState: useVState } = React;

const VisasEntry = () => {
  const lane = VISAS_LANES[2];
  return (
    <section className="visas-entry" id="entry">
      <div className="container">
        <div className="entry-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc}</p>
        </div>
        <div className="entry-grid">
          <div className="entry-image" style={{ backgroundImage: `url(${lane.img})` }}>
            <div className="ei-coord">{lane.coord}</div>
          </div>
          <div className="entry-cards">
            {VISAS_ENTRY_REQS.map((r) => (
              <article key={r.mark} className="entry-card">
                <div className="ec-mark">{r.mark}</div>
                <h4 className="serif">{r.title}</h4>
                <p>{r.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const VisasStack = () => {
  const lane = VISAS_LANES[3];
  return (
    <section className="visas-stack" id="stack">
      <div className="container">
        <div className="stack-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc}</p>
        </div>
        <div className="stack-list">
          {VISAS_DOCSTACK.map((d) => (
            <article key={d.tag} className="stack-row">
              <div className="sr-tag">{d.tag}</div>
              <div className="sr-body">
                <h4 className="serif">{d.item}</h4>
                <p>{d.reason}</p>
              </div>
              <div className="sr-stamp" aria-hidden="true">✓</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const VisasWrong = () => {
  const lane = VISAS_LANES[4];
  return (
    <section className="visas-wrong" id="wrong">
      <div className="bg-overlay"></div>
      <div className="container">
        <div className="wrong-grid">
          <div className="wrong-intro">
            <div className="chapter-tag light">
              <span className="num">{lane.num}</span>
              <span className="label">{lane.chapter}</span>
            </div>
            <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
            <p className="dek">{lane.desc}</p>
            <blockquote className="pull-quote">
              <span className="quote-mark">&#8220;</span>
              <p>The trip you remember most is the one where this chapter mattered. Save the embassy phone number before you leave home — searching for it on a dead-battery phone in a foreign airport is the wrong moment to learn it.</p>
              <cite>— Iris Mendoza, Paperwork Desk</cite>
            </blockquote>
          </div>
          <div className="wrong-list">
            <article className="wrong-card">
              <div className="wc-mark">DENIED ENTRY</div>
              <h3 className="serif">When the officer says no.</h3>
              <p>You have the right to know the reason — usually one of incomplete onward proof, suspicion of intent to overstay, or a passport stamp from a sensitive country. The airline must fly you back at their cost; some countries hold you in a transit area until the next flight. Don't argue at the desk; ask for the supervisor calmly. Take notes. The denial goes on file and may affect future visas.</p>
            </article>
            <article className="wrong-card">
              <div className="wc-mark">LOST OR STOLEN</div>
              <h3 className="serif">When the passport is gone.</h3>
              <p>File a police report within 24 hours — most embassies require the report number. Contact your nearest embassy or consulate during business hours. Emergency travel documents (single-trip replacement) issue in 24–72 hours, $130 in most cases. The scan you emailed yourself before leaving cuts hours off the process. STEP enrollment lets the embassy find you faster.</p>
            </article>
            <article className="wrong-card">
              <div className="wc-mark">EMERGENCY CONTACTS</div>
              <h3 className="serif">The numbers that matter.</h3>
              <p>Embassy 24-hour line, hotel front desk, family member outside the destination, travel insurance emergency assistance, local emergency services (112 across most of Europe, 911 North America, varies elsewhere). Print this list. Carry one copy on your body, one in checked bag. The phone you rely on dies; the printed list does not.</p>
            </article>
            <article className="wrong-card">
              <div className="wc-mark">VISA OVERSTAY</div>
              <h3 className="serif">When you stayed too long.</h3>
              <p>Even one day over triggers fines, future-entry bans, and immigration database flags that linger for years. Most countries impose a graduated penalty — small fines for short overstays, multi-year bans for longer ones. The fix is exiting at the formal port (not by land where possible), paying any fine in local currency, and keeping the receipt. Some travelers get a waiver letter on the way out — ask.</p>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
};

const VisasCTA = () => (
  <section className="visas-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="lhs">
        <div className="kicker">ROUNDTRIPS · CLEARED FOR ENTRY</div>
        <h2 className="serif">Document stack. <em>One tab.</em></h2>
        <p>RoundTrips is the workspace we built for ourselves: passport-validity checks tied to your itinerary, visa requirement lookups by destination, document-stack checklists, and embassy contact files saved alongside the trip. One tab. One trip. One cleared border.</p>
        <div className="cta-actions">
          <a href="https://roundtrips.org" className="btn-primary">Open RoundTrips →</a>
          <a href="/journal/apply-tourist-visa" className="btn-ghost">Read the visa playbook</a>
        </div>
      </div>
    </div>
    <div className="coord">VISAS — PUBLISHED 25.04.2026</div>
    <div className="coord right">FIELD DESK Nº 091</div>
  </section>
);

const VisasReading = () => {
  const [open, setOpen] = useVState(0);
  return (
    <section className="visas-reading" id="reading">
      <div className="container">
        <div className="reading-grid">
          <div className="read-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VI · THE READING LIST</div>
              <h3 className="serif">Four pieces, <em>before you reach the desk.</em></h3>
            </div>
            <div className="card-rows">
              {VISAS_READING.map((r) => (
                <a key={r.slug} href={`/journal/${r.slug}`} className="reading-card">
                  <div className="rc-img" style={{ backgroundImage: `url(${r.img})` }}></div>
                  <div className="rc-body">
                    <div className="rc-meta">
                      <span className="tag">{r.tag}</span>
                      <span className="dur">{r.duration}</span>
                    </div>
                    <h4>{r.title}</h4>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <div className="faq-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VII · QUESTIONS WE GET A LOT</div>
              <h3 className="serif">The questions, <em>answered.</em></h3>
            </div>
            <div className="faq-list">
              {VISAS_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>
      </div>
    </section>
  );
};

Object.assign(window, { VisasEntry, VisasStack, VisasWrong, VisasCTA, VisasReading });