// Page components for the VIP Beauty Lounge prototype.
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP, useMemo: useMemoP } = React;

// ── Home ────────────────────────────────────────────────────────────────────
function PageHome({ navigate, openBook }) {
  return (
    <main className="page page--home" data-screen-label="Home">
      {/* Hero */}
      <section className="hero">
        <div className="hero__bg">
          <img src="assets/gallery-05.webp" alt="" />
          <div className="hero__shade" />
        </div>
        <div className="hero__pattern" aria-hidden="true" />
        <div className="hero__inner">
          <div className="hero__copy">
            <div className="hero__chip">
              <Stars n={5} size={12}/> <strong>5.0</strong> · 421 reviews on Fresha · latest this week
            </div>
            <h1 className="hero__h1">
              <span>Dubai’s 5-star</span>
              <span className="serif"><em>grooming &amp; beauty</em></span>
              <span>lounge, by appointment.</span>
            </h1>
            <p className="hero__sub">
              Precision cuts, signature nails, advanced facials and a private VIP room — set inside a quiet villa on Al Manara Street, Jumeirah.
            </p>
            <div className="hero__cta">
              <button className="btn btn--primary btn--lg" onClick={() => openBook()}>Book an appointment</button>
              <button className="btn btn--ghost-light btn--lg" onClick={() => navigate('services')}>View services &amp; prices</button>
            </div>
            <div className="hero__pricechips">
              <span><em>Haircut</em> from <strong>AED 250</strong></span>
              <span><em>Signature Mani</em> from <strong>AED 135</strong></span>
              <span><em>Hydra Facial</em> from <strong>AED 625</strong></span>
              <span><em>Royal Room</em> + <strong>AED 200</strong></span>
            </div>
          </div>
          <aside className="hero__card">
            <div className="hero__card-head">
              <div className="hero__card-eyebrow">Today · open until 22:00</div>
              <div className="hero__card-title">Next available</div>
            </div>
            <ul className="hero__card-slots">
              <li><span>Hair Cut</span><span>17:30</span><button onClick={() => openBook({ name: 'Hair Cut', price: 250 })}>Book</button></li>
              <li><span>Signature Beard</span><span>18:00</span><button onClick={() => openBook({ name: 'Beard Signature', price: 131 })}>Book</button></li>
              <li><span>Signature Mani</span><span>18:15</span><button onClick={() => openBook({ name: 'Signature Manicure', price: 135 })}>Book</button></li>
              <li><span>Hydra Facial</span><span>19:00</span><button onClick={() => openBook({ name: 'Hydra Facial + Diamond Peel', price: 625 })}>Book</button></li>
            </ul>
            <a className="hero__card-foot" href={window.LINKS.fresha} target="_blank" rel="noopener">See live availability on Fresha →</a>
          </aside>
        </div>
      </section>

      {/* Trust strip */}
      <section className="band band--ivory band--tight">
        <div className="container">
          <TrustStrip />
        </div>
      </section>

      {/* Signature ladder */}
      <section className="band band--cream">
        <div className="container">
          <SectionHeader
            eyebrow="The Signature Ladder"
            title="What our guests come back for."
            lede="Six hundred guests a month rate us 5.0. These are the appointments they re-book."
          />
          <div className="sig-grid">
            {window.SIGNATURE.map((s, i) => (
              <article key={s.name} className={`sig-card sig-card--${i}`}>
                <div className="sig-card__img"><img src={s.img} alt={s.name}/></div>
                <div className="sig-card__body">
                  <div className="sig-card__cat">{s.cat}</div>
                  <h3 className="sig-card__name">{s.name}</h3>
                  <div className="sig-card__row">
                    <span className="sig-card__price">AED <strong>{s.price}</strong></span>
                    <button className="link-cta" onClick={() => openBook({ name: s.name, price: s.price })}>Book →</button>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div className="sig-cta">
            <button className="btn btn--dark" onClick={() => navigate('services')}>See the full menu</button>
          </div>
        </div>
      </section>

      {/* VIP / Royal Room teaser */}
      <section className="band band--ink band--vip" id="vip-teaser">
        <div className="container vip-teaser">
          <div className="vip-teaser__copy">
            <div className="eyebrow eyebrow--gold">The VIP Experience</div>
            <h2 className="display display--light">A private room.<br/><em>Your team.</em><br/>Your hour.</h2>
            <p className="lede lede--light">
              Add the <strong>Royal Room</strong> charge to any service and we close the suite around you — your barber, your nail technician, your facialist, all in one room. Champagne and Lavazza by request.
            </p>
            <div className="vip-teaser__stats">
              <div><strong>AED 200</strong><span>Royal Room charge</span></div>
              <div><strong>AED 150</strong><span>Private Room charge</span></div>
              <div><strong>1 suite</strong><span>by reservation only</span></div>
            </div>
            <div className="vip-teaser__cta">
              <button className="btn btn--primary" onClick={() => navigate('vip')}>Explore the Royal Room</button>
              <button className="btn btn--ghost-light" onClick={() => openBook({ name: 'Royal Room Charge', price: 200 })}>Reserve a suite</button>
            </div>
          </div>
          <div className="vip-teaser__pic">
            <img src="assets/gallery-07.webp" alt="Private VIP Room"/>
            <div className="vip-teaser__badge">
              <span className="vip-teaser__badge-l">Royal</span>
              <span className="vip-teaser__badge-s">Room</span>
            </div>
          </div>
        </div>
      </section>

      {/* Team strip */}
      <section className="band band--cream">
        <div className="container">
          <SectionHeader
            eyebrow="The Team"
            title="Same skilled hands. Every visit."
            lede="“Jane &amp; Alona always do a great job with my manicure.” — Raj S., 14 May 2026"
          />
          <div className="team-strip">
            {window.TEAM.slice(0, 6).map((t, i) => (
              <figure key={i} className="team-card">
                <div className="team-card__img"><img src={t.img} alt={t.name}/></div>
                <figcaption>
                  <div className="team-card__name">
                    {t.name}{!t.verified && <span className="team-card__placeholder">·</span>}
                  </div>
                  <div className="team-card__role">{t.role}</div>
                </figcaption>
              </figure>
            ))}
          </div>
          <p className="data-note">Two stylist names are verified from a Fresha review; remaining team portraits are placeholders pending client confirmation.</p>
        </div>
      </section>

      {/* Reviews band */}
      <section className="band band--ivory">
        <div className="container">
          <div className="reviews-band">
            <div className="reviews-band__intro">
              <div className="reviews-band__hero">
                <div className="reviews-band__num">5.0</div>
                <div>
                  <Stars n={5} size={20}/>
                  <div className="reviews-band__count">from <strong>421</strong> reviews</div>
                  <div className="reviews-band__velocity">6 five-star reviews · last 8 days</div>
                </div>
              </div>
              <p>Our entire rating comes from a single verified source: Fresha bookings. Below are the two most recent written reviews — pulled in both English and Arabic.</p>
              <button className="btn btn--dark" onClick={() => navigate('reviews')}>Read all 421 reviews</button>
            </div>
            <div className="reviews-band__cards">
              {window.REVIEWS.map((r, i) => (
                <blockquote key={i} className={`r-card r-card--${r.lang}`}>
                  <Stars n={r.rating}/>
                  <p className={r.lang === 'ar' ? 'r-card__ar' : ''} dir={r.lang === 'ar' ? 'rtl' : 'ltr'}>{r.text}</p>
                  {r.translation && <p className="r-card__tx">{r.translation}</p>}
                  <footer>
                    <strong>{r.name}</strong><span> · {r.service} · {r.date}</span>
                  </footer>
                </blockquote>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Gallery strip */}
      <section className="band band--ink band--gallery-strip">
        <div className="container">
          <SectionHeader
            eyebrow="The Villa"
            title="Step inside Villa 148."
            lede="A standalone villa on Al Manara Street with three floors, a private VIP suite and an espresso bar in the lounge."
            align="left"
          />
        </div>
        <div className="strip-scroller">
          {[1,5,6,4,7,8,9,2].map((i) => (
            <div className="strip-tile" key={i}>
              <img src={`assets/gallery-0${i}.webp`} alt=""/>
            </div>
          ))}
        </div>
        <div className="container" style={{ marginTop: '32px' }}>
          <button className="btn btn--ghost-light" onClick={() => navigate('gallery')}>View the full gallery</button>
        </div>
      </section>

      {/* Map / visit */}
      <section className="band band--ivory">
        <div className="container visit-band">
          <div className="visit-band__copy">
            <SectionHeader
              eyebrow="Find Us"
              title="Villa 148, Al Manara."
              lede="A quiet street five minutes off Sheikh Zayed Road. Valet on request; private parking in the courtyard."
            />
            <ul className="visit-band__list">
              <li><strong>Address</strong><span>Villa 148, Al Manara Street, Jumeirah, Dubai</span></li>
              <li><strong>Hours</strong><span>Mon–Thu, Sat, Sun &nbsp;10:00 – 22:00<br/>Friday &nbsp;13:00 – 22:00</span></li>
              <li><strong>Reach us</strong><span><a href={window.LINKS.phoneMob}>+971 555 080 506</a> · <a href={window.LINKS.whatsapp} target="_blank" rel="noopener">WhatsApp</a></span></li>
            </ul>
            <div className="visit-band__cta">
              <button className="btn btn--primary" onClick={() => openBook()}>Book Now</button>
              <a className="btn btn--ghost" href={window.LINKS.map} target="_blank" rel="noopener">Open in Google Maps</a>
            </div>
          </div>
          <div className="visit-band__map">
            <MapPanel/>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Live Google Maps panel ─────────────────────────────────────────────────
function MapPanel() {
  return (
    <div className="mappanel">
      <iframe
        title="Google Maps for VIP Beauty Lounge"
        src="https://www.google.com/maps?q=25.1518116,55.2196884&z=16&output=embed"
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
      />
      <div className="mappanel__overlay">
        <div className="mappanel__addr">
          <strong>Villa 148, Al Manara Street</strong>
          <span>25.151811, 55.219688</span>
        </div>
        <a className="mappanel__btn" href={window.LINKS.map} target="_blank" rel="noopener">Directions →</a>
      </div>
    </div>
  );
}

// ── Services ───────────────────────────────────────────────────────────────
function PageServices({ navigate, openBook }) {
  const [active, setActive] = useStateP(window.SERVICES[0].id);
  useEffectP(() => {
    const onScroll = () => {
      const top = window.scrollY + 200;
      let cur = window.SERVICES[0].id;
      window.SERVICES.forEach(c => {
        const el = document.getElementById(`svc-${c.id}`);
        if (el && el.offsetTop <= top) cur = c.id;
      });
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const jump = (id) => {
    const el = document.getElementById(`svc-${id}`);
    if (el) window.scrollTo({ top: el.offsetTop - 120, behavior: 'smooth' });
  };
  return (
    <main className="page page--services" data-screen-label="Services">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">The Menu</div>
          <h1 className="display display--xl"><em>Services</em> &amp; <em>prices.</em></h1>
          <p className="lede lede--wide">Around fifty priced services across eight categories, AED 42 – 800. Booked one-by-one or stacked into a Royal Room session.</p>
          <div className="page-hero__meta">
            <span><strong>50+</strong> priced services</span>
            <span><strong>8</strong> categories</span>
            <span><strong>AED 42–800</strong> range</span>
            <span><strong>5.0★</strong> · Fresha</span>
          </div>
        </div>
      </section>

      <section className="band band--ivory band--svc-body">
        <div className="container svc-shell">
          <aside className="svc-nav">
            <div className="svc-nav__title">Categories</div>
            <ul>
              {window.SERVICES.map(c => (
                <li key={c.id}>
                  <button className={active === c.id ? 'is-active' : ''} onClick={() => jump(c.id)}>
                    <span>{c.title}</span>
                    <span className="svc-nav__count">{c.items.length}</span>
                  </button>
                </li>
              ))}
            </ul>
            <div className="svc-nav__cta">
              <button className="btn btn--primary btn--full" onClick={() => openBook()}>Book an appointment</button>
              <a className="link-cta" href={window.LINKS.vouchers} target="_blank" rel="noopener">Buy a gift voucher →</a>
            </div>
          </aside>

          <div className="svc-list">
            {window.SERVICES.map(cat => (
              <section className="svc-section" key={cat.id} id={`svc-${cat.id}`}>
                <header className="svc-section__head">
                  <div>
                    <div className="eyebrow">{String(window.SERVICES.indexOf(cat) + 1).padStart(2, '0')} / {window.SERVICES.length.toString().padStart(2,'0')}</div>
                    <h2 className="serif-h">{cat.title}</h2>
                    <p>{cat.blurb}</p>
                  </div>
                </header>
                <div className="svc-section__rows">
                  {cat.items.map(it => (
                    <ServiceRow
                      key={it.name}
                      name={it.name}
                      price={it.price}
                      duration={it.duration}
                      signature={it.signature}
                      onBook={() => openBook({ name: it.name, price: it.price })}
                    />
                  ))}
                </div>
              </section>
            ))}
            <div className="svc-foot-note">
              Prices in AED, last verified from Fresha on 21 May 2026. Add-ons and add-on durations are confirmed at booking.
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── VIP Room ────────────────────────────────────────────────────────────────
function PageVip({ navigate, openBook }) {
  return (
    <main className="page page--vip" data-screen-label="VIP Room">
      <section className="vip-hero">
        <img src="assets/gallery-07.webp" alt="VIP Room"/>
        <div className="vip-hero__shade"/>
        <div className="container vip-hero__copy">
          <div className="eyebrow eyebrow--gold">The VIP Experience</div>
          <h1 className="display display--light display--xl">The Royal Room.</h1>
          <p className="lede lede--light lede--wide">
            A single private suite, closed around you and your guests, with your full team on call — barber, manicurist, facialist, all in one room.
          </p>
        </div>
      </section>

      <section className="band band--ivory">
        <div className="container vip-tiers">
          <div className="vip-tier vip-tier--standard">
            <div className="vip-tier__head">
              <div className="eyebrow">Tier 01</div>
              <h2 className="serif-h">Main Floor</h2>
            </div>
            <div className="vip-tier__price"><span>From</span> AED <strong>42</strong></div>
            <p>The full menu on the main floor with our regular team. The default for every booking.</p>
            <ul>
              <li>Open floor, station seating</li>
              <li>Espresso, mint tea, sparkling water</li>
              <li>Same stylist on every return visit</li>
            </ul>
            <button className="btn btn--dark btn--full" onClick={() => openBook()}>Book the main floor</button>
          </div>
          <div className="vip-tier vip-tier--private">
            <div className="vip-tier__head">
              <div className="eyebrow">Tier 02</div>
              <h2 className="serif-h">Private Room</h2>
            </div>
            <div className="vip-tier__price"><span>Add</span> AED <strong>150</strong></div>
            <p>A closed suite, one stylist. The right pick for a quiet appointment or sensitive treatment.</p>
            <ul>
              <li>Private mirror &amp; basin</li>
              <li>Door closed, single stylist</li>
              <li>Add to any service on the menu</li>
            </ul>
            <button className="btn btn--dark btn--full" onClick={() => openBook({ name: 'Private Room Charge', price: 150 })}>Add Private Room</button>
          </div>
          <div className="vip-tier vip-tier--royal">
            <div className="vip-tier__crown">Royal</div>
            <div className="vip-tier__head">
              <div className="eyebrow eyebrow--gold">Tier 03 · Signature</div>
              <h2 className="serif-h serif-h--gold">Royal Room</h2>
            </div>
            <div className="vip-tier__price"><span>Add</span> AED <strong>200</strong></div>
            <p>The full suite, your full team. Stack haircut, beard, mani, pedi and facial in a single private session.</p>
            <ul>
              <li>Multi-stylist, single room</li>
              <li>Champagne &amp; Lavazza on request</li>
              <li>Up to 4 guests in one booking</li>
              <li>Reservation only — confirmed by WhatsApp</li>
            </ul>
            <button className="btn btn--primary btn--full" onClick={() => openBook({ name: 'Royal Room Charge', price: 200 })}>Reserve the Royal Room</button>
          </div>
        </div>
      </section>

      <section className="band band--ink">
        <div className="container vip-stack">
          <div className="vip-stack__copy">
            <div className="eyebrow eyebrow--gold">A worked example</div>
            <h2 className="display display--light">One room.<br/>Three services.<br/><em>One hour fifty.</em></h2>
            <p className="lede lede--light">Here is what a typical Royal Room booking looks like for our regulars — stacked, sequenced, and finished with an espresso.</p>
          </div>
          <ol className="vip-stack__list">
            <li>
              <div className="vip-stack__time">17:30</div>
              <div className="vip-stack__svc">
                <strong>Hair Cut</strong>
                <span>40 min · with Kamran</span>
              </div>
              <div className="vip-stack__price">AED 250</div>
            </li>
            <li>
              <div className="vip-stack__time">18:10</div>
              <div className="vip-stack__svc">
                <strong>Beard Signature</strong>
                <span>30 min · hot towel finish</span>
              </div>
              <div className="vip-stack__price">AED 131</div>
            </li>
            <li>
              <div className="vip-stack__time">18:40</div>
              <div className="vip-stack__svc">
                <strong>Hydra Facial + Diamond</strong>
                <span>40 min · with our facial specialist</span>
              </div>
              <div className="vip-stack__price">AED 625</div>
            </li>
            <li className="vip-stack__addon">
              <div className="vip-stack__time">+</div>
              <div className="vip-stack__svc">
                <strong>Royal Room Charge</strong>
                <span>Private suite · full team</span>
              </div>
              <div className="vip-stack__price">AED 200</div>
            </li>
            <li className="vip-stack__total">
              <div className="vip-stack__time"/>
              <div className="vip-stack__svc"><strong>Total · 110 min</strong></div>
              <div className="vip-stack__price"><strong>AED 1,206</strong></div>
            </li>
          </ol>
        </div>
      </section>
    </main>
  );
}

// ── Gallery ────────────────────────────────────────────────────────────────
function PageGallery({ navigate }) {
  const [active, setActive] = useStateP(null);
  return (
    <main className="page page--gallery" data-screen-label="Gallery">
      <section className="page-hero page-hero--gallery">
        <div className="container">
          <div className="eyebrow">The Villa</div>
          <h1 className="display display--xl">A boutique villa<br/><em>on Al Manara Street.</em></h1>
          <p className="lede lede--wide">Three floors, one private VIP suite, an espresso bar in the lounge. Every photograph below is of the actual venue.</p>
        </div>
      </section>
      <section className="band band--ivory">
        <div className="container">
          <div className="gallery-grid">
            {window.GALLERY.map((g, i) => (
              <button
                key={g.src}
                className={`gallery-tile gallery-tile--${i}`}
                onClick={() => setActive(g)}
              >
                <img src={g.src} alt={g.label}/>
                <span className="gallery-tile__cap">{g.label}</span>
              </button>
            ))}
          </div>
        </div>
      </section>
      {active && (
        <div className="lightbox" onClick={() => setActive(null)}>
          <button className="lightbox__close" onClick={() => setActive(null)}>×</button>
          <figure>
            <img src={active.src} alt={active.label}/>
            <figcaption>{active.label}</figcaption>
          </figure>
        </div>
      )}
    </main>
  );
}

// ── About ──────────────────────────────────────────────────────────────────
function PageAbout({ navigate, openBook }) {
  return (
    <main className="page page--about" data-screen-label="About">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">The Lounge</div>
          <h1 className="display display--xl">A villa lounge,<br/><em>by appointment.</em></h1>
          <p className="lede lede--wide">
            VIP Beauty Lounge is a boutique grooming &amp; beauty house in a freestanding villa on Al Manara Street, Jumeirah. Barber-led, fully unisex, and rated 5.0 from 421 guests on Fresha.
          </p>
        </div>
      </section>

      <section className="band band--ivory">
        <div className="container about-grid">
          <article className="about-card">
            <div className="about-card__num">01</div>
            <h3>Barber-led, unisex menu.</h3>
            <p>The house specialises in precision men’s grooming — hair, beard, head shave — and runs a full unisex menu of nails, hair colour, facials, waxing and massage from the same villa.</p>
          </article>
          <article className="about-card">
            <div className="about-card__num">02</div>
            <h3>Same hands, every visit.</h3>
            <p>Guests re-book by stylist name on Fresha. Our team works to a strict consistency standard — the goal is that your fourth visit is identical to your first.</p>
          </article>
          <article className="about-card">
            <div className="about-card__num">03</div>
            <h3>A private suite.</h3>
            <p>One Royal Room. Closed around you and your guests, full team on call. Reservation only — confirmed by WhatsApp before your slot.</p>
          </article>
        </div>
      </section>

      <section className="band band--cream">
        <div className="container">
          <SectionHeader eyebrow="Our Team" title="Stylists, by name." lede="Two names are verified by guests in writing. The rest are placeholder portraits pending team consent." />
          <div className="team-grid">
            {window.TEAM.map((t, i) => (
              <figure key={i} className={`team-card team-card--lg ${t.verified ? 'is-verified' : 'is-placeholder'}`}>
                <div className="team-card__img"><img src={t.img} alt={t.name}/></div>
                <figcaption>
                  <div className="team-card__name">
                    {t.name}
                    {t.verified && <span className="team-card__badge" title={t.note}>Verified by guest</span>}
                  </div>
                  <div className="team-card__role">{t.role}</div>
                  {t.note && <div className="team-card__note">{t.note}</div>}
                  {!t.verified && <div className="team-card__note team-card__note--placeholder">Placeholder portrait · awaiting client confirmation</div>}
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      <section className="band band--ink">
        <div className="container about-quote">
          <div className="about-quote__mark">“</div>
          <p>Refined. Precise. Private. A boutique villa lounge for residents of Al Manara and Jumeirah who want one trusted address for hair, beard, nails, skin and a quiet hour.</p>
          <div className="about-quote__cta">
            <button className="btn btn--primary" onClick={() => openBook()}>Book your first visit</button>
            <button className="btn btn--ghost-light" onClick={() => navigate('services')}>See the menu</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Reviews ─────────────────────────────────────────────────────────────────
function PageReviews({ navigate, openBook }) {
  return (
    <main className="page page--reviews" data-screen-label="Reviews">
      <section className="reviews-hero">
        <div className="container reviews-hero__inner">
          <div className="reviews-hero__num">
            <div className="reviews-hero__big">5.0</div>
            <Stars n={5} size={28}/>
            <div className="reviews-hero__sub">from <strong>421</strong> verified guests on Fresha</div>
          </div>
          <div className="reviews-hero__copy">
            <div className="eyebrow">Independent rating</div>
            <h1 className="display display--xl">Every review,<br/><em>from one source.</em></h1>
            <p className="lede lede--wide">We don’t publish testimonials we can’t verify. Our rating is pulled from Fresha bookings — guests who actually paid and showed up. The site re-pulls live counts on launch day.</p>
            <a className="btn btn--primary" href={window.LINKS.fresha} target="_blank" rel="noopener">Read all 421 on Fresha →</a>
          </div>
        </div>
      </section>

      <section className="band band--ivory">
        <div className="container">
          <SectionHeader eyebrow="Verified quotes" title="In the words of two guests." lede="Only two of the most recent reviews carried written text — one in English, one in Arabic. We publish them as written." />
          <div className="reviews-band__cards reviews-band__cards--lg">
            {window.REVIEWS.map((r, i) => (
              <blockquote key={i} className={`r-card r-card--lg r-card--${r.lang}`}>
                <Stars n={r.rating} size={18}/>
                <p className={r.lang === 'ar' ? 'r-card__ar' : ''} dir={r.lang === 'ar' ? 'rtl' : 'ltr'}>{r.text}</p>
                {r.translation && <p className="r-card__tx">{r.translation}</p>}
                <footer>
                  <strong>{r.name}</strong>
                  <span> · {r.service} · {r.date}</span>
                </footer>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      <section className="band band--cream">
        <div className="container">
          <SectionHeader eyebrow="Recent activity" title="Six five-star reviews · last 8 days." />
          <div className="recent-list">
            {window.RECENT.map((r, i) => (
              <div key={i} className="recent-row">
                <div className="recent-row__date">{r.date}</div>
                <div className="recent-row__name">{r.name}</div>
                <div className="recent-row__svc">{r.service}</div>
                <div className="recent-row__rating"><Stars n={5}/></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Contact ────────────────────────────────────────────────────────────────
function PageContact({ navigate, openBook }) {
  return (
    <main className="page page--contact" data-screen-label="Contact">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Visit</div>
          <h1 className="display display--xl">Villa 148,<br/><em>Al Manara Street.</em></h1>
          <p className="lede lede--wide">Five minutes off Sheikh Zayed Road. Private courtyard parking; valet on request.</p>
        </div>
      </section>

      <section className="band band--ivory">
        <div className="container contact-grid">
          <div className="contact-card">
            <h3>Address</h3>
            <p>Villa 148, Al Manara Street<br/>Al Manara, Jumeirah, Dubai</p>
            <a className="link-cta" href={window.LINKS.map} target="_blank" rel="noopener">Open in Google Maps →</a>
          </div>
          <div className="contact-card">
            <h3>Hours</h3>
            <ul className="contact-hours">
              {window.HOURS.map(({ d, h }) => <li key={d}><span>{d}</span><span>{h}</span></li>)}
            </ul>
          </div>
          <div className="contact-card">
            <h3>Reach us</h3>
            <p><strong>Mobile</strong><br/><a href={window.LINKS.phoneMob}>+971 555 080 506</a></p>
            <p><strong>Landline</strong><br/><a href={window.LINKS.phoneLand}>+971 4 297 1990</a></p>
            <p><strong>Email</strong><br/><a href={window.LINKS.email}>vipbeauty461@gmail.com</a></p>
            <a className="link-cta" href={window.LINKS.whatsapp} target="_blank" rel="noopener">Message on WhatsApp →</a>
          </div>
          <div className="contact-card contact-card--cta">
            <h3>Book today</h3>
            <p>Live availability is reconciled with Fresha; the team confirms by WhatsApp.</p>
            <button className="btn btn--primary btn--full" onClick={() => openBook()}>Book an appointment</button>
            <a className="btn btn--ghost btn--full" href={window.LINKS.vouchers} target="_blank" rel="noopener">Buy a gift voucher</a>
          </div>
        </div>
      </section>

      <section className="band band--cream">
        <div className="container">
          <div className="contact-map"><MapPanel/></div>
        </div>
      </section>
    </main>
  );
}

// ── Book (full page entry from CTA) ─────────────────────────────────────────
function PageBook({ openBook }) {
  useEffectP(() => { openBook(); }, []);
  return (
    <main className="page page--book" data-screen-label="Book">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Book</div>
          <h1 className="display display--xl">Reserve your<br/><em>appointment.</em></h1>
          <p className="lede lede--wide">A booking sheet is opening for you. You can also book directly through Fresha or send a WhatsApp message and the team will confirm a slot within minutes.</p>
          <div className="hero__cta">
            <a className="btn btn--primary btn--lg" href={window.LINKS.fresha} target="_blank" rel="noopener">Book on Fresha</a>
            <a className="btn btn--ghost btn--lg" href={window.LINKS.whatsapp} target="_blank" rel="noopener">Message us on WhatsApp</a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PageHome, PageServices, PageVip, PageGallery, PageAbout, PageReviews, PageContact, PageBook, MapPanel });