/* eslint-disable */

// ─── Hero ────────────────────────────────────────────────────────────────────
const ToiletriesHero = () => (
  <section className="tm-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=2400&q=80)` }}
    ></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="tm-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/pack/">Pack</a>
        <span className="sep">/</span>
        <span className="here">Toiletries &amp; Meds</span>
      </div>
      <div className="tm-mast">
        <div className="tm-mast-lhs">
          <div className="kicker-row">
            <span className="layer-tag">THE PACK DESK · TOILETRIES &amp; MEDS</span>
          </div>
          <h1>Toiletries<em>&amp; Medications.</em></h1>
          <p className="lede">
            What goes in the liquids bag — and what shouldn't. TSA rules, solid alternatives,
            prescription travel, and a first-aid kit that fits in a sandwich bag.{" "}
            <em>Rules first. Gear second. Verify everything.</em>
          </p>
        </div>
        <div className="tm-mast-rhs">
          <div className="tm-stats">
            <div className="stat">
              <div className="n">100<em>ml</em></div>
              <div className="l">CARRY-ON LIQUID CAP PER CONTAINER</div>
            </div>
            <div className="stat">
              <div className="n">12<em>oz</em></div>
              <div className="l">POWDER SCREENING THRESHOLD (US)</div>
            </div>
            <div className="stat">
              <div className="n">1L</div>
              <div className="l">TOTAL LIQUIDS BAG ALLOWANCE</div>
            </div>
            <div className="stat">
              <div className="n">11</div>
              <div className="l">ITEMS IN OUR MINIMAL FIRST-AID KIT</div>
            </div>
          </div>
        </div>
      </div>

      <div className="tm-toc">
        <span className="toc-label">IN THIS GUIDE</span>
        <a href="#cards"><span className="num">I</span>The 12 guides</a>
        <a href="#rules-snapshot"><span className="num">II</span>Rules snapshot</a>
        <a href="#reading"><span className="num">III</span>Reading list</a>
        <a href="#faq"><span className="num">IV</span>Frequently asked</a>
      </div>
    </div>
    <div className="hero-coord">3-1-1 · 100 ML · 1L BAG · CARRY-ON ONLY</div>
    <div className="hero-credit">PACK DESK Nº 006</div>
  </section>
);

// ─── Card grid ───────────────────────────────────────────────────────────────
const ToiletriesCard = ({ card, isZoe }) => {
  const badgeLabel = isZoe ? "ZOE" : card.badge;
  const badgeClass = isZoe ? "corner-tag zoe-badge" : "corner-tag";
  return (
    <a href={card.href} className={`tm-card ${card.size}`}>
      <div className="img" style={{ backgroundImage: `url(${card.img})` }}></div>
      <div className="scrim"></div>
      <span className="corner-num">{card.num}</span>
      {badgeLabel && <span className={badgeClass}>{badgeLabel}</span>}
      <div className="body">
        <div className="topic">
          <span className="dot"></span>
          {card.topic}
        </div>
        <h3>
          {card.title}
          {card.titleEm && <em> {card.titleEm}</em>}
        </h3>
        {isZoe && (
          <div className="zoe-byline">
            <span className="zoe-name">{card.name}</span>
            <span className="zoe-role">{card.role}</span>
          </div>
        )}
        <p className="desc">{card.desc || card.teaser}</p>
        <div className="meta">
          <span className="tag-pill">{card.tag || "Zoe"}</span>
          <span>·</span>
          <span>{card.read} read</span>
          <span className="arrow"><Icon name="arrow" size={14} /></span>
        </div>
      </div>
    </a>
  );
};

