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

const AmHero = () => (
  <section className="am-hero">
    <div className="am-hero-bg" />
    <div className="am-hero-collage" aria-hidden="true">
      {AM_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="am-hero-grid">
      <div>
        <div className="am-hero-trail">
          <a href="/" className="crumb">HowTo: Travel</a>
          <span className="sep">/</span>
          <span>Regions</span>
          <span className="sep">/</span>
          <span>Americas</span>
        </div>
        <h1>A field guide to the <em>Americas.</em></h1>
        <p className="lede"><strong>580 guides. 35 countries. 1,150 contributors who actually went.</strong> Two hemispheres, one continent — from the Yukon down to Tierra del Fuego. Region by region, season by season, the way the Americas actually work.</p>
      </div>
      <aside className="am-hero-side">
        <div className="am-hero-stats">
          {AM_HERO_STATS.map((s, i) => (
            <div key={i} className="am-hero-stat">
              <div className="n">{s.n}</div>
              <div className="l">{s.label}</div>
            </div>
          ))}
        </div>
        <div className="am-hero-meta">
          {AM_HERO_META.map((m, i) => (
            <div key={i} className="row"><span>{m.k}</span><b>{m.v}</b></div>
          ))}
        </div>
      </aside>
    </div>
    <div className="am-hero-foot">
      <p className="am-hero-quote">"The Americas are not one trip. They're a lifetime of trips that happen to share a continent — and the only thing they have in common is how much sky there is."<span className="by">— Mateo Reyes, Senior Editor · Americas</span></p>
      <form className="am-hero-search" onSubmit={(e) => e.preventDefault()}>
        <Icon name="search" size={16} />
        <input placeholder="Search 580 Americas guides — 'Patagonia in November', 'Mexico City food'..." />
        <button>Search</button>
      </form>
    </div>
  </section>
);

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

const AmIntro = () => (
  <section className="am-sec am-intro" id="intro">
    <div className="container am-intro-grid">
      <div className="from">
        <div className="lbl">From the Plan Desk</div>
        <div className="name">Mateo Reyes</div>
        <div className="role">Senior Editor · Americas</div>
        <div className="stamp">Issue<em>Nº 16</em>Spring '26</div>
      </div>
      <div className="body">
        <p><strong>The Americas are not a continent.</strong> They're a vertical line that crosses both poles, every climate, four major civilizational traditions, and a 13,000-foot altitude gradient between breakfast and dinner. Most travel writing tries to flatten that into something digestible. We won't.</p>
        <p>What we will do is tell you that <strong>December in Patagonia is summer</strong>, that <strong>tap water is fine in Santiago and a lawsuit in Cancún</strong>, and that the bus from Lima to Cusco is twenty-two hours and not worth saving the flight money over. The Americas reward specifics, not generalizations.</p>
        <p>This page is the manual we wished existed when we started — every itinerary, every region, every food rule we'd send a friend before their first big trip across the Western Hemisphere. Country-specific guides drill deeper. <strong>Two cities a week, max</strong>, still applies.</p>
        <div className="sig">— Mateo</div>
      </div>
      <aside className="toc">
        <div className="lbl">Table of contents</div>
        <ol>
          {AM_TOC.map((t, i) => (
            <li key={i}>
              <a href={`#${["intro","countries","regions","when","itineraries","food","transport","budget","language","festivals","neighborhoods","packing"][i] || ""}`}>{t.t}</a>
              <span className="pg">{t.pg}</span>
            </li>
          ))}
        </ol>
      </aside>
    </div>
  </section>
);

const AmCountries = () => (
  <section className="am-sec am-countries" id="countries">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 01</div>
          <h2>Twelve countries, sorted <em>honestly.</em></h2>
          <p>The continent's countries by how many guides we have, not by GDP or alphabet. Featured below: the country we send first-timers to. Click any tile for the full sub-atlas.</p>
        </div>
        <div className="right"><a className="view-all" href="/en/plan/itineraries/americas">View all 35 <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="am-countries-grid">
        {AM_COUNTRIES.map((c, i) => (
          <a key={i} className={`am-country${c.featured ? " featured" : ""}`} href={`/americas/${c.slug}/`}>
            <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 AmClusters = () => (
  <section className="am-sec am-clusters" id="regions">
    <div className="container">
      <header className="am-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 the Americas the way travelers actually move through them — by climate, by season, by table.</p>
        </div>
      </header>
      {AM_CLUSTERS.map((cl, i) => (
        <div key={i} className="am-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="am-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 AmWhen = () => (
  <section className="am-sec am-when" id="when">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 03</div>
          <h2>When to go — a <em>real calendar.</em></h2>
          <p>Two hemispheres means two opposite seasons. Patagonia in December is the inverse of Quebec in December. Here's the year, region by region.</p>
        </div>
      </header>
      <div className="am-when-grid">
        <div className="am-when-cal">
          <table>
            <thead>
              <tr>
                <th>Region</th>
                {AM_WHEN_HEAD.map((m) => <th key={m}>{m}</th>)}
              </tr>
            </thead>
            <tbody>
              {AM_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="am-when-cal-legend">
            {AM_WHEN_LEGEND.map((l) => <span key={l.cls}><i className={`pill ${l.cls}`} />{l.label}</span>)}
          </div>
        </div>
        <div className="am-when-notes">
          {AM_WHEN_NOTES.map((n, i) => (
            <article key={i} className="am-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 AmItineraries = () => (
  <section className="am-sec am-iti" id="itineraries">
    <div className="container">
      <header className="am-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.</p>
        </div>
        <div className="right"><a className="view-all" href="/en/plan/itineraries/americas">All 28 itineraries <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="am-iti-grid">
        {AM_ITIS.map((it, i) => (
          <a key={i} className="am-iti-card" href={`/en/plan/itineraries/americas/${it.slug}`}>
            <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 AmFood = () => (
  <section className="am-sec am-food" id="food">
    <div className="container">
      <header className="am-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, drink that, never make the obvious mistake.</p>
        </div>
      </header>
      <div className="am-food-grid">
        {AM_FOOD.map((f, i) => (
          <article key={i} className={`am-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 AmTransport = () => (
  <section className="am-sec am-transit" id="transport">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 06</div>
          <h2>Roads, buses, <em>and short flights.</em></h2>
          <p>The Americas are a road-trip and overnight-bus continent. Trains barely exist outside the Northeast Corridor. Here's how to actually get around.</p>
        </div>
      </header>
      <div className="am-transit-grid">
        <div className="blurb">
          <p><strong>The big rule: rent a car in North America, take the bus in Latin America, fly anything over 6 hours.</strong> The continent's distances are so big that the European train logic does not apply — Lima to Cusco is 22 hours by bus and 80 minutes by plane.</p>
          <p>Latin America's overnight buses are world-class — ETN and ADO in Mexico, Cruz del Sur in Peru, Andesmar in Argentina. <strong>Pay for cama or semi-cama</strong> on anything over 8 hours. North American Greyhound is its own kind of experience; Amtrak's Northeast Corridor is the only US train worth using for travel.</p>
          <div className="compare">
            <h5>Drive vs. fly — the major routes</h5>
            <div className="compare-row h"><span>Route</span><span className="a">Ground</span><span className="b">Air</span></div>
            {AM_TRAIN_COMPARE.map((c, i) => (
              <div key={i} className="compare-row"><span>{c.route}</span><span className="a">{c.a}</span><span className="b">{c.b}</span></div>
            ))}
          </div>
        </div>
        <div className="am-routes">
          {AM_ROUTES.map((r, i) => (
            <article key={i} className="am-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 AmBudget = () => (
  <section className="am-sec am-budget" id="budget">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 07</div>
          <h2>Three budgets, <em>three trips.</em></h2>
          <p>What 45, 140, and 380 dollars a day actually buy in 2026. North America stretches every tier 30%; Latin America compresses them all.</p>
        </div>
      </header>
      <div className="am-budget-grid">
        {AM_BUDGETS.map((b, i) => (
          <article key={i} className={`am-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 AmLang = () => (
  <section className="am-sec am-lang" id="language">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 08</div>
          <h2>Five phrases per <em>country.</em></h2>
          <p>The four words that move every meal forward, and the one that opens every door. Try them; locals notice.</p>
        </div>
      </header>
      <div className="am-lang-grid">
        {AM_LANG.map((l, i) => (
          <article key={i} className="am-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 AmFestivals = () => (
  <section className="am-sec am-fest" id="festivals">
    <div className="container">
      <header className="am-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. Carnival, Day of the Dead, Mardi Gras, Inti Raymi, and two more. Book a year ahead for the famous ones.</p>
        </div>
      </header>
      <div className="am-fest-grid">
        {AM_FESTS.map((f, i) => (
          <article key={i} className="am-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 AmNbhd = () => (
  <section className="am-sec am-nbhd" id="neighborhoods">
    <div className="container">
      <header className="am-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="am-nbhd-grid">
        {AM_NEIGHBORHOODS.map((n, i) => (
          <article key={i} className="am-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 AmPack = () => (
  <section className="am-sec am-pack" id="packing">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 11</div>
          <h2>What to pack for <em>two hemispheres.</em></h2>
          <p>The Americas span every climate. The trick is layering: one bag, one warm layer, one waterproof, and trekking-grade shoes that don't look like trekking shoes.</p>
        </div>
      </header>
      <div className="am-pack-grid">
        {AM_PACK_LISTS.map((p, i) => (
          <article key={i} className="am-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 AmFAQ = () => (
  <section className="am-sec am-faq" id="faq">
    <div className="container">
      <header className="am-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 trip across the Americas. Updated April 2026.</p>
        </div>
      </header>
      <div className="am-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, Brazil-reciprocity, and Cuba-specific questions: the visas page is updated weekly with the latest from each country's foreign-affairs ministry.</p>
        </aside>
        <div>
          {AM_FAQS.map((f, i) => (
            <details key={i} className="am-faq-item" open={i === 0 || undefined}>
              <summary>{f.q}</summary>
              <div className="a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </details>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const AmRelated = () => (
  <section className="am-sec am-related" id="related">
    <div className="container">
      <header className="am-sec-head">
        <div className="ttl">
          <div className="kicker">Keep reading</div>
          <h2>Four more <em>dispatches.</em></h2>
          <p>From the Plan Desk and the field — recent pieces worth a slow morning.</p>
        </div>
      </header>
      <div className="am-related-grid">
        {AM_RELATED.map((r, i) => (
          <a key={i} className="am-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 AmSignoff = () => (
  <section className="am-signoff">
    <div className="am-signoff-inner container">
      <span className="kicker">— End of Issue Nº 16 · Americas —</span>
      <Marquee
        items={["Two hemispheres", "Long buses", "Short flights", "Tap water, sometimes", "Two cities a week", "Don't rush the south"]}
        variant="giant"
        separator="✦"
        speed={50}
      />
      <div className="am-signoff-meta">
        <span>HowTo: Travel Edition</span>
        <span className="dash">—</span>
        <span>Issue Nº 016</span>
        <span className="dash">—</span>
        <span>Spring 2026</span>
        <span className="dash">—</span>
        <span>Field desk Mexico City</span>
        <span className="dash">—</span>
        <span>1,150 contributors strong</span>
      </div>
    </div>
  </section>
);

const AmericasApp = () => (
  <div data-screen-label="Americas Landing">
    <Nav />
    <AmHero />
    <AmAnchor />
    <AmIntro />
    <AmCountries />
    <AmClusters />
    <AmWhen />
    <AmItineraries />
    <AmFood />
    <AmTransport />
    <AmBudget />
    <AmLang />
    <AmFestivals />
    <AmNbhd />
    <AmPack />
    <AmFAQ />
    <AmRelated />
    <AmSignoff />
    <Footer />
  </div>
);

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