/* eslint-disable */
const ElectronicsHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1558618666-fcd25c85cd64?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">Electronics</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE PACK DESK · ELECTRONICS · 11 GUIDES</span>
          </div>
          <h1>Travel Electronics<em>sorted before the bag closes.</em></h1>
        </div>
        <p className="lede">
          Adapters, power banks, cameras, laptops, drones, trackers, routers. <em>Eleven chapters</em> — from which plug fits which country to what the FAA actually does with your power bank at the gate.
        </p>
      </div>

      <div className="types-rail">
        {ELECTRONICS_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">51°30′N · 0°07′W · HEATHROW APPROACH</div>
    <div className="hero-credit">PHOTO — PACK DESK Nº 012</div>
  </section>
);

const ElectronicsCard = ({ 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${card.zoe ? " zoe-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 ElectronicsCards = () => (
  <section className="types-lanes" id="cards">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Eleven <em>chapters</em> for the electronics bag.</h2>
          <p>Every decision a traveling technologist actually faces — from the first adapter search to the drone permit at the border.</p>
        </div>
        <div className="right">All chapters <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {ELECTRONICS_CARDS.map(c => <ElectronicsCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const ElectronicsEssay = () => (
  <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 pack desk.</em></h2>
          <p>The electronics decisions that are simpler than the internet makes them, and the ones that aren't.</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 cable problem is <em>solved</em> the moment you commit to USB-C. Everything else is logistics."</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 plug adapter question gets asked four hundred times a week. The answer hasn't changed in a decade. Type C covers most of continental Europe; Type G covers the UK; Type A or B covers North America and Japan; one universal adapter covers all of them. The mystery is why people still panic about this at 11 p.m. the night before a flight.</p>
          <p>The voltage question is different and more important. Plug shape and voltage are separate problems. Your phone charger reads 100–240V on the brick — it handles anything. Your 1975-spec hair dryer probably reads 110V only, which means one bad outlet in a 240V country kills it. Read the label on the device, not the brand. If it says 100–240V, you need only an adapter. If it says 110V, you need a converter too.</p>
          <p>The power bank rules are simpler than they look once you know the watt-hour threshold. Under 100Wh: bring as many as the bag holds, carry-on only. 100–160Wh: two max, airline approval needed. Over 160Wh: no passenger aircraft. The math is Wh = mAh × voltage ÷ 1000. A 20,000mAh pack at 3.7V is 74Wh — well under the threshold, no questions asked. The only variable is whether the capacity is printed on the battery, which it usually is.</p>
          <p>The drone problem is the one that actually deserves the panic. Countries update their UAV regulations annually, sometimes monthly. A permit required in Japan, banned outright in Morocco, tolerated but technically illegal in Thailand. Our contributor Zoe has had a drone confiscated on two continents. Her process: check the aviation authority website for the destination country, verify on a secondary source, then call the airline about battery transport. In that order, before you pack it.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">150+</div><div className="l">Countries covered<br />by universal adapter</div></div>
        <div className="item"><div className="n">100Wh</div><div className="l">FAA carry-on<br />battery threshold</div></div>
        <div className="item"><div className="n">40+</div><div className="l">Countries with<br />drone regulations</div></div>
        <div className="item"><div className="n">1 cable</div><div className="l">USB-C covers phone,<br />laptop, camera, audio</div></div>
      </div>
    </div>
  </section>
);

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

  const result = React.useMemo(() => {
    const [worry, trip, devices, dest] = picks;
    if (worry === 2) return ELECTRONICS_CARDS.find(c => c.id === "drones-travel");
    if (worry === 0 && devices === 0) return ELECTRONICS_CARDS.find(c => c.id === "power-banks-faa");
    if (worry === 1) return ELECTRONICS_CARDS.find(c => c.id === "voltage-dual-voltage");
    if (worry === 3) return ELECTRONICS_CARDS.find(c => c.id === "luggage-trackers");
    if (devices === 2) return ELECTRONICS_CARDS.find(c => c.id === "cameras-mirrorless-phone");
    if (devices === 3) return ELECTRONICS_CARDS.find(c => c.id === "voltage-dual-voltage");
    if (trip === 2) return ELECTRONICS_CARDS.find(c => c.id === "in-flight-power");
    if (trip === 3) return ELECTRONICS_CARDS.find(c => c.id === "plug-adapters");
    if (dest === 1) return ELECTRONICS_CARDS.find(c => c.id === "plug-adapters");
    if (dest === 3) return ELECTRONICS_CARDS.find(c => c.id === "voltage-dual-voltage");
    return ELECTRONICS_CARDS.find(c => c.id === "usb-c-universalism");
  }, [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 for your situation — 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 — there's no submit.</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">
            {ELECTRONICS_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 ElectronicsReading = () => (
  <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 the wired traveler.</em></h2>
          <p>Six pieces from the pack desk. One personal essay from Zoe. All bedside.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {ELECTRONICS_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 ElectronicsFAQ = () => {
  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 travelers<em>actually ask.</em></h3>
            <p>Reader questions, lightly edited. Seven answers — the ones that come up every week at the Pack Desk.</p>
          </div>
          <div className="faq-list">
            {ELECTRONICS_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 ElectronicsCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PACK ANYTHING, START ANYWHERE</div>
      <h2>The adapter fits.<em>The bag closes.</em></h2>
      <p>The rules are knowable. The cables are solved. The desk is on call. Start with the chapter that matches what's in your bag — or what you're deciding whether to put there.</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 ElectronicsApp = () => (
  <>
    <ElectronicsHero />
    <ElectronicsCards />
    <ElectronicsEssay />
    <ElectronicsDecide />
    <ElectronicsReading />
    <ElectronicsFAQ />
    <ElectronicsCTA />
    <Footer />
  </>
);

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