/* global React, Icon, Logo */
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

/* ========================================================
   HOME
   ======================================================== */
function HomePage({ setPage, openBooking, lang }) {
  return (
    <div data-screen-label="01 Home">

      {/* --- HERO --- */}
      <section className="hero">
        <div className="hero-media" style={{backgroundImage: 'url(media/images/clinic-04-elegant-clinic-lobby.webp)'}}></div>
        <div className="hero-meta">
          <span><b>★ 4.9</b> on Fresha</span>
          <span style={{opacity:0.4}}>·</span>
          <span>Open daily <b>10–9</b></span>
        </div>
        <div className="container hero-inner">
          <div className="eyebrow" style={{color:'var(--champagne)'}}>EST. 2025 · ADDRESS MONTGOMERIE · EMIRATES HILLS</div>
          <h1 style={{marginTop:20}}>
            Dubai's<br/>
            <em>self-care</em><br/>
            sanctuary.
          </h1>
          <p className="hero-sub">
            One venue, three experiences — an aesthetic clinic, a salon &amp; a golf-view café — quietly woven into Dubai's most discreet five-star address.
          </p>
          <div className="hero-cta">
            <button className="btn btn-gold btn-lg" onClick={openBooking}>
              Reserve your moment <Icon.Arrow />
            </button>
            <a className="btn btn-secondary btn-lg"
              href="https://wa.me/971566157135?text=Hi%20Buro%20Beauty%2C%20I'd%20like%20to%20book%20a%20treatment"
              target="_blank" rel="noopener">
              <Icon.Whatsapp size={16}/> WhatsApp concierge
            </a>
          </div>
        </div>
      </section>

      {/* --- TRUST STRIP --- */}
      <section className="container-wide">
        <div className="trust-strip">
          <div>
            <div className="lbl">Rated</div>
            <div className="num">4.9<span style={{fontSize:18, color:'var(--champagne)', marginLeft:4}}>★</span></div>
            <div style={{fontSize:12, color:'rgba(42,36,31,0.55)'}}>across 108 verified reviews</div>
          </div>
          <div>
            <div className="lbl">Opened</div>
            <div className="num">Jan '25</div>
            <div style={{fontSize:12, color:'rgba(42,36,31,0.55)'}}>at Address Montgomerie</div>
          </div>
          <div>
            <div className="lbl">For</div>
            <div className="num">Women · Men · Kids</div>
            <div style={{fontSize:12, color:'rgba(42,36,31,0.55)'}}>whole-family wellness</div>
          </div>
          <div>
            <div className="lbl">Signature</div>
            <div className="num">4 + 6-hand</div>
            <div style={{fontSize:12, color:'rgba(42,36,31,0.55)'}}>simultaneous-therapist rituals</div>
          </div>
        </div>
      </section>

      {/* --- CONCEPT TILES --- */}
      <section className="section container-wide">
        <div style={{display:'grid', gridTemplateColumns:'1fr auto', alignItems:'end', marginBottom:48, gap:32}}>
          <div>
            <div className="eyebrow">The Buro Experience</div>
            <h2 style={{marginTop:12, maxWidth:'14ch'}}>One address.<br/><em style={{fontStyle:'italic'}}>Three sanctuaries.</em></h2>
          </div>
          <p style={{maxWidth:'40ch', color:'rgba(42,36,31,0.65)'}}>
            Where European aesthetic tradition meets the calm of Emirates Hills — every detail considered, every moment yours.
          </p>
        </div>
        <div className="concept-grid">
          <div className="concept-tile" style={{backgroundImage:'url(media/images/clinic-02-serene-treatment-room-1.webp)'}} onClick={() => setPage('treatments')}>
            <div className="arrow"><Icon.ArrowUR /></div>
            <div className="label">
              <div className="num">— 01</div>
              <h3>Aesthetic Clinic</h3>
              <p>Cosmetology, injectables, advanced facials &amp; dermatology — led by European-trained practitioners.</p>
            </div>
          </div>
          <div className="concept-tile" style={{backgroundImage:'url(media/images/salon-10-glamorous-mirrors.webp)'}} onClick={() => setPage('treatments')}>
            <div className="arrow"><Icon.ArrowUR /></div>
            <div className="label">
              <div className="num">— 02</div>
              <h3>Salon &amp; Studio</h3>
              <p>Hair, nails, makeup &amp; bridal — eighty bookable services across cutting, colour, glamour &amp; finish.</p>
            </div>
          </div>
          <div className="concept-tile" style={{backgroundImage:'url(media/images/clinic-03-serenity-space.webp)'}} onClick={() => setPage('cafe')}>
            <div className="arrow"><Icon.ArrowUR /></div>
            <div className="label">
              <div className="num">— 03</div>
              <h3>Golf-View Café</h3>
              <p>Healthy bites &amp; quiet drinks on a terrace overlooking The Montgomerie's eighteenth.</p>
            </div>
          </div>
        </div>
      </section>

      {/* --- SIGNATURE --- */}
      <section className="signature section">
        <div className="container-wide">
          <div className="grid">
            <div>
              <div className="eyebrow">Signature Ritual</div>
              <h2 style={{marginTop:12}}>
                Four hands.<br/>
                Six hands.<br/>
                <em style={{fontStyle:'italic', color:'var(--champagne)'}}>One body.</em>
              </h2>
              <p style={{marginTop:24, color:'rgba(247,242,234,0.75)', maxWidth:'48ch', fontSize:15}}>
                Two — or three — therapists work in perfect symmetry across your body. The result: a treatment that's faster, deeper and so completely enveloping the mind has no choice but to let go.
              </p>
              <div className="num-grid">
                <div>
                  <div className="big">2</div>
                  <div className="ttl">Four-Hand Ritual</div>
                  <p>60 min · synchronised relaxation</p>
                </div>
                <div>
                  <div className="big">3</div>
                  <div className="ttl">Six-Hand Ritual</div>
                  <p>90 min · the full release</p>
                </div>
                <div>
                  <div className="big">21</div>
                  <div className="ttl">Pressure Touches</div>
                  <p>Per minute, in symmetry</p>
                </div>
                <div>
                  <div className="big">∞</div>
                  <div className="ttl">Calm Achieved</div>
                  <p>Booking the only effort</p>
                </div>
              </div>
              <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button className="btn btn-gold" onClick={openBooking}>Reserve the ritual</button>
                <button className="btn btn-secondary" onClick={() => setPage('signature')} style={{color:'var(--ivory)', borderColor:'rgba(247,242,234,0.5)'}}>
                  Read the story
                </button>
              </div>
            </div>
            <div className="sig-image" style={{backgroundImage:'url(media/images/clinic-08-serene-spa-table.webp)'}}>
              <div className="badge">
                "The standout self-care moment in Dubai."<br/>
                <span style={{fontFamily:'var(--sans)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', fontStyle:'normal'}}>— Editorial preview, Jan '25</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- TREATMENT PREVIEW --- */}
      <section className="section container-wide">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'end', marginBottom: 48}}>
          <div>
            <div className="eyebrow">From the Menu</div>
            <h2 style={{marginTop:12}}>56 clinic services.<br/><em>80 salon services.</em></h2>
          </div>
          <div style={{display:'flex', justifyContent:'flex-end'}}>
            <button className="btn btn-secondary" onClick={() => setPage('treatments')}>View full menu <Icon.Arrow /></button>
          </div>
        </div>
        <div>
          <PreviewRow num="01" cat="Aesthetic Clinic" name="Injectables &amp; cosmetology" desc="Consultation-led aesthetic procedures from European-trained doctors." />
          <PreviewRow num="02" cat="Skin &amp; Facials" name="Signature facial" desc="Bespoke skin diagnostic followed by a layered treatment ritual." />
          <PreviewRow num="03" cat="Body &amp; Massage" name="6-hand massage" desc="The signature — three therapists, one symphony." price="from AED 1,500*" />
          <PreviewRow num="04" cat="Hair" name="Cut, colour &amp; treatment" desc="Hair architecture and chromatic work in the salon suite." />
          <PreviewRow num="05" cat="Nails" name="Manicure &amp; pedicure" desc="Quiet precision in the nail bar." />
          <PreviewRow num="06" cat="Makeup" name="Glamour &amp; bridal" desc="Vanity-lit stations for events, occasions and the everyday." />
        </div>
        <div style={{fontSize:11, color:'rgba(42,36,31,0.45)', marginTop:18, fontStyle:'italic'}}>
          *Indicative — full live pricing on Fresha until on-site booking launches.
        </div>
      </section>

      {/* --- CAFE TEASER --- */}
      <section style={{background:'var(--cream-card)'}}>
        <div className="container-wide section">
          <div className="cafe-grid">
            <div className="plate cafe-photo" style={{backgroundImage:'url(media/images/clinic-03-serenity-space.webp)', backgroundSize:'cover', backgroundPosition:'center'}}></div>
            <div>
              <div className="eyebrow">The Café</div>
              <h2 style={{marginTop:12}}>Where the<br/><em>treatment</em> continues.</h2>
              <p style={{marginTop:24, color:'rgba(42,36,31,0.7)', maxWidth:'46ch'}}>
                A quiet terrace overlooking the eighteenth fairway. Healthy plates, restorative drinks and a kids' menu — because a sanctuary should welcome the family, too.
              </p>
              <div style={{marginTop:32, display:'flex', gap:12}}>
                <button className="btn btn-primary" onClick={() => setPage('cafe')}>Visit the café</button>
              </div>
              <hr className="rule" style={{margin: '40px 0'}} />
              <div className="eyebrow eyebrow-quiet">Worth knowing</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginTop:16}}>
                <div>
                  <div style={{fontFamily:'var(--display)', fontSize:28}}>10:00 – 21:00</div>
                  <div style={{fontSize:12, color:'rgba(42,36,31,0.5)', letterSpacing:'0.16em', textTransform:'uppercase'}}>Daily, every day</div>
                </div>
                <div>
                  <div style={{fontFamily:'var(--display)', fontSize:28}}>Family-friendly</div>
                  <div style={{fontSize:12, color:'rgba(42,36,31,0.5)', letterSpacing:'0.16em', textTransform:'uppercase'}}>Play zone &amp; kids' menu</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- REVIEWS --- */}
      <section className="section container-wide">
        <div style={{display:'grid', gridTemplateColumns:'auto 1fr', alignItems:'end', gap:48, marginBottom: 48}}>
          <div>
            <div className="eyebrow">Word of Mouth</div>
            <h2 style={{marginTop:12}}>4.9 <span style={{color:'var(--champagne)'}}>★★★★★</span></h2>
          </div>
          <div style={{textAlign:'right'}}>
            <button className="btn btn-ghost" onClick={() => setPage('reviews')}>All reviews <Icon.Arrow /></button>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}} className="reviews-row">
          <div className="review-card">
            <div className="stars">★★★★★</div>
            <div className="quote">"The most beautiful clinic in Dubai — every detail feels considered, every therapist trained beyond what I'd expect."</div>
            <div className="by">— Verified guest · Fresha</div>
          </div>
          <div className="review-card">
            <div className="stars">★★★★★</div>
            <div className="quote">"The six-hand massage is unlike anything I've experienced. Three therapists, complete surrender."</div>
            <div className="by">— Verified guest · Fresha</div>
          </div>
          <div className="review-card">
            <div className="stars">★★★★★</div>
            <div className="quote">"Brought my daughter for nails while I had a facial. The café terrace afterwards was the loveliest surprise."</div>
            <div className="by">— Verified guest · Fresha</div>
          </div>
        </div>
        <p style={{fontSize:11, color:'rgba(42,36,31,0.4)', marginTop:18, fontStyle:'italic', textAlign:'center'}}>
          Quotes paraphrased pending client-collected first-party testimonials. Aggregate rating verified on Fresha.
        </p>
      </section>

      {/* --- CONTACT BAND --- */}
      <section style={{background:'var(--espresso)', color:'var(--ivory)'}}>
        <div className="container-wide section">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}} className="contact-grid">
            <div>
              <div className="eyebrow" style={{color:'var(--champagne)'}}>Visit</div>
              <h2 style={{marginTop:12, color:'var(--ivory)'}}>Find us beside<br/>the eighteenth.</h2>
              <div style={{marginTop:32, display:'grid', gap:18, fontSize:15, color:'rgba(247,242,234,0.8)'}}>
                <div style={{display:'flex', gap:16, alignItems:'flex-start'}}>
                  <Icon.Pin /><div>Address Montgomerie, Emirates Hills<br/>Dubai, United Arab Emirates</div>
                </div>
                <div style={{display:'flex', gap:16, alignItems:'flex-start'}}>
                  <Icon.Clock /><div>Daily 10:00 – 21:00<br/><span style={{fontSize:12, opacity:0.6}}>Café hours vary — confirm with concierge</span></div>
                </div>
                <div style={{display:'flex', gap:16, alignItems:'flex-start'}}>
                  <Icon.Phone /><div>
                    <a href="tel:+971566157135" style={{borderBottom:'1px solid rgba(247,242,234,0.4)'}}>+971 56 615 7135</a><br/>
                    <span style={{fontSize:12, opacity:0.6}}>Concierge &amp; WhatsApp</span>
                  </div>
                </div>
              </div>
              <div style={{marginTop:40, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button className="btn btn-gold" onClick={openBooking}>Reserve <Icon.Arrow /></button>
                <button className="btn btn-secondary" onClick={() => setPage('contact')} style={{color:'var(--ivory)', borderColor:'rgba(247,242,234,0.5)'}}>
                  Directions
                </button>
              </div>
            </div>
            <div>
              <div className="map-wrap map-wrap-dark">
                <iframe
                  title="Buro Beauty map"
                  src="https://maps.google.com/maps?q=25.0675,55.1641&z=16&output=embed"
                  loading="eager"
                  referrerPolicy="no-referrer-when-downgrade">
                </iframe>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

function PreviewRow({ num, cat, name, desc, price }) {
  return (
    <div className="treat-row">
      <span className="num">{num}</span>
      <div>
        <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(42,36,31,0.5)'}}>{cat}</div>
        <div className="name" dangerouslySetInnerHTML={{__html: name}}></div>
        <div className="desc">{desc}</div>
      </div>
      <div className="price">
        {price ? <span dangerouslySetInnerHTML={{__html: price}}/> : <span style={{fontSize:11, color:'rgba(42,36,31,0.5)', letterSpacing:'0.16em', textTransform:'uppercase', fontFamily:'var(--sans)'}}>see menu</span>}
      </div>
      <a className="book" href="#" onClick={(e)=>e.preventDefault()}>Book →</a>
    </div>
  );
}

Object.assign(window, { HomePage });