/* eslint-disable */

// ─── Hero ────────────────────────────────────────────────────────────────────
const GroundHero = () => (
  <section className="gt-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1474487548417-781cb71495f3?w=2400&q=85)` }}></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="gt-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/book/">Book</a>
        <span className="sep">/</span>
        <span className="here">Ground Transport</span>
      </div>
      <div className="gt-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE BOOKING DESK · GROUND TRANSPORT · 10 GUIDES</span>
          </div>
          <h1>Ground Transport<em>every way to move without flying.</em></h1>
        </div>
        <p className="lede">
          High-speed rail, sleeper trains, rail passes, rental cars, airport transfers, rideshare abroad, scenic railways, long-distance buses. <em>The cheapest way to ruin a great flight is to land and immediately overpay for the 30 minutes between the airport and your hotel.</em>
        </p>
      </div>

      <div className="gt-stat-row">
        {GROUND_STATS.map((s, i) => (
          <div key={i} className="gt-stat">
            <div className="n">{s.n}</div>
            <div className="l">{s.l.split("\n").map((line, j) => <span key={j}>{line}</span>)}</div>
          </div>
        ))}
      </div>

      <nav className="gt-rail" aria-label="Quick navigation">
        {[
          { id: "rail", label: "Rail & Trains" },
          { id: "car", label: "Rental Cars" },
          { id: "transfers", label: "Transfers" },
          { id: "bus", label: "Buses" },
          { id: "scenic", label: "Scenic Routes" },
          { id: "faq", label: "FAQ" },
        ].map(r => (
          <a key={r.id} href={`#${r.id}`}>{r.label}</a>
        ))}
      </nav>
    </div>
    <div className="hero-coord">47°59′N · 7°51′E · BASEL SBB</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 093</div>
  </section>
);

