/* eslint-disable */
// Pages for the Panorama Hotel Bur Dubai prototype.
// Each page is a self-contained component attached to window.

const { useState: _useState, useEffect: _useEffect, useMemo: _useMemo, useRef: _useRef } = React;

// ============================================================
//  Data — real, sourced from research files
// ============================================================
const DISTANCES = [
  { key: "alfahidi", icon: "metro", label: "Al Fahidi Metro (Green Line)", distance: "500–700 m", time: "10-min walk", note: "Closest station — green line direct to airport interchange." },
  { key: "burjuman", icon: "metro", label: "BurJuman Mall & Metro", distance: "1.1 km", time: "15-min walk", note: "Primary retail/dining hub. Red line + green line interchange." },
  { key: "meena", icon: "walk", label: "Meena Bazaar", distance: "1.0 km", time: "13-min walk", note: "Textile, gold and Indian-snack district." },
  { key: "abra", icon: "walk", label: "Bur Dubai Abra Dock", distance: "2.9 km", time: "8-min taxi", note: "Wooden water-taxi crossing to Deira spice/gold souks. AED 1 fare." },
  { key: "frame", icon: "walk", label: "Dubai Frame", distance: "2.3 km", time: "25-min walk", note: "Park entry from the Bur Dubai side." },
  { key: "creek", icon: "walk", label: "Dubai Creek waterfront", distance: "2.8 km", time: "10-min taxi", note: "Heritage village and Al Seef boardwalk." },
  { key: "dxb", icon: "car", label: "Dubai International (DXB) Terminal 3", distance: "7 km", time: "15–20 min by car", note: "Or ~30 min via metro (Red → BurJuman → Green to Al Fahidi)." },
  { key: "downtown", icon: "car", label: "Burj Khalifa / Downtown Dubai", distance: "6.6 km", time: "15 min by car", note: "10 min by metro to Burj Khalifa station." },
];

const ROOMS = [
  {
    id: "single", name: "Standard Single", from: 79, sqm: 27,
    image: "media/room-standard-01.jpg",
    beds: "1 single bed", occupancy: "1 adult",
    description: "One bed, one balcony, walk-in shower. The simplest way to sleep 500 metres from the metro for under USD 25 a night.",
    badges: ["Balcony", "Walk-in shower"], note: "27 m² confirmed by property.",
  },
  {
    id: "double", name: "Standard Double", from: 84, sqm: 27,
    image: "media/room-standard-02-entry.jpg",
    beds: "1 double bed", occupancy: "2 adults",
    description: "Most-booked room. Same footprint as the Single with a queen bed and a small sitting nook by the window.",
    badges: ["Balcony", "Soundproof window"], note: "27 m² confirmed by property.",
  },
  {
    id: "twin", name: "Standard Twin", from: 92, sqm: 27,
    image: "media/room-standard-04-twin.jpg",
    beds: "2 single beds", occupancy: "2 adults",
    description: "Twin configuration of the standard floorplan. Common request from work-trip pairs and family doubles.",
    badges: ["Balcony", "Twin beds"], note: "27 m² confirmed by property.",
  },
  {
    id: "triple", name: "Standard Triple", from: 119, sqm: null,
    image: "media/room-deluxe-02.jpg",
    beds: "1 double + 1 single", occupancy: "3 adults",
    description: "Three-bed configuration for small groups and families. Bigger footprint than the standard rooms.",
    badges: ["Balcony", "Family-friendly"], note: "Size on request — we'll confirm at booking.",
  },
  {
    id: "deluxe", name: "Deluxe Twin · refurbished 2014", from: 143, sqm: null,
    image: "media/room-deluxe-04-twin.jpg",
    beds: "2 single beds + sofa", occupancy: "2 adults",
    description: "Post-2014 refurbishment finish — fresh paint, updated linen, larger seating area. The room we'd put you in if you asked us where to stay.",
    badges: ["Refurbished 2014", "Balcony", "Sofa nook"], note: "Size on request.",
  },
  {
    id: "suite", name: "Family Suite", from: 197, sqm: null,
    image: "media/room-suite-01-living.jpg",
    beds: "King + separate living room", occupancy: "Up to 4",
    description: "Separate living room and bedroom. Best for families and longer stays. Limited inventory — please WhatsApp to confirm availability.",
    badges: ["Separate lounge", "Balcony", "Limited inventory"], note: "Size on request.",
  },
];

const DINING = [
  {
    id: "bombay-blue", name: "Bombay Blue", cuisine: "North Indian · Bar",
    image: "media/restaurant-04-bombay-blue-interior.jpg",
    hours: "Daily · 12:00–02:00",
    description: "Tandoori, biryanis and a full bar. The most-photographed restaurant in the building — Mughal-style murals, jaali screens, served late.",
  },
  {
    id: "thambunu", name: "Thambunu", cuisine: "Kerala · South Indian",
    image: "media/restaurant-01-thambunu.jpg",
    hours: "Daily · 11:30–23:30",
    description: "Vegetarian and non-veg Kerala plates — appam, stew, fish moilee. Quiet, family-led service. The room a lot of guests come back for.",
  },
  {
    id: "indian", name: "Spice Court", cuisine: "Indian · all-day",
    image: "media/restaurant-05-indian.jpg",
    hours: "Daily · 07:00–23:00",
    description: "All-day Indian menu and quick service. Easy room-service option if you'd rather not leave the floor.",
  },
  {
    id: "rounders", name: "Rounders Lounge", cuisine: "Bar · Sports lounge",
    image: "media/bar-01-rounders.jpg",
    hours: "Daily · 18:00–03:00",
    description: "On-site bar with screens and Premier League fixtures. Ground floor — we soundproofed the rooms above after 2015. Quiet floors available on request.",
    flag: "Ground floor; ask for floors 4–6 for quiet rooms.",
  },
];

