// Book page — hero + Chapter I (Flights) + Chapter II (Accommodation) — Spanish

const BookHero = () => (
  <section className="book-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">06°08'N · 102°42'E · ALTITUD 38.000 PIES</div>
    <div className="hero-credit">FOTO — MESA DE CAMPO Nº 091</div>
    <div className="container">
      <div className="book-crumbs">
        <a href="/es/">Inicio</a>
        <span className="sep">/</span>
        <span className="here">Reservar</span>
      </div>
      <div className="book-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">LA MESA DE RESERVAS · 5 CAPÍTULOS</span>
          </div>
          <h1>Reserva<em>como si ya lo hubieras hecho.</em></h1>
          <p className="lede">
            Los planes sin reserva son deseos. Aquí es donde el viaje que imaginaste se convierte en recibos, confirmaciones y una fila de visados. <em>Cinco capítulos. Respuestas decisivas.</em> Se acabaron las pestañas abiertas.
          </p>
        </div>
        <div className="rhs">
          <div className="book-stats">
            <div className="stat"><div className="n">5 <em>capítulos</em></div><div className="l">Carriles de reserva</div></div>
            <div className="stat"><div className="n">$487</div><div className="l">Ahorro medio por viaje</div></div>
            <div className="stat"><div className="n">94%</div><div className="l">Opciones reembolsables</div></div>
            <div className="stat"><div className="n"><em>9.4</em></div><div className="l">Confianza del lector</div></div>
          </div>
        </div>
      </div>
      <div className="book-toc">
        <span className="toc-label">En este número</span>
        <a href="#flights"><span className="num">I</span>Vuelos</a>
        <span className="sep">·</span>
        <a href="#accommodation"><span className="num">II</span>Alojamiento</a>
        <span className="sep">·</span>
        <a href="#ground"><span className="num">III</span>Transporte terrestre</a>
        <span className="sep">·</span>
        <a href="#insurance"><span className="num">IV</span>Seguro de viaje</a>
        <span className="sep">·</span>
        <a href="#timing"><span className="num">V</span>Estrategia de plazos</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Lecturas y FAQ</a>
      </div>
    </div>
  </section>
);

const ChapterPanel = ({ 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 BookFlights = () => {
  const lane = BOOK_LANES[0];
  return (
    <section className="book-flights" id="flights">
      <div className="container">
        <ChapterPanel lane={lane} side="left" />
        <div className="flights-aside">
          <div className="aside-head">
            <span className="lbl">NOTA DE CAMPO · VENTANAS DE RESERVA</span>
            <h3 className="serif">La ventana <em>es real.</em></h3>
          </div>
          <p>
            Los estudios de millones de reservas siempre aterrizan en los mismos números. EE. UU. doméstico: 6–8 semanas. Internacional: 3–4 meses. Pico de verano europeo o cerezos en Japón: 5–6 meses. Dentro de la ventana, las tarifas descansan. Fuera de ella, te castigan.
          </p>
          <div className="aside-grid">
            <div className="aside-cell">
              <div className="aside-num">T-90</div>
              <div className="aside-l">Abre alerta de Google Flights</div>
            </div>
            <div className="aside-cell">
              <div className="aside-num">T-60</div>
              <div className="aside-l">Zona de apretar el gatillo</div>
            </div>
            <div className="aside-cell">
              <div className="aside-num">T-21</div>
              <div className="aside-l">Última ventana razonable</div>
            </div>
            <div className="aside-cell">
              <div className="aside-num">T-7</div>
              <div className="aside-l">Pagas impuesto a la duda</div>
            </div>
          </div>
          <a href="/journal/find-cheap-flights" className="aside-cta">Lee: Cómo encontrar vuelos baratos →</a>
        </div>
      </div>
    </section>
  );
};

const BookAccommodation = () => {
  const lane = BOOK_LANES[1];
  return (
    <section className="book-accommodation" id="accommodation">
      <div className="container">
        <div className="accom-grid">
          <div className="accom-aside">
            <div className="aside-head">
              <span className="lbl">NOTA DE CAMPO · HABITACIONES</span>
              <h3 className="serif">El barrio <em>gana a las estrellas.</em></h3>
            </div>
            <p>
              Un cuatro estrellas en la manzana equivocada es un peor viaje que una pensión de dos en la manzana correcta. Pasa una hora con un mapa y un café antes de pasar otra con Booking.com.
            </p>
            <div className="rule-list">
              <div className="rule">
                <span className="rn">01</span>
                <div>
                  <strong>Reembolsable hasta que reembolsable signifique algo.</strong>
                  <span>Si la tarifa reembolsable está dentro del 10% de la no reembolsable, tómala. La flexibilidad vale más que el ahorro.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">02</span>
                <div>
                  <strong>Reserva directo a partir de la tercera noche.</strong>
                  <span>Los descuentos de las OTA se evaporan en estancias de cuatro noches. Las webs directas igualan precio y suman fidelidad y mejoras.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">03</span>
                <div>
                  <strong>Lee primero la fecha de cancelación.</strong>
                  <span>No las fotos, no las reseñas — la columna de cancelación. Es la única línea que importa cuando los planes cambian.</span>
                </div>
              </div>
            </div>
            <a href="/journal/book-accommodation-tourist-trap" className="aside-cta">Lee: Cómo reservar un hotel que no sea trampa para turistas →</a>
          </div>
          <ChapterPanel lane={lane} side="right" />
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BookHero, BookFlights, BookAccommodation });