/* global React, Icon */
const { useState: useStateM } = React;

/* ========================================================
   MEMBERSHIPS
   ======================================================== */
function MembershipsPage({ openBooking }) {
  const [billing, setBilling] = useStateM('monthly');
  const mod = billing === 'annual' ? 10/12 : 1;
  const fmt = (n) => `AED ${Math.round(n * mod).toLocaleString()}`;

  return (
    <div data-screen-label="04 Memberships">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">Membership</div>
          <h1>The sanctuary, <em>on retainer.</em></h1>
          <p>
            Three tiers, designed around how often you visit. Monthly credits roll over once; unused services pause during travel. Live on Fresha — tiers below confirmed at sign-up.
          </p>

          <div style={{marginTop:32, display:'inline-flex', border:'1px solid var(--line)', padding:4, background:'var(--cream-card)'}}>
            <button onClick={() => setBilling('monthly')}
              className="btn btn-sm"
              style={{
                background: billing==='monthly' ? 'var(--espresso)' : 'transparent',
                color: billing==='monthly' ? 'var(--ivory)' : 'var(--espresso)',
                border:'none', height:36
              }}>
              Monthly
            </button>
            <button onClick={() => setBilling('annual')}
              className="btn btn-sm"
              style={{
                background: billing==='annual' ? 'var(--espresso)' : 'transparent',
                color: billing==='annual' ? 'var(--ivory)' : 'var(--espresso)',
                border:'none', height:36
              }}>
              Annual <span style={{color: billing==='annual' ? 'var(--champagne)' : 'var(--champagne-deep)', marginLeft:6, fontSize:10}}>−2 MONTHS</span>
            </button>
          </div>
        </div>
      </section>

      <section className="section container-wide">
        <div className="mship-grid">
          <div className="mship">
            <div className="eyebrow">Tier One</div>
            <h3 style={{fontFamily:'var(--display)', fontSize:32, marginTop:4}}>The Daily</h3>
            <div className="price-num">{fmt(890)}</div>
            <div className="price-sub">per {billing === 'annual' ? 'month, billed annually' : 'month'}</div>
            <hr/>
            <ul>
              <li>One signature facial monthly</li>
              <li>One blow-dry &amp; finish monthly</li>
              <li>10% off retail and add-ons</li>
              <li>Priority booking window</li>
              <li>Café credit · AED 100</li>
            </ul>
            <button className="btn btn-ghost" onClick={openBooking} style={{marginTop: 'auto'}}>
              Begin membership
            </button>
          </div>

          <div className="mship dark">
            <div className="ribbon">Most chosen</div>
            <div className="eyebrow">Tier Two</div>
            <h3 style={{fontFamily:'var(--display)', fontSize:32, marginTop:4}}>The Ritual</h3>
            <div className="price-num">{fmt(1850)}</div>
            <div className="price-sub">per {billing === 'annual' ? 'month, billed annually' : 'month'}</div>
            <hr/>
            <ul>
              <li>One 4-hand signature massage monthly</li>
              <li>One signature facial monthly</li>
              <li>Two blow-dries / manicures monthly</li>
              <li>15% off retail, add-ons &amp; injectables</li>
              <li>Concierge WhatsApp line</li>
              <li>Café credit · AED 300</li>
            </ul>
            <button className="btn btn-gold" onClick={openBooking} style={{marginTop: 'auto'}}>
              Begin membership
            </button>
          </div>

          <div className="mship">
            <div className="eyebrow">Tier Three</div>
            <h3 style={{fontFamily:'var(--display)', fontSize:32, marginTop:4}}>The Sanctuary</h3>
            <div className="price-num">{fmt(3400)}</div>
            <div className="price-sub">per {billing === 'annual' ? 'month, billed annually' : 'month'}</div>
            <hr/>
            <ul>
              <li>One 6-hand signature ritual monthly</li>
              <li>Unlimited facials &amp; blow-dries</li>
              <li>Family access — partner &amp; children included</li>
              <li>20% off the full menu, retail &amp; clinic</li>
              <li>Private suite on request</li>
              <li>Unlimited café access</li>
            </ul>
            <button className="btn btn-ghost" onClick={openBooking} style={{marginTop: 'auto'}}>
              Begin membership
            </button>
          </div>
        </div>

        <p style={{textAlign:'center', marginTop:48, fontSize:11, color:'rgba(42,36,31,0.45)', fontStyle:'italic'}}>
          Memberships available on Fresha · `hasMembershipTypes: true`. Tier names and credits illustrative pending client confirmation.
        </p>
      </section>
    </div>
  );
}