// ─── Card component ───────────────────────────────────────────────────────────
const GroundCard = ({ card }) => (
  <a
    href={card.href}
    className={`gt-card ${card.size}${card.zoe ? " zoe-card" : ""}`}
    aria-label={card.title + (card.titleEm ? " " + card.titleEm : "")}
  >
    <div className="img" style={{ backgroundImage: `url(${card.img})` }}></div>
    <div className="scrim"></div>
    <span className="corner-num">{card.num}</span>
    {card.zoe && <span className="zoe-badge">By Zoe</span>}
    <div className="body">
      <div className="topic">
        <span className="dot"></span>
        <span className="topic-tag">{card.tag}</span>
        <span className="topic-sub">{card.topic}</span>
      </div>
      <h3>{card.title}{card.titleEm && <em> {card.titleEm}</em>}</h3>
      <p className="desc">{card.desc}</p>
      <div className="meta">
        <span>{card.meta}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

// ─── Cards grid ──────────────────────────────────────────────────────────────
const GroundCards = () => {
  const railCards = GROUND_CARDS.filter(c => ["high-speed-rail-europe","shinkansen-jr-pass","eurail-interrail","sleeper-trains"].includes(c.id));
  const carCards  = GROUND_CARDS.filter(c => ["rental-car-international"].includes(c.id));
  const transferCards = GROUND_CARDS.filter(c => ["airport-transfers","taxis-rideshare-abroad"].includes(c.id));
  const busCards  = GROUND_CARDS.filter(c => ["long-distance-bus"].includes(c.id));
  const scenicCards = GROUND_CARDS.filter(c => ["scenic-railways"].includes(c.id));
  const zoeCards  = GROUND_CARDS.filter(c => c.zoe);

  return (
    <>
      {/* RAIL */}
      <section className="gt-section" id="rail">
        <div className="container">
          <div className="gt-section-head">
            <div className="num">I</div>
            <div className="titles">
              <h2>Rail &amp; Trains — <em>book early, ride cheaper.</em></h2>
              <p>High-speed rail in Europe and Japan rewards advance planning. The same seat on a TGV costs 8x more on the day than it does three months out. Here's every rail category, priced honestly.</p>
            </div>
          </div>
          <div className="gt-grid">
            {railCards.map(c => <GroundCard key={c.id} card={c} />)}
          </div>
        </div>
      </section>

      {/* RENTAL CARS */}
      <section className="gt-section gt-section-alt" id="car">
        <div className="container">
          <div className="gt-section-head">
            <div className="num">II</div>
            <div className="titles">
              <h2>Rental Cars — <em>when the train doesn't go.</em></h2>
              <p>Rural Italy, Iceland, the American West, New Zealand, Ireland — the car wins these. International Driving Permits, credit card CDW gaps, and fuel policy traps explained before you sign anything.</p>
            </div>
          </div>
          <div className="gt-grid">
            {carCards.map(c => <GroundCard key={c.id} card={c} />)}
          </div>
        </div>
      </section>

      {/* TRANSFERS */}
      <section className="gt-section" id="transfers">
        <div className="container">
          <div className="gt-section-head">
            <div className="num">III</div>
            <div className="titles">
              <h2>Transfers &amp; Rideshare — <em>airport to front door.</em></h2>
              <p>Pre-book for cities where the taxi rank charges over $40. Know which rideshare apps actually work in your destination — Uber is absent in more places than it's present.</p>
            </div>
          </div>
          <div className="gt-grid">
            {transferCards.map(c => <GroundCard key={c.id} card={c} />)}
          </div>
        </div>
      </section>

      {/* BUS */}
      <section className="gt-section gt-section-alt" id="bus">
        <div className="container">
          <div className="gt-section-head">
            <div className="num">IV</div>
            <div className="titles">
              <h2>Long-Distance Buses — <em>the underrated €8 move.</em></h2>
              <p>FlixBus across Central Europe is one of travel's genuine bargains. The bus earns its seat for hops under four hours between cities with good overnight options at each end.</p>
            </div>
          </div>
          <div className="gt-grid">
            {busCards.map(c => <GroundCard key={c.id} card={c} />)}
          </div>
        </div>
      </section>

      {/* SCENIC */}
      <section className="gt-section" id="scenic">
        <div className="container">
          <div className="gt-section-head">
            <div className="num">V</div>
            <div className="titles">
              <h2>Scenic Railways — <em>the view is the point.</em></h2>
              <p>Glacier Express. Flåm Railway. Rocky Mountaineer. These are not connecting transport — they are the reason the trip exists. How to book each, what to expect, and which class is worth the premium.</p>
            </div>
          </div>
          <div className="gt-grid">
            {scenicCards.map(c => <GroundCard key={c.id} card={c} />)}
          </div>
        </div>
      </section>

      {/* ZOE FIELD REPORT */}
      <section className="gt-section gt-section-zoe">
        <div className="container">
          <div className="gt-section-head">
            <div className="num" style={{ color: "#c9a84c" }}>Z</div>
            <div className="titles">
              <h2>Field Report — <em>by Zoe.</em></h2>
              <p>A first-person account from the road. Contributor essays are amber-badged, written in character from on-the-ground experience — not from the booking desk.</p>
            </div>
          </div>
          <div className="gt-grid">
            {zoeCards.map(c => <GroundCard key={c.id} card={c} />)}
          </div>
        </div>
      </section>
    </>
  );
};

// ─── Essay interlude ──────────────────────────────────────────────────────────
const GroundEssay = () => (
  <section className="gt-essay">
    <div className="container">
      <div className="gt-section-head">
        <div className="num">VI</div>
        <div className="titles">
          <h2>The rule that holds <em>across every mode.</em></h2>
          <p>From the booking desk, after watching the same mistakes repeat across a thousand itineraries.</p>
        </div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"The cheapest way to ruin a great flight is to land and immediately <em>overpay for the last 30 minutes.</em>"</p>
          <div className="byline">
            <div className="who">
              <div className="name">The Booking Desk</div>
              <div className="role">HowTo: Travel Edition</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>Ground transport is where good trips go sideways. Not because the options are bad — they're usually excellent — but because people stop paying attention the moment the flight confirmation lands. The flight is booked; the hard part's done. Then they take a €90 taxi from CDG when the RER B costs €11.80 and runs every 10 minutes.</p>
          <p>The first rule of ground transport is that <em>rail is almost always the right answer in Europe and Japan.</em> Not because buses are bad or cars are bad, but because the train system in those regions was built by governments who needed people to move efficiently, and that infrastructure remains one of the world's great travel gifts. A TGV seat at €25 from Paris to Marseille is a three-hour meal with a view. A Shinkansen from Tokyo to Kyoto is 140 miles in 73 minutes with a view of Fuji if you sit on the right side.</p>
          <p>The second rule is that <em>advance booking is leverage.</em> The same seat that costs €25 in February costs €180 in April. The Eurostar from London to Paris that was £59 three months ago is £229 today. The Nightjet private cabin that would have cost €89 is sold out. Ground transport is the cheapest discipline to master and the most expensive to ignore.</p>
          <p>The third rule: <em>rideshare is not a backup plan.</em> In 40% of popular international destinations, the app you rely on at home doesn't work. Know your Bolt from your Grab before you land. The taxi rank exists, but it's never the price you imagined.</p>
        </div>
      </div>
      <div className="essay-stats">
        {GROUND_STATS.map((s, i) => (
          <div key={i} className="item">
            <div className="n">{s.n}</div>
            <div className="l">{s.l.split("\n").map((line, j) => <span key={j}>{line}</span>)}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Timing guide ─────────────────────────────────────────────────────────────
const GroundTiming = () => (
  <section className="gt-timing">
    <div className="container">
      <div className="gt-section-head">
        <div className="num">VII</div>
        <div className="titles">
          <h2>The booking sequence — <em>mode by mode.</em></h2>
          <p>When to book each type of ground transport, and in what order. The sequence matters: lock the train when the flight lands, not the week before departure.</p>
        </div>
      </div>
      <div className="timing-list">
        {[
          {
            when: "T-3 months",
            mode: "High-Speed Rail",
            rule: "Eurostar, TGV, Shinkansen, Frecciarossa. This is when the cheapest advance inventory opens and before it sells. At 2 months, the €25 fares are gone — you're buying whatever's left.",
          },
          {
            when: "T-10 weeks",
            mode: "Scenic Railways",
            rule: "Glacier Express, Rocky Mountaineer, Flåm. These have limited capacity and global demand. Book the moment your travel dates are locked. There is no 'last minute' option on the Glacier Express in summer.",
          },
          {
            when: "T-6 weeks",
            mode: "Rental Cars",
            rule: "Early booking gets the class you want. Rates often don't change much — but availability does. If you need a specific vehicle (automatic in Europe, larger trunk for airport, electric in Iceland), lock it now.",
          },
          {
            when: "T-4 weeks",
            mode: "Airport Transfers",
            rule: "Pre-book Welcome Pickups, Blacklane, or your hotel's car for airports where the taxi rank is unreliable or expensive. This is also when shuttle bus companies release seats for popular routes.",
          },
          {
            when: "T-2 weeks",
            mode: "Long-Distance Bus",
            rule: "FlixBus, ALSA, Greyhound. Book 2–3 weeks out for the cheapest fares. The bus doesn't have an advance-fare cliff like rail, but middle-of-the-week buses fill up for popular routes.",
          },
          {
            when: "On arrival",
            mode: "Rideshare & City Taxi",
            rule: "Download the local app before you land (Bolt, Grab, DiDi, Ola). Have the address of your accommodation typed in, not just the hotel name. In airports with a designated rideshare zone, add 10 minutes for the walk.",
          },
        ].map((t, i) => (
          <div key={i} className="timing-row">
            <div className="t-when">{t.when}</div>
            <div className="t-mode">{t.mode}</div>
            <div className="t-rule">{t.rule}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Reading list ──────────────────────────────────────────────────────────────
const GroundReading = () => (
  <section className="gt-reading" id="reading">
    <div className="container">
      <div className="gt-section-head">
        <div className="num">VIII</div>
        <div className="titles">
          <h2>From the desk — <em>six things to read before you move.</em></h2>
          <p>Essays from the travel desk on the decisions that separate a smooth transfer from a €90 mistake.</p>
        </div>
      </div>
      <div>
        {GROUND_READING.map((r, i) => (
          <a key={i} href="/journal/" className="reading-row-t">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="title">{r.title}</div>
            <div className="tag">{r.tag}</div>
            <div className="duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ─── FAQ ──────────────────────────────────────────────────────────────────────
const GroundFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="gt-faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · ACTUALLY · ASKED</div>
            <h3>What travelers<em>get wrong.</em></h3>
            <p>Ground transport questions from the inbox. Passes, permits, rideshare, buses — the decisions where the wrong choice costs €50–€200 and three hours.</p>
          </div>
          <div className="faq-list">
            {GROUND_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">{open === i ? "−" : "+"}</span>
                </div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── CTA ──────────────────────────────────────────────────────────────────────
const GroundCTA = () => (
  <section className="gt-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1519821172144-4f87d85de2a1?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">BOOK DESK · GROUND TRANSPORT</div>
      <h2>Pick your mode.<em>Book before the fare moves.</em></h2>
      <p>Ten guides. Every surface-level transport option covered. Start with whichever guide answers the question that's already open in a tab.</p>
      <div className="actions">
        <a href="/en/book/" className="btn-p">Back to Book</a>
        <a href="https://roundtrips.org" className="btn-g">Open RoundTrips →</a>
      </div>
    </div>
  </section>
);

// ─── Root app ─────────────────────────────────────────────────────────────────
const GroundApp = () => (
  <>
    <GroundHero />
    <GroundCards />
    <GroundEssay />
    <GroundTiming />
    <GroundReading />
    <GroundFAQ />
    <GroundCTA />
    <Footer />
  </>
);

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