// On the Ground — hero + Chapter I (Arrival) + Chapter II (Getting Around)

const GroundHero = () => (
  <section className="ground-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=2400&q=85)` }}></div>
    <div className="hero-scrim"></div>
    <div className="hero-coord">13°41'N · 100°45'E · ARRIVAL HALL · GATE 47</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 091</div>
    <div className="container">
      <div className="ground-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <span className="here">On the Ground</span>
      </div>
      <div className="ground-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">THE ARRIVAL BOARD · 5 CHAPTERS</span>
          </div>
          <h1>Ground<em>You're here. Now what?</em></h1>
          <p className="lede">
            The plane lands. The customs stamp comes down. From that minute, the trip is improvisation. <em>Arrival, motion, safety, money, language</em> — five chapters for the days that don't show up on the itinerary.
          </p>
        </div>
        <div className="rhs">
          <div className="ground-stats">
            <div className="stat"><div className="n">5 <em>chapters</em></div><div className="l">From customs to caf&eacute;</div></div>
            <div className="stat"><div className="n">60 min</div><div className="l">First-hour playbook</div></div>
            <div className="stat"><div className="n">10</div><div className="l">Phrases that matter</div></div>
            <div className="stat"><div className="n"><em>0%</em></div><div className="l">DCC fee, every time</div></div>
          </div>
        </div>
      </div>
      <div className="ground-toc">
        <span className="toc-label">In this issue</span>
        <a href="#arrival"><span className="num">I</span>Arrival</a>
        <span className="sep">·</span>
        <a href="#moving"><span className="num">II</span>Getting Around</a>
        <span className="sep">·</span>
        <a href="#safety"><span className="num">III</span>Safety</a>
        <span className="sep">·</span>
        <a href="#money"><span className="num">IV</span>Money</a>
        <span className="sep">·</span>
        <a href="#language"><span className="num">V</span>Language</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Reading & FAQ</a>
      </div>
    </div>
  </section>
);

const GroundChapterPanel = ({ lane, side = "left" }) => (
  <div className={`chapter-panel side-${side}`}>
    <div className="img" style={{ backgroundImage: `url(${lane.img})` }}></div>
    <div className="panel-body">
      <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 className="bullet-rows">
        {lane.bullets.map((b, i) => (
          <div key={i} className="bullet-row">
            <span className="bl">{b.l}</span>
            <span className="bv">{b.v}</span>
          </div>
        ))}
      </div>
      <div className="chapter-coord">{lane.coord}</div>
    </div>
  </div>
);

const GroundArrival = () => {
  const lane = GROUND_LANES[0];
  return (
    <section className="ground-arrival" id="arrival">
      <div className="container">
        <GroundChapterPanel lane={lane} side="left" />
        <div className="arrival-grid">
          <div className="ag-head">
            <span className="lbl">FIELD NOTE · THE FIRST HOUR PLAYBOOK</span>
            <h3 className="serif">Four moves, <em>before you leave the airport.</em></h3>
            <p>The first sixty minutes after the customs stamp set the tone for the trip. Cash, signal, transit, hotel — solve them in this order and the rest of the day takes care of itself. Skip a step and you spend the afternoon paying for it.</p>
          </div>
          <div className="ag-cards">
            {GROUND_ARRIVAL_RULES.map((t) => (
              <article key={t.id} className="arrival-card">
                <div className="ac-top">
                  <div className="glyph">{t.glyph}</div>
                  <span className="ac-coord">{t.coord}</span>
                </div>
                <h3 className="serif">{t.title}</h3>
                <p>{t.desc}</p>
                <div className="ac-spec">{t.spec}</div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const GroundMoving = () => {
  const lane = GROUND_LANES[1];
  return (
    <section className="ground-moving" id="moving">
      <div className="container">
        <div className="moving-grid">
          <div className="mg-aside">
            <div className="aside-head">
              <span className="lbl">FIELD NOTE · TRANSIT SYSTEMS</span>
              <h3 className="serif">Four modes. <em>Read the city.</em></h3>
            </div>
            <p>
              Every city has a logic. Tokyo's is rail. Rome's is feet. Mexico City's is Uber. Bangkok's is whichever lane is moving. Spend the first afternoon walking the central district before you spend a peso on a tour. The map in your head will save you more than any pass.
            </p>
            <div className="moving-rules">
              <div className="rule">
                <span className="rn">01</span>
                <div>
                  <strong>Download the offline map before you fly.</strong>
                  <span>Google Maps offline pack of the city, plus the metro PDF. Roaming-on-arrival rarely covers the metro tunnel.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">02</span>
                <div>
                  <strong>Buy the local fare card on day one.</strong>
                  <span>Suica · Oyster · Navigo · ezLink · MetroCard. Tourist passes are almost always worse than pay-as-you-go.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">03</span>
                <div>
                  <strong>Walk the first long afternoon.</strong>
                  <span>Pick a direction. Walk an hour out, walk a different way back. The map in your head is the most expensive thing you cannot buy.</span>
                </div>
              </div>
            </div>
            <a href="/journal/read-a-city-fast" className="aside-cta">Read: How to Read a City on Day One →</a>
          </div>
          <div className="mg-right">
            <GroundChapterPanel lane={lane} side="right" />
            <div className="moving-cards">
              {GROUND_TRANSIT_TYPES.map((s) => (
                <article key={s.method} className="moving-card">
                  <div className="mc-head">
                    <span className="mc-method">{s.method}</span>
                    <span className="mc-icon">{s.icon}</span>
                  </div>
                  <div className="mc-price">{s.price}</div>
                  <h3 className="serif">{s.title}</h3>
                  <p>{s.desc}</p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { GroundHero, GroundChapterPanel, GroundArrival, GroundMoving });