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

const EuHero = () => (
  <section className="eu-hero">
    <div className="eu-hero-bg" />
    <div className="eu-hero-collage" aria-hidden="true">
      {EU_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="eu-hero-grid">
      <div>
        <div className="eu-hero-trail">
          <a href="/" className="crumb">HowTo: Travel</a>
          <span className="sep">/</span>
          <span>Regions</span>
          <span className="sep">/</span>
          <span>Europe</span>
        </div>
        <h1>A field guide to <em>Europe.</em></h1>
        <p className="lede"><strong>612 guides. 44 countries. 1,200 contributors who actually went.</strong> An editorial atlas to the slow side, the train side, and the side you only find by walking. Region by region, season by season — the way Europe actually works.</p>
      </div>
      <aside className="eu-hero-side">
        <div className="eu-hero-stats">
          {EU_HERO_STATS.map((s, i) => (
            <div key={i} className="eu-hero-stat">
              <div className="n">{s.n}</div>
              <div className="l">{s.label}</div>
            </div>
          ))}
        </div>
        <div className="eu-hero-meta">
          {EU_HERO_META.map((m, i) => (
            <div key={i} className="row"><span>{m.k}</span><b>{m.v}</b></div>
          ))}
        </div>
      </aside>
    </div>
    <div className="eu-hero-foot">
      <p className="eu-hero-quote">"Travel writing should sound like a postcard from someone you trust — not a press release from someone you don't."<span className="by">— Iris Mendoza, Editor at Large</span></p>
      <form className="eu-hero-search" onSubmit={(e) => e.preventDefault()}>
        <Icon name="search" size={16} />
        <input placeholder="Search 612 Europe guides — 'Tuscany itinerary', 'Schengen rules'..." />
        <button>Search</button>
      </form>
    </div>
  </section>
);

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

const EuIntro = () => (
  <section className="eu-sec eu-intro" id="intro">
    <div className="container eu-intro-grid">
      <div className="from">
        <div className="lbl">From the Plan Desk</div>
        <div className="name">Iris Mendoza</div>
        <div className="role">Senior Editor · Europe</div>
        <div className="stamp">Issue<em>Nº 14</em>Spring '26</div>
      </div>
      <div className="body">
        <p><strong>Europe is small.</strong> Which is the secret. Forty-four countries fit in roughly the same square mileage as the United States, and you can sit at three borders before lunch. The temptation is to treat that compactness like a checklist — six countries in two weeks, ten in three. Don't.</p>
        <p>The Europe worth writing about is the slow one. The one you find by skipping the second city, by getting lost in the first. By taking the train when the flight is shorter, because the train is the trip. By staying long enough that the waiter knows your name. <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 European trip — and a few things only useful on the fifth.</p>
        <div className="sig">— Iris</div>
      </div>
      <aside className="toc">
        <div className="lbl">Table of contents</div>
        <ol>
          {EU_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 EuCountries = () => (
  <section className="eu-sec eu-countries" id="countries">
    <div className="container">
      <header className="eu-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 01</div>
          <h2>44 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 have written about for the longest. Click any tile for the full sub-atlas.</p>
        </div>
        <div className="right"><a className="view-all" href="/en/plan/itineraries/europe">View all 44 <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="eu-countries-grid">
        {EU_COUNTRIES.map((c, i) => (
          <a key={i} className={`eu-country${c.featured ? " featured" : ""}`} href={`/en/plan/itineraries/europe/${c.name.toLowerCase()}`}>
            <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 EuClusters = () => (
  <section className="eu-sec eu-clusters" id="regions">
    <div className="container">
      <header className="eu-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 Europe the way travelers actually move through it — by climate, by season, by table.</p>
        </div>
      </header>
      {EU_CLUSTERS.map((cl, i) => (
        <div key={i} className="eu-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="eu-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 EuWhen = () => (
  <section className="eu-sec eu-when" id="when">
    <div className="container">
      <header className="eu-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 03</div>
          <h2>When to go — a <em>real calendar.</em></h2>
          <p>Shoulder season isn't a single month, and it isn't the same in Croatia as in Iceland. Here is the year, region by region.</p>
        </div>
      </header>
      <div className="eu-when-grid">
        <div className="eu-when-cal">
          <table>
            <thead>
              <tr>
                <th>Region</th>
                {EU_WHEN_HEAD.map((m) => <th key={m}>{m}</th>)}
              </tr>
            </thead>
            <tbody>
              {EU_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="eu-when-cal-legend">
            {EU_WHEN_LEGEND.map((l) => <span key={l.cls}><i className={`pill ${l.cls}`} />{l.label}</span>)}
          </div>
        </div>
        <div className="eu-when-notes">
          {EU_WHEN_NOTES.map((n, i) => (
            <article key={i} className="eu-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 EuItineraries = () => (
  <section className="eu-sec eu-iti" id="itineraries">
    <div className="container">
      <header className="eu-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/europe">All 32 itineraries <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="eu-iti-grid">
        {EU_ITIS.map((it, i) => (
          <a key={i} className="eu-iti-card" href={`/en/plan/itineraries/europe/${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 EuFood = () => (
  <section className="eu-sec eu-food" id="food">
    <div className="container">
      <header className="eu-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="eu-food-grid">
        {EU_FOOD.map((f, i) => (
          <article key={i} className={`eu-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 EuTrains = () => (
  <section className="eu-sec eu-trains" id="trains">
    <div className="container">
      <header className="eu-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 06</div>
          <h2>Trains, almost always, <em>not planes.</em></h2>
          <p>Under 5 hours, the train is faster door-to-door. Cheaper too if you book 60 days out. Six routes that prove it.</p>
        </div>
      </header>
      <div className="eu-trains-grid">
        <div className="blurb">
          <p><strong>Door-to-door beats wing-to-wing.</strong> The plane saves 90 minutes in the air and loses 3 hours to security, transfer, and the airport-to-city drag. The train deposits you in the middle of where you wanted to be.</p>
          <p>Buy 60+ days out for advance fares. Use Trainline for a single-ticket experience, or each rail operator's site for the cheapest seats. <strong>Eurail passes</strong> only pencil out for trips with 6+ legs in 14 days — otherwise point-to-point wins.</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>
            {EU_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="eu-routes">
          {EU_ROUTES.map((r, i) => (
            <article key={i} className="eu-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 EuBudget = () => (
  <section className="eu-sec eu-budget" id="budget">
    <div className="container">
      <header className="eu-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 07</div>
          <h2>Three budgets, <em>three trips.</em></h2>
          <p>What 70, 180, and 420 euros a day actually buys in 2026. Country-adjusted notes inside each tier.</p>
        </div>
      </header>
      <div className="eu-budget-grid">
        {EU_BUDGETS.map((b, i) => (
          <article key={i} className={`eu-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 EuLang = () => (
  <section className="eu-sec eu-lang" id="language">
    <div className="container">
      <header className="eu-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="eu-lang-grid">
        {EU_LANG.map((l, i) => (
          <article key={i} className="eu-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 EuFestivals = () => (
  <section className="eu-sec eu-fest" id="festivals">
    <div className="container">
      <header className="eu-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.</p>
        </div>
      </header>
      <div className="eu-fest-grid">
        {EU_FESTS.map((f, i) => (
          <article key={i} className="eu-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 EuNbhd = () => (
  <section className="eu-sec eu-nbhd" id="neighborhoods">
    <div className="container">
      <header className="eu-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="eu-nbhd-grid">
        {EU_NEIGHBORHOODS.map((n, i) => (
          <article key={i} className="eu-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 EuPack = () => (
  <section className="eu-sec eu-pack" id="packing">
    <div className="container">
      <header className="eu-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 11</div>
          <h2>What to pack for <em>three seasons.</em></h2>
          <p>The packing list that fits in a 40L carry-on, in any season except deep winter. Trade two pairs of jeans for one pair you actually like.</p>
        </div>
      </header>
      <div className="eu-pack-grid">
        {EU_PACK_LISTS.map((p, i) => (
          <article key={i} className="eu-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 EuFAQ = () => (
  <section className="eu-sec eu-faq" id="faq">
    <div className="container">
      <header className="eu-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 European trip. Updated April 2026.</p>
        </div>
      </header>
      <div className="eu-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, residency, and ETIAS questions: the visas page is updated weekly with the latest from each country's foreign-affairs ministry.</p>
        </aside>
        <div>
          {EU_FAQS.map((f, i) => (
            <details key={i} className="eu-faq-item" open={i === 0 || undefined}>
              <summary>{f.q}</summary>
              <div className="a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </details>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const EuRelated = () => (
  <section className="eu-sec eu-related" id="related">
    <div className="container">
      <header className="eu-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="eu-related-grid">
        {EU_RELATED.map((r, i) => (
          <a key={i} className="eu-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 EuSignoff = () => (
  <section className="eu-signoff">
    <div className="eu-signoff-inner container">
      <span className="kicker">— End of Issue Nº 14 · Europe —</span>
      <Marquee
        items={["Slow trains", "Long lunches", "Quiet shoulders", "Borders, sometimes", "Two cities a week", "Don't rush the south"]}
        variant="giant"
        separator="✦"
        speed={50}
      />
      <div className="eu-signoff-meta">
        <span>HowTo: Travel Edition</span>
        <span className="dash">—</span>
        <span>Issue Nº 014</span>
        <span className="dash">—</span>
        <span>Spring 2026</span>
        <span className="dash">—</span>
        <span>Field desk Lisbon</span>
        <span className="dash">—</span>
        <span>1,200 contributors strong</span>
      </div>
    </div>
  </section>
);

const EuropeApp = () => (
  <div data-screen-label="Europe Landing">
    <Nav />
    <EuHero />
    <EuAnchor />
    <EuIntro />
    <EuCountries />
    <EuClusters />
    <EuWhen />
    <EuItineraries />
    <EuFood />
    <EuTrains />
    <EuBudget />
    <EuLang />
    <EuFestivals />
    <EuNbhd />
    <EuPack />
    <EuFAQ />
    <EuRelated />
    <EuSignoff />
    <Footer />
  </div>
);

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