/* eslint-disable */

// ---- Hero ----
const TimingHero = () => (
  <section className="timing-hero">
    <div className="timing-hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1495571758719-6ec1e876d6ae?w=2400&q=80)` }}></div>
    <div className="timing-hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="timing-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/book/">Book</a>
        <span className="sep">/</span>
        <span className="here">Timing Strategy</span>
      </div>
      <div className="timing-mast">
        <div>
          <div className="timing-kicker-row">
            <span className="timing-layer-tag">THE BOOKING DESK · WHEN TO PULL EACH TRIGGER</span>
          </div>
          <h1>Timing<em>every trigger has a window.</em></h1>
        </div>
        <p className="timing-lede">
          Booking is a <em>sequence,</em> not an afternoon. Flights, hotels, trains, rental cars, tours, cruises — each one has a different curve. Pull too early on some, too late on others, and you've left money — and seats — on the table.
        </p>
      </div>

      <div className="timing-rail">
        {TIMING_CARDS.slice(0, 8).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="timing-hero-coord">40°41′N · 74°00′W · JFK DEPARTURE HALL</div>
    <div className="timing-hero-credit">PHOTO — FIELD DESK Nº 102</div>
  </section>
);

// ---- Card component ----
const TimingCard = ({ card }) => (
  <a href={card.href} className={`timing-card ${card.size}`}>
    <div className="timing-card-img" style={{ backgroundImage: `url(${card.img})` }}></div>
    <div className="timing-card-scrim"></div>
    <span className="timing-corner-num">{card.num}</span>
    {card.badge && <span className="timing-corner-tag">{card.badge}</span>}
    <div className="timing-card-body">
      <div className="timing-card-topic"><span className="dot"></span>{card.topic}</div>
      <h3>{card.title}{card.titleEm && <em> {card.titleEm}</em>}</h3>
      <p className="timing-card-desc">{card.desc}</p>
      <div className="timing-card-meta">
        <span>{card.count}</span>
        <span>·</span>
        <span>{card.read}</span>
        <span className="timing-arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

// ---- Cards grid ----
const TimingCards = () => (
  <section className="timing-cards-section" id="cards">
    <div className="container">
      <div className="timing-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Ten <em>timing windows</em> to know.</h2>
          <p>Each booking category has its own curve. Learning them once saves money on every trip you take for the rest of your life.</p>
        </div>
        <div className="right">All guides <Icon name="arrow" size={12} /></div>
      </div>
      <div className="timing-card-grid">
        {TIMING_CARDS.map(c => <TimingCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

// ---- Countdown framework ----
const TimingCountdown = () => {
  const [active, setActive] = React.useState(0);
  const step = TIMING_COUNTDOWN[active];

  return (
    <section className="timing-countdown" id="countdown">
      <div className="container">
        <div className="timing-section-head">
          <div className="num">II</div>
          <div className="titles">
            <h2>Six months <em>to forty-eight hours.</em></h2>
            <p>The booking sequence, mapped from destination decision to departure morning. Each milestone has one job. Miss one and the next costs more.</p>
          </div>
          <div className="right">The full sequence <Icon name="arrow" size={12} /></div>
        </div>

        <div className="countdown-shell">
          <div className="countdown-lhs">
            <div className="cd-steps">
              {TIMING_COUNTDOWN.map((s, i) => (
                <button
                  key={i}
                  className={`cd-step ${active === i ? "sel" : ""}`}
                  onClick={() => setActive(i)}
                >
                  <span className="cd-mark">{s.mark}</span>
                  <span className="cd-action">{s.action}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="countdown-rhs">
            <div className="cd-detail-card">
              <div className="cd-detail-mark">{step.mark}</div>
              <h3 className="cd-detail-action">{step.action}</h3>
              <p className="cd-detail-body">{step.detail}</p>
              <a href="/en/book/timing/flight-windows/" className="cd-cta">
                Read the full guide <Icon name="arrow" size={14} />
              </a>
            </div>
            <div className="cd-visual">
              <div className="cd-track">
                {TIMING_COUNTDOWN.map((_, i) => (
                  <div
                    key={i}
                    className={`cd-node ${i === active ? "active" : ""} ${i < active ? "past" : ""}`}
                    onClick={() => setActive(i)}
                  >
                    <div className="cd-dot"></div>
                    {i < TIMING_COUNTDOWN.length - 1 && <div className="cd-line"></div>}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---- Editorial essay ----
const TimingEssay = () => (
  <section className="timing-essay" id="essay">
    <div className="container">
      <div className="timing-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>The booking desk <em>on pulling triggers.</em></h2>
          <p>From the editors who have watched thousands of bookings get made, mostly wrong, for entirely understandable reasons.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="timing-essay-spread">
        <div className="timing-essay-lhs">
          <p className="timing-pull">"Booking is not an <em>afternoon.</em> It is a sequence. The sequence has a shape. The shape is not a mystery."</p>
          <div className="timing-byline">
            <div className="timing-av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">The Book Desk</div>
              <div className="role">Editorial · Spring 2026</div>
            </div>
          </div>
        </div>
        <div className="timing-essay-rhs">
          <p>The most expensive thing most travelers do is treat booking as a single event. They sit down on a Sunday with a credit card and try to do it all — flights, hotel, trains, rental car, tours — in one session. Two hours later they've paid peak rates on three of the five because they made them at the wrong time.</p>
          <p>The fix is not heroic. It is a <em>sequence.</em> Each category has a booking window — a range of days before departure when price and availability cross in your favor. Miss the window in one direction and you're paying for flexibility you didn't ask for. Miss it in the other and everything that was €80 is now €280.</p>
          <p>Flights: the window peaks at 90–120 days for international, 6–8 weeks for domestic. Hotels: a surprisingly different curve — most bottom at 3–4 weeks out, unless you're going during peak season. Trains in Europe: the cheapest fares appear at the exact moment the booking window opens (180 days on Eurostar, 120 days on TGV), and the cheap inventory is gone within weeks.</p>
          <p>What this page is: the ten categories, their individual windows, and a countdown from T-6 months to the morning you leave. What it is not: a way to guarantee the cheapest possible price. Nothing does that. This is about not making the expensive mistakes, systematically, every time.</p>
        </div>
      </div>
      <div className="timing-essay-stats">
        <div className="item"><div className="n">$487</div><div className="l">Average saved<br />per trip booked<br />by our windows</div></div>
        <div className="item"><div className="n">90</div><div className="l">Days: international<br />flight sweet spot<br />(both directions)</div></div>
        <div className="item"><div className="n">180</div><div className="l">Days: when Eurostar<br />opens — and cheap<br />fares go within weeks</div></div>
        <div className="item"><div className="n">3×</div><div className="l">Summer rental car<br />price spike, March<br />vs July booking</div></div>
      </div>
    </div>
  </section>
);

// ---- Zoe card ----
const ZoeCard = () => (
  <section className="timing-zoe" id="zoe">
    <div className="container">
      <div className="timing-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>Field notes <em>from the journal.</em></h2>
          <p>One essay from a trip where the timing didn't go to plan. By Zoe.</p>
        </div>
        <div className="right"><a href="/journal/">All journal essays <Icon name="arrow" size={12} /></a></div>
      </div>
      <a href={ZOE_TIMING_CARD.slug} className="zoe-card-wide">
        <div className="zoe-card-img" style={{ backgroundImage: `url(${ZOE_TIMING_CARD.img})` }}></div>
        <div className="zoe-card-scrim"></div>
        <div className="zoe-card-body">
          <div className="zoe-tag-row">
            <span className="zoe-badge">{ZOE_TIMING_CARD.tag}</span>
            <span className="zoe-read">{ZOE_TIMING_CARD.readTime} read</span>
          </div>
          <h3>{ZOE_TIMING_CARD.title}</h3>
          <p>{ZOE_TIMING_CARD.teaser}</p>
          <span className="zoe-link">Read the essay <Icon name="arrow" size={14} /></span>
        </div>
      </a>
    </div>
  </section>
);

// ---- Reading list ----
const TimingReading = () => (
  <section className="timing-reading" id="reading">
    <div className="container">
      <div className="timing-section-head">
        <div className="num">V</div>
        <div className="titles">
          <h2>The reading list <em>on timing.</em></h2>
          <p>Six essays from the booking desk. Read the sequence essay first; the rest are sorted by what you're booking next.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {TIMING_READING.map((r, i) => (
          <a key={i} href="/journal/" className="timing-reading-row">
            <div className="rr-num">{String(i + 1).padStart(2, "0")}</div>
            <div className="rr-title">{r.title}{r.em && <em> {r.em}</em>}</div>
            <div className="rr-tag">{r.tag}</div>
            <div className="rr-duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ---- FAQ ----
const TimingFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="timing-faq" id="faq">
      <div className="container">
        <div className="timing-faq-grid">
          <div className="timing-faq-lhs">
            <div className="timing-faq-kicker">FREQUENTLY · BUT QUIETLY · ASKED</div>
            <h3>What people<em> actually ask</em><em> about timing.</em></h3>
            <p>Reader letters, lightly edited. The full FAQ has thirty more.</p>
          </div>
          <div className="timing-faq-list">
            {TIMING_FAQS.map((f, i) => (
              <div key={i} className={`timing-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="timing-fq">
                  <span>{f.q}</span>
                  <span className="toggle">{open === i ? "−" : "+"}</span>
                </div>
                <div className="timing-fa">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ---- CTA ----
const TimingCTA = () => (
  <section className="timing-cta">
    <div className="timing-cta-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=2000&q=80)` }}></div>
    <div className="timing-cta-scrim"></div>
    <div className="timing-cta-inner">
      <div className="timing-cta-kicker">BOOK CONFIDENTLY, LEAVE NOTHING ON THE TABLE</div>
      <h2>Know the window.<em>Pull the trigger.</em></h2>
      <p>The sequence is written. The windows are mapped. The only thing left is to open the calendar and start — in the right order.</p>
      <div className="timing-cta-actions">
        <a href="/en/book/" className="timing-btn-p">Back to Book</a>
        <a href="/en/book/timing/flight-windows/" className="timing-btn-g">Start with flights →</a>
      </div>
    </div>
  </section>
);

// ---- App ----
const TimingApp = () => (
  <>
    <TimingHero />
    <TimingCards />
    <TimingCountdown />
    <TimingEssay />
    <ZoeCard />
    <TimingReading />
    <TimingFAQ />
    <TimingCTA />
    <Footer />
  </>
);

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