/* eslint-disable */
const SystemsHero = () => (
  <section className="systems-hero">
    <div className="sys-hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=2400&q=80)` }}></div>
    <div className="sys-hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="sys-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/pack/">Pack</a>
        <span className="sep">/</span>
        <span className="here">Packing Systems</span>
      </div>
      <div className="sys-mast">
        <div>
          <div className="sys-kicker-row">
            <span className="sys-layer-tag">THE PACK DESK · THE SYSTEM</span>
          </div>
          <h1>Packing<em>systems.</em></h1>
        </div>
        <p className="sys-lede">
          Rolling versus folding versus cubes. <em>Orientation, zones, and the reverse pack.</em> Nine guides to the how — not the what — of fitting your life into a carry-on.
        </p>
      </div>
      <div className="sys-rail">
        {SYSTEM_CARDS.map(c => (
          <a key={c.id} href={c.href || `#${c.id}`}>
            <span className="n">{c.num}</span>
            <span className="t">{c.title}{c.titleEm ? ` ${c.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>
    <div className="sys-hero-coord">40°24′N · 86°55′W · THE PACK DESK</div>
    <div className="sys-hero-credit">PHOTO — SYSTEMS DESK Nº 002</div>
  </section>
);

const SystemCard = ({ card }) => (
  <a href={card.href || `#${card.id}`} className={`sys-card ${card.size}`}>
    <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.isZoe ? " 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 SystemsGrid = () => (
  <section className="systems-grid-section" id="systems">
    <div className="container">
      <div className="sys-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Nine <em>methods.</em></h2>
          <p>Roll, fold, cube, compress, orient, zone. Each one wins at a specific job. The guide below tells you which method wins at yours.</p>
        </div>
        <div className="right">All systems <Icon name="arrow" size={12} /></div>
      </div>
      <div className="sys-card-grid">
        {SYSTEM_CARDS.map(c => <SystemCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const SystemsEssay = () => (
  <section className="systems-essay">
    <div className="container">
      <div className="sys-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>The <em>argument</em> that misses the point.</h2>
          <p>From the desk that has watched 300 bags get packed, mostly wrong. One pattern holds everywhere.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="sys-essay-spread">
        <div className="sys-essay-lhs">
          <p className="sys-pull">{SYSTEM_ESSAY.pull}</p>
          <div className="sys-byline">
            <div className="av" style={{ backgroundImage: `url(${SYSTEM_ESSAY.byline.img})` }}></div>
            <div className="who">
              <div className="name">{SYSTEM_ESSAY.byline.name}</div>
              <div className="role">{SYSTEM_ESSAY.byline.role}</div>
            </div>
          </div>
        </div>
        <div className="sys-essay-rhs">
          {SYSTEM_ESSAY.body.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      </div>
      <div className="sys-essay-stats">
        <div className="item"><div className="n">30%</div><div className="l">More volume<br />from rolling</div></div>
        <div className="item"><div className="n">4</div><div className="l">Cube minimum<br />for 3+ stops</div></div>
        <div className="item"><div className="n">48h</div><div className="l">Lay-out window<br />before packing</div></div>
        <div className="item"><div className="n">−4 kg</div><div className="l">Average saved<br />on the edit pass</div></div>
      </div>
    </div>
  </section>
);

const SystemsDecide = () => {
  const [picks, setPicks] = React.useState([1, 1, 1, 0]);
  const result = React.useMemo(() => {
    const [length, bag, wardrobe, stops] = picks;
    if (wardrobe >= 2 || (wardrobe === 1 && length >= 2)) return SYSTEM_RECOMMEND[2];
    if (stops >= 2 || length >= 3) return SYSTEM_RECOMMEND[3];
    if (length >= 1) return SYSTEM_RECOMMEND[1];
    return SYSTEM_RECOMMEND[0];
  }, [picks]);

  return (
    <section className="systems-decide">
      <div className="container">
        <div className="sys-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Which system <em>for this trip?</em></h2>
            <p>Four answers — one clear method. The recommendation updates as you go. No submit button; no email required.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>
        <div className="sys-decide-shell">
          <div className="sys-decide-lhs">
            <div className="lbl">YOUR METHOD</div>
            <h3>Four answers,<em>one system.</em></h3>
            <p>Pick an option in each row. The recommendation updates live. Change your mind as many times as you need.</p>
            <div className="sys-result">
              <div className="r-lbl">RECOMMENDATION</div>
              <div className="r-type">{result.label}</div>
              <div className="r-blurb">{result.desc}</div>
            </div>
          </div>
          <div className="sys-decide-rhs">
            {SYSTEM_DECIDE.map((q, qi) => (
              <div key={qi} className="sys-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={`sys-q-opt ${picks[qi] === oi ? "sel" : ""}`}
                      onClick={() => {
                        const next = [...picks];
                        next[qi] = oi;
                        setPicks(next);
                      }}
                    >{o}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const SystemsReading = () => (
  <section className="systems-reading" id="reading">
    <div className="container">
      <div className="sys-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The reading list, <em>by method.</em></h2>
          <p>Six essays from the packing desk. One method per essay; pick the one you got wrong on the last trip.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {SYSTEM_READING.map((r, i) => (
          <a key={i} href="/journal/" className="sys-reading-row">
            <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 SystemsFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="systems-faq" id="faq">
      <div className="container">
        <div className="sys-faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · BUT QUIETLY · ASKED</div>
            <h3>What packers<em>actually ask.</em></h3>
            <p>Reader letters from the packing desk, lightly edited. If yours isn't here, the Pack FAQ has more.</p>
          </div>
          <div className="faq-list">
            {SYSTEM_FAQS.map((f, i) => (
              <div key={i} className={`sys-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 SystemsCTA = () => (
  <section className="systems-cta">
    <div className="cta-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=2000&q=80)` }}></div>
    <div className="sys-cta-inner">
      <div className="kicker">PACK DESK · ONE BAG · ONE SYSTEM</div>
      <h2>Pick the method.<em>Zip the bag.</em></h2>
      <p>The guides are sorted, the methods are tested, and the desk has watched 300 bags get it wrong so yours doesn't have to. Start with whatever you got wrong on the last trip.</p>
      <div className="cta-actions">
        <a href="/en/pack/" className="cta-btn-p">Back to Pack →</a>
        <a href="/" className="cta-btn-g">Home</a>
      </div>
    </div>
  </section>
);

const SystemsApp = () => (
  <>
    <SystemsHero />
    <SystemsGrid />
    <SystemsEssay />
    <SystemsDecide />
    <SystemsReading />
    <SystemsFAQ />
    <SystemsCTA />
    <Footer />
  </>
);

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