/* eslint-disable */
// Passports & Documents — Plan > First Trip Abroad > Passports & Docs.
// Mirrors the three-day template's editorial vocabulary
// (cream/teal/tan, Playfair + DM Sans/Mono, numbered sections, hero masthead).

const { useState: usePDState } = React;

/* ---------- HERO ---------- */
const PDHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1569154941061-e231b4725ef1?w=2400&q=85)` }}
    ></div>
    <div className="hero-scrim"></div>
    <Nav />

    <div className="container">
      <div className="solo-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/plan/">Plan</a>
        <span className="sep">/</span>
        <a href="/en/plan/first-trip-abroad/">First Trip Abroad</a>
        <span className="sep">/</span>
        <span className="here">Passports &amp; Docs</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">28 GUIDES · {PD_META.newThisSeason} NEW THIS SEASON · DESK Nº 41</span>
          <h1>
            Passports<em>&amp; Docs.</em>
          </h1>
          <p className="lede">
            The whole document side of getting on a plane the first time. <em>Apply, renew, expedite, replace.</em> Six-months-past-return validity, $165 standard, $60 to expedite, fourteen days to the regional agency. What to file, what to bring, and what to do if it goes wrong somewhere you don't speak the language.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>{PD_META.count}</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{PD_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Standard fee</span>
              <span className="v">$165</span>
            </div>
            <div className="row">
              <span className="k">Most-read age</span>
              <span className="v">{PD_META.topAge}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{PD_META.updated}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="solo-toc">
        <span className="lbl">In this issue</span>
        <a href="#places"><span className="n">I</span>Twelve topics</a>
        <span className="dot">·</span>
        <a href="#field"><span className="n">II</span>Field notes</a>
        <span className="dot">·</span>
        <a href="#itins"><span className="n">III</span>Eight situations</a>
        <span className="dot">·</span>
        <a href="#bucket"><span className="n">IV</span>The matrix</a>
        <span className="dot">·</span>
        <a href="#reading"><span className="n">V</span>Reading list</a>
        <span className="dot">·</span>
        <a href="#voices"><span className="n">VI</span>The desk</a>
        <span className="dot">·</span>
        <a href="#practical"><span className="n">VII</span>The brief</a>
        <span className="dot">·</span>
        <a href="#faq"><span className="n">VIII</span>FAQ</a>
      </div>
    </div>

    <div className="hero-coord">FORM Nº 41 · DS-11 / DS-82 · IN PERSON & BY MAIL</div>
    <div className="hero-credit">PHOTO — VISAS &amp; DOCS DESK · IRIS</div>
  </section>
);

/* ---------- I · TWELVE TOPICS ---------- */
const PDPlaces = () => {
  const [region, setRegion] = usePDState("All");
  const regions = ["All", "Apply", "Renew", "Speed", "Edge cases"];
  const filtered = PD_PLACES.filter(p => region === "All" || p.region === region);

  return (
    <section className="solo-places" id="places">
      <div className="container">
        <div className="solo-section-head">
          <div className="num">I</div>
          <div className="titles">
            <h2>Twelve passport topics,<em>start to finish.</em></h2>
            <p>The order matters. Apply first, renew second, expedite third, then the rare-but-vital edge cases — extra pages, second books, lost-abroad, dual citizenship. Each card opens a hand-built leaf walked by the desk.</p>
          </div>
          <div className="filter-pills">
            {regions.map(r => (
              <button
                key={r}
                className={`f-pill ${region === r ? "on" : ""}`}
                onClick={() => setRegion(r)}
              >{r}</button>
            ))}
          </div>
        </div>

        <div className="places-grid">
          {filtered.map((p, i) => (
            <a key={p.id} href={p.href} className={`place-card ${i === 0 ? "feature" : ""}`}>
              <div className="img" style={{ backgroundImage: `url(${p.img})` }}></div>
              <div className="scrim"></div>
              <span className="rank">No. {String(p.rank).padStart(2, "0")}</span>
              {p.tag && <span className="tag">{p.tag}</span>}
              <div className="body">
                <div className="loc">
                  <span className="city">{p.city}</span>
                  <span className="country">{p.country}</span>
                </div>
                <p className="why">{p.why}</p>
                <div className="meta">
                  <span><em>{p.nights}</em></span>
                  <span className="sep">·</span>
                  <span>{p.budget}</span>
                  <span className="sep">·</span>
                  <span>{p.season}</span>
                </div>
                <div className="best-for">
                  {p.best.map(b => <span key={b}>{b}</span>)}
                </div>
                <div className="coord">{p.coord}</div>
              </div>
            </a>
          ))}
        </div>
        <div className="places-foot">
          <span className="ct">Showing {filtered.length} of {PD_PLACES.length}</span>
          <a href="/en/visas-docs/">All visas &amp; docs guides <Icon name="arrow" size={12} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · FIELD NOTES (essay quote, dark band) ---------- */
const PDField = () => (
  <section className="solo-practical" id="field" style={{ paddingTop: 110, paddingBottom: 110 }}>
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes.<em>The quietest part of the trip is the document side.</em></h2>
          <p>The opening pages of the desk's house essay on first-time international documents — what the passport actually is, what it is not, and why the fix for nearly every problem is starting earlier than you think you need to.</p>
        </div>
        <div className="right">Read the full essay <Icon name="arrow" size={12} /></div>
      </div>

      <blockquote style={{
        fontFamily: "var(--serif)",
        fontSize: "clamp(22px, 2.4vw, 30px)",
        lineHeight: 1.45,
        color: "var(--cream)",
        fontStyle: "italic",
        maxWidth: 920,
        borderLeft: "1px solid var(--tan)",
        padding: "8px 0 8px 32px",
        marginBottom: 28,
      }}>
        "The passport is not a souvenir of the trip. It is the trip's permission slip, and it is one of the few parts of travel that does not negotiate. The airline does not negotiate, the customs officer does not negotiate, the issuing office does not negotiate. The fix for almost every passport problem we see at the desk is the same dull thing: do it earlier than you think you need to. Eight weeks before the trip, not three. The day you start thinking, not the day you book. The book is patient. The trip is not."
      </blockquote>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
        marginBottom: 18,
      }}>
        Getting your first US passport takes six to eight weeks and costs $165 total. You apply in person at a post office or passport acceptance facility with a certified birth certificate, valid photo ID, two passport-size photos, and Form DS-11 — unsigned until the agent witnesses it. Pay $60 to expedite for two-to-three-week processing. The State Department will mail the passport book separately from your returned ID. Plan for the gap.
      </p>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
      }}>
        The validity rule that catches first-time travelers most often is not on the passport itself. Most countries require the passport to be valid for six months past your return date — the US won't stop you from leaving on a passport that expires next month, but the airline at the gate will, and the destination country will. Look at the expiration date the day you book the flight, not the week you fly. The fix, when you catch it early, is simply a renewal. The fix when you catch it at the gate is rebooking, the next flight, and the rest of the trip already paid for.
      </p>
      <p style={{
        marginTop: 32,
        fontFamily: "var(--mono)",
        fontSize: 11,
        letterSpacing: "0.18em",
        color: "var(--tan)",
        textTransform: "uppercase",
      }}>— Iris Mendoza, Visas &amp; Docs Desk · House essay Nº 41</p>
    </div>
  </section>
);

/* ---------- III · EIGHT SITUATIONS ---------- */
const PDItins = () => (
  <section className="solo-itins" id="itins">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>Eight document situations,<em>by character.</em></h2>
          <p>Same passport, eight different shapes of trip. Africa-bound validity, married name change, couples booking together, business across multiple countries, apostilles, customs fast lanes, renewing while abroad. Each is a real, hand-built guide.</p>
        </div>
        <div className="right">All passport leaves <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {PD_ITINS.map(it => (
          <a key={it.ref} href={it.href} className="itin-card">
            <div className="pic" style={{ backgroundImage: `url(${it.img})` }}>
              <span className="ref-pill">{it.ref}</span>
              <span className="day-pill"><em>{it.days}</em></span>
            </div>
            <div className="body">
              <h4>{it.title}<em> {it.em}</em></h4>
              <div className="tags">
                {it.tags.map(t => <span key={t}>{t}</span>)}
              </div>
              <div className="foot">
                <span className="by">By {it.author}</span>
                <span className="price">{it.price}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- IV · MATRIX (table) ---------- */
const PDByStyle = () => (
  <section className="solo-length" id="bucket">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The passport<em>matrix.</em></h2>
          <p>Six common situations, six different decision rules. Pick the row that matches the trip you have, not the trip you wish you had time to plan.</p>
        </div>
        <div className="right">Decision tree <Icon name="arrow" size={12} /></div>
      </div>

      <div className="length-table">
        <div className="row head">
          <div>Situation</div>
          <div className="d">Time</div>
          <div className="ct">Guides</div>
          <div className="ex">What it actually means</div>
          <div className="pr">Cost</div>
          <div></div>
        </div>
        {PD_BY_STYLE.map(l => (
          <a href="/en/visas-docs/" key={l.len} className="row">
            <div className="lbl">{l.len}</div>
            <div className="d"><em>{l.days}</em></div>
            <div className="ct">{l.count} guides</div>
            <div className="ex">{l.examples}</div>
            <div className="pr">{l.price}</div>
            <div className="go"><Icon name="arrow" size={14} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- V · READING LIST ---------- */
const PDReading = () => (
  <section className="solo-reading" id="reading">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">V</div>
        <div className="titles">
          <h2>Eight reads,<em>by depth.</em></h2>
          <p>The pieces sitting one click below this page. The first is the seed essay; the rest are full document guides, hand-built. Read in order or skip to the one that matches the morning you're having.</p>
        </div>
        <div className="right">All Visas &amp; Docs essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {PD_READING.map((r, i) => (
          <a key={i} href={r.href} className="r-row">
            <div className="n">{String(i + 1).padStart(2, "0")}</div>
            <div className="tag">{r.tag}</div>
            <div className="t">{r.title}<em>{r.em}</em></div>
            <div className="by">{r.author}</div>
            <div className="dur">{r.duration}</div>
            <div className="go"><Icon name="arrow" size={12} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VI · DESK / VOICES ---------- */
const PDVoices = () => (
  <section className="solo-voices" id="voices">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VI</div>
        <div className="titles">
          <h2>The Visas &amp; Docs desk.<em>Three editors on the boring half of the trip.</em></h2>
          <p>Document writing is not glamorous. The three people who carry this lane care about it anyway, and the desk argues most about timing — how early is early enough — every season.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid">
        {PD_VOICES.map(v => (
          <article key={v.name} className="voice">
            <div className="av" style={{ backgroundImage: `url(${v.av})` }}></div>
            <div className="who">
              <div className="name">{v.name}</div>
              <div className="role">{v.role}</div>
            </div>
            <p className="line">"{v.line}"</p>
            <div className="foot">
              <span className="trips">{v.trips} field trips</span>
              <a href="/en/visas-docs/">Read their lane <Icon name="arrow" size={12} /></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VII · THE BRIEF ---------- */
const PDPractical = () => (
  <section className="solo-practical" id="practical">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VII</div>
        <div className="titles">
          <h2>The brief.<em>Six tips, in order of importance.</em></h2>
          <p>The non-obvious things. Tested at acceptance facilities, embassy windows, and airline gates, ordered by how often a first-time traveler gets caught by the document side of a trip.</p>
        </div>
        <div className="right">Full planning guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {PD_PRACTICAL.map((p, i) => (
          <div key={i} className="pr-card">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="kind">{p.k}</div>
            <h4>{p.h}</h4>
            <p>{p.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VIII · FAQ ---------- */
const PDFAQ = () => {
  const [open, setOpen] = usePDState(0);
  return (
    <section className="solo-faq" id="faq">
      <div className="container">
        <div className="faq-shell">
          <div className="lhs">
            <div className="solo-section-head stacked">
              <div className="num">VIII</div>
              <div className="titles">
                <h2>The questions<em>readers send in.</em></h2>
                <p>Lightly edited reader letters about the document side of a first international trip. If yours isn't here, the desk reads every email.</p>
              </div>
            </div>
            <a href="mailto:visas@howto.travel" className="ask">Ask the desk →</a>
          </div>
          <div className="rhs">
            {PD_FAQS.map((f, i) => (
              <div key={i} className={`f-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q">
                  <span className="qt">{f.q}</span>
                  <span className="tg">+</span>
                </div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- CTA ---------- */
const PDCTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1503220317375-aaad61436b1b?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">START EARLIER · MARK EXPEDITE · SIGN THE BOOK</div>
      <h2>Start the passport<em>before you book the trip.</em></h2>
      <p>Open the leaf that fits the situation. File the form, pay the $60 expedite, write the date the new book ships on your kitchen calendar. The trip plans easier when the document is already in the drawer.</p>
      <div className="cta-actions">
        <a href="/en/visas-docs/passport/how-to-apply-us-passport" className="btn-p">Apply for a first US passport →</a>
        <a href="/en/plan/first-trip-abroad/" className="btn-g">↑ Back to First Trip Abroad</a>
      </div>
    </div>
    <div className="coord">PASSPORTS &amp; DOCS · FORM Nº 41 · UPDATED 06.05.2026</div>
    <div className="coord right">VISAS &amp; DOCS DESK</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const PDApp = () => (
  <div data-screen-label="Passports & Docs">
    <PDHero />
    <PDPlaces />
    <PDField />
    <PDItins />
    <PDByStyle />
    <PDReading />
    <PDVoices />
    <PDPractical />
    <PDFAQ />
    <PDCTA />
    <Footer />
  </div>
);

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