// Pack page — Chapter III (Climate) + IV (Carry-On) + V (Stays Home) + CTA + Reading + FAQ
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 · Mid · Shell</h4>
              <p>A merino base, a fleece mid-layer, and a packable rain shell handle anywhere from −5°C to 25°C. Add a thin hat and gloves and you've cleared 0°C wind without packing a parka. Bulk goes on your body for the cold leg — wear it on the plane, then it's not in the bag.</p>
            </div>
            <div className="rule-card">
              <div className="rc-num">02</div>
              <h4 className="serif">5–4–3–2–1</h4>
              <p>Five tops, four bottoms, three layers, two pairs of shoes, one jacket. Mix-and-match yields 12–15 outfits across two weeks. Wash twice mid-trip — every Airbnb has a washer and every neighborhood has a laundromat.</p>
            </div>
            <div className="rule-card">
              <div className="rc-num">03</div>
              <h4 className="serif">Two pairs of shoes</h4>
              <p>One walking shoe, one smart shoe, never a third. The third pair is the one you bring "just in case" and never wear; they take up the most space of any item by volume. Break both pairs in two weeks before you leave.</p>
            </div>
            <div className="rule-card">
              <div className="rc-num">04</div>
              <h4 className="serif">Layers, not duplicates</h4>
              <p>Visiting Reykjavík and Lisbon in the same trip? Pack one wardrobe of layers, not two wardrobes. Merino base under fleece under shell. Strip layers in Lisbon, add them in Reykjavík. Same bag, two climates, no compromise.</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>Pack the carry-on like you'll be separated from the checked bag for 48 hours. Because one in fifty trips, you will be — and that's the trip the carry-on saves.</p>
              <cite>— Iris Mendoza, Pack Desk</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 · BUILT TO PACK</div>
        <h2 className="serif">One bag. <em>One trip.</em></h2>
        <p>RoundTrips is the workspace we built for ourselves: pack lists tied to weather, climate-aware capsule wardrobes, the carry-on essentials checklist, and the editor that fights you when you over-pack. One tab. One trip. One zipped bag.</p>
        <div className="cta-actions">
          <a href="https://roundtrips.org" className="btn-primary">Open RoundTrips →</a>
          <a href="/journal/pack-two-weeks-carry-on" className="btn-ghost">Browse 248 itineraries</a>
        </div>
      </div>
    </div>
    <div className="coord">PACK — PUBLISHED 25.04.2026</div>
    <div className="coord right">FIELD DESK 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 · THE READING LIST</div>
              <h3 className="serif">Four pieces, <em>before you zip the bag.</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 · QUESTIONS WE GET A LOT</div>
              <h3 className="serif">The questions, <em>answered.</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 });