const REVIEWS = [
  {
    sentiment: "positive",
    theme: "Location",
    score: 9, scoreLabel: "Wonderful",
    quote: "Excellent location near metro stations and shopping areas… spacious and comfortable rooms.",
    author: "KAYAK verified guest", platform: "KAYAK",
  },
  {
    sentiment: "positive",
    theme: "Housekeeping",
    score: 9,
    quote: "The house keeper Joshi makes the room too much clean. Staff is very polite, professional and responsible.",
    author: "Tripadvisor reviewer", platform: "Tripadvisor",
    gmResponse: "Joshi is still with us and now leads the housekeeping team on floors 3–5. Thank you for naming him — we make sure recognition like this goes straight back to the team.",
  },
  {
    sentiment: "positive",
    theme: "Value",
    score: 8,
    quote: "It's a decent budget hotel in Bur Dubai, centrally located and in the vicinity of major attractions.",
    author: "Tripadvisor reviewer", platform: "Tripadvisor",
  },
  {
    sentiment: "negative",
    theme: "Cleanliness",
    score: 3, scoreLabel: "Poor",
    quote: "Cockroaches and other insects in room… real hard to sleep.",
    author: "Syed Hasan R., Apr 2017", platform: "Tripadvisor",
    gmResponse: "This review is the reason we contracted a monthly pest-control service in 2018 and moved to a fortnightly inspection cycle in 2022. Every room is checked between guests; if you ever see anything, call reception (ext. 0) and we move you immediately — no questions, no charge.",
  },
  {
    sentiment: "negative",
    theme: "Noise",
    score: 4,
    quote: "Two loud night bars at the ground floor… room was thus too loud.",
    author: "Bosty007, Nov 2015", platform: "Tripadvisor",
    gmResponse: "Fair. The ground-floor lounge (Rounders) is still here — we installed soundproof window glazing in 2016 and now hold rooms on floors 4–6 for guests who flag noise sensitivity at booking. Tell us at check-in and we'll move you up.",
  },
  {
    sentiment: "negative",
    theme: "Hidden charges",
    score: 4,
    quote: "Concerns about cleanliness, lack of complimentary amenities like drinking water, and additional hidden charges.",
    author: "MakeMyTrip aggregate", platform: "MakeMyTrip",
    gmResponse: "We hear this one and we changed the policy. The rate you see on this site is what you pay — tourism dirham (AED 10/night) is included, drinking water is in every room from check-in, and Wi-Fi has been free property-wide since 2019. If anything on your bill at checkout doesn't match your booking confirmation, ask for the duty manager.",
  },
  {
    sentiment: "negative",
    theme: "Service inconsistency",
    score: 5,
    quote: "Service unfortunately made me run away and book another stay.",
    author: "Tripadvisor reviewer", platform: "Tripadvisor",
    gmResponse: "We took the service complaints seriously enough to retrain the front-desk team in 2021 and again in 2024. We don't pretend everyone has the same experience yet — but we read every review, and the team meeting on Monday morning starts with whatever came in over the weekend.",
  },
];

window.DISTANCES = DISTANCES;
window.ROOMS = ROOMS;
window.DINING = DINING;
window.REVIEWS = REVIEWS;

