/* eslint-disable */
// Round the World — itinerary-length hub. Mirrors the three-day template's editorial vocabulary
// (cream/teal/tan, Playfair + DM Sans/Mono, numbered sections, hero masthead).

const { useState: useRTWState } = React;

/* ---------- HERO ---------- */
const RTWHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=2400&q=85)` }}
    ></div>
    <div className="hero-scrim"></div>
    <Nav />

    <div className="container">
      <div className="solo-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/plan/">Plan</a>
        <span className="sep">/</span>
        <a href="/en/plan/itineraries/">Itineraries</a>
        <span className="sep">/</span>
        <span className="here">Round the World</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">ONE TICKET · ONE YEAR · {RTW_META.count} GUIDES</span>
          <h1>
            Round the<em>World.</em>
          </h1>
          <p className="lede">
            The once-in-a-lifetime trip. <em>Three months minimum,</em> usually a year, two or three continents, one direction. The form most travelers think about for a decade and book exactly once. Twelve regions worth the long stay, eight long-form itineraries, and the brief on what changes when the trip is the year.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>{RTW_META.count}</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{RTW_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Trip length</span>
              <span className="v">90 – 365 days</span>
            </div>
            <div className="row">
              <span className="k">Most-read age</span>
              <span className="v">{RTW_META.topAge}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{RTW_META.updated}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="solo-toc">
        <span className="lbl">In this issue</span>
        <a href="#places"><span className="n">I</span>Twelve regions</a>
        <span className="dot">·</span>
        <a href="#field"><span className="n">II</span>Field notes</a>
        <span className="dot">·</span>
        <a href="#itins"><span className="n">III</span>Eight itineraries</a>
        <span className="dot">·</span>
        <a href="#bucket"><span className="n">IV</span>The matrix</a>
        <span className="dot">·</span>
        <a href="#reading"><span className="n">V</span>Reading list</a>
        <span className="dot">·</span>
        <a href="#voices"><span className="n">VI</span>The desk</a>
        <span className="dot">·</span>
        <a href="#practical"><span className="n">VII</span>The brief</a>
        <span className="dot">·</span>
        <a href="#faq"><span className="n">VIII</span>FAQ</a>
      </div>
    </div>

    <div className="hero-coord">FORM Nº 12 · 365 DAYS · ONE DIRECTION</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 201 · IRIS</div>
  </section>
);

/* ---------- I · TWELVE REGIONS ---------- */
const RTWPlaces = () => {
  const [region, setRegion] = useRTWState("All");
  const regions = ["All", "Europe", "Asia", "Americas", "Africa", "Middle East", "Tickets"];
  const filtered = RTW_PLACES.filter(p => region === "All" || p.region === region);

  return (
    <section className="solo-places" id="places">
      <div className="container">
        <div className="solo-section-head">
          <div className="num">I</div>
          <div className="titles">
            <h2>Twelve regions,<em>one trip.</em></h2>
            <p>Eight long-stay regions and four ticket-build guides — the actual moving parts of a round-the-world trip. A year on the road IS a round-the-world trip; the regional plans are the substance, the ticket articles are the mechanics.</p>
          </div>
          <div className="filter-pills">
            {regions.map(r => (
              <button
                key={r}
                className={`f-pill ${region === r ? "on" : ""}`}
                onClick={() => setRegion(r)}
              >{r}</button>
            ))}
          </div>
        </div>

        <div className="places-grid">
          {filtered.map((p, i) => (
            <a key={p.id} href={p.href} className={`place-card ${i === 0 ? "feature" : ""}`}>
              <div className="img" style={{ backgroundImage: `url(${p.img})` }}></div>
              <div className="scrim"></div>
              <span className="rank">No. {String(p.rank).padStart(2, "0")}</span>
              {p.tag && <span className="tag">{p.tag}</span>}
              <div className="body">
                <div className="loc">
                  <span className="city">{p.city}</span>
                  <span className="country">{p.country}</span>
                </div>
                <p className="why">{p.why}</p>
                <div className="meta">
                  <span><em>{p.nights}</em> days</span>
                  <span className="sep">·</span>
                  <span>{p.budget}</span>
                  <span className="sep">·</span>
                  <span>{p.season}</span>
                </div>
                <div className="best-for">
                  {p.best.map(b => <span key={b}>{b}</span>)}
                </div>
                <div className="coord">{p.coord}</div>
              </div>
            </a>
          ))}
        </div>
        <div className="places-foot">
          <span className="ct">Showing {filtered.length} of {RTW_PLACES.length}</span>
          <a href="/en/plan/itineraries/">All itineraries by length <Icon name="arrow" size={12} /></a>
        </div>
      </div>
    </section>
  );
};

/* ---------- II · FIELD NOTES (essay quote, dark band) ---------- */
const RTWField = () => (
  <section className="solo-practical" id="field" style={{ paddingTop: 110, paddingBottom: 110 }}>
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes.<em>Why a year is the form.</em></h2>
          <p>Drawn from the desk's house essay on the round-the-world ticket — what it actually buys you, what it doesn't, and why most readers who book one regret only one thing.</p>
        </div>
        <div className="right">Read the seed article <Icon name="arrow" size={12} /></div>
      </div>

      <blockquote style={{
        fontFamily: "var(--serif)",
        fontSize: "clamp(22px, 2.4vw, 30px)",
        lineHeight: 1.45,
        color: "var(--cream)",
        fontStyle: "italic",
        maxWidth: 920,
        borderLeft: "1px solid var(--tan)",
        padding: "8px 0 8px 32px",
        marginBottom: 28,
      }}>
        "An RTW ticket is not a long vacation — it's a year of practice in two skills: choosing what to skip, and arriving slowly. Sixteen segments, twelve months, one direction; that's the math the alliance gives you. The traveler's math is harder. Two long stays, four real continents, the visas mapped before the flights, and the honest budget of $50 to $200 a day depending on the region. The ticket is the easy part of the trip. The trip itself is everything you do between segments."
      </blockquote>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
        marginBottom: 18,
      }}>
        Round-the-world tickets cost $3,000 to $6,000 and let you visit three to six continents on one fare. Star Alliance and OneWorld are the two main alliances; specialist agents like AirTreks mix airlines and often beat both for complex routes. You travel one direction — east or west — and you can't backtrack on the same continent. The cap is sixteen segments and twelve months. Most readers book the alliance ticket, walk between four and six continents, and come home with a different set of priorities than they left with.
      </p>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
      }}>
        What you protect, in those twelve months, is the same thing every good itinerary protects: enough margin that the trip can surprise you. The plan isn't the trip. The plan is what makes room for the trip — and on a year-long trip, the plan also has to make room for the traveler.
      </p>
      <p style={{
        marginTop: 32,
        fontFamily: "var(--mono)",
        fontSize: 11,
        letterSpacing: "0.18em",
        color: "var(--tan)",
        textTransform: "uppercase",
      }}>— Iris Mendoza, Itineraries Desk · House essay Nº 12</p>
    </div>
  </section>
);

/* ---------- III · ITINERARIES BY CHARACTER ---------- */
const RTWItins = () => (
  <section className="solo-itins" id="itins">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">III</div>
        <div className="titles">
          <h2>Eight itineraries,<em>by character.</em></h2>
          <p>Same form, eight different trips. Long-term Europe, India, Southeast Asia, East Africa, the no-car Europe build, the public-transport Middle East, South America without Spanish, and India by sleeper train. Each is a complete regional plan that can serve as the core of an RTW year.</p>
        </div>
        <div className="right">All long-term plans <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {RTW_ITINS.map(it => (
          <a key={it.ref} href={it.href} className="itin-card">
            <div className="pic" style={{ backgroundImage: `url(${it.img})` }}>
              <span className="ref-pill">{it.ref}</span>
              <span className="day-pill"><em>{it.days}</em><span className="d">days</span></span>
            </div>
            <div className="body">
              <h4>{it.title}<em> {it.em}</em></h4>
              <div className="tags">
                {it.tags.map(t => <span key={t}>{t}</span>)}
              </div>
              <div className="foot">
                <span className="by">By {it.author}</span>
                <span className="price">{it.price}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- IV · BY SHAPE (table) ---------- */
const RTWByStyle = () => (
  <section className="solo-length" id="bucket">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The round-the-world<em>matrix.</em></h2>
          <p>Six shapes the long trip actually takes. Pick the row that matches the trip you can actually take, not the year you'd ideally want to take.</p>
        </div>
        <div className="right">Pace planner <Icon name="arrow" size={12} /></div>
      </div>

      <div className="length-table">
        <div className="row head">
          <div>Trip shape</div>
          <div className="d">Days</div>
          <div className="ct">Guides</div>
          <div className="ex">Best examples</div>
          <div className="pr">Starting</div>
          <div></div>
        </div>
        {RTW_BY_STYLE.map(l => (
          <a href="/en/plan/itineraries/" key={l.len} className="row">
            <div className="lbl">{l.len}</div>
            <div className="d"><em>{l.days}</em></div>
            <div className="ct">{l.count} guides</div>
            <div className="ex">{l.examples}</div>
            <div className="pr">{l.price}</div>
            <div className="go"><Icon name="arrow" size={14} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- V · READING LIST ---------- */
const RTWReading = () => (
  <section className="solo-reading" id="reading">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">V</div>
        <div className="titles">
          <h2>Eight reads,<em>by depth.</em></h2>
          <p>The pieces sitting one click below this page. The first is the seed article — how the RTW ticket actually works. The rest are the long-stay pack lists, visa briefs, and honest budgets that turn a ticket into a trip.</p>
        </div>
        <div className="right">All long-term essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {RTW_READING.map((r, i) => (
          <a key={i} href={r.href} className="r-row">
            <div className="n">{String(i + 1).padStart(2, "0")}</div>
            <div className="tag">{r.tag}</div>
            <div className="t">{r.title}<em>{r.em}</em></div>
            <div className="by">{r.author}</div>
            <div className="dur">{r.duration}</div>
            <div className="go"><Icon name="arrow" size={12} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VI · DESK / VOICES ---------- */
const RTWVoices = () => (
  <section className="solo-voices" id="voices">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VI</div>
        <div className="titles">
          <h2>The Itineraries desk.<em>Three editors on the year.</em></h2>
          <p>The round-the-world trip is the form the desk argues about most. These are the people writing it — what they go for, and what they keep coming back to.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid">
        {RTW_VOICES.map(v => (
          <article key={v.name} className="voice">
            <div className="av" style={{ backgroundImage: `url(${v.av})` }}></div>
            <div className="who">
              <div className="name">{v.name}</div>
              <div className="role">{v.role}</div>
            </div>
            <p className="line">"{v.line}"</p>
            <div className="foot">
              <span className="trips">{v.trips} field trips</span>
              <a href="/en/plan/itineraries/">Read their lane <Icon name="arrow" size={12} /></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VII · THE BRIEF ---------- */
const RTWPractical = () => (
  <section className="solo-practical" id="practical">
    <div className="container">
      <div className="solo-section-head dark">
        <div className="num">VII</div>
        <div className="titles">
          <h2>The brief.<em>Six tips, in order of importance.</em></h2>
          <p>The non-obvious things. Ordered by how much they matter to a year on the road.</p>
        </div>
        <div className="right">Full long-trip guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {RTW_PRACTICAL.map((p, i) => (
          <div key={i} className="pr-card">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="kind">{p.k}</div>
            <h4>{p.h}</h4>
            <p>{p.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- VIII · FAQ ---------- */
const RTWFAQ = () => {
  const [open, setOpen] = useRTWState(0);
  return (
    <section className="solo-faq" id="faq">
      <div className="container">
        <div className="faq-shell">
          <div className="lhs">
            <div className="solo-section-head stacked">
              <div className="num">VIII</div>
              <div className="titles">
                <h2>The questions<em>readers send in.</em></h2>
                <p>Lightly edited reader letters about the round-the-world ticket. If yours isn't here, the planning desk reads every email.</p>
              </div>
            </div>
            <a href="mailto:itineraries@howto.travel" className="ask">Ask the desk →</a>
          </div>
          <div className="rhs">
            {RTW_FAQS.map((f, i) => (
              <div key={i} className={`f-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q">
                  <span className="qt">{f.q}</span>
                  <span className="tg">+</span>
                </div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- CTA ---------- */
const RTWCTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">ONE DIRECTION · TWO LONG STAYS · TWELVE MONTHS</div>
      <h2>Plan a round-the-world trip<em>that actually books.</em></h2>
      <p>Open the seed article, price an alliance, map the visas, pick the regional plans. Twelve months, sixteen segments, one direction, one good story — the year, not the vacation.</p>
      <div className="cta-actions">
        <a href="/en/book/book-a-round-the-world-ticket" className="btn-p">Book a round-the-world ticket →</a>
        <a href="/en/plan/itineraries/" className="btn-g">↑ Back to Itineraries</a>
      </div>
    </div>
    <div className="coord">RTW · FORM Nº 12 · UPDATED 06.05.2026</div>
    <div className="coord right">FIELD DESK Nº 201</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const RTWApp = () => (
  <div data-screen-label="Round the World">
    <RTWHero />
    <RTWPlaces />
    <RTWField />
    <RTWItins />
    <RTWByStyle />
    <RTWReading />
    <RTWVoices />
    <RTWPractical />
    <RTWFAQ />
    <RTWCTA />
    <Footer />
  </div>
);

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