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

const slugify = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");

const MeHero = () => (
  <section className="me-hero">
    <div className="me-hero-bg" />
    <div className="me-hero-collage" aria-hidden="true">
      {ME_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="me-hero-grid">
      <div>
        <div className="me-hero-trail">
          <a href="/" className="crumb">HowTo: Travel</a>
          <span className="sep">/</span>
          <span>Regions</span>
          <span className="sep">/</span>
          <span>Middle East</span>
        </div>
        <h1>Where ancient roads still <em>lead somewhere.</em></h1>
        <p className="lede"><strong>486 guides. 17 countries. 1,200 contributors who actually went.</strong> An editorial atlas to the world's oldest crossroads — Levant to Gulf to Maghreb. Mosques and souks, dunes and Mediterranean light. Country by country, season by season, the way the region actually rewards a traveller.</p>
      </div>
      <aside className="me-hero-side">
        <div className="me-hero-stats">
          {ME_HERO_STATS.map((s, i) => (
            <div key={i} className="me-hero-stat">
              <div className="n">{s.n}</div>
              <div className="l">{s.label}</div>
            </div>
          ))}
        </div>
        <div className="me-hero-meta">
          {ME_HERO_META.map((m, i) => (
            <div key={i} className="row"><span>{m.k}</span><b>{m.v}</b></div>
          ))}
        </div>
      </aside>
    </div>
    <div className="me-hero-foot">
      <p className="me-hero-quote">"The Middle East is seventeen countries with a thousand years of hospitality codified into table manners. The point of this issue is to slow you down enough to notice."<span className="by">— Layla Hashemi, Senior Editor · Middle East</span></p>
      <form className="me-hero-search" onSubmit={(e) => e.preventDefault()}>
        <Icon name="search" size={16} />
        <input placeholder="Search 486 Middle East guides — 'Petra three days', 'Istanbul backstreets'..." />
        <button>Search</button>
      </form>
    </div>
  </section>
);

const MePills = () => (
  <nav className="me-pills" aria-label="Regions">
    <div className="me-pills-inner">
      <span className="lbl">Regions</span>
      {ME_REGIONS.map((r) => (
        <a key={r.id} href={r.href} className={r.current ? "current" : ""}>{r.name}</a>
      ))}
    </div>
  </nav>
);

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

const MeIntro = () => (
  <section className="me-sec me-intro" id="intro">
    <div className="container me-intro-grid">
      <div className="from">
        <div className="lbl">From the Plan Desk</div>
        <div className="name">Layla Hashemi</div>
        <div className="role">Senior Editor · Middle East</div>
        <div className="stamp">Issue<em>Nº 16</em>Spring '26</div>
      </div>
      <div className="body">
        <p><strong>The Middle East is older than the road.</strong> Petra was already a tourist attraction when the Romans showed up; Damascus and Jericho have been continuously inhabited for nine thousand years. The region invented writing, the wheel, the first cities, and the second-best coffee on Earth. Every country here is a palimpsest — Phoenician under Roman under Umayyad under Ottoman under whatever it calls itself today.</p>
        <p>The mistake most travellers make is treating it like a sampler — three countries in two weeks, a region in three. Don't. The Middle East rewards the patient: the medina you walk for three days before you find the riad you'll come back to for the next decade. The desert camp you stay long enough at to know which jackal calls at which hour. <strong>One country at a time.</strong></p>
        <p>This page is the manual we wished existed when we started — everything we'd send a friend before their first trip to Amman, Istanbul or Marrakech, and a few things only useful on the fifth.</p>
        <div className="sig">— Layla</div>
      </div>
      <aside className="toc">
        <div className="lbl">Table of contents</div>
        <ol>
          {ME_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 MeCountries = () => (
  <section className="me-sec me-countries" id="countries">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 01</div>
          <h2>12 countries, the <em>honest atlas.</em></h2>
          <p>The region's most-travelled twelve, sorted by guide depth not GDP or alphabet. Featured below: the country we send first-timers to, every time. Click any tile for the full sub-atlas.</p>
        </div>
        <div className="right"><a className="view-all" href="/en/plan/itineraries/middle-east">View all 17 <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="me-countries-grid">
        {ME_COUNTRIES.map((c, i) => (
          <a key={i} className={`me-country${c.featured ? " featured" : ""}`} href={`/middle-east/${slugify(c.name)}/`}>
            <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 MeClusters = () => (
  <section className="me-sec me-clusters" id="regions">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 02</div>
          <h2>The region in <em>five clusters.</em></h2>
          <p>Borders are political; weather, food, and the wadi-road conditions are not. We group the Middle East the way travellers actually move through it — by climate, by season, by table.</p>
        </div>
      </header>
      {ME_CLUSTERS.map((cl, i) => (
        <div key={i} className="me-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="me-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 MeWhen = () => (
  <section className="me-sec me-when" id="when">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 03</div>
          <h2>When to go — <em>heat vs shoulder.</em></h2>
          <p>The Middle East runs on heat, not rain. Two windows per region, sitting at opposite ends of the calendar depending on whether you're in the Gulf or the Levant. Here is the year, region by region.</p>
        </div>
      </header>
      <div className="me-when-grid">
        <div className="me-when-cal">
          <table>
            <thead>
              <tr>
                <th>Region</th>
                {ME_WHEN_HEAD.map((m) => <th key={m}>{m}</th>)}
              </tr>
            </thead>
            <tbody>
              {ME_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="me-when-cal-legend">
            {ME_WHEN_LEGEND.map((l) => <span key={l.cls}><i className={`pill ${l.cls}`} />{l.label}</span>)}
          </div>
        </div>
        <div className="me-when-notes">
          {ME_WHEN_NOTES.map((n, i) => (
            <article key={i} className="me-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 MeItineraries = () => (
  <section className="me-sec me-iti" id="itineraries">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 04</div>
          <h2>Four 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/middle-east">All 24 itineraries <Icon name="arrow" size={14} /></a></div>
      </header>
      <div className="me-iti-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))" }}>
        {ME_ITIS.map((it, i) => (
          <a key={i} className="me-iti-card" href={`/en/plan/itineraries/middle-east/${slugify(it.h3)}`}>
            <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 MeFood = () => (
  <section className="me-sec me-food" id="food">
    <div className="container">
      <header className="me-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 kitchen. Order this, drink that, never make the obvious mistake.</p>
        </div>
      </header>
      <div className="me-food-grid">
        {ME_FOOD.map((f, i) => (
          <article key={i} className={`me-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 MeTransport = () => (
  <section className="me-sec me-trains" id="trains">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 06</div>
          <h2>Sleeper trains, Gulf carriers, <em>desert highways.</em></h2>
          <p>The Middle East moves on Emirates and Qatar, on the Hejaz line's surviving fragments, and on long, smooth desert highways. Trains exist in Turkey, Israel, Egypt, Morocco, Saudi Arabia — and almost nowhere else. Plan accordingly.</p>
        </div>
      </header>
      <div className="me-trains-grid">
        <div className="blurb">
          <p><strong>Gulf carriers are the regional metro.</strong> Emirates, Qatar, Etihad, Saudia and Turkish run hub-and-spoke schedules that make a single layover the cheapest way to combine two countries. Five-hour transit windows in DXB and DOH are long enough for a museum and dinner.</p>
          <p>Trains work brilliantly in Turkey (the fast YHT line), Egypt (the Cairo–Aswan sleeper), Morocco (Al Boraq, the Tangier–Casablanca TGV), Israel (Tel Aviv–Jerusalem, 32 minutes), and the new Haramain line in Saudi between Mecca and Medina. <strong>Self-drive is excellent in Oman, the UAE and Jordan</strong> and almost nowhere else — Cairo and Beirut traffic is for residents.</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>
            {ME_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="me-routes">
          {ME_ROUTES.map((r, i) => (
            <article key={i} className="me-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 MeBudget = () => (
  <section className="me-sec me-budget" id="budget">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 07</div>
          <h2>Three Middle Easts, <em>three budgets.</em></h2>
          <p>The region doesn't share a price list. Egypt and Morocco are among the cheapest in the world. The Gulf is among the most expensive. Plan for the actual country you're visiting, not a regional average.</p>
        </div>
      </header>
      <div className="me-budget-grid">
        {ME_BUDGETS.map((b, i) => (
          <article key={i} className={`me-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 MeLang = () => (
  <section className="me-sec me-lang" id="language">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 08</div>
          <h2>Four phrases per <em>dialect.</em></h2>
          <p>Arabic varies more by country than Spanish does by continent. The four words that move every meal forward, in the eight dialects you're most likely to need.</p>
        </div>
      </header>
      <div className="me-lang-grid">
        {ME_LANG.map((l, i) => (
          <article key={i} className="me-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 MeFestivals = () => (
  <section className="me-sec me-fest" id="festivals">
    <div className="container">
      <header className="me-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 Ramadan moves through the calendar by ten days a year.</p>
        </div>
      </header>
      <div className="me-fest-grid">
        {ME_FESTS.map((f, i) => (
          <article key={i} className="me-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 MeNbhd = () => (
  <section className="me-sec me-nbhd" id="neighborhoods">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 10</div>
          <h2>Six neighbourhoods we <em>trust.</em></h2>
          <p>Stay here. Eat here. Walk for two days before you do anything else.</p>
        </div>
      </header>
      <div className="me-nbhd-grid">
        {ME_NEIGHBORHOODS.map((n, i) => (
          <article key={i} className="me-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 MePack = () => (
  <section className="me-sec me-pack" id="packing">
    <div className="container">
      <header className="me-sec-head">
        <div className="ttl">
          <div className="kicker">Chapter 11</div>
          <h2>Pack for sun, dust, <em>and mosques.</em></h2>
          <p>The region runs hot, dry, and modest. Trade the bright t-shirts for two long linen shirts you actually like — they'll work in mosques, in souks, and at midnight in Wadi Rum.</p>
        </div>
      </header>
      <div className="me-pack-grid">
        {ME_PACK_LISTS.map((p, i) => (
          <article key={i} className="me-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 MeFAQ = () => (
  <section className="me-sec me-faq" id="faq">
    <div className="container">
      <header className="me-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 Middle East trip. Updated April 2026.</p>
        </div>
      </header>
      <div className="me-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-stamp questions: the visas page is updated monthly with the latest from each country's foreign-affairs ministry and the WHO.</p>
        </aside>
        <div>
          {ME_FAQS.map((f, i) => (
            <details key={i} className="me-faq-item" open={i === 0 || undefined}>
              <summary>{f.q}</summary>
              <div className="a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </details>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const MeRelated = () => (
  <section className="me-sec me-related" id="related">
    <div className="container">
      <header className="me-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="me-related-grid">
        {ME_RELATED.map((r, i) => (
          <a key={i} className="me-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 MeSignoff = () => (
  <section className="me-signoff">
    <div className="me-signoff-inner container">
      <span className="kicker">— End of Issue Nº 16 · Middle East —</span>
      <Marquee
        items={["Mezze table", "Iftar at sunset", "Petra at dawn", "Oud and rosewater", "Soft duffel only", "Don't rush the medina"]}
        variant="giant"
        separator="✦"
        speed={50}
      />
      <div className="me-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 Marrakech / Amman / Muscat</span>
        <span className="dash">—</span>
        <span>1,200 contributors strong</span>
      </div>
    </div>
  </section>
);

const MiddleEastApp = () => (
  <div data-screen-label="Middle East Landing">
    <Nav />
    <MeHero />
    <MePills />
    <MeAnchor />
    <MeIntro />
    <MeCountries />
    <MeClusters />
    <MeWhen />
    <MeItineraries />
    <MeFood />
    <MeTransport />
    <MeBudget />
    <MeLang />
    <MeFestivals />
    <MeNbhd />
    <MePack />
    <MeFAQ />
    <MeRelated />
    <MeSignoff />
    <Footer />
  </div>
);

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