// Book page — Chapter III (Ground) + IV (Insurance) + V (Timing) + CTA + Reading + FAQ
const { useState: useBState } = React;

const BookGround = () => {
  const lane = BOOK_LANES[2];
  return (
    <section className="book-ground" id="ground">
      <div className="container">
        <div className="ground-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc}</p>
        </div>
        <div className="transport-grid">
          {BOOK_TRANSPORT.map(t => (
            <article key={t.id} className="transport-card">
              <div className="card-top">
                <div className="glyph">{t.glyph}</div>
                <span className="card-coord">{t.coord}</span>
              </div>
              <h3 className="serif">{t.title}</h3>
              <p>{t.desc}</p>
              <div className="card-spec">{t.spec}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const BookInsurance = () => {
  const lane = BOOK_LANES[3];
  return (
    <section className="book-insurance" id="insurance">
      <div className="bg-overlay"></div>
      <div className="container">
        <div className="insurance-grid">
          <div className="insurance-intro">
            <div className="chapter-tag light">
              <span className="num">{lane.num}</span>
              <span className="label">{lane.chapter}</span>
            </div>
            <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
            <p className="dek">{lane.desc}</p>
            <blockquote className="pull-quote">
              <span className="quote-mark">&#8220;</span>
              <p>The right policy costs $40 and protects $40,000. The wrong one costs $200 and protects nothing. The difference is which boxes you tick before you click buy.</p>
              <cite>— Iris Mendoza, Plan Desk</cite>
            </blockquote>
          </div>
          <div className="insurance-tiers">
            {BOOK_INSURANCE.map((p, i) => (
              <article key={p.tier} className="tier-card">
                <div className="tier-head">
                  <span className="tier-label">{p.tier}</span>
                  <span className="tier-icon">{p.icon}</span>
                </div>
                <div className="tier-price">{p.price}</div>
                <h3 className="serif">{p.title}</h3>
                <p>{p.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const BookTiming = () => {
  const lane = BOOK_LANES[4];
  return (
    <section className="book-timing" id="timing">
      <div className="container">
        <div className="timing-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc}</p>
        </div>
        <div className="timeline">
          <div className="rail" aria-hidden="true"></div>
          {BOOK_TIMELINE.map((t, i) => (
            <div key={t.mark} className={`tl-item ${i % 2 === 0 ? 'left' : 'right'}`}>
              <div className="tl-dot" aria-hidden="true"></div>
              <div className="tl-card">
                <div className="tl-mark">{t.mark}</div>
                <h4 className="serif">{t.title}</h4>
                <p>{t.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BookCTA = () => (
  <section className="book-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="lhs">
        <div className="kicker">ROUNDTRIPS · BUILT TO BOOK</div>
        <h2 className="serif">Stop hunting. <em>Start booking.</em></h2>
        <p>RoundTrips is the booking workspace we built for ourselves: fare alerts, side-by-side accommodation, transit math, insurance rules. One tab. One trip. One set of receipts.</p>
        <div className="cta-actions">
          <a href="https://roundtrips.org" className="btn-primary">Open RoundTrips →</a>
          <a href="/journal/plan-two-week-trip" className="btn-ghost">Browse 248 itineraries</a>
        </div>
      </div>
    </div>
    <div className="coord">BOOK — PUBLISHED 25.04.2026</div>
    <div className="coord right">FIELD DESK Nº 091</div>
  </section>
);

const BookReading = () => {
  const [open, setOpen] = useBState(0);
  return (
    <section className="book-reading" id="reading">
      <div className="container">
        <div className="reading-grid">
          <div className="read-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VI · THE READING LIST</div>
              <h3 className="serif">Four pieces, <em>before you book.</em></h3>
            </div>
            <div className="card-rows">
              {BOOK_READING.map((r, i) => (
                <a key={r.slug} href={`/journal/${r.slug}`} className="reading-card">
                  <div className="rc-img" style={{ backgroundImage: `url(${r.img})` }}></div>
                  <div className="rc-body">
                    <div className="rc-meta">
                      <span className="tag">{r.tag}</span>
                      <span className="dur">{r.duration}</span>
                    </div>
                    <h4>{r.title}</h4>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <div className="faq-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VII · QUESTIONS WE GET A LOT</div>
              <h3 className="serif">The questions, <em>answered.</em></h3>
            </div>
            <div className="faq-list">
              {BOOK_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>
      </div>
    </section>
  );
};

Object.assign(window, { BookGround, BookInsurance, BookTiming, BookCTA, BookReading });