const ToiletriesCards = () => {
  const cards = [...TOILETRIES_CARDS];
  const withZoe = [
    ...cards.slice(0, 4),
    { ...ZOE_CARD, num: "ZO", tag: "Zoe", read: ZOE_CARD.read, size: "wide" },
    ...cards.slice(4),
  ];

  return (
    <section className="tm-cards" id="cards">
      <div className="container">
        <div className="tm-section-head">
          <div className="num">I</div>
          <div className="titles">
            <h2>The <em>12 guides.</em></h2>
            <p>
              From the basics of the liquids bag to country-specific prescription rules.
              Each card links to a full guide — rule specifics are intentionally kept brief
              here because they change.
            </p>
          </div>
          <div className="right">All Pack guides <Icon name="arrow" size={12} /></div>
        </div>

        <div className="card-grid">
          {withZoe.map((card, i) => {
            const isZoe = card.id === "zoe-1l-bag";
            return (
              <ToiletriesCard
                key={card.id || i}
                card={card}
                isZoe={isZoe}
              />
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ─── Rules snapshot ──────────────────────────────────────────────────────────
const RulesSnapshot = () => (
  <section className="tm-rules" id="rules-snapshot">
    <div className="container">
      <div className="tm-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Rules <em>at a glance.</em></h2>
          <p>
            The evergreen rules. Limits and exceptions change — use this as orientation,
            not a final authority. Verify with your airline before travel.
          </p>
        </div>
        <div className="right">Updated Spring 2026</div>
      </div>

      <div className="rules-grid">
        <div className="rule-panel accent">
          <div className="r-label">LIQUIDS · CARRY-ON</div>
          <div className="r-num">100<span>ml</span></div>
          <p>Max per container. All containers in one 1-litre clear resealable bag. One bag per traveller. Applies to liquids, gels, aerosols, creams, pastes. Stick deodorant and lip balm (stick): exempt.</p>
        </div>
        <div className="rule-panel">
          <div className="r-label">POWDERS · CARRY-ON</div>
          <div className="r-num">12<span>oz</span></div>
          <p>US TSA screening threshold (350 ml equivalent). Amounts above this may face additional screening and potential confiscation. Applies to dry shampoo, protein powder, setting powder, baby powder. Checked bag: unrestricted.</p>
        </div>
        <div className="rule-panel">
          <div className="r-label">PRESCRIPTION MEDS</div>
          <div className="r-num">Original</div>
          <p>Keep in original packaging with pharmacy label. Carry a copy of the written prescription. For controlled substances, carry a doctor's letter. Check destination-country restrictions before travel — some common OTC medications are controlled or banned abroad.</p>
        </div>
        <div className="rule-panel accent-warm">
          <div className="r-label">EPIPEN / INHALER</div>
          <div className="r-num">Always<span>carry-on</span></div>
          <p>Never in checked luggage. Exempt from 100 ml rule when medically necessary and labelled. Declare at checkpoint. If screener attempts to remove protective cap, request a supervisor — this is not required protocol.</p>
        </div>
        <div className="rule-panel">
          <div className="r-label">REEF-SAFE SUNSCREEN</div>
          <div className="r-num">Zinc/Ti<span>only</span></div>
          <p>Hawaii, Key West, Cozumel (marine parks), and Thailand marine parks require mineral-only sunscreen. Oxybenzone and octinoxate are banned. Look for active ingredients, not the marketing label. Chemical sunscreen is fine elsewhere.</p>
        </div>
        <div className="rule-panel">
          <div className="r-label">MELATONIN · ABROAD</div>
          <div className="r-num">Verify</div>
          <p>OTC in the US, Canada, and UK. Prescription-only in Japan and Germany. Controlled in several EU countries at higher doses. If you rely on it for jet lag, check the destination country's status before packing.</p>
        </div>
      </div>

      <div className="rules-disclaimer">
        <p>
          <em>Customs and airline rules change.</em> Verify restricted and prohibited items
          with your airline and your destination country's customs authority before you fly.
          For medications specifically — verify with that country's drug enforcement agency
          or health ministry before traveling with any controlled substance; country-specific
          restrictions can differ significantly from US classifications.
        </p>
      </div>
    </div>
  </section>
);

// ─── Reading list ─────────────────────────────────────────────────────────────
const ToiletriesReading = () => (
  <section className="tm-reading" id="reading">
    <div className="container">
      <div className="tm-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>The reading list.</h2>
          <p>Six guides from the Pack Desk. Sorted by urgency — rules first, gear second.</p>
        </div>
        <div className="right">All reading <Icon name="arrow" size={12} /></div>
      </div>
      <div className="reading-list">
        {TOILETRIES_READING.map((r, i) => (
          <a key={i} href="/en/pack/toiletries-and-meds/" className="reading-row">
            <div className="rn">{String(i + 1).padStart(2, "0")}</div>
            <div className="rtitle">{r.title}</div>
            <div className="rtag">{r.tag}</div>
            <div className="rdur">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ─── FAQ ──────────────────────────────────────────────────────────────────────
const ToiletriesFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="tm-faq" id="faq">
      <div className="container">
        <div className="faq-wrap">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · QUIETLY · ASKED</div>
            <h3>What people <em>actually ask.</em></h3>
            <p>Seven questions from the Pack Desk inbox. TSA rules, prescription travel, powder limits — the ones that keep coming up.</p>
          </div>
          <div className="faq-list">
            {TOILETRIES_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">{open === i ? "−" : "+"}</span>
                </div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── CTA ──────────────────────────────────────────────────────────────────────
const ToiletriesCTA = () => (
  <section className="tm-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">PACK DESK · TOILETRIES &amp; MEDS</div>
      <h2>Pack what works. <em>Verify the rest.</em></h2>
      <p>
        Rules change. What's fine on one flight or in one country may not be on the next.
        Build the kit. Then verify it against your airline and destination before you fly.
      </p>
      <div className="actions">
        <a href="/en/pack/" className="btn-p">Back to Pack →</a>
        <a href="/en/pack/carry-on/" className="btn-g">Carry-On guide</a>
      </div>
    </div>
  </section>
);

// ─── Root ─────────────────────────────────────────────────────────────────────
const ToiletriesApp = () => (
  <>
    <ToiletriesHero />
    <ToiletriesCards />
    <RulesSnapshot />
    <ToiletriesReading />
    <ToiletriesFAQ />
    <ToiletriesCTA />
    <Footer />
  </>
);

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