/* ——— Room data (rates.json equivalent) ——— */
const ROOMS = [
  { id: 'standard', name: 'Standard', tag: 'STD', tagline: '1 twin or 1 double — soundproof, 80+ channels', sqm: null, occupancy: '2 adults', bed: 'Twin or Double', priceFrom: 'AED 115', priceUsd: 'USD 25', amenities: ['Soundproof windows', 'Prayer mat + Qibla', 'Free WiFi, dual-band'], img: 'assets/room-deluxe-3.webp', count: 154 },
  { id: 'classic', name: 'Classic', tag: 'CLS', tagline: 'Double bed, sitting nook, walk-in shower', sqm: null, occupancy: '2 adults', bed: '1 double', priceFrom: 'AED 150', priceUsd: 'USD 41', amenities: ['Bathtub + walk-in shower', 'Mini-bar (non-alcoholic)', 'In-room safe'], img: 'assets/room-deluxe-1.webp' },
  { id: 'double', name: 'Double', tag: 'DBL', tagline: '2 twin beds, ideal for friends or colleagues', sqm: null, occupancy: '2 adults', bed: '2 twin', priceFrom: 'AED 187', priceUsd: 'USD 51', amenities: ['2 twin beds', 'Tea/coffee maker', 'City view'], img: 'assets/room-deluxe-5.webp' },
  { id: 'king', name: 'King', tag: 'KING', tagline: 'King bed, premium linens, lounge chair', sqm: null, occupancy: '2 adults', bed: '1 king', priceFrom: 'AED 749', priceUsd: 'USD 204', amenities: ['King bed', 'Bathrobes & slippers', 'Weighing scale'], img: 'assets/room-deluxe-7.webp' },
  { id: 'deluxe', name: 'Deluxe', tag: 'DLX', tagline: 'Upgraded furnishings, larger work desk', sqm: null, occupancy: '2 adults', bed: '1 king', priceFrom: 'AED 770', priceUsd: 'USD 210', amenities: ['Larger work desk', 'Bidet + bathtub', 'Quran on request'], img: 'assets/room-deluxe-1.webp' },
  { id: 'queen', name: 'Queen', tag: 'QN', tagline: 'Queen bed, refurbished bathroom', sqm: null, occupancy: '2 adults', bed: '1 queen', priceFrom: 'AED 807', priceUsd: 'USD 220', amenities: ['Queen bed', 'Premium toiletries', 'Soundproof walls'], img: 'assets/room-deluxe-5.webp' },
  { id: 'junior', name: 'Junior Suite', tag: 'JR · 14', tagline: 'Sitting area, sofa, separate desk', sqm: null, occupancy: '2 + 1 child', bed: 'Queen or 2 twin', priceFrom: 'On request', priceUsd: 'Direct line', amenities: ['Sitting area with sofa', 'Separate desk area', 'Rollaway AED 120'], img: 'assets/room-junior-suite-1.webp', count: 14 },
  { id: 'executive', name: 'Executive Suite', tag: 'EXE · 7', tagline: 'Separate living + bedroom, two TVs', sqm: null, occupancy: '2 + 1 child', bed: 'Per allocation', priceFrom: 'AED 1,442', priceUsd: 'USD 393', amenities: ['Separate living room', 'Two LCD TVs', 'Baby cot on request'], img: 'assets/room-suite-1.webp', count: 7 },
];

