/* eslint-disable */
// Two Weeks — itinerary-length hub. Mirrors the three-day template's editorial
// vocabulary (cream/teal/tan, Playfair + DM Sans/Mono, numbered sections,
// hero masthead). Form Nº 14 in the Itineraries series.

const { useState: useTWState } = React;

/* ---------- HERO ---------- */
const TWHero = () => (
  <section className="solo-hero">
    <div
      className="hero-bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1531572753322-ad063cecc140?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">Two Weeks</span>
      </div>

      <div className="solo-mast">
        <div className="lhs">
          <span className="layer-tag">FOURTEEN DAYS · 34 GUIDES · {TW_META.newThisSeason} NEW THIS SEASON</span>
          <h1>
            Two<em>Weeks.</em>
          </h1>
          <p className="lede">
            The right-sized trip. <em>Long enough to land properly,</em> short enough that you still have a life to come back to. The desk's most-asked-about length, the trip readers most often book and most often get wrong. Twelve countries that genuinely repay fourteen days, eight itineraries by character, and the brief on the rhythm that makes the form work.
          </p>
        </div>
        <div className="rhs">
          <div className="solo-meta-card">
            <div className="row">
              <span className="k">Guides on file</span>
              <span className="v"><em>{TW_META.count}</em></span>
            </div>
            <div className="row">
              <span className="k">New this season</span>
              <span className="v">{TW_META.newThisSeason}</span>
            </div>
            <div className="row">
              <span className="k">Trip length</span>
              <span className="v">14 days · 13 nights</span>
            </div>
            <div className="row">
              <span className="k">Most-read age</span>
              <span className="v">{TW_META.topAge}</span>
            </div>
            <div className="row last">
              <span className="k">Updated</span>
              <span className="v">{TW_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 countries</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>By character</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º 14 · 14 DAYS · ONE COUNTRY</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 118 · IRIS</div>
  </section>
);

/* ---------- I · TWELVE COUNTRIES ---------- */
const TWPlaces = () => {
  const [region, setRegion] = useTWState("All");
  const regions = ["All", "Europe", "Asia", "Americas", "Africa", "Oceania"];
  const filtered = TW_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 countries,<em>two weeks each.</em></h2>
            <p>Picked because the country actually repays fourteen days — wide enough to support three regions, focused enough that you don't leave needing a second trip. Each card opens a hand-built day-by-day plan walked by the desk.</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 {TW_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 TWField = () => (
  <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 fourteen days is the form.</em></h2>
          <p>The opening pages of the Itineraries Desk's house essay on the two-week trip — what fourteen days actually buys you, and why most travelers spend it on the wrong country.</p>
        </div>
        <div className="right">
          <a href="/en/plan/itineraries/europe/plan-two-week-trip">Read the full essay <Icon name="arrow" size={12} /></a>
        </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,
      }}>
        "Two weeks is the sweet spot. It is enough time to get over the jet lag, sink into a local rhythm, and still have that 'I am not ready to go home' feeling at the end. The mistake most travelers make is trying to see a continent in fourteen days. You can see one country, deeply. You can see three cities, maybe four if they're close. After that the trip stops being a trip and starts being a route."
      </blockquote>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
        marginBottom: 18,
      }}>
        The hardest discipline of the fourteen-day trip is editorial: what you cut. A three-day trip cuts itself — there isn't time to be wrong. A month-long trip forgives every detour. Two weeks is the form that holds you to your choices. Pick the anchor — the one place, the one event, the one meal you came for — and build outward from there. Pick a region, not a country list. Pick a rhythm, not a schedule.
      </p>
      <p style={{
        fontSize: 15,
        lineHeight: 1.7,
        color: "rgba(241,235,224,0.78)",
        maxWidth: 760,
      }}>
        The two-week trip that works is the one that protects two empty days. Not buffer days, not rest days — empty days. The morning you find a market by accident. The afternoon you sit in a square with a glass of something. Those days are the trip. The booked museums and the rail passes are the scaffolding the trip leans on while it happens.
      </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º 14</p>
    </div>
  </section>
);

