// On the Ground — hero + Chapter I (Llegada) + Chapter II (Cómo moverte) — Spanish

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 · SALA DE LLEGADAS · PUERTA 47</div>
    <div className="hero-credit">FOTO — MESA DE CAMPO Nº 091</div>
    <div className="container">
      <div className="ground-crumbs">
        <a href="/es/">Inicio</a>
        <span className="sep">/</span>
        <span className="here">Sobre el terreno</span>
      </div>
      <div className="ground-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">EL TABLERO DE LLEGADAS · 5 CAPÍTULOS</span>
          </div>
          <h1>Terreno<em>Ya estás aquí. ¿Y ahora qué?</em></h1>
          <p className="lede">
            El avión aterriza. Cae el sello de aduanas. Desde ese minuto, el viaje es improvisación. <em>Llegada, movimiento, seguridad, dinero, idioma</em> — cinco capítulos para los días que no aparecen en el itinerario.
          </p>
        </div>
        <div className="rhs">
          <div className="ground-stats">
            <div className="stat"><div className="n">5 <em>capítulos</em></div><div className="l">De la aduana al café</div></div>
            <div className="stat"><div className="n">60 min</div><div className="l">Plan de la primera hora</div></div>
            <div className="stat"><div className="n">10</div><div className="l">Frases que importan</div></div>
            <div className="stat"><div className="n"><em>0%</em></div><div className="l">Comisión DCC, siempre</div></div>
          </div>
        </div>
      </div>
      <div className="ground-toc">
        <span className="toc-label">En este número</span>
        <a href="#arrival"><span className="num">I</span>Llegada</a>
        <span className="sep">·</span>
        <a href="#moving"><span className="num">II</span>Cómo moverte</a>
        <span className="sep">·</span>
        <a href="#safety"><span className="num">III</span>Seguridad</a>
        <span className="sep">·</span>
        <a href="#money"><span className="num">IV</span>Dinero</a>
        <span className="sep">·</span>
        <a href="#language"><span className="num">V</span>Idioma</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Lecturas y 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">NOTA DE CAMPO · PLAN DE LA PRIMERA HORA</span>
            <h3 className="serif">Cuatro movimientos, <em>antes de salir del aeropuerto.</em></h3>
            <p>Los sesenta minutos posteriores al sello de aduanas marcan el tono del viaje. Efectivo, señal, transporte, hotel — resuélvelos en este orden y el resto del día se arregla solo. Sáltate un paso y pasas la tarde pagándolo.</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">NOTA DE CAMPO · SISTEMAS DE TRANSPORTE</span>
              <h3 className="serif">Cuatro modos. <em>Lee la ciudad.</em></h3>
            </div>
            <p>
              Cada ciudad tiene una lógica. La de Tokio es el tren. La de Roma es el pie. La de Ciudad de México es Uber. La de Bangkok, el carril que avance. Pasa la primera tarde caminando el centro antes de gastar un peso en un tour. El mapa que te queda en la cabeza te ahorrará más que cualquier abono.
            </p>
            <div className="moving-rules">
              <div className="rule">
                <span className="rn">01</span>
                <div>
                  <strong>Descarga el mapa offline antes de volar.</strong>
                  <span>Pack offline de Google Maps de la ciudad, más el PDF del metro. El roaming al aterrizar rara vez cubre el túnel del metro.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">02</span>
                <div>
                  <strong>Compra la tarjeta de tarifa local el primer día.</strong>
                  <span>Suica · Oyster · Navigo · ezLink · MetroCard. Los abonos turísticos casi siempre salen peor que el pago por uso.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">03</span>
                <div>
                  <strong>Camina la primera tarde larga.</strong>
                  <span>Elige una dirección. Camina una hora hacia fuera, vuelve por otro camino. El mapa en la cabeza es lo más caro que no se puede comprar.</span>
                </div>
              </div>
            </div>
            <a href="/journal/read-a-city-fast" className="aside-cta">Lee: Cómo leer una ciudad en el primer día →</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 });