/* ——— Home ——— */
function HomePage({ goto, onBook, hero, tone, dense }) {
  const heroImg = hero === 'lobby' ? 'assets/lobby-1.webp' : hero === 'pool' ? 'assets/pool-1.webp' : hero === 'room' ? 'assets/room-suite-1.webp' : 'assets/lobby-1.webp';

  return (
    <main className="page" data-screen-label="01 Home">
      {/* ——— HERO ——— */}
      <section style={{ position: 'relative', minHeight: '92vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', marginTop: -82 }}>
        <img src={heroImg} alt="Lobby of the Landmark Grand Hotel" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.55) saturate(0.95) contrast(1.05)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,38,36,0.55) 0%, rgba(8,38,36,0.30) 40%, rgba(8,38,36,0.85) 100%)' }} />
        <div className="grain" style={{ position: 'absolute', inset: 0, opacity: 0.5, mixBlendMode: 'overlay' }} />

        <div style={{ position: 'relative', flex: 1, maxWidth: 1400, width: '100%', margin: '0 auto', padding: '160px 32px 60px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 48 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28, color: 'var(--cream)', maxWidth: 880 }}>
            <div className="fade-in" style={{ display: 'flex', alignItems: 'center', gap: 16, color: 'var(--brass)' }}>
              <span style={{ width: 40, height: 1, background: 'var(--brass)' }} />
              <span className="font-mono" style={{ fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase' }}>4-star · Deira · since 2011</span>
            </div>

            <h1 className="font-display fade-in" style={{ margin: 0, fontSize: 'clamp(40px, 6.4vw, 84px)', lineHeight: 1.02, fontWeight: 500, letterSpacing: '-0.015em', textWrap: 'balance' }}>
              Stay 100&nbsp;m from Union Metro,<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--brass-soft)' }}>opposite Al Ghurair.</em>
            </h1>

            <p className="fade-in" style={{ margin: 0, fontSize: 'clamp(15px, 1.4vw, 19px)', lineHeight: 1.55, color: 'rgba(244,236,220,0.85)', maxWidth: 640 }}>
              Deira's honest 4-star — 175 rooms and suites, an outdoor pool, a sauna and a gym. Alcohol-free,
              with prayer mats and a Qibla indicator in every room.
            </p>

            <div className="fade-in" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <PriceChip />
              <button onClick={onBook} className="btn btn-dark" style={{ background: 'var(--cream)', color: 'var(--teal-deep)' }}>
                Book direct — Best Rate Guarantee <Icon.Arrow width="16" height="16" />
              </button>
              <button onClick={onBook} className="btn btn-secondary">Check rates</button>
            </div>

            <div className="fade-in" style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <FeatureBadge icon={Icon.Metro} label="100 m to Union Metro" sub="2–5 min walk · Red + Green" />
              <FeatureBadge icon={Icon.Shuttle} label="Free airport shuttle" sub="15 min to DXB by metro" />
              <FeatureBadge icon={Icon.Halal} label="Halal-friendly" sub="Alcohol-free · prayer mat · Qibla" />
            </div>
          </div>

          {/* booking bar */}
          <div className="fade-in" style={{ marginTop: 12 }}>
            <BookingBar onSubmit={onBook} />
          </div>
        </div>

        {/* aggregated review badge floats over bottom edge */}
      </section>

      {/* ——— REVIEW BADGE STRIP ——— */}
      <section style={{ background: 'var(--teal)', color: 'var(--cream)', padding: '24px 32px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <ReviewBadge tone="cream" />
        </div>
      </section>

      {/* ——— PROOF STRIP (numbers) ——— */}
      <section style={{ padding: '72px 32px', background: 'var(--cream-2)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 2fr', gap: 56, alignItems: 'center' }}>
          <SectionLabel
            eyebrow="Honest 4-star"
            title="The proof points, not the puffery."
            kicker="No 'Best Hotel in Deira' here. Just real numbers, named amenities, and a published rate floor — the things every guest looks up on an OTA before they book direct."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }}>
            {[
              { stat: '175', label: 'Keys total', sub: '154 std · 14 jr · 7 exec' },
              { stat: '100 m', label: 'to Union Metro', sub: '2–5 min walk' },
              { stat: '15 min', label: 'to DXB Airport', sub: 'by metro · free shuttle' },
              { stat: '24 h', label: 'Free cancellation', sub: 'before check-in' },
              { stat: '7.9', label: 'Agoda score', sub: '6,322 reviews' },
              { stat: '4.0', label: 'Tripadvisor', sub: '1,127 reviews' },
              { stat: '0', label: 'Alcohol on-site', sub: 'Halal-friendly property' },
              { stat: '5–10%', label: 'Direct discount', sub: 'auto-applied' },
            ].map((s) => (
              <div key={s.label} style={{ padding: '24px 22px', borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                <div className="font-display" style={{ fontSize: 36, fontWeight: 500, color: 'var(--teal)', lineHeight: 1 }}>{s.stat}</div>
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: 8 }}>{s.label}</div>
                <div style={{ fontSize: 12, color: 'rgba(26,26,26,0.55)', marginTop: 2 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ——— ROOMS TEASER (4 cards) ——— */}
      <section style={{ padding: '88px 32px', background: 'var(--mist)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 40 }}>
          <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 24, flexWrap: 'wrap' }}>
            <SectionLabel eyebrow="Rooms" title="Pick a room. Or eight." kicker="Every card carries size, sleeps, bed, and a from-price. The sqm fields read 'on request' until the property hands them over — that's an honest blank, not a hidden one." />
            <button onClick={() => goto('rooms')} className="btn btn-ghost">View all 8 rooms <Icon.Arrow width="14" height="14" /></button>
          </header>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
            {ROOMS.filter(r => ['standard', 'deluxe', 'junior', 'executive'].includes(r.id)).map((r) => (
              <RoomCard key={r.id} room={r} onCheck={onBook} />
            ))}
          </div>
        </div>
      </section>

      {/* ——— LOCATION STRIP ——— */}
      <section style={{ padding: '96px 32px', background: 'var(--teal)', color: 'var(--cream)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionLabel tone="cream" eyebrow="Location" title="Across the road from Al Ghurair. Around the corner from everywhere." kicker="Union Metro is Red + Green interchange — one ride to Burj Khalifa, one ride to the airport, both under 20 minutes. The Gold Souk is a 6-minute taxi." />
            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                ['Union Metro', '100 m · 2 min walk'],
                ['Al Ghurair Centre', 'Across the road'],
                ['DXB Airport', '15 min by metro'],
                ['Dubai Creek', '3.6 km'],
                ['Gold Souk', '6 min taxi'],
                ['Deira City Centre', '2 km · short metro'],
              ].map(([k, v]) => (
                <div key={k} style={{ padding: '14px 0', borderTop: '1px solid var(--line-cream)' }}>
                  <div style={{ fontSize: 14, color: 'var(--brass)' }}>{k}</div>
                  <div style={{ fontSize: 13, color: 'rgba(244,236,220,0.75)', marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>
            <button onClick={() => goto('location')} className="btn btn-secondary" style={{ marginTop: 28 }}>Open map and transit guide <Icon.Arrow width="14" height="14" /></button>
          </div>

          {/* Hand-drawn 100m walk illustration */}
          <WalkIllustration />
        </div>
      </section>

      {/* ——— ON THE PROPERTY · BENTO ——— */}
      <section style={{ padding: '96px 32px', background: 'var(--cream-2)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 40 }}>
          <header style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
            <SectionLabel
              eyebrow="On the property"
              title="A pool on the roof. A sauna in the basement. A banquet hall for 200."
              kicker="Eight working spaces, not a marketing concept. Hours are posted at reception and on every booking confirmation."
            />
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 24px' }}>
              {[
                ['Outdoor pool', '06:00 — 22:00'],
                ['Kids\u2019 pool', 'Supervised hours'],
                ['Gym', '24 hours'],
                ['Sauna + steam', 'Gendered slots'],
                ['Spa treatments', 'By appointment'],
                ['Banquet hall', 'Up to 200 guests'],
                ['Conference rooms', '4 boardrooms'],
                ['Business centre', 'Print · scan · courier'],
              ].map(([k, v]) => (
                <li key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '8px 0', borderTop: '1px solid var(--line)', gap: 12 }}>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{k}</span>
                  <span className="font-mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'rgba(26,26,26,0.5)', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{v}</span>
                </li>
              ))}
            </ul>
          </header>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(12, 1fr)',
            gridAutoRows: '180px',
            gap: 16,
          }}>
            <BentoTile img="assets/pool-1.webp" name="Outdoor pool" spec="Rooftop · Deira skyline at night" position="bottom" gridArea="1 / 1 / 3 / 8" />
            <BentoTile img="assets/sauna-1.webp" name="Sauna + steam" spec="Single-gender slots" position="bottom" gridArea="1 / 8 / 2 / 13" />
            <BentoTile img="assets/gym-1.webp" name="Gym" spec="Cardio · free weights · open 24 h" position="bottom" gridArea="2 / 8 / 3 / 13" />
            <BentoTile img="assets/banquet-1.webp" name="Banquet hall" spec="Up to 200 guests · weddings & corporate" position="bottom" gridArea="3 / 1 / 4 / 7" />
            <BentoTile img="assets/conference-1.webp" name="Conference rooms" spec="4 rooms · boardroom or classroom layout" position="bottom" gridArea="3 / 7 / 4 / 10" />

            {/* Halal-friendly text card — sits in bento as the editorial closer */}
            <div style={{
              gridArea: '3 / 10 / 4 / 13',
              background: 'var(--teal)', color: 'var(--cream)',
              padding: '20px 22px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 10,
            }}>
              <Icon.Halal width="22" height="22" style={{ color: 'var(--brass)' }} />
              <div>
                <h4 className="font-display" style={{ margin: 0, fontSize: 22, fontWeight: 500, lineHeight: 1.15 }}>Halal-friendly throughout.</h4>
                <p style={{ margin: '6px 0 0', fontSize: 12, color: 'rgba(244,236,220,0.7)', lineHeight: 1.55 }}>
                  Alcohol-free property · prayer mat &amp; Qibla indicator in every room · Quran on request.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ——— DINING STRIP ——— */}
      <section style={{ padding: '88px 32px', background: 'var(--cream-2)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          <div style={{ gridColumn: 'span 3', marginBottom: 8 }}>
            <SectionLabel eyebrow="Dining" title="One restaurant. One lounge. Twenty-four hours of in-room dining." kicker="We don't pretend to run six restaurants. Delights does breakfast through dinner, the lobby lounge does tea and coffee, the kitchen never sleeps. Alcohol-free throughout." />
          </div>
          {[
            { name: 'Delights Restaurant', sub: 'All-day dining · daily buffet breakfast', img: 'assets/restaurant-1.webp', hours: '06:30 — 23:00' },
            { name: 'Lobby Tea & Coffee Lounge', sub: 'Karak chai, Arabic coffee, light bites', img: 'assets/restaurant-2.webp', hours: '24 hours' },
            { name: 'In-Room Dining', sub: '24-hour service · full menu', img: 'assets/restaurant-3.webp', hours: 'Dial 0 from any room' },
          ].map((d) => (
            <article key={d.name} style={{ background: 'var(--cream)', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden' }}>
                <img src={d.img} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.9)' }} />
              </div>
              <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
                <h3 className="font-display" style={{ margin: 0, fontSize: 24, fontWeight: 500 }}>{d.name}</h3>
                <p style={{ margin: 0, fontSize: 13, color: 'rgba(26,26,26,0.65)' }}>{d.sub}</p>
                <div style={{ marginTop: 'auto', paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--line)' }}>
                  <span className="font-mono" style={{ fontSize: 11, color: 'rgba(26,26,26,0.6)', letterSpacing: '0.14em' }}>{d.hours}</span>
                  <span style={{ fontSize: 12, color: 'var(--brass)', fontWeight: 500 }}>Halal-friendly</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ——— DIRECT BOOK BENEFITS ——— */}
      <section style={{ padding: '88px 32px', background: 'var(--teal-deep)', color: 'var(--cream)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionLabel tone="cream" align="center" eyebrow="Book direct" title="Four reasons we cost less than the OTAs." kicker="The booking engine opens in one click. The discount is automatic. No loyalty hoops, no email-list trap." />
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line-cream)' }}>
            {[
              { stat: '5–10%', label: 'Direct-only discount', sub: 'Auto-applied at booking' },
              { stat: 'AED 0', label: '24 h free cancellation', sub: 'Before check-in' },
              { stat: 'Free', label: 'Airport shuttle', sub: 'On direct rates' },
              { stat: '100%', label: 'Best Rate Guarantee', sub: "We'll match any OTA price" },
            ].map((b, i) => (
              <div key={b.label} style={{ padding: 28, borderRight: i < 3 ? '1px solid var(--line-cream)' : 'none' }}>
                <div className="font-display" style={{ fontSize: 40, fontWeight: 500, color: 'var(--brass)', lineHeight: 1 }}>{b.stat}</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 12 }}>{b.label}</div>
                <div style={{ fontSize: 12, color: 'rgba(244,236,220,0.65)', marginTop: 4 }}>{b.sub}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            <button onClick={onBook} className="btn btn-primary">Book direct now <Icon.Arrow width="16" height="16" /></button>
            <a href="tel:+97142740000" className="btn btn-secondary"><Icon.Phone width="14" height="14" /> +971 4 274 0000</a>
          </div>
        </div>
      </section>

      {/* ——— GUEST QUOTES ——— */}
      <section style={{ padding: '88px 32px', background: 'var(--mist)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionLabel eyebrow="In guests' words" title="The five things they actually write about." kicker="Pulled verbatim across Tripadvisor, Booking, Trip.com — the recurring positives, with the platform and review count attached." />
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px,1fr))', gap: 20 }}>
            {[
              { q: '"Excellent location near Union Metro (Red & Green Lines), safe lively area, spacious rooms, and helpful staff."', src: 'Tripadvisor · 1,127 reviews' },
              { q: '"The hospitality was exceptional, from the warm welcome at reception to the friendly and helpful staff throughout my stay."', src: 'Tripadvisor' },
              { q: '"Staff are highlighted as especially helpful and friendly… room size is big compared to other hotels."', src: 'Booking.com · 2,820 reviews' },
              { q: '"Excellent location, excellent service and staff are very helpful."', src: 'Trip.com · 184 reviews' },
            ].map((g, i) => (
              <figure key={i} style={{ margin: 0, padding: 24, background: 'var(--cream-2)', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 18 }}>
                <blockquote className="font-display" style={{ margin: 0, fontSize: 21, lineHeight: 1.35, fontWeight: 400, color: 'var(--ink)' }}>{g.q}</blockquote>
                <figcaption style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'rgba(26,26,26,0.6)', fontSize: 12 }}>
                  <span style={{ width: 20, height: 1, background: 'var(--brass)' }} />
                  <span className="font-mono" style={{ letterSpacing: '0.16em', textTransform: 'uppercase' }}>{g.src}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ——— Bento tile for "On the property" ——— */
function BentoTile({ img, name, spec, gridArea, position = 'bottom' }) {
  return (
    <article style={{
      gridArea, position: 'relative', overflow: 'hidden',
      background: 'var(--mist)',
      transition: 'transform 280ms ease',
      cursor: 'pointer',
    }}
      onMouseEnter={(e) => { e.currentTarget.querySelector('img').style.transform = 'scale(1.06)'; }}
      onMouseLeave={(e) => { e.currentTarget.querySelector('img').style.transform = 'scale(1)'; }}
    >
      <img src={img} alt={name} loading="lazy" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
        filter: 'saturate(0.9) brightness(0.92)',
        transition: 'transform 600ms cubic-bezier(.2,.7,.2,1)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: position === 'bottom'
          ? 'linear-gradient(180deg, rgba(8,38,36,0) 35%, rgba(8,38,36,0.78) 100%)'
          : 'linear-gradient(180deg, rgba(8,38,36,0.78) 0%, rgba(8,38,36,0) 60%)',
      }} />
      <div style={{
        position: 'absolute', left: 18, right: 18,
        [position]: 16,
        color: 'var(--cream)',
        display: 'flex', flexDirection: 'column', gap: 2,
      }}>
        <h4 className="font-display" style={{ margin: 0, fontSize: 22, fontWeight: 500, lineHeight: 1.15 }}>{name}</h4>
        <span className="font-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(244,236,220,0.75)', textTransform: 'uppercase' }}>{spec}</span>
      </div>
    </article>
  );
}

/* ——— Walk illustration: 100 m to Union Metro ——— */
function WalkIllustration() {
  return (
    <div style={{ position: 'relative', aspectRatio: '5/4', background: 'var(--teal-deep)', border: '1px solid var(--line-cream)', padding: 24, overflow: 'hidden' }}>
      <svg viewBox="0 0 500 400" style={{ width: '100%', height: '100%' }}>
        {/* grid */}
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(244,236,220,0.06)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="500" height="400" fill="url(#grid)" />

        {/* Al Riqqa Street label */}
        <text x="250" y="34" textAnchor="middle" fill="rgba(244,236,220,0.5)" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2">AL RIQQA STREET · DEIRA</text>

        {/* Road */}
        <rect x="40" y="180" width="420" height="36" fill="rgba(244,236,220,0.08)" />
        <line x1="40" y1="198" x2="460" y2="198" stroke="rgba(244,236,220,0.35)" strokeWidth="1.5" strokeDasharray="10 8" />

        {/* Hotel marker */}
        <g>
          <rect x="80" y="226" width="120" height="120" fill="#0E3B3A" stroke="#B8894A" strokeWidth="2" />
          <text x="140" y="280" textAnchor="middle" fill="#B8894A" fontFamily="Cormorant Garamond" fontSize="32" fontWeight="500">L</text>
          <text x="140" y="312" textAnchor="middle" fill="rgba(244,236,220,0.85)" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="2">YOU ARE HERE</text>
          <text x="140" y="324" textAnchor="middle" fill="rgba(244,236,220,0.55)" fontFamily="Inter" fontSize="9">Landmark Grand</text>
        </g>

        {/* Al Ghurair across road */}
        <g>
          <rect x="80" y="60" width="240" height="100" fill="rgba(184,137,74,0.18)" stroke="rgba(184,137,74,0.5)" strokeWidth="1" />
          <text x="200" y="110" textAnchor="middle" fill="rgba(244,236,220,0.8)" fontFamily="Cormorant Garamond" fontSize="22" fontWeight="500">Al Ghurair Centre</text>
          <text x="200" y="132" textAnchor="middle" fill="rgba(244,236,220,0.5)" fontFamily="Inter" fontSize="11">Mall · cross the road</text>
        </g>

        {/* Union Metro */}
        <g>
          <circle cx="400" cy="280" r="34" fill="#B8894A" />
          <text x="400" y="276" textAnchor="middle" fill="#082624" fontFamily="JetBrains Mono" fontSize="10" fontWeight="700">UNION</text>
          <text x="400" y="290" textAnchor="middle" fill="#082624" fontFamily="JetBrains Mono" fontSize="10" fontWeight="700">METRO</text>
          <text x="400" y="332" textAnchor="middle" fill="rgba(244,236,220,0.55)" fontFamily="Inter" fontSize="10">Red + Green interchange</text>
        </g>

        {/* Walk path */}
        <path d="M 200 286 Q 280 330 366 280" stroke="#B8894A" strokeWidth="2" strokeDasharray="4 5" fill="none" />
        {/* footsteps dots */}
        {[0, 0.2, 0.4, 0.6, 0.8, 1].map((t, i) => {
          // sample along quadratic
          const x = (1 - t) * (1 - t) * 200 + 2 * (1 - t) * t * 280 + t * t * 366;
          const y = (1 - t) * (1 - t) * 286 + 2 * (1 - t) * t * 330 + t * t * 280;
          return <circle key={i} cx={x} cy={y} r="2.5" fill="#F4ECDC" />;
        })}

        {/* distance label */}
        <g transform="translate(280,360)">
          <line x1="-60" y1="0" x2="60" y2="0" stroke="rgba(244,236,220,0.35)" strokeWidth="1" />
          <line x1="-60" y1="-4" x2="-60" y2="4" stroke="rgba(244,236,220,0.35)" strokeWidth="1" />
          <line x1="60" y1="-4" x2="60" y2="4" stroke="rgba(244,236,220,0.35)" strokeWidth="1" />
          <rect x="-34" y="-13" width="68" height="22" fill="#082624" />
          <text x="0" y="3" textAnchor="middle" fill="#F4ECDC" fontFamily="Cormorant Garamond" fontSize="16" fontWeight="500">~100 m</text>
        </g>
        <text x="280" y="392" textAnchor="middle" fill="rgba(244,236,220,0.5)" fontFamily="Inter" fontSize="11" fontStyle="italic">2–5 minutes on foot</text>
      </svg>
    </div>
  );
}

/* ——— Rooms page ——— */
function RoomsPage({ onBook }) {
  return (
    <main className="page" data-screen-label="02 Rooms" style={{ background: 'var(--cream-2)' }}>
      <section style={{ padding: '120px 32px 56px', background: 'var(--teal)', color: 'var(--cream)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'end' }}>
          <div>
            <SectionLabel tone="cream" eyebrow="Rooms & Suites · 175 keys" title="Eight room types. Every card carries size, sleeps, bed and rate." kicker="The sqm field reads 'on request' wherever the property hasn't yet supplied a measured floor plan. We'd rather show an honest blank than the 'spacious' filler the old site used to print." />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <ReviewBadge tone="cream" />
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <FeatureBadge icon={Icon.Halal} label="Prayer mat + Qibla" sub="Quran on request" />
              <FeatureBadge icon={Icon.Wifi} label="Dual-band WiFi" sub="Free, in every room" />
            </div>
          </div>
        </div>
      </section>
      <section style={{ padding: '56px 32px 96px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {ROOMS.map((r) => <RoomCard key={r.id} room={r} onCheck={onBook} />)}
        </div>
      </section>
    </main>
  );
}

/* ——— Dining ——— */
function DiningPage() {
  return (
    <main className="page" data-screen-label="03 Dining">
      <section style={{ padding: '120px 32px 64px', background: 'var(--cream-2)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionLabel eyebrow="Dining · Alcohol-free" title="One restaurant. One lounge. Twenty-four hour service." kicker="Delights Restaurant is the only on-site outlet — and we say so up front. The lobby lounge handles tea and coffee. In-room dining never closes. Sister Landmark restaurants are listed at the bottom of the page, not the top." />
        </div>
      </section>

      <section style={{ padding: '0 32px 88px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 32 }}>
          <article style={{ background: 'var(--cream-2)', border: '1px solid var(--line)', overflow: 'hidden' }}>
            <div style={{ aspectRatio: '16/9' }}>
              <img src="assets/restaurant-1.webp" alt="Delights Restaurant" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ padding: 32 }}>
              <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--brass)', textTransform: 'uppercase' }}>FLAGSHIP · GROUND FLOOR</div>
              <h2 className="font-display" style={{ margin: '8px 0 12px', fontSize: 38, fontWeight: 500 }}>Delights Restaurant</h2>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: 'rgba(26,26,26,0.7)', maxWidth: 640 }}>
                All-day dining with an international menu and a daily buffet breakfast. Halal-certified throughout.
                A live cooking station for eggs at breakfast, an à la carte menu through lunch and dinner.
              </p>
              <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }}>
                {[
                  ['Breakfast', '06:30 — 10:30'],
                  ['Lunch', '12:30 — 15:00'],
                  ['Dinner', '19:00 — 23:00'],
                ].map(([k, v]) => (
                  <div key={k} style={{ padding: '14px 0', borderRight: '1px solid var(--line)' }}>
                    <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(26,26,26,0.5)' }}>{k.toUpperCase()}</div>
                    <div style={{ fontSize: 14, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </article>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <article style={{ background: 'var(--mist)', border: '1px solid var(--line)', padding: 24 }}>
              <div style={{ aspectRatio: '16/9', marginBottom: 18, overflow: 'hidden' }}>
                <img src="assets/restaurant-2.webp" alt="Lobby Lounge" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <h3 className="font-display" style={{ margin: 0, fontSize: 26, fontWeight: 500 }}>Lobby Tea &amp; Coffee Lounge</h3>
              <p style={{ margin: '8px 0 0', fontSize: 13, color: 'rgba(26,26,26,0.65)', lineHeight: 1.6 }}>Karak chai, Arabic coffee with dates, sandwiches and pastries. Open 24 hours.</p>
            </article>
            <article style={{ background: 'var(--teal)', color: 'var(--cream)', padding: 24 }}>
              <Icon.Phone width="20" height="20" style={{ color: 'var(--brass)' }} />
              <h3 className="font-display" style={{ margin: '10px 0 6px', fontSize: 26, fontWeight: 500 }}>24-hour in-room dining</h3>
              <p style={{ margin: 0, fontSize: 13, color: 'rgba(244,236,220,0.75)', lineHeight: 1.6 }}>Full Delights menu plus a late-night abbreviated card. Dial 0 from any room.</p>
            </article>
          </div>
        </div>
      </section>

      <section style={{ padding: '32px 32px 88px', background: 'var(--cream-2)' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <details>
            <summary style={{ cursor: 'pointer', fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.22em', color: 'rgba(26,26,26,0.55)', textTransform: 'uppercase' }}>
              Other Landmark restaurants in Deira (5)
            </summary>
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14 }}>
              {['Riqqa · multi-cuisine', 'Premier · Indian', 'Summit · café', 'Baniyas · Filipino', 'Plaza · lounge'].map((n) => (
                <div key={n} style={{ padding: '12px 14px', border: '1px solid var(--line)', fontSize: 13, color: 'rgba(26,26,26,0.7)' }}>{n}</div>
              ))}
            </div>
          </details>
        </div>
      </section>
    </main>
  );
}

/* ——— Facilities ——— */
function FacilitiesPage() {
  const facilities = [
    { name: 'Outdoor pool', img: 'assets/pool-1.webp', icon: Icon.Pool, sub: 'Rooftop · open 06:00 – 22:00' },
    { name: "Kids' pool", img: 'assets/pool-2.webp', icon: Icon.Pool, sub: 'Shallow · supervised swim hours' },
    { name: 'Gym & health club', img: 'assets/gym-1.webp', icon: Icon.Gym, sub: 'Cardio + free weights · 24h' },
    { name: 'Sauna + steam room', img: 'assets/sauna-1.webp', icon: Icon.Sauna, sub: 'Single-gender hours posted at desk' },
    { name: 'Spa treatments', img: 'assets/sauna-1.webp', icon: Icon.Spa, sub: 'Body scrub · pedicure · manicure' },
    { name: 'Banquet hall', img: 'assets/banquet-1.webp', icon: Icon.Banquet, sub: 'Up to 200 guests · weddings & events' },
    { name: 'Conference rooms', img: 'assets/conference-1.webp', icon: Icon.Conference, sub: '4 rooms · boardroom or classroom' },
    { name: 'Business centre', img: 'assets/conference-1.webp', icon: Icon.Conference, sub: 'Printing · scanning · couriers' },
  ];
  return (
    <main className="page" data-screen-label="04 Facilities" style={{ background: 'var(--cream-2)' }}>
      <section style={{ padding: '120px 32px 64px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionLabel eyebrow="Facilities" title="A pool on the roof. A gym that's open all night. A banquet hall for 200." kicker="Specific things in specific places — not 'world-class wellness amenities'. Every facility has its actual hours and what fits inside it." />
        </div>
      </section>
      <section style={{ padding: '0 32px 96px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
          {facilities.map((f) => (
            <article key={f.name} style={{ background: 'var(--cream-2)' }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden' }}>
                <img src={f.img} alt={f.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92)' }} />
              </div>
              <div style={{ padding: 22 }}>
                <f.icon width="20" height="20" style={{ color: 'var(--brass)' }} />
                <h3 className="font-display" style={{ margin: '10px 0 4px', fontSize: 22, fontWeight: 500 }}>{f.name}</h3>
                <p style={{ margin: 0, fontSize: 12, color: 'rgba(26,26,26,0.6)' }}>{f.sub}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ——— Offers ——— */
function OffersPage({ onBook }) {
  const offers = [
    { tag: '72% off', label: 'Shoulder season', dates: '25 Feb — 18 Mar 2026', desc: 'Standard room from AED 95 a night with breakfast.', cta: 'Apply at checkout', accent: 'var(--rose)' },
    { tag: 'Direct only', label: '24h free cancellation + 5–10% off', dates: 'Year-round', desc: 'Best Rate Guarantee. Book direct, get a 5–10% discount that no OTA can match.', cta: 'Book direct', accent: 'var(--brass)' },
    { tag: 'Free', label: 'Airport shuttle', dates: 'On direct rates', desc: 'Pre-book at least 24 hours before arrival. 15 minutes from DXB by road.', cta: 'Reserve shuttle', accent: 'var(--teal)' },
    { tag: 'Family', label: 'Junior Suite + rollaway', dates: 'Year-round', desc: 'Rollaway bed AED 120 · baby cot on request. Sleeps 2 adults + 1 child + 1 infant.', cta: 'Request a quote', accent: 'var(--brass)' },
  ];
  return (
    <main className="page" data-screen-label="05 Offers" style={{ background: 'var(--cream-2)' }}>
      <section style={{ padding: '120px 32px 56px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionLabel eyebrow="Offers" title="Four current rates. No flashing banners." kicker="All offers sit in one place — you don't have to scrape the homepage banner to find a promo." />
        </div>
      </section>
      <section style={{ padding: '0 32px 96px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 24 }}>
          {offers.map((o) => (
            <article key={o.label} style={{ background: 'var(--cream-2)', border: '1px solid var(--line)', padding: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ padding: '4px 10px', background: o.accent, color: 'var(--cream)', fontSize: 11, fontFamily: 'JetBrains Mono', letterSpacing: '0.16em' }}>{o.tag.toUpperCase()}</span>
                <span className="font-mono" style={{ fontSize: 11, color: 'rgba(26,26,26,0.55)', letterSpacing: '0.16em' }}>{o.dates}</span>
              </div>
              <h3 className="font-display" style={{ margin: 0, fontSize: 28, fontWeight: 500 }}>{o.label}</h3>
              <p style={{ margin: 0, fontSize: 14, color: 'rgba(26,26,26,0.7)', lineHeight: 1.6, flex: 1 }}>{o.desc}</p>
              <button onClick={onBook} className="btn btn-dark btn-sm" style={{ alignSelf: 'flex-start' }}>{o.cta} <Icon.Arrow width="14" height="14" /></button>
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ——— Location ——— */
function LocationPage() {
  return (
    <main className="page" data-screen-label="06 Location" style={{ background: 'var(--cream-2)' }}>
      <section style={{ padding: '120px 32px 56px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionLabel eyebrow="Location" title="Al Riqqa Street, Deira. 100 m to Union Metro." kicker="Across the road from Al Ghurair Centre. One metro stop from the Gold Souk, two from Burj Khalifa, four from DXB." />
        </div>
      </section>
      <section style={{ padding: '0 32px 88px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
          <div style={{ aspectRatio: '4/3', background: 'var(--mist)', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
            {/* Location map panel — drawn with SVG */}
            <svg viewBox="0 0 600 450" style={{ width: '100%', height: '100%' }}>
              <rect width="600" height="450" fill="#E8E2D3" />
              {/* roads */}
              <path d="M 0 220 L 600 220 M 0 280 L 600 280" stroke="#FFF" strokeWidth="22" />
              <path d="M 200 0 L 200 450 M 380 0 L 380 450" stroke="#FFF" strokeWidth="18" />
              <path d="M 0 100 L 600 60" stroke="#FFF" strokeWidth="14" />
              <path d="M 0 380 L 600 410" stroke="#FFF" strokeWidth="10" />
              {/* blocks */}
              {[[40,40,140,50],[230,40,130,60],[400,30,170,30],[40,130,140,60],[230,130,130,60],[400,90,170,90],[40,310,140,60],[230,310,130,60],[400,310,170,60]].map(([x,y,w,h], i)=>(
                <rect key={i} x={x} y={y} width={w} height={h} fill="#D8CFBC" />
              ))}
              {/* labels */}
              <text x="115" y="170" textAnchor="middle" fill="#0E3B3A" fontFamily="Inter" fontSize="9" opacity="0.55">Naif</text>
              <text x="465" y="62" textAnchor="middle" fill="#0E3B3A" fontFamily="Inter" fontSize="9" opacity="0.55">Hor Al Anz</text>
              <text x="300" y="248" textAnchor="middle" fill="#0E3B3A" fontFamily="Inter" fontSize="8" opacity="0.55">AL RIQQA STREET</text>

              {/* Al Ghurair */}
              <rect x="230" y="180" width="130" height="40" fill="#B8894A" opacity="0.5" />
              <text x="295" y="205" textAnchor="middle" fill="#082624" fontFamily="Inter" fontSize="10" fontWeight="600">Al Ghurair Centre</text>

              {/* Hotel pin */}
              <g transform="translate(295,330)">
                <circle r="22" fill="#0E3B3A" />
                <circle r="22" fill="none" stroke="#B8894A" strokeWidth="2" />
                <text y="5" textAnchor="middle" fill="#B8894A" fontFamily="Cormorant Garamond" fontSize="22" fontWeight="500">L</text>
                <text y="46" textAnchor="middle" fill="#0E3B3A" fontFamily="Inter" fontSize="11" fontWeight="600">Landmark Grand</text>
              </g>

              {/* Union Metro */}
              <g transform="translate(420,260)">
                <circle r="14" fill="#B8894A" />
                <text y="4" textAnchor="middle" fill="#082624" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700">M</text>
                <text y="32" textAnchor="middle" fill="#0E3B3A" fontFamily="Inter" fontSize="10" fontWeight="600">Union Metro</text>
              </g>

              {/* walk arc */}
              <path d="M 295 320 Q 360 300 410 270" stroke="#0E3B3A" strokeDasharray="5 4" strokeWidth="2" fill="none" />

              {/* compass */}
              <g transform="translate(550,40)">
                <circle r="14" fill="#FBF6EA" stroke="#0E3B3A" strokeWidth="1" />
                <text y="-2" textAnchor="middle" fill="#0E3B3A" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700">N</text>
                <path d="M 0 -8 L -3 4 L 0 1 L 3 4 z" fill="#C46A5A" />
              </g>
            </svg>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ background: 'var(--teal)', color: 'var(--cream)', padding: 24 }}>
              <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'rgba(244,236,220,0.6)' }}>ADDRESS</div>
              <p className="font-display" style={{ margin: '8px 0', fontSize: 22, fontWeight: 500, lineHeight: 1.3 }}>PO Box 42222, Al Riqqa Street,<br/>Deira, Dubai, UAE</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, marginTop: 16 }}>
                <a href="tel:+97142740000" style={{ color: 'var(--cream)', textDecoration: 'none', display: 'flex', gap: 10, alignItems: 'center' }}><Icon.Phone width="14" height="14" style={{ color: 'var(--brass)' }} /> +971 4 274 0000</a>
                <a href="mailto:grand@landmarkhotels.com" style={{ color: 'var(--cream)', textDecoration: 'none', display: 'flex', gap: 10, alignItems: 'center' }}><Icon.Mail width="14" height="14" style={{ color: 'var(--brass)' }} /> grand@landmarkhotels.com</a>
              </div>
            </div>
            <div style={{ padding: 24, border: '1px solid var(--line)', background: 'var(--cream-2)' }}>
              <h4 className="font-mono" style={{ margin: 0, fontSize: 11, letterSpacing: '0.22em', color: 'var(--brass)', textTransform: 'uppercase' }}>Check-in / Check-out</h4>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, gap: 16 }}>
                <div><div style={{ fontSize: 12, color: 'rgba(26,26,26,0.55)' }}>Check-in</div><div className="font-display" style={{ fontSize: 22, fontWeight: 500 }}>14:00</div></div>
                <div><div style={{ fontSize: 12, color: 'rgba(26,26,26,0.55)' }}>Check-out</div><div className="font-display" style={{ fontSize: 22, fontWeight: 500 }}>12:00</div></div>
              </div>
            </div>
            <div style={{ padding: 24, border: '1px solid var(--line)', background: 'var(--cream-2)', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <Icon.Halal width="22" height="22" style={{ color: 'var(--brass)', flexShrink: 0, marginTop: 2 }} />
              <div>
                <h4 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Halal-friendly</h4>
                <p style={{ margin: '6px 0 0', fontSize: 13, color: 'rgba(26,26,26,0.65)', lineHeight: 1.55 }}>Alcohol-free property · prayer mats and Qibla indicator in every room · Quran on request.</p>
              </div>
            </div>
          </div>
        </div>

        <div style={{ maxWidth: 1400, margin: '40px auto 0', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 0, border: '1px solid var(--line)' }}>
          {[
            ['Union Metro', '100 m · 2 min walk'],
            ['Al Ghurair Centre', 'Across the road'],
            ['Al Rigga Metro', '~5–10 min walk'],
            ['DXB Airport', '15 min by metro'],
            ['Gold Souk', '6 min taxi'],
            ['Deira City Centre', '2 km'],
            ['Burj Khalifa', '20 min by metro'],
            ['Dubai Creek', '3.6 km'],
          ].map(([k, v]) => (
            <div key={k} style={{ padding: '18px 20px', borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
              <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(26,26,26,0.5)' }}>{k.toUpperCase()}</div>
              <div style={{ fontSize: 14, marginTop: 6 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, RoomsPage, DiningPage, FacilitiesPage, OffersPage, LocationPage, ROOMS });