// Asia landing — composer + sections.
// Section markup is keyed to asia.css class names. Don't rename without
// updating both. Data lives in asia-data.jsx.

const AsHero = () => (
  <section className="as-hero">
    <div className="as-hero-bg" />
    <div className="as-hero-collage" aria-hidden="true">
      {AS_HERO_COLLAGE.map((f, i) => (
        <div key={i} className={`frame f${i + 1}`} style={{ backgroundImage: `url('${f.src}')` }} data-cap={f.cap} />
      ))}
    </div>
    <div className="as-hero-grid">
      <div>
        <div className="as-hero-trail">
          <a href="/" className="crumb">HowTo: Travel</a>
          <span className="sep">/</span>
          <span>Regions</span>
          <span className="sep">/</span>
          <span>Asia</span>
        </div>
        <h1>A field guide to <em>Asia.</em></h1>
        <p className="lede"><strong>740 guides. 48 countries. 1,400 contributors who actually went.</strong> An editorial atlas to monsoons, mountains, megacities, and the slow boats in between. Region by region, season by season — the way Asia actually works.</p>
      </div>
      <aside className="as-hero-side">
        <div className="as-hero-stats">
          {AS_HERO_STATS.map((s, i) => (
            <div key={i} className="as-hero-stat">
              <div className="n">{s.n}</div>
              <div className="l">{s.label}</div>
            </div>
          ))}
        </div>
        <div className="as-hero-meta">
          {AS_HERO_META.map((m, i) => (
            <div key={i} className="row"><span>{m.k}</span><b>{m.v}</b></div>
          ))}
        </div>
      </aside>
    </div>
    <div className="as-hero-foot">
      <p className="as-hero-quote">"Asia rewards staying still — one city for a week beats five cities in a week, every time the wind picks up."<span className="by">— Theo Nakamura, Senior Editor · Asia</span></p>
      <form className="as-hero-search" onSubmit={(e) => e.preventDefault()}>
        <Icon name="search" size={16} />
        <input placeholder="Search 740 Asia guides — 'Tokyo first trip', 'monsoon Kerala'..." />
        <button>Search</button>
      </form>
    </div>
  </section>
);

const AsAnchor = () => (
  <nav className="as-anchor" aria-label="On this page">
    <div className="as-anchor-inner">
      <span className="lbl">In this issue</span>
      {AS_ANCHOR.map((a) => <a key={a.href} href={a.href}>{a.label}</a>)}
    </div>
  </nav>
);

const AsIntro = () => (
  <section className="as-sec as-intro" id="intro">
    <div className="container as-intro-grid">
      <div className="from">
        <div className="lbl">From the Field Desk</div>
        <div className="name">Theo Nakamura</div>
        <div className="role">Senior Editor · Asia</div>
        <div className="stamp">Issue<em>Nº 15</em>Spring '26</div>
      </div>
      <div className="body">
        <p><strong>Asia is not one place.</strong> It's the temptation everyone falls into the first time — to plan a "two-week Asia trip" the way you'd plan a two-week Europe trip. Forty-eight countries, four time zones, more languages than the Americas and Europe combined. The continent doesn't reduce to a list of cities. It reduces, if anything, to a list of regions.</p>
        <p>The Asia worth writing about is the patient one. The one you find by giving Tokyo a week, Hanoi five days, Kyoto more than three. By taking the train when the flight is faster, because the train is the country. By staying long enough that the breakfast vendor knows your order. <strong>Two cities a week, max.</strong></p>
        <p>This page is the manual we wished existed when we started. Everything we'd send a friend before their first Asia trip — and a few things only useful on the fifth.</p>
        <div className="sig">— Theo</div>
      </div>
      <aside className="toc">
        <div className="lbl">Table of contents</div>
        <ol>
          {AS_TOC.map((t, i) => (
            <li key={i}>
              <a href={`#${["intro","countries","regions","when","itineraries","food","trains","budget","language","festivals","neighborhoods","packing"][i] || ""}`}>{t.t}</a>
              <span className="pg">{t.pg}</span>
            </li>
          ))}
        </ol>
      </aside>
    </div>
  </section>
);

