/* eslint-disable */
const FlightsHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?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/book/">Book</a>
        <span className="sep">/</span>
        <span className="here">Flights</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE BOOKING DESK · FLIGHTS</span>
          </div>
          <h1>Book Flights<em>like someone who does this for a living.</em></h1>
        </div>
        <p className="lede">
          The window is real. The tools are knowable. The seat map is not a mystery. <em>Ten chapters</em> — timing, fares, cabins, seats, baggage, miles, routing, red-eyes, airports, codeshares — and one personal essay on the feeling at the gate.
        </p>
      </div>

      <div className="types-rail">
        {FLIGHT_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">35°32′N · 139°46′E · HANEDA APPROACH</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 091</div>
  </section>
);

const FlightCard = ({ 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"><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 FlightsCards = () => (
  <section className="types-lanes" id="cards">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The ten <em>chapters</em> of flight booking.</h2>
          <p>Every decision a flight-booker actually faces — from the first Google Flights tab to the seat map at check-in.</p>
        </div>
        <div className="right">All chapters <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {FLIGHT_CARDS.map(c => <FlightCard key={c.id} card={c} />)}
      </div>
    </div>
  </section>
);

const FlightsEssay = () => (
  <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 booking desk.</em></h2>
          <p>The patterns that hold across every route, every cabin class, every type of traveler.</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 window is <em>real.</em> The data is overwhelming. Last-minute fares are almost always more expensive than people remember."</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 · Book Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>People ask us when to book as if the answer changes constantly. It doesn't. The booking window for domestic is 6–8 weeks. For international it's 3–4 months. For peak-demand routes — Europe in July, Japan in late March, any December school break — move to 5–6 months. The data behind these numbers comes from studies of hundreds of millions of bookings. They keep producing the same answer.</p>
          <p>The mistake most travelers make isn't booking too late. It's second-guessing a good fare by $40. The window closes. The fare goes up. The seat assignment gets worse. You book the same flight for $180 more in the wrong seat.</p>
          <p>The fare-finding stack is also simpler than the internet wants it to be. Google Flights for the calendar view and price alerts. Hopper if you can't book yet and want a prediction. Going (formerly Scott's Cheap Flights) for error fares from your home airport. The airline's own site for the final booking — never an OTA on long-haul, because when something goes wrong, the OTA is a wall between you and a human being who can help.</p>
          <p>Seat selection matters more on long-haul than people realize. Row 14 vs row 32 is the question, not window vs aisle. And the upgrade to premium economy on an 8-hour flight is one of the better $200–$400 travel investments — if you're going to spend money on a trip, spend it on arriving functional, not on arriving broken and spending three days recovering.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">3–4</div><div className="l">Months out: best<br />intl booking window</div></div>
        <div className="item"><div className="n">$487</div><div className="l">Avg saved when<br />booking in window</div></div>
        <div className="item"><div className="n">8hrs</div><div className="l">Threshold for premium<br />economy upgrade math</div></div>
        <div className="item"><div className="n">9.1</div><div className="l">Reader confidence<br />after the full read</div></div>
      </div>
    </div>
  </section>
);

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

  const result = React.useMemo(() => {
    const [timing, route, comfort, miles] = picks;
    // Route the recommendation to the most relevant article
    if (timing === 0) return FLIGHT_CARDS.find(c => c.id === "booking-window");
    if (route === 3) return FLIGHT_CARDS.find(c => c.id === "multi-city-open-jaw");
    if (comfort === 3) return FLIGHT_CARDS.find(c => c.id === "cabin-classes");
    if (comfort === 2) return FLIGHT_CARDS.find(c => c.id === "cabin-classes");
    if (miles === 2 || miles === 3) return FLIGHT_CARDS.find(c => c.id === "miles-redemption");
    if (route === 2) return FLIGHT_CARDS.find(c => c.id === "booking-window");
    if (comfort === 1) return FLIGHT_CARDS.find(c => c.id === "seat-selection");
    return FLIGHT_CARDS.find(c => c.id === "fare-finding-tools");
  }, [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 — 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.</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">
            {FLIGHT_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 FlightsReading = () => (
  <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 flight-bookers.</em></h2>
          <p>Six pieces from the booking desk. One personal essay from Zoe. All bedside.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {FLIGHT_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 FlightsFAQ = () => {
  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 flight-bookers<em>actually ask.</em></h3>
            <p>Reader questions, lightly edited. Seven answers — the ones that come up every week.</p>
          </div>
          <div className="faq-list">
            {FLIGHT_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 FlightsCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">BOOK ANYTHING, START ANYWHERE</div>
      <h2>The window opens.<em>Book when it does.</em></h2>
      <p>The data is clear. The tools are built. The desk is on call. Stop hunting tabs and start with the chapter that matches your situation.</p>
      <div className="actions">
        <a href="#cards" className="btn-p">Open the chapters →</a>
        <a href="/en/book/" className="btn-g">Back to Book</a>
      </div>
    </div>
  </section>
);

const FlightsApp = () => (
  <>
    <FlightsHero />
    <FlightsCards />
    <FlightsEssay />
    <FlightsDecide />
    <FlightsReading />
    <FlightsFAQ />
    <FlightsCTA />
    <Footer />
  </>
);

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