// Pack page — Chapter III (Climate) + IV (Carry-On) + V (Stays Home) + CTA + Reading + FAQ — Spanish
const { useState: usePState } = React;

const PackClimate = () => {
  const lane = PACK_LANES[2];
  return (
    <section className="pack-climate" id="climate">
      <div className="container">
        <div className="climate-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="climate-grid">
          <div className="climate-image" style={{ backgroundImage: `url(${lane.img})` }}>
            <div className="ci-coord">{lane.coord}</div>
          </div>
          <div className="climate-rules">
            <div className="rule-card">
              <div className="rc-num">01</div>
              <h4 className="serif">Base · Media · Shell</h4>
              <p>Una base de merino, una capa media polar y un shell impermeable plegable cubren de −5°C a 25°C. Suma un gorro fino y guantes y has resuelto viento de 0°C sin meter un parka. El bulto va en tu cuerpo en la pierna fría — póntelo en el avión y ya no está en la maleta.</p>
            </div>
            <div className="rule-card">
              <div className="rc-num">02</div>
              <h4 className="serif">5–4–3–2–1</h4>
              <p>Cinco tops, cuatro pantalones, tres capas, dos pares de zapatos, una chaqueta. Combinándolos salen 12–15 conjuntos para dos semanas. Lava dos veces a mitad de viaje — todo Airbnb tiene lavadora y todo barrio tiene lavandería.</p>
            </div>
            <div className="rule-card">
              <div className="rc-num">03</div>
              <h4 className="serif">Dos pares de zapatos</h4>
              <p>Un zapato de caminar, uno elegante, nunca un tercero. El tercer par es el que llevas "por si acaso" y nunca usas; ocupa más espacio por volumen que cualquier otra cosa. Estrena los dos pares dos semanas antes de salir.</p>
            </div>
            <div className="rule-card">
              <div className="rc-num">04</div>
              <h4 className="serif">Capas, no duplicados</h4>
              <p>¿Visitas Reikiavik y Lisboa en el mismo viaje? Empaca un solo armario de capas, no dos. Base de merino bajo polar bajo shell. Quítate capas en Lisboa, ponlas en Reikiavik. Misma maleta, dos climas, sin sacrificios.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const PackCarryOn = () => {
  const lane = PACK_LANES[3];
  return (
    <section className="pack-carry-on" id="carry-on">
      <div className="bg-overlay"></div>
      <div className="container">
        <div className="co-grid">
          <div className="co-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>Empaca la cabina como si fueras a estar separado del facturado 48 horas. Porque uno de cada cincuenta viajes lo estarás — y ese es el viaje en el que la cabina te salva.</p>
              <cite>— Iris Mendoza, Mesa de equipaje</cite>
            </blockquote>
          </div>
          <div className="co-list">
            {PACK_CARRYON.map((c) => (
              <article key={c.mark} className="co-card">
                <div className="co-mark">{c.mark}</div>
                <h3 className="serif">{c.title}</h3>
                <p>{c.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const PackHome = () => {
  const lane = PACK_LANES[4];
  return (
    <section className="pack-home" id="stays-home">
      <div className="container">
        <div className="home-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="home-list">
          {PACK_LEAVE.map((l) => (
            <article key={l.tag} className="home-row">
              <div className="hr-tag">{l.tag}</div>
              <div className="hr-body">
                <h4 className="serif">{l.item}</h4>
                <p>{l.reason}</p>
              </div>
              <div className="hr-strike" aria-hidden="true">×</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const PackCTA = () => (
  <section className="pack-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 · CONSTRUIDO PARA EMPACAR</div>
        <h2 className="serif">Una maleta. <em>Un viaje.</em></h2>
        <p>RoundTrips es el espacio de trabajo que construimos para nosotros: listas de equipaje atadas al clima, armarios cápsula por clima, lista de esenciales para la cabina y el editor que te frena cuando empacas de más. Una pestaña. Un viaje. Una maleta cerrada.</p>
        <div className="cta-actions">
          <a href="https://roundtrips.org" className="btn-primary">Abrir RoundTrips →</a>
          <a href="/journal/pack-two-weeks-carry-on" className="btn-ghost">Ver 248 itinerarios</a>
        </div>
      </div>
    </div>
    <div className="coord">EQUIPAJE — PUBLICADO 25.04.2026</div>
    <div className="coord right">MESA DE CAMPO Nº 091</div>
  </section>
);

const PackReading = () => {
  const [open, setOpen] = usePState(0);
  return (
    <section className="pack-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 · LA LISTA DE LECTURAS</div>
              <h3 className="serif">Cuatro piezas, <em>antes de cerrar la maleta.</em></h3>
            </div>
            <div className="card-rows">
              {PACK_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 · PREGUNTAS QUE NOS HACEN MUCHO</div>
              <h3 className="serif">Las preguntas, <em>respondidas.</em></h3>
            </div>
            <div className="faq-list">
              {PACK_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, { PackClimate, PackCarryOn, PackHome, PackCTA, PackReading });