/* eslint-disable */
const FirstHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=2400&q=80)` }}></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="types-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/plan/">Plan</a>
        <span className="sep">/</span>
        <span className="here">First Trip Abroad</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">YOUR FIRST INTERNATIONAL TRIP · 8 TOPICS</span>
          </div>
          <h1>First Trip<em>abroad. you've got this.</em></h1>
        </div>
        <p className="lede">
          Everyone starts somewhere. The anxiety is normal, the preparation is finite, and most of what feels complicated <em>is actually just paperwork.</em> Here is everything you need, in the order you need it.
        </p>
      </div>

      <div className="types-rail">
        {FIRST_LANES.map(l => (
          <a key={l.id} href={`#${l.id}`}>
            <span className="n">{l.num}</span>
            <span className="t">{l.title}{l.titleEm ? ` ${l.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="hero-coord">51°28′N · 00°27′W · HEATHROW TERMINAL 5</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 107</div>
  </section>
);

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

const FirstLanes = () => (
  <section className="types-lanes" id="lanes">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The eight <em>things to know.</em></h2>
          <p>Not a complete education — a triage. These are the eight areas where first-time international travelers get confused, lose money, or get stopped at a border. Handle them in order and the rest is just having a good time.</p>
        </div>
        <div className="right">All topics <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {FIRST_LANES.map(l => <FirstLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const FirstEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>The honest truth <em>about the first one.</em></h2>
          <p>From the desk that has read several thousand trip reports. Most first trips are better than expected. Here is why, and what to do about it.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"The anxiety you feel before the first trip <em>is the price of admission.</em> It doesn't mean you're not ready. It means you're paying attention."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1494790108755-2616b612b5c5?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Clara Worthington</div>
              <div className="role">Senior Editor · First Trips Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>The thing nobody tells you about the first international trip is how much of the hard work is done before you leave the house. The visa, the currency plan, the data situation, the packing list — these are all finite tasks. Each one has a right answer. You don't need experience to find that answer. You need a checklist and a few hours.</p>
          <p>What experience gives you is the ability to relax about the things that feel scary but aren't: the border interview, the language barrier, the unfamiliar transit system. None of these are actually hard once you've done them. They're just <em>unfamiliar,</em> and unfamiliarity reads as risk. It isn't.</p>
          <p>The actual risks — getting sick without insurance, overpaying for every transaction because you didn't set up the right bank account, losing your passport photocopies — are all preventable. That's what this section is for. The improvisation, the wandering, the happy accidents — those take care of themselves.</p>
          <p>Most people return from their first international trip wondering why they waited so long. The gap between how complicated it seems from this side and how manageable it is from the other side is the thing we're here to close.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">74%</div><div className="l">First-timers say trip<br />was easier than expected</div></div>
        <div className="item"><div className="n">$220</div><div className="l">Avg. saved with<br />right bank card</div></div>
        <div className="item"><div className="n">6 wks</div><div className="l">Current US passport<br />renewal standard time</div></div>
        <div className="item"><div className="n">90 sec</div><div className="l">Average border interview<br />for prepared travelers</div></div>
      </div>
    </div>
  </section>
);

const ChecklistPanel = ({ p }) => (
  <div className={`rt-panel ${p.size}`}>
    <div className="pic" style={{ backgroundImage: p.img ? `url(${p.img})` : undefined }}></div>
    <div className="body">
      <span className="pill">{p.tag}</span>
      <h4>{p.title}</h4>
      <p>{p.desc}</p>
    </div>
  </div>
);

const ChecklistSection = () => (
  <section className="roundtrips-section" id="checklist">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">PLANNING TOOL · 60-DAY COUNTDOWN</span></div>
          <h2>The pre-trip<em>checklist.</em></h2>
        </div>
        <p>Not a packing list. A countdown. Five windows, each with its own set of tasks — so nothing critical is left until the night before. <em>The goal is to be bored by logistics on departure day,</em> not scrambling through them.</p>
      </div>

      <div className="rt-grid">
        {BUILDER_PANELS.map((p, i) => <ChecklistPanel key={i} p={p} />)}
      </div>

      <div className="rt-footer">
        <div className="note">
          Every item on this list is something a first-time international traveler has genuinely gotten wrong. Not a hypothetical — <em>a real person, a real missed flight, a real declined card.</em> This is the pattern interrupt.
        </div>
        <div className="actions">
          <a href="/en/plan/first-trip-abroad/checklist/" className="btn-rt">Download the checklist →</a>
          <a href="/en/plan/first-trip-abroad/passports-docs/" className="link-rt">Start with passports</a>
        </div>
      </div>
    </div>
  </section>
);

const FirstDecide = () => {
  const [picks, setPicks] = React.useState([0, 0, 0, 0]);
  const result = React.useMemo(() => {
    const [concern, who, dest, timing] = picks;
    if (concern === 0) return FIRST_LANES.find(l => l.id === "passports-docs");
    if (concern === 1) return FIRST_LANES.find(l => l.id === "money-abroad");
    if (concern === 2) return FIRST_LANES.find(l => l.id === "safety-basics");
    if (concern === 3) return FIRST_LANES.find(l => l.id === "what-to-pack");
    return FIRST_LANES.find(l => l.id === "passports-docs");
  }, [picks]);

  return (
    <section className="types-decide">
      <div className="container">
        <div className="types-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Not sure <em>where to start?</em></h2>
            <p>Pick your biggest concern and your situation. We'll point you at the right first guide — the one that will do the most to reduce anxiety before your departure date.</p>
          </div>
          <div className="right">2 min · No signup</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR SITUATION</div>
            <h3>Four answers,<em>one starting point.</em></h3>
            <p>Pick the option in each row that fits best. The recommendation updates as you go. There's no wrong answer — we're just trying to find the highest-value first read for where you are right now.</p>
            <div className="result">
              <div className="r-lbl">START WITH</div>
              <div className="r-type">{result.title}{result.titleEm && <em> {result.titleEm}</em>}</div>
              <div className="r-blurb">{result.desc}</div>
            </div>
          </div>
          <div className="decide-rhs">
            {FIRST_DECIDE.map((q, qi) => (
              <div key={qi} className="q-block">
                <div className="q-num">Q{String(qi + 1).padStart(2, "0")}</div>
                <div className="q-label">{q.q}</div>
                <div className="q-opts">
                  {q.opts.map((o, oi) => (
                    <button
                      key={oi}
                      className={`q-opt ${picks[qi] === oi ? "sel" : ""}`}
                      onClick={() => {
                        const next = [...picks];
                        next[qi] = oi;
                        setPicks(next);
                      }}
                    >{o}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FirstReading = () => (
  <section className="types-reading" id="reading">
    <div className="container">
      <div className="types-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The reading list <em>before you go.</em></h2>
          <p>Six guides that cover the full picture. Read them on the plane if nowhere else — they'll still be useful on the way home.</p>
        </div>
        <div className="right">All guides <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {FIRST_READING.map((r, i) => (
          <a key={i} href="/en/plan/first-trip-abroad/" className="reading-row-t">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="title">{r.title}{r.em && <em> {r.em}</em>}</div>
            <div className="tag">{r.tag}</div>
            <div className="duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const FirstFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">QUESTIONS · ANSWERED HONESTLY</div>
            <h3>What first-timers<em>actually ask.</em></h3>
            <p>Reader questions from the Plan Desk inbox, lightly edited. The ones that come up every week, from people exactly where you are right now.</p>
          </div>
          <div className="faq-list">
            {FIRST_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 FirstCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488085061387-422e29b40080?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">YOU'VE DONE THE READING · NOW BOOK THE TRIP</div>
      <h2>The first one<em>is the hardest to book.</em></h2>
      <p>Not the hardest to take. Just the hardest to commit to. If you've made it this far, you have everything you need. The rest is a ticket purchase.</p>
      <div className="actions">
        <a href="/en/book/" className="btn-p">Go to Book →</a>
        <a href="/en/plan/" className="btn-g">Back to Plan</a>
      </div>
    </div>
  </section>
);

const FirstApp = () => (
  <>
    <FirstHero />
    <FirstLanes />
    <FirstEssay />
    <ChecklistSection />
    <FirstDecide />
    <FirstReading />
    <FirstFAQ />
    <FirstCTA />
    <Footer />
  </>
);

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