/* eslint-disable */
const LuggageHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1565026057447-bc90a3dceb87?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">Luggage</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE PACKING DESK · LUGGAGE · 10 CHAPTERS</span>
          </div>
          <h1>Luggage<em>the right shell for the right trip.</em></h1>
        </div>
        <p className="lede">
          Hard vs soft. Carry-on vs checked. The one-bag philosophy or three matching cases. <em>Ten chapters</em> — shell types, airline size limits, weight fees, wheels, durability, and the buyer's framework that works without a brand opinion.
        </p>
      </div>

      <div className="types-rail">
        {LUGGAGE_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">48°51′N · 2°21′E · CDG TERMINAL 2E</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 091</div>
  </section>
);

const LuggageCard = ({ 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 LuggageCards = () => (
  <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 luggage selection.</h2>
          <p>Every decision a traveler actually faces — from the shell type to the size cage at the gate — 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">
        {LUGGAGE_CARDS.map(c => <LuggageCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const LuggageEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>from the packing desk.</em></h2>
          <p>The patterns that hold across every bag type, every airline, every type of traveler.</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">"The bag you choose <em>decides the trip you have.</em> Most travelers own one bag and use it for everything — that's the first mistake."</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>People come to us asking which bag to buy. That's the wrong question. The right question is: what trip am I packing for? A hard-shell carry-on is the right answer for a 5-night business trip through three major airports. It is the wrong answer for a month of overland travel through Southeast Asia where stairs, cobblestone, and overnight buses outnumber hotel lobbies.</p>
          <p>The one-bag philosophy isn't about toughness. It's about decision quality. When the bag has hard limits — 40 liters, carry-on-legal, no exceptions — every item earns its space. You choose your favorite shoes, not your three pairs of "maybe." You build a capsule wardrobe instead of a guest closet. You eliminate the 90-minute wait at baggage claim and the 1-in-50 chance the bag never arrives.</p>
          <p>The four-wheel spinner is the modern default and it's wrong for half the places travelers actually go. Cobblestone sidewalks, uneven train platforms, and the gap between the platform and the carriage will crack a spinner wheel mount in three trips. A two-wheel pull handles all of those and still rolls on airport floors. Own one bag: buy the two-wheel pull.</p>
          <p>The size cage is real. Ryanair, Wizz, and EasyJet enforce carry-on limits at the gate with a metal frame. If your bag doesn't fit the cage, you pay to gate-check it — sometimes €50 each way. Know the specific cage size before you travel, and measure your bag with the wheels and handle collapsed.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">40L</div><div className="l">Carry-on cap for<br />two weeks, one bag</div></div>
        <div className="item"><div className="n">1-in-50</div><div className="l">Checked bags delayed<br />or lost per trip</div></div>
        <div className="item"><div className="n">23 kg</div><div className="l">Standard checked bag<br />weight allowance</div></div>
        <div className="item"><div className="n">9.3</div><div className="l">Reader satisfaction<br />after the full read</div></div>
      </div>
    </div>
  </section>
);

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

  const result = React.useMemo(() => {
    const [length, ground, airline, checking] = picks;
    if (checking === 2) return LUGGAGE_CARDS.find(c => c.id === "one-bag-philosophy");
    if (ground === 2 || ground === 3) return LUGGAGE_CARDS.find(c => c.id === "backpack-vs-roller");
    if (airline === 1) return LUGGAGE_CARDS.find(c => c.id === "carry-on-dimensions");
    if (length === 3) return LUGGAGE_CARDS.find(c => c.id === "checked-bag-weight-limits");
    if (length === 2 && checking === 1) return LUGGAGE_CARDS.find(c => c.id === "one-bag-philosophy");
    if (ground === 0) return LUGGAGE_CARDS.find(c => c.id === "four-wheel-rule");
    return LUGGAGE_CARDS.find(c => c.id === "hard-vs-soft-carry-on");
  }, [picks]);

  return (
    <section className="types-decide">
      <div className="container">
        <div className="types-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Which bag <em>is right for you?</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">
            {LUGGAGE_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 LuggageReading = () => (
  <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 luggage decisions.</em></h2>
          <p>Six pieces from the packing desk. One personal essay from Zoe. All worth reading before you buy.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {LUGGAGE_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 LuggageFAQ = () => {
  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 bag-buyers<em>actually ask.</em></h3>
            <p>Reader questions, lightly edited. Seven answers — the ones that come up every week at the packing desk.</p>
          </div>
          <div className="faq-list">
            {LUGGAGE_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 LuggageCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PACK ANYTHING, START ANYWHERE</div>
      <h2>The right shell.<em>Pack the rest.</em></h2>
      <p>The bag decision is made. The shell is right. What goes inside it is the next chapter — the system, the wardrobe, and the carry-on. All here at the Pack desk.</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 LuggageApp = () => (
  <>
    <LuggageHero />
    <LuggageCards />
    <LuggageEssay />
    <LuggageDecide />
    <LuggageReading />
    <LuggageFAQ />
    <LuggageCTA />
    <Footer />
  </>
);

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