/* ---------- III · ITINERARIES BY CHARACTER ---------- */
const TWItins = () => (
  <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 length, eight different trips. First-timer route, safari and coast, train through Scandinavia, Patagonia in luxury, Japan with kids, the Balkans on a budget, Caribbean island-hop, solo Yucatán. Each is a complete day-by-day with a budget that holds in 2026 and a pace tested for fourteen days.</p>
        </div>
        <div className="right">All 34 two-week plans <Icon name="arrow" size={12} /></div>
      </div>

      <div className="itins-grid">
        {TW_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 CHARACTER (table) ---------- */
const TWByStyle = () => (
  <section className="solo-length" id="bucket">
    <div className="container">
      <div className="solo-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The fourteen-day<em>matrix.</em></h2>
          <p>Six shapes a two-week trip can take. Pick the row that matches the trip you actually want — the one country deep, the two-country pair, the grand loop, the safari and coast, the island-hop, the family trip with the per-week empty day.</p>
        </div>
        <div className="right">Pace planner <Icon name="arrow" size={12} /></div>
      </div>

      <div className="length-table">
        <div className="row head">
          <div>Trip character</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>
        {TW_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 TWReading = () => (
  <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 house essay; the rest are full country plans, hand-built. Read in order or skip to the trip you're already half-planning.</p>
        </div>
        <div className="right">All Itineraries essays <Icon name="arrow" size={12} /></div>
      </div>

      <div className="reading-list">
        {TW_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 TWVoices = () => (
  <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 form.</em></h2>
          <p>Two weeks is the trip the desk plans most often, both for readers and for themselves. These are the people writing it — what they cut, what they keep, and what they protect.</p>
        </div>
        <div className="right">Desk masthead <Icon name="arrow" size={12} /></div>
      </div>

      <div className="voices-grid">
        {TW_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 TWPractical = () => (
  <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. Tested on the road, ordered by how much they matter to a fourteen-day trip — the rhythm, the regions, the empty days, the meals you book and the ones you don't.</p>
        </div>
        <div className="right">Full planning guide <Icon name="arrow" size={12} /></div>
      </div>

      <div className="practical-grid">
        {TW_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 TWFAQ = () => {
  const [open, setOpen] = useTWState(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 two-week trip. 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">
            {TW_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 TWCTA = () => (
  <section className="solo-cta">
    <div
      className="bg"
      style={{ backgroundImage: `url(https://images.unsplash.com/photo-1531572753322-ad063cecc140?w=2000&q=80)` }}
    ></div>
    <div className="inner">
      <div className="kicker">PICK ONE COUNTRY · THREE REGIONS · TWO EMPTY DAYS</div>
      <h2>Plan a two-week trip<em>that actually fits.</em></h2>
      <p>Open a country, copy the day-by-day, read the brief, book the flight. Fourteen days, three regions, the rhythm that lets the trip become a memory instead of a route.</p>
      <div className="cta-actions">
        <a href="/en/destinations/europe/italy/how-to-spend-two-weeks" className="btn-p">Open Italy, two weeks →</a>
        <a href="/en/plan/itineraries/" className="btn-g">↑ Back to Itineraries</a>
      </div>
    </div>
    <div className="coord">TWO WEEKS · FORM Nº 14 · UPDATED 06.05.2026</div>
    <div className="coord right">FIELD DESK Nº 118</div>
  </section>
);

/* ---------- COMPOSE ---------- */
const TWApp = () => (
  <div data-screen-label="Two Weeks">
    <TWHero />
    <TWPlaces />
    <TWField />
    <TWItins />
    <TWByStyle />
    <TWReading />
    <TWVoices />
    <TWPractical />
    <TWFAQ />
    <TWCTA />
    <Footer />
  </div>
);

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