// Pack page — hero + Chapter I (Luggage) + Chapter II (System) — Spanish

const PackHero = () => (
  <section className="pack-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1581553680321-4fffae59fccd?w=2400&q=85)` }}></div>
    <div className="hero-scrim"></div>
    <div className="hero-coord">40°38'N · 73°46'W · PUERTA C-22 · 06:14</div>
    <div className="hero-credit">FOTO — MESA DE CAMPO Nº 091</div>
    <div className="container">
      <div className="pack-crumbs">
        <a href="/es/">Inicio</a>
        <span className="sep">/</span>
        <span className="here">Equipaje</span>
      </div>
      <div className="pack-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">LA MESA DEL EQUIPAJE · 5 CAPÍTULOS</span>
          </div>
          <h1>Empaca<em>todo lo que necesitas. Nada de lo que no.</em></h1>
          <p className="lede">
            La mayoría empaca el doble de lo que usa y la mitad de lo que necesita. <em>Cinco capítulos. Una sola maleta.</em> La disciplina de meter dos semanas en una cabina empieza antes de abrir la maleta.
          </p>
        </div>
        <div className="rhs">
          <div className="pack-stats">
            <div className="stat"><div className="n">5 <em>capítulos</em></div><div className="l">Carriles de equipaje</div></div>
            <div className="stat"><div className="n">40L</div><div className="l">El tope de cabina</div></div>
            <div className="stat"><div className="n">−4 kg</div><div className="l">Tras la pasada de edición</div></div>
            <div className="stat"><div className="n"><em>14d</em></div><div className="l">Una maleta · dos semanas</div></div>
          </div>
        </div>
      </div>
      <div className="pack-toc">
        <span className="toc-label">En este número</span>
        <a href="#luggage"><span className="num">I</span>Equipaje</a>
        <span className="sep">·</span>
        <a href="#system"><span className="num">II</span>El sistema</a>
        <span className="sep">·</span>
        <a href="#climate"><span className="num">III</span>Vestir por clima</a>
        <span className="sep">·</span>
        <a href="#carry-on"><span className="num">IV</span>El equipaje de mano</a>
        <span className="sep">·</span>
        <a href="#stays-home"><span className="num">V</span>Lo que se queda en casa</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Lecturas y FAQ</a>
      </div>
    </div>
  </section>
);

const PackChapterPanel = ({ 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 PackLuggage = () => {
  const lane = PACK_LANES[0];
  return (
    <section className="pack-luggage" id="luggage">
      <div className="container">
        <PackChapterPanel lane={lane} side="left" />
        <div className="luggage-grid">
          <div className="lg-head">
            <span className="lbl">NOTA DE CAMPO · GUÍA DE EQUIPAJE</span>
            <h3 className="serif">Cuatro carcasas, <em>cuatro viajes.</em></h3>
            <p>La mayoría tiene una sola maleta y la usa para todo. La carcasa correcta es la que encaja con el viaje — no la que ya está en el armario. Elige por duración del viaje, condición del terreno y si vuelas low-cost.</p>
          </div>
          <div className="lg-cards">
            {PACK_LUGGAGE_TYPES.map((t) => (
              <article key={t.id} className="luggage-card">
                <div className="lc-top">
                  <div className="glyph">{t.glyph}</div>
                  <span className="lc-coord">{t.coord}</span>
                </div>
                <h3 className="serif">{t.title}</h3>
                <p>{t.desc}</p>
                <div className="lc-spec">{t.spec}</div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const PackSystem = () => {
  const lane = PACK_LANES[1];
  return (
    <section className="pack-system" id="system">
      <div className="container">
        <div className="sys-grid">
          <div className="sys-aside">
            <div className="aside-head">
              <span className="lbl">NOTA DE CAMPO · MÉTODO</span>
              <h3 className="serif">Tres métodos. <em>Elige uno.</em></h3>
            </div>
            <p>
              La discusión entre enrollar, doblar o usar cubos es más vieja que las maletas con ruedas. La respuesta honesta: cada uno gana en un trabajo concreto. Elige por tipo de prenda, no por afiliación religiosa.
            </p>
            <div className="sys-rules">
              <div className="rule">
                <span className="rn">01</span>
                <div>
                  <strong>Tiéndelo todo 48 horas antes.</strong>
                  <span>Extiende el montón completo en una cama y míralo. Verás los duplicados y los huecos. El problema de la lista visible se resuelve solo en cuanto puedes ver todo el montón.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">02</span>
                <div>
                  <strong>Después quita un tercio.</strong>
                  <span>La mayoría empaca un 30% más de lo que usa. Saca un tercio del montón antes de que vea la maleta. No echarás nada en falta.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">03</span>
                <div>
                  <strong>Empaca conjuntos, no prendas.</strong>
                  <span>Planea en 5–4–3–2–1: cinco tops, cuatro pantalones, tres capas, dos pares de zapatos, una chaqueta. Combinándolos salen 12–15 conjuntos para dos semanas.</span>
                </div>
              </div>
            </div>
            <a href="/journal/pack-two-weeks-carry-on" className="aside-cta">Lee: Dos semanas en una sola cabina →</a>
          </div>
          <div className="sys-right">
            <PackChapterPanel lane={lane} side="right" />
            <div className="method-cards">
              {PACK_SYSTEMS.map((s) => (
                <article key={s.method} className="method-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, { PackHero, PackChapterPanel, PackLuggage, PackSystem });