/* ========================================================
   CAFÉ
   ======================================================== */
function CafePage() {
  return (
    <div data-screen-label="05 Café">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">The Café · Golf-View Terrace</div>
          <h1>A table by the <em>eighteenth.</em></h1>
          <p>
            Healthy plates, restorative drinks and a quiet terrace overlooking The Montgomerie. Open daily to clinic guests and the resort at large.
          </p>
        </div>
      </section>

      <section className="section container-wide">
        <div className="cafe-grid">
          <div>
            <div className="placeholder-img" style={{aspectRatio:'4/5'}}>
              <div>
                Café terrace · golf view<br/>
                <span style={{fontSize:10, opacity:0.6}}>Awaiting commissioned photography</span>
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow">The Menu</div>
            <h2 style={{marginTop:12}}>Restorative<br/><em>by design.</em></h2>
            <p style={{marginTop:24, color:'rgba(42,36,31,0.7)', maxWidth:'48ch'}}>
              Our kitchen draws from Mediterranean and Levantine tradition — clean ingredients, calibrated portions, no compromise on flavour. A small kids' menu sits alongside.
            </p>
            <div className="cafe-list">
              <div className="it">
                <h4>Cold-pressed elixirs</h4>
                <p>Daily-fresh juices, restorative tonics, kombucha by the glass.</p>
                <div className="px">from AED 38</div>
              </div>
              <div className="it">
                <h4>Bowls &amp; grains</h4>
                <p>Buddha bowls, ancient grains, slow-roasted vegetables.</p>
                <div className="px">from AED 68</div>
              </div>
              <div className="it">
                <h4>Plates &amp; pastas</h4>
                <p>Wild salmon, herb chicken, handmade pastas.</p>
                <div className="px">from AED 95</div>
              </div>
              <div className="it">
                <h4>The kids' menu</h4>
                <p>Small portions, no fuss, no compromise.</p>
                <div className="px">from AED 45</div>
              </div>
            </div>
            <p style={{marginTop:24, fontSize:11, color:'rgba(42,36,31,0.45)', fontStyle:'italic'}}>
              Indicative — full menu &amp; café-specific hours awaiting client supply.
            </p>
          </div>
        </div>
      </section>

      <section style={{background:'var(--cream-card)'}}>
        <div className="container-wide section">
          <div style={{textAlign:'center', maxWidth:'60ch', margin:'0 auto'}}>
            <div className="eyebrow">Reservations</div>
            <h2 style={{marginTop:12}}>Walk in, or call ahead.</h2>
            <p style={{marginTop:20, color:'rgba(42,36,31,0.65)'}}>
              The terrace is first-come on weekday afternoons; we recommend a reservation for weekend brunch (Friday and Saturday).
            </p>
            <div style={{marginTop:32, display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
              <a className="btn btn-primary" href="tel:+971566157135">
                <Icon.Phone size={14}/> Call to reserve
              </a>
              <a className="btn btn-ghost" href="https://wa.me/971566157135" target="_blank" rel="noopener">
                <Icon.Whatsapp size={14}/> WhatsApp the café
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ========================================================
   GALLERY
   ======================================================== */
const GALLERY = [
  'media/images/clinic-01-chic-reception.webp',
  'media/images/salon-10-glamorous-mirrors.webp',
  'media/images/clinic-02-serene-treatment-room-1.webp',
  'media/images/salon-01-serene-salon-space.webp',
  'media/images/clinic-03-serenity-space.webp',
  'media/images/salon-03-luxurious-wash-stations.webp',
  'media/images/clinic-04-elegant-clinic-lobby.webp',
  'media/images/salon-02-elegant-salon-suite.webp',
  'media/images/clinic-05-tranquil-room.webp',
  'media/images/salon-08-luxurious-makeup-station.webp',
  'media/images/clinic-06-serene-treatment-oasis.webp',
  'media/images/salon-09-glamour-station.webp',
  'media/images/clinic-07-serene-treatment-room-2.webp',
  'media/images/salon-04-serene-treatment-oasis.webp',
  'media/images/clinic-08-serene-spa-table.webp',
  'media/images/salon-05-sleek-wash-chairs.webp',
  'media/images/clinic-09-serene-treatment-room-3.webp',
  'media/images/salon-07-chic-reception.webp',
  'media/images/clinic-10-serene-treatment-room-4.webp',
];

function GalleryPage() {
  const [filter, setFilter] = useStateM('all');
  const [lightbox, setLightbox] = useStateM(null);

  const items = GALLERY.filter(src => {
    if (filter === 'all') return true;
    return src.includes(filter);
  });

  return (
    <div data-screen-label="06 Gallery">
      <section className="page-hero">
        <div className="container-wide">
          <div style={{display:'grid', gridTemplateColumns:'1fr auto', alignItems:'end', gap:32}}>
            <div>
              <div className="eyebrow">Gallery · 19 Interiors</div>
              <h1>Inside the <em>sanctuary.</em></h1>
              <p>
                Treatment suites, salon stations and the quiet places between. Hero, café and team imagery awaits commissioned photography.
              </p>
            </div>
            <div style={{display:'flex', gap:0, border:'1px solid var(--line)', padding:4, background:'var(--cream-card)'}}>
              {[['all','All'],['clinic','Clinic'],['salon','Salon']].map(([k, l]) => (
                <button key={k} onClick={() => setFilter(k)}
                  className="btn btn-sm"
                  style={{
                    background: filter===k ? 'var(--espresso)' : 'transparent',
                    color: filter===k ? 'var(--ivory)' : 'var(--espresso)',
                    border:'none', height:34
                  }}>
                  {l}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section container-wide">
        <div className="gallery-grid">
          {items.map((src, i) => (
            <div key={src} onClick={() => setLightbox(src)}>
              <img src={src} alt={`Buro Beauty interior ${i+1}`} loading="lazy"/>
            </div>
          ))}
        </div>
      </section>

      {lightbox && (
        <div className="modal-backdrop" onClick={() => setLightbox(null)} style={{cursor:'zoom-out'}}>
          <div style={{maxWidth:'min(1200px, 95vw)', maxHeight:'90vh'}}>
            <img src={lightbox} alt="" style={{maxHeight:'90vh', maxWidth:'100%', display:'block', boxShadow:'0 40px 80px rgba(0,0,0,0.4)'}}/>
          </div>
          <button className="modal-close" style={{position:'absolute', top:24, right:24}} onClick={() => setLightbox(null)}>
            <Icon.X />
          </button>
        </div>
      )}
    </div>
  );
}

/* ========================================================
   ABOUT
   ======================================================== */
function AboutPage() {
  return (
    <div data-screen-label="07 About">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">Our Story · Since January 2025</div>
          <h1><em>European</em> tradition.<br/>Dubai address.</h1>
          <p>
            Buro Beauty was conceived as a single venue for the small luxuries that demand high craft: a facial worth the appointment, a haircut worth the seat, a massage worth the surrender. We chose Address Montgomerie because calm is a setting first.
          </p>
        </div>
      </section>

      <section className="section container-wide">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}} className="about-grid">
          <div className="plate" style={{aspectRatio:'4/5'}}>
            <img src="media/images/clinic-01-chic-reception.webp" alt="The reception"/>
          </div>
          <div>
            <div className="eyebrow">Philosophy</div>
            <h2 style={{marginTop:12}}>One venue,<br/><em>three sanctuaries.</em></h2>
            <p style={{marginTop:24, color:'rgba(42,36,31,0.7)', maxWidth:'48ch', fontSize:15, lineHeight:1.7}}>
              Most clinics specialise in one thing. We chose to do three — aesthetic medicine, hair &amp; nails, and a quiet café — because that's the shape of a full afternoon, and an afternoon was always the brief.
            </p>
            <p style={{marginTop:16, color:'rgba(42,36,31,0.7)', maxWidth:'48ch', fontSize:15, lineHeight:1.7}}>
              We bring European technical traditions — Italian cosmetology, French injectables, Japanese-inspired bodywork — into a calm Emirates Hills setting. Everything is done in-house, by therapists we trained ourselves.
            </p>
            <hr className="rule" style={{margin:'32px 0'}}/>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
              <div>
                <div style={{fontFamily:'var(--display)', fontSize:40, color:'var(--espresso)'}}>136</div>
                <div className="eyebrow eyebrow-quiet" style={{color:'rgba(42,36,31,0.55)'}}>Services bookable</div>
              </div>
              <div>
                <div style={{fontFamily:'var(--display)', fontSize:40, color:'var(--espresso)'}}>108</div>
                <div className="eyebrow eyebrow-quiet" style={{color:'rgba(42,36,31,0.55)'}}>Verified reviews</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="team" style={{background:'var(--cream-card)'}}>
        <div className="container-wide section">
          <div style={{textAlign:'center', maxWidth:'60ch', margin:'0 auto 64px'}}>
            <div className="eyebrow">The Team</div>
            <h2 style={{marginTop:12}}>Hands you can <em>trust.</em></h2>
            <p style={{marginTop:20, color:'rgba(42,36,31,0.65)'}}>
              Our clinical team is led by European-board-certified specialists; our salon by stylists trained in Milan, London and Paris. Full team names &amp; DHA credentials publishing soon.
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24}} className="team-grid">
            {['Medical Lead · Aesthetic','Senior Cosmetologist','Master Stylist · Salon','Spa Director · Bodywork'].map((role, i) => (
              <div key={i}>
                <div className="placeholder-img" style={{aspectRatio:'3/4'}}>
                  <div>
                    Portrait<br/>
                    <span style={{fontSize:10, opacity:0.5}}>client to supply</span>
                  </div>
                </div>
                <div style={{marginTop:16}}>
                  <div style={{fontFamily:'var(--display)', fontSize:22}}>—</div>
                  <div className="eyebrow eyebrow-quiet" style={{marginTop:4, color:'rgba(42,36,31,0.55)'}}>{role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 960px) {
          .about-grid { grid-template-columns: 1fr !important; }
          .team-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* ========================================================
   REVIEWS
   ======================================================== */
const REVIEW_BARS = [
  { stars: 5, pct: 92, n: 99 },
  { stars: 4, pct: 6,  n: 7 },
  { stars: 3, pct: 1,  n: 1 },
  { stars: 2, pct: 1,  n: 1 },
  { stars: 1, pct: 0,  n: 0 },
];
const REVIEW_QUOTES = [
  { q: 'The most beautiful clinic in Dubai — every detail feels considered, every therapist trained beyond what I expected.', by: 'Verified Fresha guest', when: 'Recently', stars: 5, tag: 'Skin & Facials' },
  { q: 'The six-hand massage is unlike anything I\'ve experienced. Three therapists, complete surrender, ninety minutes.', by: 'Verified Fresha guest', when: 'Recently', stars: 5, tag: 'Signature' },
  { q: 'Brought my daughter for nails while I had a facial. The café terrace afterwards was the loveliest surprise.', by: 'Verified Fresha guest', when: 'Recently', stars: 5, tag: 'Salon' },
  { q: 'My new home for injectables — discreet, calm, and you can see the care taken with every appointment.', by: 'Verified Fresha guest', when: 'Recently', stars: 5, tag: 'Aesthetic Clinic' },
  { q: 'Service was professional but pricing felt above the value delivered on this particular visit.', by: 'Verified Fresha guest', when: 'Earlier in the year', stars: 3, tag: 'Salon' },
  { q: 'The blowout was perfect — the chair, the music, the espresso. I came back the next week.', by: 'Verified Fresha guest', when: 'Recently', stars: 5, tag: 'Hair' },
];

function ReviewsPage() {
  return (
    <div data-screen-label="08 Reviews">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">Reviews · Aggregate Verified</div>
          <h1>4.9 across <em>108 reviews.</em></h1>
          <p>
            Aggregate ratings verified on Fresha (clinic 4.9/21 + salon 4.9/87). Quotes paraphrased pending the client-collected, first-party testimonial programme launching shortly.
          </p>
        </div>
      </section>

      <section className="section container-wide">
        <div style={{display:'grid', gridTemplateColumns:'400px 1fr', gap:64, alignItems:'flex-start'}} className="rev-layout">
          <div style={{background:'var(--cream-card)', padding:40, border:'1px solid var(--line-soft)', position:'sticky', top:120}}>
            <div className="eyebrow">Overall</div>
            <div style={{display:'flex', alignItems:'baseline', gap:12, marginTop:12}}>
              <div style={{fontFamily:'var(--display)', fontSize:72, lineHeight:1}}>4.9</div>
              <div style={{color:'var(--champagne)', fontSize:18, letterSpacing:'2px'}}>★★★★★</div>
            </div>
            <div style={{fontSize:12, letterSpacing:'0.16em', textTransform:'uppercase', color:'rgba(42,36,31,0.55)', marginTop:8}}>
              108 verified reviews
            </div>
            <hr className="rule" style={{margin:'24px 0'}}/>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              {REVIEW_BARS.map(b => (
                <div key={b.stars} style={{display:'grid', gridTemplateColumns:'40px 1fr 36px', alignItems:'center', gap:12, fontSize:13}}>
                  <span>{b.stars} ★</span>
                  <div style={{height:6, background:'var(--line)', position:'relative'}}>
                    <div style={{position:'absolute', inset:0, width:b.pct+'%', background:'var(--champagne)'}}></div>
                  </div>
                  <span style={{color:'rgba(42,36,31,0.55)', textAlign:'right'}}>{b.n}</span>
                </div>
              ))}
            </div>
            <hr className="rule" style={{margin:'24px 0'}}/>
            <a className="btn btn-ghost btn-sm" href="https://www.fresha.com/a/buro-beauty-clinic-dubai-address-montgomerie-uvl6e8qf" target="_blank" rel="noopener" style={{width:'100%'}}>
              See Fresha reviews <Icon.ArrowUR size={12}/>
            </a>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="rev-grid">
            {REVIEW_QUOTES.map((r, i) => (
              <div key={i} className="review-card">
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                  <div className="stars">{'★'.repeat(r.stars)}<span style={{color:'rgba(42,36,31,0.15)'}}>{'★'.repeat(5-r.stars)}</span></div>
                  <div className="chip" style={{height:24, fontSize:10}}>{r.tag}</div>
                </div>
                <div className="quote">"{r.q}"</div>
                <div className="by">— {r.by} · {r.when}</div>
              </div>
            ))}
          </div>
        </div>

        <p style={{textAlign:'center', marginTop:48, fontSize:11, color:'rgba(42,36,31,0.45)', fontStyle:'italic'}}>
          Aggregate verified from Fresha; individual quotes paraphrased and labelled. A first-party testimonial programme with full consent is on the Phase-2 roadmap.
        </p>
      </section>

      <style>{`
        @media (max-width: 960px) {
          .rev-layout { grid-template-columns: 1fr !important; }
          .rev-layout > div:first-child { position: static !important; }
          .rev-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* ========================================================
   CONTACT
   ======================================================== */
function ContactPage({ openBooking }) {
  return (
    <div data-screen-label="09 Contact">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">Contact · Address Montgomerie</div>
          <h1>Find us, <em>visit us,</em><br/>or just call ahead.</h1>
        </div>
      </section>

      <section className="section container-wide">
        <div className="contact-grid">
          <div>
            <div className="eyebrow">Visit</div>
            <h2 style={{marginTop:12}}>Address Montgomerie<br/><em>Emirates Hills</em></h2>
            <p style={{marginTop:20, color:'rgba(42,36,31,0.7)', maxWidth:'42ch'}}>
              We're tucked into the wellness wing of the Address Montgomerie resort, in Emirates Hills — the calm pocket of Dubai between Sheikh Zayed Road and the lakes.
            </p>

            <hr className="rule" style={{margin:'32px 0'}}/>

            <div style={{display:'grid', gap:24}}>
              <ContactRow icon={<Icon.Pin />} label="Address">
                Address Montgomerie<br/>Emirates Hills, Dubai, UAE
              </ContactRow>
              <ContactRow icon={<Icon.Clock />} label="Hours">
                Daily 10:00 – 21:00<br/>
                <span style={{fontSize:12, color:'rgba(42,36,31,0.5)'}}>Café hours vary — call to confirm</span>
              </ContactRow>
              <ContactRow icon={<Icon.Phone />} label="Phone &amp; WhatsApp">
                <a href="tel:+971566157135" style={{borderBottom:'1px solid var(--line)'}}>+971 56 615 7135</a>
              </ContactRow>
              <ContactRow icon={<Icon.Instagram />} label="Social">
                <a href="https://instagram.com/burobeauty_ae" target="_blank" rel="noopener" style={{borderBottom:'1px solid var(--line)'}}>@burobeauty_ae</a>
              </ContactRow>
            </div>

            <hr className="rule" style={{margin:'32px 0'}}/>

            <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
              <button className="btn btn-primary" onClick={openBooking}>Reserve <Icon.Arrow /></button>
              <a className="btn btn-ghost" href="https://wa.me/971566157135" target="_blank" rel="noopener">
                <Icon.Whatsapp size={14}/> WhatsApp
              </a>
              <a className="btn btn-ghost" href="https://maps.google.com/?q=25.0675,55.1641" target="_blank" rel="noopener">
                Directions <Icon.ArrowUR size={12}/>
              </a>
            </div>
          </div>

          <div>
            <div className="map-wrap">
              <iframe
                title="Map"
                src="https://maps.google.com/maps?q=25.0675,55.1641&z=16&output=embed"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade">
              </iframe>
            </div>
            <div className="cap" style={{marginTop:14}}>25.0675°N · 55.1641°E</div>

            <div style={{marginTop:32, padding:24, background:'var(--cream-card)', border:'1px solid var(--line-soft)'}}>
              <div className="eyebrow">Send a message</div>
              <h4 style={{marginTop:8, fontSize:18}}>The concierge will reply within an hour.</h4>
              <div style={{display:'grid', gap:12, marginTop:16}}>
                <input className="input" placeholder="Your name"/>
                <input className="input" placeholder="Mobile or email"/>
                <textarea className="textarea" placeholder="What can we arrange for you?"></textarea>
                <button className="btn btn-primary" onClick={(e) => { e.preventDefault(); alert('Demo — message would be sent.'); }}>
                  Send message
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactRow({ icon, label, children }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:20, alignItems:'flex-start'}}>
      <div style={{color:'var(--champagne-deep)', marginTop:2}}>{icon}</div>
      <div>
        <div className="eyebrow eyebrow-quiet" style={{color:'rgba(42,36,31,0.55)'}}>{label}</div>
        <div style={{marginTop:6, fontSize:15, lineHeight:1.5}}>{children}</div>
      </div>
    </div>
  );
}

Object.assign(window, { MembershipsPage, CafePage, GalleryPage, AboutPage, ReviewsPage, ContactPage });