// On the Ground — Chapter III (Safety) + IV (Money) + V (Language) + CTA + Reading + FAQ
const { useState: useGState } = React;

const GroundSafety = () => {
  const lane = GROUND_LANES[2];
  return (
    <section className="ground-safety" id="safety">
      <div className="container">
        <div className="safety-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="safety-grid">
          <div className="safety-image" style={{ backgroundImage: `url(${lane.img})` }}>
            <div className="si-coord">{lane.coord}</div>
          </div>
          <div className="safety-cards">
            {GROUND_SAFETY_REQS.map((r) => (
              <article key={r.mark} className="safety-card">
                <div className="sc-mark">{r.mark}</div>
                <h4 className="serif">{r.title}</h4>
                <p>{r.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const GroundMoney = () => {
  const lane = GROUND_LANES[3];
  return (
    <section className="ground-money" id="money">
      <div className="bg-overlay"></div>
      <div className="container">
        <div className="money-grid">
          <div className="money-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 most expensive moment of any trip happens at the ATM, when the screen asks if you'd like the convenience of being charged in your home currency. Decline. Always.</p>
              <cite>— Iris Mendoza, Field Desk</cite>
            </blockquote>
          </div>
          <div className="money-list">
            {GROUND_MONEY_REGIONS.map((r) => (
              <article key={r.mark} className="money-card">
                <div className="mc-mark">{r.mark}</div>
                <h3 className="serif">{r.title}</h3>
                <p>{r.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const GroundLanguage = () => {
  const lane = GROUND_LANES[4];
  return (
    <section className="ground-language" id="language">
      <div className="container">
        <div className="language-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="language-list">
          {GROUND_LANGUAGE_PHRASES.map((d) => (
            <article key={d.tag} className="language-row">
              <div className="lr-tag">{d.tag}</div>
              <div className="lr-body">
                <h4 className="serif">{d.item}</h4>
                <p>{d.reason}</p>
              </div>
              <div className="lr-stamp" aria-hidden="true">&#9836;</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const GroundCTA = () => (
  <section className="ground-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 · ON THE GROUND</div>
        <h2 className="serif">One workspace. <em>Every city.</em></h2>
        <p>RoundTrips is the workspace we built for ourselves: airport-to-hotel timings tied to your itinerary, ride-app picks by destination, ATM and payment guidance per country, and the ten phrases pinned to every leg. Open it once and the on-the-ground side of travel becomes a single dashboard instead of seventeen browser tabs.</p>
        <div className="cta-actions">
          <a href="https://roundtrips.org" className="btn-primary">Open RoundTrips →</a>
          <a href="/journal/first-hour-after-landing" className="btn-ghost">Read the arrival playbook</a>
        </div>
      </div>
    </div>
    <div className="coord">ON THE GROUND — PUBLISHED 25.04.2026</div>
    <div className="coord right">FIELD DESK Nº 091</div>
  </section>
);

const GroundReading = () => {
  const [open, setOpen] = useGState(0);
  return (
    <section className="ground-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 walk out of the airport.</em></h3>
            </div>
            <div className="card-rows">
              {GROUND_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">
              {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">+</span>
                  </div>
                  <div className="a">{f.a}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { GroundSafety, GroundMoney, GroundLanguage, GroundCTA, GroundReading });