/* eslint-disable */
const CarryOnHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1581553680321-4fffae59fccd?w=2400&q=80)` }}></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="types-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/pack/">Pack</a>
        <span className="sep">/</span>
        <span className="here">Carry-On</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE PACKING DESK · CARRY-ON · 10 CHAPTERS</span>
          </div>
          <h1>Carry-On<em>the bag you keep next to you.</em></h1>
        </div>
        <p className="lede">
          Pack the carry-on like you'll be separated from the checked bag for 48 hours — because <em>one in fifty trips, you will be.</em> Documents, medications, the delayed-bag kit, comfort layer, and the personal-item-vs-carry-on border every budget carrier enforces differently.
        </p>
      </div>

      <div className="types-rail">
        {CARRY_ON_CARDS.slice(0, 10).map(c => (
          <a key={c.id} href={c.href}>
            <span className="n">{c.num}</span>
            <span className="t">{c.title}{c.titleEm ? ` ${c.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="hero-coord">25°15′N · 55°21′E · DUBAI INTERNATIONAL</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 091</div>
  </section>
);

const CarryOnCard = ({ card }) => (
  <a href={card.href} className={`lane ${card.size}${card.zoe ? " zoe-card" : ""}`}>
    <div className="img" style={{ backgroundImage: `url(${card.img})` }}></div>
    <div className="scrim"></div>
    <span className="corner-num">{card.num}</span>
    {card.badge && (
      <span className={`corner-tag${card.zoe ? " zoe-badge" : ""}`}>{card.badge}</span>
    )}
    <div className="body">
      <div className="topic"><span className="dot"></span>{card.topic}</div>
      <h3>{card.title}{card.titleEm && <em> {card.titleEm}</em>}</h3>
      <p className="desc">{card.desc}</p>
      <div className="meta">
        <span>{card.count}</span>
        <span>·</span>
        <span>{card.read}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

const CarryOnCards = () => (
  <section className="types-lanes" id="cards">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The ten <em>chapters</em> of carry-on packing.</h2>
          <p>Every decision a traveler faces from the first thing that goes in to the moment you zip it shut — organized into ten chapters with real articles inside each one.</p>
        </div>
        <div className="right">All chapters <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {CARRY_ON_CARDS.map(c => <CarryOnCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const CarryOnEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>on the bag you keep.</em></h2>
          <p>The patterns that hold across every route, every airline, every type of traveler who has ever arrived at baggage claim and watched the belt go empty.</p>
        </div>
        <div className="right">Read the method <Icon name="arrow" size={12} /></div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"Pack the carry-on like you'll be separated from the checked bag for <em>48 hours.</em> Because one in fifty trips, you will be — and that's the trip the carry-on saves."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Iris Mendoza</div>
              <div className="role">Senior Editor · Pack Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>The carry-on is not where the bag gets smaller. It's where the bag gets serious. Everything in the checked bag is replaceable — at a pharmacy, at a department store, at the hotel gift shop. Everything in the carry-on is either irreplaceable (the passport, the prescription, the boarding pass) or load-bearing for the journey (the medication, the phone charger, the change of clothes for when the other bag doesn't arrive).</p>
          <p>The mistake most travelers make is treating the carry-on as the overflow for whatever didn't fit in the checked bag. The right model is the reverse: <em>pack the carry-on first, as if there is no checked bag.</em> Then fill the checked bag with what remains. When the carry-on is built correctly, a delayed checked bag is a minor inconvenience. When it isn't, a delayed bag is a disaster.</p>
          <p>The personal-item-vs-carry-on boundary matters more than most travelers realize. The personal item — the bag under the seat — should hold everything you'll reach for during the flight. The carry-on — overhead — holds the rest. This way you can gate-check the carry-on on a full flight without losing access to your medication, your laptop, or your neck pillow. The separation is not bureaucratic. It is functional.</p>
          <p>Finally: the documents. The passport, the travel insurance card, the printed hotel address in the local language, the emergency contact card. These live in one pocket of the carry-on that you know without looking. Lose the bag with these in the overhead bin and the trip changes character entirely. Lose them from the right pocket of the right bag and you spend 30 seconds, not 30 hours.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">1 in 50</div><div className="l">Trips where a checked<br />bag arrives late</div></div>
        <div className="item"><div className="n">48h</div><div className="l">Dignity window your<br />delayed-bag kit buys</div></div>
        <div className="item"><div className="n">100ml</div><div className="l">Per container — the<br />number that never changes</div></div>
        <div className="item"><div className="n">9.3</div><div className="l">Reader confidence<br />after the full pack</div></div>
      </div>
    </div>
  </section>
);

const CarryOnDecide = () => {
  const [picks, setPicks] = React.useState([1, 1, 1, 1]);

  const result = React.useMemo(() => {
    const [flight, checking, concern, airline] = picks;
    if (concern === 1) return CARRY_ON_CARDS.find(c => c.id === "medications-carry-on");
    if (concern === 2 || airline === 1 || airline === 2) return CARRY_ON_CARDS.find(c => c.id === "personal-item-vs-carry-on");
    if (concern === 3 || checking === 0) return CARRY_ON_CARDS.find(c => c.id === "delayed-bag-kit");
    if (flight === 2 || flight === 3) return CARRY_ON_CARDS.find(c => c.id === "comfort-layer");
    if (concern === 0) return CARRY_ON_CARDS.find(c => c.id === "comfort-layer");
    return CARRY_ON_CARDS.find(c => c.id === "travel-documents");
  }, [picks]);

  return (
    <section className="types-decide">
      <div className="container">
        <div className="types-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Where to <em>start?</em></h2>
            <p>Four questions. We'll point you at the right chapter — no email, no quiz.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR SITUATION</div>
            <h3>Four answers,<em>one chapter.</em></h3>
            <p>Click an option in each row. The recommendation updates as you go. Change your mind whenever.</p>
            <div className="result">
              <div className="r-lbl">START HERE</div>
              <div className="r-type">{result.title}{result.titleEm && <em> {result.titleEm}</em>}</div>
              <div className="r-blurb">{result.desc}</div>
            </div>
          </div>
          <div className="decide-rhs">
            {CARRY_ON_DECIDE.map((q, qi) => (
              <div key={qi} className="q-block">
                <div className="q-num">Q{String(qi + 1).padStart(2, "0")}</div>
                <div className="q-label">{q.q}</div>
                <div className="q-opts">
                  {q.opts.map((o, oi) => (
                    <button
                      key={oi}
                      className={`q-opt ${picks[qi] === oi ? "sel" : ""}`}
                      onClick={() => {
                        const next = [...picks];
                        next[qi] = oi;
                        setPicks(next);
                      }}
                    >{o}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const CarryOnReading = () => (
  <section className="types-reading" id="reading">
    <div className="container">
      <div className="types-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The reading list <em>for carry-on packers.</em></h2>
          <p>Six pieces from the pack desk. One personal essay from Zoe. All worth a quiet hour before you zip the bag.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {CARRY_ON_READING.map((r, i) => (
          <a key={i} href="/journal/" className="reading-row-t">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="title">{r.title}{r.em && <em> {r.em}</em>}</div>
            <div className="tag">{r.tag}</div>
            <div className="duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const CarryOnFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · BUT QUIETLY · ASKED</div>
            <h3>What carry-on packers<em>actually ask.</em></h3>
            <p>Reader questions, lightly edited. Eight answers — the ones that come up every week at the pack desk.</p>
          </div>
          <div className="faq-list">
            {CARRY_ON_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>
    </section>
  );
};

const CarryOnCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PACK ANYTHING, START WITH THE CARRY-ON</div>
      <h2>The documents go in first.<em>Everything else follows.</em></h2>
      <p>Build the carry-on correctly and a delayed checked bag is a minor inconvenience. Build it badly and it's a disaster. Start with the chapter that matches your situation.</p>
      <div className="actions">
        <a href="#cards" className="btn-p">Open the chapters →</a>
        <a href="/en/pack/" className="btn-g">Back to Pack</a>
      </div>
    </div>
  </section>
);

const CarryOnApp = () => (
  <>
    <CarryOnHero />
    <CarryOnCards />
    <CarryOnEssay />
    <CarryOnDecide />
    <CarryOnReading />
    <CarryOnFAQ />
    <CarryOnCTA />
    <Footer />
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<CarryOnApp />);