// ============================================================
//  Page: HOME
// ============================================================
function PageHome({ setRoute, honestMode }) {
  return (
    <div className="page-enter" data-screen-label="Home">
      {/* HERO */}
      <section style={{ position: "relative", paddingTop: 40, paddingBottom: 24 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56, alignItems: "center" }} className="hero-grid">
            <div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24 }}>
                <span className="chip chip-warm">
                  <Icon.star /> 2-star · independent · 58 rooms
                </span>
                <span className="chip">
                  <Icon.shield /> DTCM&nbsp;226715
                </span>
              </div>
              <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 76px)", margin: 0, color: "var(--ink)", lineHeight: 0.98 }}>
                Old Dubai's walkable budget stay.
                <span className="display-it" style={{ color: "var(--accent)", display: "block" }}>From AED 79 a night.</span>
              </h1>
              <p style={{ marginTop: 24, fontSize: 19, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 540, textWrap: "pretty" }}>
                {honestMode === "mild" ? (
                  <>58 rooms on Al Mankhool Road, 500 metres from Al Fahidi Metro. Clean, central, honestly priced.</>
                ) : (
                  <>58 rooms, six floors, one job: a clean bed and a strong shower 500 metres from Al Fahidi Metro. We're a 2-star property on Al Mankhool Road. We won't pretend otherwise.</>
                )}
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                <PriceFromChip amount={79} />
                <ScoreBadge />
              </div>
              <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button className="btn btn-dark btn-lg" onClick={() => setRoute("home")}>
                  Check 60-second availability <Icon.arrow />
                </button>
                <a className="btn btn-ghost btn-lg" href={BRAND.whatsapp} target="_blank" rel="noopener">
                  <Icon.whatsapp /> WhatsApp reception
                </a>
              </div>
            </div>

            <div style={{ position: "relative" }}>
              <Img src="media/room-deluxe-04-twin.jpg" alt="Deluxe Twin room — refurbished 2014, balcony" ratio="4/5" warm style={{ borderRadius: 16, boxShadow: "var(--shadow-lg)" }} />
              <div style={{
                position: "absolute", left: -16, bottom: 24, display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start"
              }}>
                <DistanceChip icon="metro" label="Al Fahidi Metro" distance="500 m" time="10-min walk" />
                <DistanceChip icon="metro" label="BurJuman Mall" distance="1.1 km" />
                <DistanceChip icon="car" label="DXB Terminal 3" distance="7 km" time="15–20 min" />
              </div>
              <div style={{
                position: "absolute", right: -16, top: 24,
                background: "white", padding: "10px 14px", borderRadius: 10,
                boxShadow: "var(--shadow)", border: "1px solid var(--line)",
                display: "flex", alignItems: "center", gap: 10, maxWidth: 220,
              }}>
                <span style={{ width: 36, height: 36, borderRadius: 999, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent-deep)" }}>
                  <Icon.shield />
                </span>
                <div style={{ fontSize: 12.5, lineHeight: 1.35 }}>
                  <div style={{ fontWeight: 600 }}>No hidden charges</div>
                  <div style={{ color: "var(--muted)" }}>The price you see is the price you pay.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 60-SECOND BOOKING STRIP */}
      <BookingStrip />

      {/* HONEST COMMITMENT BAR */}
      <section style={{ background: "var(--ink)", color: "white", padding: "40px 0" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }} >
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <span className="label" style={{ color: "rgba(255,255,255,0.5)" }}>From the GM</span>
            <span style={{ fontFamily: "var(--display)", fontSize: 18 }}>One-line commitment</span>
          </div>
          <p className="display" style={{ fontSize: "clamp(20px, 2.4vw, 28px)", margin: 0, color: "white", textWrap: "pretty" }}>
            Every room is inspected between guests. If anything is wrong on the night, call reception and we'll move you — same floor or up, no charge.
          </p>
          <a href={BRAND.phoneHref} className="btn" style={{ background: "rgba(255,255,255,0.1)", color: "white", borderColor: "rgba(255,255,255,0.18)" }}>
            <Icon.phone /> <span className="num">{BRAND.phone}</span>
          </a>
        </div>
      </section>

      {/* TRUST-REPAIR / HONEST REVIEWS PREVIEW */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }} className="grid-2">
            <div>
              <span className="eyebrow">Honest reviews · framed, not hidden</span>
              <h2 className="display" style={{ fontSize: "clamp(28px, 3.6vw, 44px)", marginTop: 12, marginBottom: 16 }}>
                Here's what 1,678 Trivago guests actually said.
              </h2>
              <p style={{ color: "var(--muted)", fontSize: 17, lineHeight: 1.55, textWrap: "pretty" }}>
                Reviews of this property polarise. Guests either love the location and price, or call out cleanliness and bar noise. We don't paper over either — we publish the negatives <em>and</em> the steps we took. Read the full set on the Honest Reviews page.
              </p>
              <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <div style={{ padding: "16px 20px", border: "1px solid var(--line)", borderRadius: 12, minWidth: 160 }}>
                  <div className="num" style={{ fontSize: 32, fontWeight: 600, fontFamily: "var(--display)" }}>6.5<span style={{ color: "var(--muted)", fontSize: 18 }}>/10</span></div>
                  <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>Trivago · 1,678 reviews</div>
                </div>
                <div style={{ padding: "16px 20px", border: "1px solid var(--line)", borderRadius: 12, minWidth: 160 }}>
                  <div className="num" style={{ fontSize: 32, fontWeight: 600, fontFamily: "var(--display)" }}>3.1<span style={{ color: "var(--muted)", fontSize: 18 }}>/5</span></div>
                  <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>Tripadvisor · 167 reviews</div>
                </div>
                <div style={{ padding: "16px 20px", border: "1px solid var(--line)", borderRadius: 12, minWidth: 160 }}>
                  <div className="num" style={{ fontSize: 32, fontWeight: 600, fontFamily: "var(--display)" }}>108<span style={{ color: "var(--muted)", fontSize: 18 }}>/138</span></div>
                  <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>KAYAK · Wonderful vs Poor</div>
                </div>
              </div>
              <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => setRoute("honest")}>
                Read every review, with our reply <Icon.arrow />
              </button>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <ReviewCardCompact r={REVIEWS[1]} />
              <ReviewCardCompact r={REVIEWS[3]} />
            </div>
          </div>
        </div>
      </section>

      {/* PHOTO STRIP */}
      <section className="section-tight" style={{ background: "var(--bg-soft)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }} className="grid-4">
            <CaptionedPhoto src="media/exterior-03-streetfront.jpg" caption="The building today — Al Mankhool Road, May 2026." ratio="3/4" />
            <CaptionedPhoto src="media/room-deluxe-04-twin.jpg" caption="Deluxe Twin, post-2014 refurbishment." ratio="3/4" />
            <CaptionedPhoto src="media/lobby-03-chandelier.jpg" caption="Reception lobby. Walk straight in from Al Mankhool Road." ratio="3/4" />
            <CaptionedPhoto src="media/restaurant-04-bombay-blue-interior.jpg" caption="Bombay Blue — North Indian, ground floor." ratio="3/4" />
          </div>
          <p style={{ marginTop: 16, fontSize: 12.5, color: "var(--muted)", textAlign: "center" }}>
            All photos shot at the property after the 2014 refurbishment. No stock skylines. No 2008 carousels.
          </p>
        </div>
      </section>

      {/* ROOMS PREVIEW */}
      <section className="section">
        <div className="wrap">
          <SectionHeader
            eyebrow="Rooms"
            title="Six room types. One simple promise: 27 m², a balcony, soundproof glass."
            kicker="Standard, Deluxe and Family Suite — confirmed sqm where we have it, 'size on request' where we don't. Honest spec sheets, with photo evidence."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="grid-3">
            {ROOMS.slice(0, 3).map(r => <RoomCard key={r.id} room={r} setRoute={setRoute} />)}
          </div>
          <div style={{ marginTop: 24, textAlign: "center" }}>
            <button className="btn btn-ghost btn-lg" onClick={() => setRoute("rooms")}>See all six room types <Icon.arrow /></button>
          </div>
        </div>
      </section>

      {/* LOCATION PREVIEW */}
      <section className="section" style={{ background: "var(--ink)", color: "white" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center" }} className="grid-2">
            <div>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Location · the strongest asset</span>
              <h2 className="display" style={{ fontSize: "clamp(28px, 3.8vw, 48px)", marginTop: 12, marginBottom: 16, color: "white" }}>
                Most reviewers agree on one thing: walk out the front door and you're in Bur Dubai.
              </h2>
              <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, lineHeight: 1.55, maxWidth: 480, textWrap: "pretty" }}>
                Al Fahidi Metro is a 10-minute walk. BurJuman Mall, 15. The airport is 7 km — 15 minutes by car, 30 by metro on the Red and Green lines.
              </p>
              <button className="btn" style={{ marginTop: 28, background: "white", color: "var(--ink)" }} onClick={() => setRoute("location")}>
                Open the full distance map <Icon.arrow />
              </button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {DISTANCES.slice(0, 6).map(d => (
                <div key={d.key} style={{
                  padding: "16px 18px", border: "1px solid rgba(255,255,255,0.12)",
                  borderRadius: 12, background: "rgba(255,255,255,0.04)",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--accent-soft)", fontSize: 12.5 }}>
                    {React.createElement(Icon[d.icon] || Icon.walk)}
                    <span style={{ color: "rgba(255,255,255,0.55)", textTransform: "uppercase", letterSpacing: "0.1em", fontSize: 10.5, fontFamily: "var(--mono)" }}>{d.time}</span>
                  </div>
                  <div style={{ marginTop: 8, fontSize: 14.5, lineHeight: 1.3 }}>{d.label}</div>
                  <div className="num" style={{ marginTop: 4, color: "rgba(255,255,255,0.65)", fontSize: 13 }}>{d.distance}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageHome = PageHome;

// ============================================================
//  Booking strip (60-second)
// ============================================================
function BookingStrip() {
  const today = new Date();
  const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1);
  const dayAfter = new Date(today); dayAfter.setDate(today.getDate() + 2);
  const fmt = (d) => d.toISOString().slice(0, 10);

  const [checkin, setCheckin] = _useState(fmt(tomorrow));
  const [checkout, setCheckout] = _useState(fmt(dayAfter));
  const [guests, setGuests] = _useState("2");
  const [type, setType] = _useState("any");

  const nights = _useMemo(() => {
    const a = new Date(checkin), b = new Date(checkout);
    return Math.max(1, Math.round((b - a) / 86400000));
  }, [checkin, checkout]);

  const waMsg = encodeURIComponent(
    `Hi Panorama reception — I'd like to book ${nights} night${nights > 1 ? "s" : ""}, ${guests} guest${guests !== "1" ? "s" : ""}, ${type === "any" ? "any room type" : type}. Check-in ${checkin}, check-out ${checkout}.`
  );

  return (
    <section style={{ paddingTop: 0, marginTop: -8 }}>
      <div className="wrap">
        <div style={{
          background: "white",
          border: "1px solid var(--line)",
          borderRadius: 16,
          boxShadow: "var(--shadow)",
          padding: 16,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr) auto",
          gap: 12,
          alignItems: "end",
        }} className="booking-strip-grid">
          <div>
            <label className="input-label" htmlFor="checkin">Check-in</label>
            <input id="checkin" type="date" className="input num" value={checkin} onChange={e => setCheckin(e.target.value)} />
          </div>
          <div>
            <label className="input-label" htmlFor="checkout">Check-out</label>
            <input id="checkout" type="date" className="input num" value={checkout} onChange={e => setCheckout(e.target.value)} />
          </div>
          <div>
            <label className="input-label" htmlFor="guests">Guests</label>
            <select id="guests" className="select" value={guests} onChange={e => setGuests(e.target.value)}>
              <option value="1">1 adult</option>
              <option value="2">2 adults</option>
              <option value="3">3 adults</option>
              <option value="4">Family · up to 4</option>
            </select>
          </div>
          <div>
            <label className="input-label" htmlFor="rtype">Room type</label>
            <select id="rtype" className="select" value={type} onChange={e => setType(e.target.value)}>
              <option value="any">Any · we'll suggest</option>
              {ROOMS.map(r => <option key={r.id} value={r.name}>{r.name}</option>)}
            </select>
          </div>
          <a className="btn btn-primary btn-lg"
            href={`${BRAND.whatsapp}?text=${waMsg}`} target="_blank" rel="noopener"
            style={{ minHeight: 46 }}
          >
            Send to WhatsApp <Icon.arrow />
          </a>
        </div>
        <p style={{ marginTop: 14, fontSize: 12.5, color: "var(--muted)", display: "flex", gap: 14, flexWrap: "wrap" }}>
          <span><Icon.check style={{ verticalAlign: -2, color: "var(--positive)" }}/> 60-second confirmation by reception</span>
          <span><Icon.check style={{ verticalAlign: -2, color: "var(--positive)" }}/> No card details to send a request</span>
          <span><Icon.check style={{ verticalAlign: -2, color: "var(--positive)" }}/> {nights} night{nights > 1 ? "s" : ""} · from AED {(79 * nights).toLocaleString()}</span>
        </p>
      </div>
    </section>
  );
}
window.BookingStrip = BookingStrip;

// ============================================================
//  Room card
// ============================================================
function RoomCard({ room, setRoute }) {
  const amenities = [
    room.sqm ? { icon: "sqm", label: `${room.sqm} m²` } : { icon: "sqm", label: "size on request" },
    { icon: "person", label: room.occupancy },
    { icon: "bed", label: room.beds },
    { icon: "balcony", label: "balcony" },
  ];
  return (
    <article className="card card-hover" style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative" }}>
        <Img src={room.image} alt={`${room.name} — interior photograph`} ratio="4/5" warm style={{ borderRadius: 0 }} />
        <div style={{
          position: "absolute", left: 12, top: 12,
          display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start",
        }}>
          {room.badges.map(b => (
            <span key={b} className="chip chip-dark" style={{ fontSize: 11.5, padding: "5px 10px" }}>{b}</span>
          ))}
        </div>
        <div style={{
          position: "absolute", right: 12, bottom: 12,
          background: "white", padding: "6px 12px", borderRadius: 999,
          fontSize: 13, fontWeight: 500, boxShadow: "var(--shadow-sm)",
        }}>
          <span className="label" style={{ color: "var(--muted)", marginRight: 6 }}>FROM</span>
          <span className="num" style={{ fontWeight: 600 }}>AED {room.from}</span>
        </div>
      </div>
      <div style={{ padding: 20, display: "flex", flexDirection: "column", flex: 1 }}>
        <h3 className="display" style={{ fontSize: 22, margin: 0 }}>{room.name}</h3>
        <p style={{ marginTop: 8, color: "var(--muted)", fontSize: 14, lineHeight: 1.55, textWrap: "pretty", flex: 1 }}>{room.description}</p>
        <div style={{ marginTop: 14 }}>
          <AmenityRow items={amenities} />
        </div>
        <p style={{ marginTop: 14, fontSize: 12, color: "var(--muted-2)", fontStyle: "italic" }}>{room.note}</p>
        <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
          <a className="btn btn-dark btn-sm" href={BRAND.whatsapp} target="_blank" rel="noopener" style={{ flex: 1, justifyContent: "center" }}>
            Reserve <Icon.arrow />
          </a>
          <button className="btn btn-ghost btn-sm" onClick={() => setRoute("rooms")}>Details</button>
        </div>
      </div>
    </article>
  );
}
window.RoomCard = RoomCard;

// ============================================================
//  Caption photo
// ============================================================
function CaptionedPhoto({ src, caption, ratio }) {
  return (
    <figure style={{ margin: 0 }}>
      <Img src={src} alt={caption} ratio={ratio || "4/5"} warm />
      <figcaption style={{ marginTop: 10, fontSize: 12.5, color: "var(--muted)", lineHeight: 1.4 }}>{caption}</figcaption>
    </figure>
  );
}
window.CaptionedPhoto = CaptionedPhoto;

// ============================================================
//  Review card (compact, used on home)
// ============================================================
function ReviewCardCompact({ r }) {
  const isPositive = r.sentiment === "positive";
  const accent = isPositive ? "var(--positive)" : "var(--negative)";
  return (
    <article style={{
      border: "1px solid var(--line)",
      borderRadius: 12,
      padding: 20,
      background: "white",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <span style={{
          width: 28, height: 28, borderRadius: 999,
          background: isPositive ? "rgba(31,107,71,0.1)" : "rgba(124,45,18,0.08)",
          color: accent, display: "grid", placeItems: "center",
        }}>
          {isPositive ? <Icon.thumb /> : <Icon.warn />}
        </span>
        <span style={{ fontSize: 13, fontWeight: 500, color: accent }}>{r.theme}</span>
        <span style={{ color: "var(--muted-2)" }}>·</span>
        <span style={{ fontSize: 12.5, color: "var(--muted)" }}>{r.platform} {r.score}/10</span>
      </div>
      <blockquote style={{ margin: 0, fontSize: 15.5, color: "var(--ink)", lineHeight: 1.55, fontFamily: "var(--display)" }}>
        "{r.quote}"
      </blockquote>
      <div style={{ marginTop: 10, fontSize: 12.5, color: "var(--muted)" }}>— {r.author}</div>
      {r.gmResponse && (
        <div style={{ marginTop: 14, padding: 14, background: "var(--bg-soft)", borderRadius: 8, borderLeft: "2px solid var(--accent)" }}>
          <div className="label" style={{ color: "var(--accent-deep)", marginBottom: 6 }}>Our reply</div>
          <p style={{ margin: 0, fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55 }}>{r.gmResponse}</p>
        </div>
      )}
    </article>
  );
}
window.ReviewCardCompact = ReviewCardCompact;

// ============================================================
//  Page: ROOMS
// ============================================================
function PageRooms({ setRoute }) {
  return (
    <div className="page-enter" data-screen-label="Rooms">
      <section className="section-tight">
        <div className="wrap">
          <SectionHeader
            eyebrow="Rooms · 58 keys · 6 floors"
            title="Six room types. Honest spec sheets."
            kicker="Every card shows what we know (sqm, bed config, max occupancy, balcony, from-price) and flags what we don't. If a size isn't confirmed, we don't make one up."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="grid-3">
            {ROOMS.map(r => <RoomCard key={r.id} room={r} setRoute={setRoute} />)}
          </div>
          <p style={{ marginTop: 32, fontSize: 13, color: "var(--muted)", maxWidth: 720 }}>
            <strong style={{ color: "var(--ink-2)" }}>All rooms include:</strong> air conditioning, satellite flat-screen TV, private balcony, soundproof window glazing, walk-in shower, in-room safe, hair dryer, free toiletries, free Wi-Fi, daily housekeeping, 24-hour room service.
          </p>
          <p style={{ marginTop: 12, fontSize: 13, color: "var(--muted)" }}>
            <strong style={{ color: "var(--ink-2)" }}>What we don't have:</strong> a pool, a spa, a club lounge, or a panorama from your balcony — the building name is older than the surrounding towers. We're transparent about it.
          </p>
        </div>
      </section>
    </div>
  );
}
window.PageRooms = PageRooms;

// ============================================================
//  Page: LOCATION
// ============================================================
function PageLocation() {
  return (
    <div className="page-enter" data-screen-label="Location">
      <section className="section-tight">
        <div className="wrap">
          <SectionHeader
            eyebrow="Location · Al Mankhool Road, Bur Dubai"
            title="The strongest asset — leave the front door, you're already there."
            kicker="Distances and walking times measured from the hotel entrance, cross-referenced across Google Maps, Rome2Rio and KAYAK. Where sources disagree, we use the most conservative figure."
          />

          {/* Location map panel */}
          <div style={{ position: "relative", borderRadius: 16, overflow: "hidden", border: "1px solid var(--line)", aspectRatio: "21/9" }}>
            <div className="map-stripe" style={{ width: "100%", height: "100%" }}/>
            <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center" }}>
              <div style={{ background: "white", padding: 24, borderRadius: 12, boxShadow: "var(--shadow)", maxWidth: 360 }}>
                <span className="label" style={{ color: "var(--muted)" }}>Location map</span>
                <p style={{ margin: "8px 0 16px", fontSize: 15, color: "var(--ink-2)" }}>Open directions to 80, Al Mankhool Road, Bur Dubai.</p>
                <a className="btn btn-ghost btn-sm" href="https://www.google.com/maps/search/?api=1&query=Panorama+Hotel+Bur+Dubai+Al+Mankhool+Road" target="_blank" rel="noopener">
                  Open in Google Maps <Icon.arrowUp />
                </a>
              </div>
            </div>
          </div>

          {/* Distance table */}
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }} className="grid-2">
            {DISTANCES.map((d, i) => (
              <div key={d.key} style={{
                display: "grid", gridTemplateColumns: "32px 1fr auto", gap: 16,
                padding: "18px 8px",
                borderBottom: "1px solid var(--line)",
                alignItems: "center",
              }}>
                <span style={{ color: "var(--accent)", display: "inline-flex" }}>{React.createElement(Icon[d.icon] || Icon.walk)}</span>
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 500 }}>{d.label}</div>
                  <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{d.note}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="num" style={{ fontSize: 14, fontWeight: 500 }}>{d.distance}</div>
                  {d.time && <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{d.time}</div>}
                </div>
              </div>
            ))}
          </div>

          {/* BurJuman walk callout */}
          <div style={{
            marginTop: 48, padding: 32,
            background: "var(--accent-soft)", borderRadius: 16,
            display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32, alignItems: "center"
          }} className="grid-2">
            <div>
              <span className="eyebrow" style={{ color: "var(--accent-deep)" }}>The BurJuman walk</span>
              <h3 className="display" style={{ fontSize: 28, marginTop: 10, marginBottom: 12, color: "var(--ink)" }}>
                15 minutes, one road, three pavement crossings.
              </h3>
              <p style={{ color: "var(--ink-2)", fontSize: 15.5, lineHeight: 1.55, textWrap: "pretty" }}>
                Out the front door, left on Al Mankhool Road, past the textile shops and the dosa places. Cross at the lights by the Imperial Suites tower. You'll see the BurJuman atrium before you see the metro entrance.
              </p>
            </div>
            <Img src="media/exterior-05-signage.jpg" alt="Hotel signage on Al Mankhool Road" ratio="4/3" />
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageLocation = PageLocation;

// ============================================================
//  Page: DINING
// ============================================================
function PageDining() {
  return (
    <div className="page-enter" data-screen-label="Dining">
      <section className="section-tight">
        <div className="wrap">
          <SectionHeader
            eyebrow="Dining · four on-site outlets + breakfast"
            title="Indian-restaurant ecosystem on the ground floor."
            kicker="The four outlets below all live inside the building. You don't have to leave the lobby to eat — though Meena Bazaar's dosa shops are a 12-minute walk if you want to."
          />

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="grid-2">
            {DINING.map(d => (
              <article key={d.id} className="card card-hover" style={{ display: "flex", flexDirection: "column" }}>
                <Img src={d.image} alt={`${d.name} — ${d.cuisine}`} ratio="16/9" warm style={{ borderRadius: 0 }} />
                <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
                    <h3 className="display" style={{ fontSize: 26, margin: 0 }}>{d.name}</h3>
                    <span className="label" style={{ color: "var(--muted)" }}>{d.hours}</span>
                  </div>
                  <span style={{ fontSize: 13.5, color: "var(--accent-deep)", marginTop: 4 }}>{d.cuisine}</span>
                  <p style={{ marginTop: 14, color: "var(--muted)", fontSize: 14.5, lineHeight: 1.55, textWrap: "pretty", flex: 1 }}>{d.description}</p>
                  {d.flag && (
                    <div style={{ marginTop: 16, padding: "10px 14px", background: "rgba(155,91,20,0.08)", borderRadius: 8, fontSize: 13, color: "var(--warn)", display: "flex", gap: 8, alignItems: "flex-start" }}>
                      <span style={{ marginTop: 2 }}><Icon.warn /></span>
                      <span>{d.flag}</span>
                    </div>
                  )}
                </div>
              </article>
            ))}
          </div>

          {/* Breakfast block */}
          <div style={{
            marginTop: 32, padding: 32,
            background: "var(--bg-soft)", borderRadius: 16,
            display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 32, alignItems: "center"
          }} className="grid-2">
            <Img src="media/breakfast-01-buffet.jpg" alt="Breakfast buffet line" ratio="4/3" />
            <div>
              <span className="eyebrow">Breakfast</span>
              <h3 className="display" style={{ fontSize: 28, marginTop: 10, marginBottom: 12 }}>
                Buffet breakfast · 07:00–10:30 daily
              </h3>
              <p style={{ color: "var(--muted)", fontSize: 15.5, lineHeight: 1.55, textWrap: "pretty" }}>
                Continental staples plus a hot Indian station (idli, sambhar, poha, paratha) — calibrated for the primary guest mix. AED 35 per adult if not included in your rate. Children under 6 free.
              </p>
              <p style={{ marginTop: 16, fontSize: 13, color: "var(--muted-2)" }}>
                A 24-hour coffee shop on the lobby level handles in-between meals and late arrivals.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageDining = PageDining;

// ============================================================
//  Page: ABOUT
// ============================================================
function PageAbout() {
  const TIMELINE = [
    { year: "1992", title: "Property opens", body: "Independent 2-star hotel on Al Mankhool Road. Single owner, single building, six floors, 58 keys. No corporate parent." },
    { year: "2014", title: "Refurbishment", body: "Full guestroom refresh — new flooring, headboards, linen, bathrooms. Deluxe Twin and Family Suite finishes date from this cycle. Photographed for the current website." },
    { year: "2016", title: "Soundproof window glazing", body: "Installed across guestroom-facing elevations in response to ground-floor lounge noise complaints. Quiet-floor inventory introduced on floors 4–6." },
    { year: "2018", title: "Monthly pest-control contract", body: "Switched from reactive to scheduled pest control after critical 2017 cleanliness reviews. Inspection frequency doubled in 2022." },
    { year: "2019", title: "Free property-wide Wi-Fi", body: "Removed the AED 25/day Wi-Fi charge that appeared on some 2017–2018 OTA reviews as a 'hidden charge'. The rate now is the rate at checkout." },
    { year: "2021 + 2024", title: "Front-desk retraining", body: "Two full front-desk retraining cycles — most recently May 2024. We don't pretend the service is uniform, but we have a process for closing the gap." },
  ];
  return (
    <div className="page-enter" data-screen-label="About">
      <section className="section-tight">
        <div className="wrap-tight">
          <SectionHeader
            eyebrow="About · DTCM 226715"
            title="Independent. 2-star. We've been here since 1992."
            kicker="No chain affiliation, no corporate parent, no marketing department writing this. The names below are real, the timeline is real, and the gaps in it are admitted."
          />

          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "start" }} className="grid-2">
            <div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
                <Stat n="58" label="rooms" />
                <Stat n="6" label="floors" />
                <Stat n="34" label="years operating" />
                <Stat n="2014" label="last refurbishment" />
              </div>

              <h3 className="display" style={{ fontSize: 24, marginTop: 40, marginBottom: 12 }}>Housekeeping standards</h3>
              <ul style={{ margin: 0, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  "Every room inspected by the floor supervisor before the next guest checks in.",
                  "Mattress protectors and linen changed between every guest, not on rotation.",
                  "Bathroom regrout audit every 90 days; visible grout work scheduled, not patched.",
                  "Monthly contracted pest control + fortnightly internal inspection since 2018.",
                  "If anything in your room is wrong on the night, call ext. 0 — we move you, no charge.",
                ].map((t, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--positive)", marginTop: 4 }}><Icon.check /></span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>

              <h3 className="display" style={{ fontSize: 24, marginTop: 40, marginBottom: 12 }}>General Manager</h3>
              <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
                <div style={{
                  width: 80, height: 80, borderRadius: 16,
                  background: "repeating-linear-gradient(45deg, #F6F0E9 0 6px, #F1ECE0 6px 12px)",
                  display: "grid", placeItems: "center", border: "1px solid var(--line)",
                }}>
                  <span className="label" style={{ color: "var(--muted)", fontSize: 9 }}>GM photo</span>
                </div>
                <div>
                  <p style={{ margin: 0, fontSize: 14.5, color: "var(--ink)", fontWeight: 500 }}>GM portrait — Phase-1 photoshoot</p>
                  <p style={{ margin: "4px 0 0", fontSize: 13, color: "var(--muted)", lineHeight: 1.5, maxWidth: 320 }}>
                    Placeholder. We'll add the GM's name and a real portrait before launch, alongside a recorded one-paragraph welcome.
                  </p>
                </div>
              </div>
            </div>

            <div>
              <Img src="media/reception-03-staff.jpg" alt="Reception team on duty" ratio="4/5" warm />
              <p style={{ marginTop: 12, fontSize: 12.5, color: "var(--muted)" }}>Reception team on duty. The portraits behind the desk are the UAE's ruling family — standard for licensed hotels.</p>
            </div>
          </div>

          {/* Timeline */}
          <h3 className="display" style={{ fontSize: 28, marginTop: 80, marginBottom: 24 }}>What changed, and when.</h3>
          <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 0 }}>
            {TIMELINE.map((t, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--line)" }}>
                <span className="num" style={{ fontFamily: "var(--display)", fontSize: 22, color: "var(--accent)" }}>{t.year}</span>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 16, color: "var(--ink)" }}>{t.title}</div>
                  <p style={{ margin: "6px 0 0", fontSize: 14.5, color: "var(--muted)", lineHeight: 1.55, maxWidth: 580 }}>{t.body}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </div>
  );
}
window.PageAbout = PageAbout;

function Stat({ n, label }) {
  return (
    <div style={{ padding: "16px 20px", border: "1px solid var(--line)", borderRadius: 12 }}>
      <div className="num display" style={{ fontSize: 32, fontWeight: 600 }}>{n}</div>
      <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{label}</div>
    </div>
  );
}

// ============================================================
//  Page: HONEST REVIEWS
// ============================================================
function PageHonest() {
  const [filter, setFilter] = _useState("all");
  const filtered = REVIEWS.filter(r => filter === "all" || r.sentiment === filter);

  const dist = [
    { label: "Wonderful · 9–10", n: 108, color: "var(--positive)" },
    { label: "Very good · 8", n: 52, color: "var(--positive)" },
    { label: "Good · 7", n: 72, color: "#A5824A" },
    { label: "Okay · 6", n: 58, color: "var(--warn)" },
    { label: "Fair · 5", n: 52, color: "var(--warn)" },
    { label: "Mediocre · 4", n: 39, color: "var(--negative)" },
    { label: "Poor · 1–3", n: 138, color: "var(--negative)" },
  ];
  const total = dist.reduce((s, d) => s + d.n, 0);
  const maxN = Math.max(...dist.map(d => d.n));

  return (
    <div className="page-enter" data-screen-label="Honest reviews">
      <section className="section-tight">
        <div className="wrap-tight">
          <SectionHeader
            eyebrow="Honest reviews · framed, not hidden"
            title="The good, the bad, and what we did about it."
            kicker="Three things polarised reviewers consistently flag: cleanliness, ground-floor bar noise, and hidden charges. We address each — by name — below."
          />

          {/* Distribution chart */}
          <div style={{ padding: 24, background: "var(--bg-soft)", borderRadius: 16, display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "center" }} className="grid-honest-top">
            <div style={{ textAlign: "left" }}>
              <div style={{ fontFamily: "var(--display)", fontSize: 56, fontWeight: 600, lineHeight: 1 }}>6.0<span style={{ color: "var(--muted)", fontSize: 24 }}>/10</span></div>
              <div style={{ marginTop: 6, fontSize: 13, color: "var(--muted)" }}><span className="num">519</span> verified KAYAK ratings</div>
              <div style={{ marginTop: 12, padding: "6px 10px", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 999, display: "inline-block", fontSize: 12, color: "var(--ink-2)" }}>
                Bi-modal · loved or hated
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {dist.map((d, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "150px 1fr 50px", gap: 12, alignItems: "center", fontSize: 12.5 }}>
                  <span style={{ color: "var(--muted)" }}>{d.label}</span>
                  <div style={{ height: 8, background: "var(--line-soft)", borderRadius: 999, overflow: "hidden" }}>
                    <div style={{ width: `${(d.n / maxN) * 100}%`, height: "100%", background: d.color, borderRadius: 999 }}/>
                  </div>
                  <span className="num" style={{ textAlign: "right", color: "var(--ink-2)", fontWeight: 500 }}>{d.n}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Filters */}
          <div style={{ marginTop: 40, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            <span className="label" style={{ color: "var(--muted)", marginRight: 8 }}>Filter</span>
            {[
              { id: "all", label: `All · ${REVIEWS.length}` },
              { id: "positive", label: `Positive · ${REVIEWS.filter(r => r.sentiment === "positive").length}` },
              { id: "negative", label: `Negative · ${REVIEWS.filter(r => r.sentiment === "negative").length}` },
            ].map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)}
                className={"chip" + (filter === f.id ? " chip-dark" : "")}
                style={{ cursor: "pointer", border: filter === f.id ? "1px solid var(--ink)" : "1px solid var(--line)" }}
              >
                {f.label}
              </button>
            ))}
          </div>

          {/* Review list */}
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 16 }}>
            {filtered.map((r, i) => <ReviewCardFull key={i} r={r} />)}
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageHonest = PageHonest;

function ReviewCardFull({ r }) {
  const [open, setOpen] = _useState(true);
  const isPositive = r.sentiment === "positive";
  const accent = isPositive ? "var(--positive)" : "var(--negative)";
  return (
    <article style={{
      border: "1px solid var(--line)", borderRadius: 12, background: "white",
      padding: 24,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
        <span style={{
          padding: "4px 10px", borderRadius: 6,
          background: isPositive ? "rgba(31,107,71,0.1)" : "rgba(124,45,18,0.08)",
          color: accent, fontSize: 12, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6,
          textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--mono)",
        }}>
          {isPositive ? <Icon.thumb /> : <Icon.warn />}
          {r.theme}
        </span>
        <span style={{ fontSize: 13, color: "var(--muted)" }} className="num">{r.platform} · {r.score}/10</span>
        <span style={{ marginLeft: "auto", fontSize: 13, color: "var(--muted)" }}>{r.author}</span>
      </div>
      <blockquote style={{ margin: 0, fontSize: 19, color: "var(--ink)", lineHeight: 1.5, fontFamily: "var(--display)", fontWeight: 500, textWrap: "pretty" }}>
        "{r.quote}"
      </blockquote>
      {r.gmResponse && (
        <>
          <button onClick={() => setOpen(!open)}
            style={{
              marginTop: 16, padding: "6px 12px", background: "var(--bg-soft)", border: "1px solid var(--line)",
              borderRadius: 999, fontSize: 12.5, color: "var(--ink-2)", display: "inline-flex", alignItems: "center", gap: 6,
            }}
          >
            <span className="label" style={{ color: "var(--accent-deep)" }}>Our reply</span>
            <span style={{ color: "var(--muted)" }}>{open ? "hide" : "show"}</span>
          </button>
          {open && (
            <div style={{ marginTop: 12, padding: 18, background: "var(--bg-soft)", borderRadius: 8, borderLeft: "3px solid var(--accent)" }}>
              <p style={{ margin: 0, fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.6, textWrap: "pretty" }}>{r.gmResponse}</p>
              <p style={{ margin: "10px 0 0", fontSize: 12, color: "var(--muted)" }}>— General Manager, Panorama Hotel Bur Dubai</p>
            </div>
          )}
        </>
      )}
    </article>
  );
}
window.ReviewCardFull = ReviewCardFull;

// ============================================================
//  Page: VISA LETTER
// ============================================================
function PageVisa() {
  const [form, setForm] = _useState({
    fullName: "", passport: "", nationality: "", bookingRef: "",
    arrival: "", departure: "", email: "", phone: "", purpose: "tourism",
  });
  const [errors, setErrors] = _useState({});
  const [submitted, setSubmitted] = _useState(false);
  const [shouldValidate, setShouldValidate] = _useState(false);

  const validate = (f) => {
    const e = {};
    if (!f.fullName.trim() || f.fullName.trim().split(" ").length < 2) e.fullName = "Please enter your full name as it appears on your passport.";
    if (!/^[A-Z0-9]{6,12}$/i.test(f.passport.trim())) e.passport = "Passport number — 6–12 letters and numbers.";
    if (!f.nationality.trim()) e.nationality = "Required for the visa support letter.";
    if (!/^PB[A-Z0-9]{4,10}$/i.test(f.bookingRef.trim())) e.bookingRef = "Booking ref starts with 'PB' (e.g. PB-7K2D). It's on your confirmation email from reception.";
    if (!f.arrival) e.arrival = "Required.";
    if (!f.departure) e.departure = "Required.";
    if (f.arrival && f.departure && new Date(f.departure) <= new Date(f.arrival)) e.departure = "Departure must be after arrival.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = "Valid email so we can send the signed PDF.";
    if (!f.phone.trim() || f.phone.replace(/\D/g, "").length < 7) e.phone = "Phone with country code, please.";
    return e;
  };

  _useEffect(() => {
    if (!shouldValidate) return;
    setErrors(validate(form));
  }, [form, shouldValidate]);

  const submit = (e) => {
    e.preventDefault();
    setShouldValidate(true);
    const errs = validate(form);
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
    }
  };

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  if (submitted) {
    return (
      <div className="page-enter" data-screen-label="Visa letter">
        <section className="section">
          <div className="wrap-tight" style={{ textAlign: "center", maxWidth: 560 }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-deep)", display: "grid", placeItems: "center", margin: "0 auto" }}>
              <Icon.check width={28} height={28} />
            </div>
            <h2 className="display" style={{ fontSize: 36, marginTop: 24, marginBottom: 12 }}>Request received.</h2>
            <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.55 }}>
              Our reservations team will review your booking reference and email a signed visa-support letter (PDF) to <strong style={{ color: "var(--ink)" }}>{form.email}</strong> within 24 hours.
            </p>
            <p style={{ color: "var(--muted-2)", fontSize: 13, marginTop: 20 }}>
              The letter is on hotel letterhead, signed by the duty manager, with our DTCM 226715 reference. It is not a UAE visa — it is the booking confirmation many embassies require alongside your application.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 10, justifyContent: "center" }}>
              <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setShouldValidate(false); }}>Submit another</button>
              <a className="btn btn-primary" href={BRAND.whatsapp} target="_blank" rel="noopener"><Icon.whatsapp /> Message reception</a>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter" data-screen-label="Visa letter">
      <section className="section-tight">
        <div className="wrap-tight" style={{ maxWidth: 720 }}>
          <SectionHeader
            eyebrow="Visa letter · booking-ref gated"
            title="Request a hotel booking letter for your UAE visa."
            kicker="Many embassies require a signed accommodation confirmation alongside the visa application. We issue one within 24 hours of confirming your booking — free, on hotel letterhead, signed by the duty manager."
          />

          <form onSubmit={submit} noValidate style={{
            background: "white", padding: 32, borderRadius: 16, border: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20,
          }} className="form-grid">
            <Field span={2} label="Booking reference" help="Starts with 'PB' — find it on your confirmation email from reception. Need to book first? WhatsApp us." error={errors.bookingRef}>
              <input className={"input num " + (errors.bookingRef ? "invalid" : "")} placeholder="PB-7K2D" value={form.bookingRef} onChange={set("bookingRef")} />
            </Field>
            <Field span={2} label="Full name (as on passport)" error={errors.fullName}>
              <input className={"input " + (errors.fullName ? "invalid" : "")} placeholder="Family name, Given names" value={form.fullName} onChange={set("fullName")} />
            </Field>
            <Field label="Passport number" error={errors.passport}>
              <input className={"input " + (errors.passport ? "invalid" : "")} placeholder="A12345678" value={form.passport} onChange={set("passport")} />
            </Field>
            <Field label="Nationality" error={errors.nationality}>
              <input className={"input " + (errors.nationality ? "invalid" : "")} placeholder="Indian, Pakistani, etc." value={form.nationality} onChange={set("nationality")} />
            </Field>
            <Field label="Arrival date" error={errors.arrival}>
              <input type="date" className={"input num " + (errors.arrival ? "invalid" : "")} value={form.arrival} onChange={set("arrival")} />
            </Field>
            <Field label="Departure date" error={errors.departure}>
              <input type="date" className={"input num " + (errors.departure ? "invalid" : "")} value={form.departure} onChange={set("departure")} />
            </Field>
            <Field label="Email for the PDF" error={errors.email}>
              <input type="email" className={"input " + (errors.email ? "invalid" : "")} placeholder="you@example.com" value={form.email} onChange={set("email")} />
            </Field>
            <Field label="Mobile (with country code)" error={errors.phone}>
              <input type="tel" className={"input num " + (errors.phone ? "invalid" : "")} placeholder="+91 98 7654 3210" value={form.phone} onChange={set("phone")} />
            </Field>
            <Field span={2} label="Purpose of visit">
              <select className="select" value={form.purpose} onChange={set("purpose")}>
                <option value="tourism">Tourism</option>
                <option value="business">Business</option>
                <option value="family">Visiting family</option>
                <option value="transit">Transit / stopover</option>
              </select>
            </Field>

            <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, marginTop: 8, flexWrap: "wrap" }}>
              <p style={{ margin: 0, fontSize: 12.5, color: "var(--muted)", maxWidth: 360, lineHeight: 1.5 }}>
                By submitting, you confirm the booking reference is yours. We do not store passport numbers beyond the 24-hour issue window.
              </p>
              <button type="submit" className="btn btn-primary btn-lg">
                Request visa letter <Icon.arrow />
              </button>
            </div>
          </form>

          <div style={{ marginTop: 24, padding: 20, border: "1px dashed var(--line)", borderRadius: 12, display: "flex", gap: 14, alignItems: "flex-start" }}>
            <span style={{ color: "var(--accent-deep)", marginTop: 2 }}><Icon.shield /></span>
            <div style={{ fontSize: 13.5, color: "var(--muted)", lineHeight: 1.55 }}>
              Haven't booked yet? Send us a WhatsApp with your dates and nationality — reception can hold the room and issue the booking ref the same day, usually inside 30 minutes.
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.PageVisa = PageVisa;

function Field({ label, children, error, help, span = 1 }) {
  return (
    <div style={{ gridColumn: `span ${span}` }}>
      <label className="input-label">{label}</label>
      {children}
      {error ? <div className="input-error">{error}</div> : (help ? <div className="input-help">{help}</div> : null)}
    </div>
  );
}