const AsCountries = () => (
  <section className="as-sec as-countries" id="countries">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 01</div>
          <h2>14 destinations, sorted <em>honestly.</em></h2>
          <p>Asia's countries by how many guides we have, not by GDP or alphabet. Featured below: the country we have written about for the longest, and the one most readers underestimate.</p>
        </div>
        <div className="right"><a className="view-all" href="/en/plan/itineraries/asia">View all 48 <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="as-countries-grid">
        {AS_COUNTRIES.map((c, i) => (
          <a key={i} className={`as-country${c.featured ? " featured" : ""}`} href={`/asia/${c.name.toLowerCase().replace(/\s+/g, "-")}/`}>
            <div className="country-img" style={{ backgroundImage: `url('${c.img}')` }} />
            <div className="top">
              <div className="flag" style={{ backgroundImage: `url('${c.flag}')`, backgroundSize: "cover" }} aria-hidden="true" />
              <div className="num">{String(i + 1).padStart(2, "0")}</div>
            </div>
            <div className="body">
              <div>
                <h3 className="name">{c.name}</h3>
                <div className="cap">{c.cap}</div>
                {c.featured && <p className="lede">{c.lede}</p>}
              </div>
              <div className="stats">
                <span><b>{c.guides}</b> guides</span>
                <span><b>{c.days}</b> days</span>
              </div>
            </div>
            <span className="arrow">Read →</span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const AsClusters = () => (
  <section className="as-sec as-clusters" id="regions">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 02</div>
          <h2>The continent in <em>five clusters.</em></h2>
          <p>Borders are political; weather and food are not. We group Asia the way travelers actually move through it — by climate, by season, by table.</p>
        </div>
      </header>
      {AS_CLUSTERS.map((cl, i) => (
        <div key={i} className="as-cluster-row">
          <div className="lead">
            <div className="num">{cl.num} · Cluster</div>
            <h3>The <em>{cl.titleEm}</em></h3>
            <p>{cl.blurb}</p>
          </div>
          {cl.cards.map((card, j) => (
            <article key={j} className="as-cluster-card">
              <div className="top">
                <span className="when">{card.when}</span>
                <span className="pin">{card.pin}</span>
              </div>
              <h4>{card.h4}</h4>
              <p>{card.p}</p>
              <div className="tags">{card.tags.map((t) => <span key={t} className="tag">{t}</span>)}</div>
            </article>
          ))}
        </div>
      ))}
    </div>
  </section>
);

const AsWhen = () => (
  <section className="as-sec as-when" id="when">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 03</div>
          <h2>When to go — <em>monsoons & seasons.</em></h2>
          <p>Shoulder season isn't a single month, and it's reversed in Central Asia. Here is the year, region by region — wet, dry, peak, and the festival weeks that bend it.</p>
        </div>
      </header>
      <div className="as-when-grid">
        <div className="as-when-cal">
          <table>
            <thead>
              <tr>
                <th>Region</th>
                {AS_WHEN_HEAD.map((m) => <th key={m}>{m}</th>)}
              </tr>
            </thead>
            <tbody>
              {AS_WHEN_ROWS.map((r) => (
                <tr key={r.region}>
                  <td className="region">{r.region}</td>
                  {r.months.map((m, k) => (
                    <td key={k}><span className={`pill ${m === "P" ? "peak" : m === "S" ? "shoulder" : m === "F" ? "fest" : "low"}`}>{m}</span></td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
          <div className="as-when-cal-legend">
            {AS_WHEN_LEGEND.map((l) => <span key={l.cls}><i className={`pill ${l.cls}`} />{l.label}</span>)}
          </div>
        </div>
        <div className="as-when-notes">
          {AS_WHEN_NOTES.map((n, i) => (
            <article key={i} className="as-when-note">
              <h4>{n.h4}</h4>
              <p>{n.p}</p>
              <div className="meta">{n.meta.map((m, k) => <span key={k}>{m}</span>)}</div>
            </article>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const AsItineraries = () => (
  <section className="as-sec as-iti" id="itineraries">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 04</div>
          <h2>Six itineraries worth <em>stealing.</em></h2>
          <p>The plans we'd send to a friend, road-tested and updated each spring. Click for day-by-day notes, packing tweaks, and the exact trains we caught.</p>
        </div>
        <div className="right"><a className="view-all" href="/en/plan/itineraries/asia">All 38 itineraries <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="as-iti-grid">
        {AS_ITIS.map((it, i) => (
          <a key={i} className="as-iti-card" href={`/en/plan/itineraries/asia/${it.h3.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "")}`}>
            <div className="head">
              <div className="days">{it.days}<span>days · nights</span></div>
              <span className="pill">{it.pill}</span>
            </div>
            <h3>{it.h3.includes(",") ? <>{it.h3.split(",")[0]},<br /><em>{it.h3.split(",").slice(1).join(",").trim()}</em></> : it.h3}</h3>
            <p className="lede">{it.lede}</p>
            <ol className="stops">
              {it.stops.map((s, j) => (
                <li key={j}><span className="n">{s.n}</span><span className="place">{s.place}</span><span className="nights">{s.nights}</span></li>
              ))}
            </ol>
            <div className="foot">
              <span className="cost">{it.cost}</span>
              <span>{it.by}</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const AsFood = () => (
  <section className="as-sec as-food" id="food">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 05</div>
          <h2>Food &amp; drink, country <em>by country.</em></h2>
          <p>One immutable rule per country. Order this, eat that way, never make the obvious mistake.</p>
        </div>
      </header>
      <div className="as-food-grid">
        {AS_FOOD.map((f, i) => (
          <article key={i} className={`as-food-card ${f.span}`}>
            <div className="top">
              <span className="country">{f.country}</span>
              <span className="glyph" aria-hidden="true">{f.glyph}</span>
            </div>
            <div>
              <h4>{f.h4}</h4>
              <p>{f.p}</p>
            </div>
            <div className="pair"><b>{f.pair.a}</b> · with {f.pair.b}</div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AsTrains = () => (
  <section className="as-sec as-trains" id="trains">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 06</div>
          <h2>Bullet trains, sleepers, <em>tuk-tuks.</em></h2>
          <p>Asia has the fastest trains on earth (Japan, China) and some of the slowest (Vietnam reunification, Indian Railways). Both are worth the seat.</p>
        </div>
      </header>
      <div className="as-trains-grid">
        <div className="blurb">
          <p><strong>The Shinkansen is the trip.</strong> Tokyo to Kyoto in 2h 13m, no security, no transfer. China's high-speed rail is now equal in coverage. Japan Rail Pass is worth it for trips with 3+ Shinkansen segments — otherwise IC card pay-as-you-go.</p>
          <p>Sleeper trains in Vietnam, Thailand, India are part of the experience, not just transit. Book lower berths in second-class AC for Indian Railways; soft sleeper for Vietnam reunification. <strong>Avoid night buses</strong> in mountain countries; switch to flights between major Indonesian and Philippine islands.</p>
          <div className="compare">
            <h5>Train vs. plane — door to door</h5>
            <div className="compare-row h"><span>Route</span><span className="train">Train</span><span className="plane">Plane</span></div>
            {AS_TRAIN_COMPARE.map((c, i) => (
              <div key={i} className="compare-row"><span>{c.route}</span><span className="train">{c.train}</span><span className="plane">{c.plane}</span></div>
            ))}
          </div>
        </div>
        <div className="as-routes">
          {AS_ROUTES.map((r, i) => (
            <article key={i} className="as-route">
              <div className="from"><span className="city">{r.from}</span><span className="code">{r.fromCode}</span></div>
              <div className="line">
                <span className="lbl"><b>{r.t}</b></span>
                <span className="lbl">{r.trains}</span>
              </div>
              <div className="to"><span className="city">{r.to}</span><span className="code">{r.toCode}</span></div>
            </article>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const AsBudget = () => (
  <section className="as-sec as-budget" id="budget">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 07</div>
          <h2>Three budgets, <em>three trips.</em></h2>
          <p>What 35, 120, and 320 dollars a day actually buys in 2026. Country-adjusted notes inside each tier — Tokyo and Bangkok are not the same number.</p>
        </div>
      </header>
      <div className="as-budget-grid">
        {AS_BUDGETS.map((b, i) => (
          <article key={i} className={`as-budget-card ${b.middle ? "middle" : ""}`}>
            <div className="h">
              <span className="lvl">{b.lvl}</span>
              <span className="day"><em>${b.day}</em><span className="u">/day</span></span>
            </div>
            <h4>{b.title}</h4>
            <ul className="lines">
              {b.lines.map((l, k) => (
                <li key={k}><span>{l[0]}</span><span>{l[1]}</span></li>
              ))}
            </ul>
            <p className="note">{b.note}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AsLang = () => (
  <section className="as-sec as-lang" id="language">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 08</div>
          <h2>Five phrases per <em>country.</em></h2>
          <p>The four words that open every door, and the one that gets the bill. Try them; locals notice — and the script alone often earns a smile.</p>
        </div>
      </header>
      <div className="as-lang-grid">
        {AS_LANG.map((l, i) => (
          <article key={i} className="as-lang-card">
            <div className="country">{l.country}</div>
            <dl>
              {l.phrases.map((p, k) => (
                <React.Fragment key={k}>
                  <dt>{p.dt}</dt>
                  <dd>{p.dd}</dd>
                </React.Fragment>
              ))}
            </dl>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AsFestivals = () => (
  <section className="as-sec as-fest" id="festivals">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 09</div>
          <h2>Festivals worth a <em>detour.</em></h2>
          <p>Six dates that bend an itinerary. Book early; some sell out a year ahead, and lunar dates shift between calendars.</p>
        </div>
      </header>
      <div className="as-fest-grid">
        {AS_FESTS.map((f, i) => (
          <article key={i} className="as-fest-card">
            <span className="num">{f.num}</span>
            <div>
              <div className="when">{f.when}</div>
              <div className="where">{f.where}</div>
              <h4>{f.h4}</h4>
              <p>{f.p}</p>
            </div>
            <div className="stars">{f.stars}</div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AsNbhd = () => (
  <section className="as-sec as-nbhd" id="neighborhoods">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 10</div>
          <h2>Six neighborhoods we <em>trust.</em></h2>
          <p>Stay here. Eat here. Walk for two days before you do anything else.</p>
        </div>
      </header>
      <div className="as-nbhd-grid">
        {AS_NEIGHBORHOODS.map((n, i) => (
          <article key={i} className="as-nbhd-row">
            <div className="num">{n.num}</div>
            <div>
              <h3 className="name"><em>{n.em}</em></h3>
              <div className="city">{n.city}</div>
              <p>{n.p}</p>
              <div className="why">Why · {n.why}</div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AsPack = () => (
  <section className="as-sec as-pack" id="packing">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 11</div>
          <h2>What to pack for <em>heat & humidity.</em></h2>
          <p>The packing list that fits in a 40L carry-on, in any season except a Pamir trek. Trade jeans for linen; bring one extra layer for AC trains.</p>
        </div>
      </header>
      <div className="as-pack-grid">
        {AS_PACK_LISTS.map((p, i) => (
          <article key={i} className="as-pack-list">
            <h4>{p.h4.split(p.em).map((part, j, arr) => j < arr.length - 1 ? <React.Fragment key={j}>{part}<em>{p.em}</em></React.Fragment> : part)}</h4>
            <div className="sub">{p.sub}</div>
            <ul>
              {p.items.map((it, k) => (
                <li key={k} className={it.startsWith("Tip") ? "tip" : undefined}>{it}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const AsFAQ = () => (
  <section className="as-sec as-faq" id="faq">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 12</div>
          <h2>The questions, <em>answered.</em></h2>
          <p>The eight questions every reader sends before a first Asia trip. Updated April 2026.</p>
        </div>
      </header>
      <div className="as-faq-grid">
        <aside className="aside">
          <p>If your question isn't here, the team answers reader mail every Thursday — write us at <strong>letters@howtotraveledition.com</strong> and we'll point you at the right guide, or write a new one.</p>
          <p>For visa, vaccination, and entry-rule questions: the visas page is updated weekly with the latest from each country's foreign-affairs ministry.</p>
        </aside>
        <div>
          {AS_FAQS.map((f, i) => (
            <details key={i} className="as-faq-item" open={i === 0 || undefined}>
              <summary>{f.q}</summary>
              <div className="a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </details>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const AsRelated = () => (
  <section className="as-sec as-related" id="related">
    <div className="container">
      <header className="as-sec-head">
        <div className="ttl">
          <div className="kicker">Keep reading</div>
          <h2>Four more <em>dispatches.</em></h2>
          <p>From the Field Desk and the road — recent pieces worth a slow morning.</p>
        </div>
      </header>
      <div className="as-related-grid">
        {AS_RELATED.map((r, i) => (
          <a key={i} className="as-related-card" href={r.href}>
            <span className="lbl">{r.lbl}</span>
            <h4 dangerouslySetInnerHTML={{ __html: r.h4 }} />
            <span className="by">{r.by}</span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const AsSignoff = () => (
  <section className="as-signoff">
    <div className="as-signoff-inner container">
      <span className="kicker">— End of Issue Nº 15 · Asia —</span>
      <Marquee
        items={["Slow boats", "Hot bowls", "Patient cities", "Two cities a week", "Skip the summer", "The Shinkansen is the trip"]}
        variant="giant"
        separator="✦"
        speed={50}
      />
      <div className="as-signoff-meta">
        <span>HowTo: Travel Edition</span>
        <span className="dash">—</span>
        <span>Issue Nº 015</span>
        <span className="dash">—</span>
        <span>Spring 2026</span>
        <span className="dash">—</span>
        <span>Field desk Bangkok</span>
        <span className="dash">—</span>
        <span>1,400 contributors strong</span>
      </div>
    </div>
  </section>
);

const AsiaApp = () => (
  <div data-screen-label="Asia Landing">
    <Nav />
    <AsHero />
    <AsAnchor />
    <AsIntro />
    <AsCountries />
    <AsClusters />
    <AsWhen />
    <AsItineraries />
    <AsFood />
    <AsTrains />
    <AsBudget />
    <AsLang />
    <AsFestivals />
    <AsNbhd />
    <AsPack />
    <AsFAQ />
    <AsRelated />
    <AsSignoff />
    <Footer />
  </div>
);

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