/* eslint-disable */
const DestHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?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/plan/">Plan</a>
        <span className="sep">/</span>
        <span className="here">Destinations</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">WHERE IN THE WORLD · 8 REGIONS</span>
          </div>
          <h1>Destinations<em>pick the continent first.</em></h1>
        </div>
        <p className="lede">
          Every other planning decision depends on this one. <em>Pick the region</em> — Europe, Asia, Americas, Africa, Middle East, Oceania, or somewhere the crowds haven't found yet — and the rest of the planning collapses into something manageable.
        </p>
      </div>

      <div className="types-rail">
        {DEST_LANES.map(l => (
          <a key={l.id} href={l.href || `#${l.id}`}>
            <span className="n">{l.num}</span>
            <span className="t">{l.title}{l.titleEm ? ` ${l.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="hero-coord">27°10'N · 78°02'E · TAJ MAHAL, AGRA</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 047</div>
  </section>
);

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

const DestLanes = () => (
  <section className="types-lanes" id="lanes">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Eight <em>regions.</em></h2>
          <p>Same budget, same passport, eight completely different worlds. Pick the region and the type of trip inside it starts to write itself.</p>
        </div>
        <div className="right">All regions <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {DEST_LANES.map(l => <DestLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const DestEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>on choosing a region.</em></h2>
          <p>From the desk that has watched thousands of itineraries begin in the wrong hemisphere. A few patterns worth naming.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"The region choice is not <em>a preference.</em> It's a constraint that shapes every other decision you'll make."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Iris Mendoza</div>
              <div className="role">Senior Editor · Plan Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>Most people come to us with a destination already half-chosen — not from research, but from familiarity. Someone they know went to Barcelona. They saw a documentary about Japan. The algorithm served them Santorini at the right moment. These are fine starting points. They are not the same as a decision.</p>
          <p>The region constrains everything downstream. A trip to Southeast Asia defaults to a different pace, a different daily cost, a different visa situation, and a different kind of jetlag than a trip to Western Europe. These defaults are not small. They are the trip. Getting the region wrong means fighting the defaults for two weeks.</p>
          <p>What we try to do is surface the actual trade-offs: the flight time you're willing to absorb, the climate you can plan around, the kind of strangeness you're ready for. Some travelers want the foreign to be legible — good signage, reliable trains, menus in translation. Others want to be genuinely lost for a week. Both are correct. But they point to different regions.</p>
          <p>If you're between two, lean toward the one you know less about. The familiar region will still be there next year. The one you've been putting off may be significantly different by the time you finally book it.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">6</div><div className="l">Inhabited regions<br />covered</div></div>
        <div className="item"><div className="n">772</div><div className="l">Destination guides<br />in the archive</div></div>
        <div className="item"><div className="n">2.1</div><div className="l">Avg. regions visited<br />per traveler/yr</div></div>
        <div className="item"><div className="n">8.7</div><div className="l">Reader rating,<br />region guide set</div></div>
      </div>
    </div>
  </section>
);

const CompassPanel = ({ p }) => (
  <div className={`rt-panel ${p.size}`}>
    <div className="pic" style={{ backgroundImage: `url(${p.img})` }}></div>
    <div className="body">
      <span className="pill">{p.tag}</span>
      <h4>{p.title}</h4>
      <p>{p.desc}</p>
    </div>
  </div>
);

const CompassSection = () => (
  <section className="roundtrips-section" id="compass">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">FIELD NOTES · THE REGION COMPASS</span></div>
          <h2>One thing each<em>region does best.</em></h2>
        </div>
        <p>Not a ranking. Not a recommendation. Just the one thing each region does that no other region does as well — the reason people keep going back to that specific part of the world when <em>everything else is equal.</em></p>
      </div>

      <div className="rt-grid">
        {COMPASS_PANELS.map((p, i) => <CompassPanel key={i} p={p} />)}
      </div>

      <div className="rt-footer">
        <div className="note">
          The complete region breakdowns — climate, visa, cost, best entry cities, shoulder season windows — live inside each region hub. <em>Pick the one that pulls you.</em>
        </div>
        <div className="actions">
          <a href="/en/europe/" className="btn-rt">Start with Europe →</a>
          <a href="/en/asia/" className="link-rt">Or try Asia</a>
        </div>
      </div>
    </div>
  </section>
);

const DestDecide = () => {
  const [picks, setPicks] = React.useState([1, 1, 1, 1]);
  const result = React.useMemo(() => {
    const [feel, interest, flight, visa] = picks;
    if (feel === 0 && interest === 1) return DEST_LANES.find(l => l.id === "europe");
    if (feel === 2) return DEST_LANES.find(l => l.id === "middle-east");
    if (feel === 3) return DEST_LANES.find(l => l.id === "africa");
    if (interest === 0) return DEST_LANES.find(l => l.id === "asia");
    if (interest === 2) return DEST_LANES.find(l => l.id === "oceania");
    if (flight === 0 && visa === 0) return DEST_LANES.find(l => l.id === "europe");
    if (flight === 0) return DEST_LANES.find(l => l.id === "americas");
    if (interest === 3) return DEST_LANES.find(l => l.id === "americas");
    return DEST_LANES.find(l => l.id === "europe");
  }, [picks]);

  return (
    <section className="types-decide">
      <div className="container">
        <div className="types-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Not sure? <em>Pick four answers.</em></h2>
            <p>Four small questions; we'll point you at the region most likely to be the right choice. Not binding — just a way to break the tie.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR REGION</div>
            <h3>Four answers,<em>one region.</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">RECOMMENDATION</div>
              <div className="r-type">{result.title}{result.titleEm && <em> {result.titleEm}</em>}</div>
              <div className="r-blurb">{result.desc}</div>
              {result.href && (
                <a href={result.href} style={{ display: "inline-block", marginTop: 14, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", color: "var(--tan)", textTransform: "uppercase", borderBottom: "1px solid var(--tan)", paddingBottom: 3 }}>
                  Explore {result.title} →
                </a>
              )}
            </div>
          </div>
          <div className="decide-rhs">
            {DEST_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 DestReading = () => (
  <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>by region.</em></h2>
          <p>Six essays from the planning desk. Pick the region you're circling; the rest is bedside.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {DEST_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 DestFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · BUT QUIETLY · ASKED</div>
            <h3>What people<em>actually ask.</em></h3>
            <p>Reader letters, lightly edited. These are the real questions — the ones people ask after they've already read the listicle and still aren't sure.</p>
          </div>
          <div className="faq-list">
            {DEST_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 DestCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1501854140801-50d01698950b?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PICK THE REGION · BUILD THE TRIP</div>
      <h2>The world is large.<em>Start somewhere specific.</em></h2>
      <p>The region is the first decision. Everything after it — the lane, the type, the budget, the dates — follows from that one choice. Make it deliberately.</p>
      <div className="actions">
        <a href="/en/europe/" className="btn-p">Start with Europe →</a>
        <a href="/en/plan/" className="btn-g">Back to Plan</a>
      </div>
    </div>
  </section>
);

const DestApp = () => (
  <>
    <DestHero />
    <DestLanes />
    <DestEssay />
    <CompassSection />
    <DestDecide />
    <DestReading />
    <DestFAQ />
    <DestCTA />
    <Footer />
  </>
);

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