/* Home page sections */
const { useState: _us, useEffect: _ue, useMemo: _um } = React;

function Hero({ openBooking, setRoute }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-marquee-bg" aria-hidden="true">va-va-voom</div>
        <div className="hero-grid">
          <div>
            <div className="eyebrow fade-up">{D.hero.pre}</div>
            <h1 className="display fade-up-d1">
              {D.hero.h1Lead}<br/><em>{D.hero.h1Italic}</em>
            </h1>
            <p className="hero-sub fade-up-d2">{D.hero.sub}</p>
            <div className="hero-cta fade-up-d3">
              <button className="btn btn-primary" onClick={openBooking}>Book Now</button>
              <a href={D.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-outline">
                WhatsApp us
              </a>
            </div>
            <div className="hero-trust fade-up-d3">
              <div className="hero-trust-stat">
                <div className="num">{D.brand.rating}<span style={{color: "var(--champagne)", marginLeft: 6}}>★</span></div>
                <div className="label">{D.brand.reviewCount.toLocaleString()} reviews on Fresha</div>
              </div>
              <div style={{width: 1, height: 36, background: "var(--line)"}}></div>
              <div className="hero-trust-stat">
                <div className="num">13</div>
                <div className="label">Named specialists</div>
              </div>
              <div style={{width: 1, height: 36, background: "var(--line)"}}></div>
              <div className="hero-trust-stat">
                <div className="num">9–9</div>
                <div className="label">Daily, Jumeirah Beach Rd</div>
              </div>
            </div>
          </div>
          <div className="fade-up-d2">
            <div className="hero-image-wrap">
              <img src={IMG("fresha-venue-gallery-1.webp")} alt="Inside Blo Out Beauty Lounge"/>
              <div className="hero-image-badge">
                <div>
                  <div className="stars-row" style={{color: "var(--champagne)"}}>★★★★★</div>
                  <div style={{fontSize: 11, color: "var(--plum-soft)", letterSpacing: "0.06em", marginTop: 4}}>
                    Latest review {D.brand.reviewLatest}
                  </div>
                </div>
                <div style={{paddingLeft: 12, borderLeft: "1px solid var(--line)"}}>
                  <div style={{fontFamily: "var(--font-display)", fontSize: 24, color: "var(--plum)", lineHeight: 1}}>{D.brand.rating}</div>
                  <div style={{fontSize: 10, color: "var(--plum-soft)", letterSpacing: "0.1em"}}>FROM {D.brand.reviewCount.toLocaleString()}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <div className="trust-strip">
      <div className="container trust-strip-inner">
        <div className="trust-item">
          <span className="big">{D.brand.rating}<span style={{color: "var(--champagne)"}}>★</span></span>
          <span className="lbl">{D.brand.reviewCount.toLocaleString()} reviews · Fresha</span>
        </div>
        <div className="trust-item">
          <span className="big">9 – 9</span>
          <span className="lbl">Daily · Mon — Sun</span>
        </div>
        <div className="trust-item">
          <span className="big">Villa 710</span>
          <span className="lbl">Jumeirah Beach Road, Umm Suqeim 2</span>
        </div>
        <div className="trust-item">
          <span className="big">Women-only</span>
          <span className="lbl">Parking · Free Wi-Fi</span>
        </div>
      </div>
    </div>
  );
}

function Signatures({ openBookingFor, setRoute }) {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Signature services</div>
            <h2 className="display">The treatments<br/><em className="italic-display">we're known for.</em></h2>
          </div>
          <div className="right">
            Six rooms, six rituals — from a 30-minute blowdry to the full Moroccan-bath reset. Most-praised treatments first.
          </div>
        </div>

        <div className="signatures-grid">
          {D.signatures.map((s, i) => (
            <div key={s.id} className="sig-card" onClick={() => openBookingFor(s.name)}>
              <img src={IMG(s.image)} alt={s.name}/>
              <div className="body">
                <span className="tag">{s.tag}</span>
                <h3>{s.name}</h3>
                <p>{s.blurb}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{display: "flex", justifyContent: "center", marginTop: 40}}>
          <button className="btn btn-outline" onClick={() => setRoute("services")}>See the full menu →</button>
        </div>
      </div>
    </section>
  );
}

function OffersTeaser({ setRoute, openBookingFor }) {
  return (
    <section style={{background: "var(--blush)", padding: "80px 0"}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Right now</div>
            <h2 className="display">Happy Hour at <em className="italic-display">the bar.</em></h2>
          </div>
          <div className="right">
            Verified combo and single-service prices, straight from Fresha. Standing menu prices on enquiry.
          </div>
        </div>

        <div className="offers-grid">
          {D.offers.map((o, i) => (
            <div key={o.id} className={"offer-card" + (i === 0 ? " hero-offer" : "")}>
              <div className="kicker">{o.kicker}</div>
              {o.saving && <span className="ribbon">{o.saving}</span>}
              <h3>{o.name}</h3>
              <div className="duration">{o.duration}</div>
              <div className="price-line">
                <span className="aed">AED</span>
                <span className="amt">{o.price}</span>
                {o.was && <span className="was">was {o.was}</span>}
              </div>
              <p className="body">{o.copy}</p>
              <button className="btn btn-primary btn-sm" onClick={() => openBookingFor(o.name)}>Book →</button>
            </div>
          ))}
        </div>

        <div style={{display: "flex", justifyContent: "center", marginTop: 40}}>
          <button className="btn btn-ghost" onClick={() => setRoute("memberships")}>All offers & memberships →</button>
        </div>
      </div>
    </section>
  );
}

function GalleryStrip({ setRoute }) {
  const [lb, setLb] = _us(null);
  const work = D.gallery.work.slice(0, 6);
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Recent work</div>
            <h2 className="display">From the chair.</h2>
          </div>
          <div className="right">
            Colour, lashes, nails, hair. Real client work — the rest of the portfolio lives in the gallery.
          </div>
        </div>

        <div className="gallery-grid">
          {work.map((g, i) => (
            <div key={i} className={"gal-cell " + (i === 0 ? "tall" : i === 3 ? "wide" : "")} onClick={() => setLb(i)}>
              <img src={IMG(g)} alt=""/>
            </div>
          ))}
        </div>

        <div style={{display: "flex", justifyContent: "center", marginTop: 40}}>
          <button className="btn btn-outline" onClick={() => setRoute("gallery")}>Open the gallery →</button>
        </div>
      </div>
      <Lightbox images={work} index={lb} onClose={() => setLb(null)} setIndex={setLb}/>
    </section>
  );
}

function TeamStrip({ setRoute }) {
  // Pick a strong horizontal lineup: the 4 confirmed avatars first, then balance
  const featured = [
    D.team.find(t => t.name === "Janice"),
    D.team.find(t => t.name === "Gemma"),
    D.team.find(t => t.name === "Fouzia"),
    D.team.find(t => t.name === "Ashley"),
    D.team.find(t => t.name === "Perveen"),
    D.team.find(t => t.name === "Jessie"),
  ];
  return (
    <section style={{background: "var(--cream)"}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">The bench</div>
            <h2 className="display">Thirteen specialists.<br/><em className="italic-display">Book your favourite.</em></h2>
          </div>
          <div className="right">
            Every name on the floor has their own Fresha rating — lash team averages 4.8. Book by stylist, not by chance.
          </div>
        </div>

        <div className="team-grid">
          {featured.map((t, i) => (
            <div key={i} className="team-card" onClick={() => setRoute("team")}>
              <div className="avatar-wrap">
                <img src={IMG(t.photo)} alt={t.name}/>
                <div className="rating-badge">{t.rating}<span style={{color: "var(--champagne)"}}>★</span></div>
              </div>
              <div className="name">{t.name}</div>
              <div className="role">{t.role}</div>
              {!t.confirmed && <span className="unconfirmed">photo unmapped</span>}
            </div>
          ))}
        </div>

        <div style={{display: "flex", justifyContent: "center", marginTop: 40}}>
          <button className="btn btn-outline" onClick={() => setRoute("team")}>Meet the whole team →</button>
        </div>
      </div>
    </section>
  );
}

function ReviewsStrip({ setRoute }) {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">What our regulars say</div>
            <h2 className="display"><em className="italic-display">4.7</em> from 1,174.<br/>And counting.</h2>
          </div>
          <div className="right">
            Verified Fresha and Tripadvisor reviews — names and dates verbatim. Latest captured {D.brand.reviewLatest}.
          </div>
        </div>

        <div className="reviews-marquee no-scrollbar">
          {D.reviews.map((r, i) => (
            <div key={i} className="review-card">
              <div className="stars-row">{"★★★★★".slice(0, r.stars)}{"☆☆☆☆☆".slice(0, 5 - r.stars)}</div>
              <blockquote>{r.text}</blockquote>
              <div className="who">
                <strong>{r.name} · {r.date}</strong>
                <span className="source-pill">{r.source}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{display: "flex", justifyContent: "center", marginTop: 40}}>
          <button className="btn btn-ghost" onClick={() => setRoute("reviews")}>Read more reviews →</button>
        </div>
      </div>
    </section>
  );
}

// Stylised SVG map — Jumeirah Beach Road area sketch
function StylisedMap() {
  return (
    <iframe
      title="Blo Out Beauty Lounge location"
      src="https://www.google.com/maps?q=Blo%20Out%20Beauty%20Lounge%20Villa%20710%20Jumeirah%20Beach%20Road%20Umm%20Suqeim%202%20Dubai&z=16&output=embed"
      loading="lazy"
      referrerPolicy="no-referrer-when-downgrade"
    />
  );
  return (
    <svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="dot" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="7" cy="7" r="0.7" fill="rgba(216,185,140,0.15)"/>
        </pattern>
      </defs>
      <rect width="600" height="450" fill="url(#dot)"/>
      {/* coastline */}
      <path d="M 0 280 Q 80 240, 180 250 T 380 220 T 600 180 L 600 0 L 0 0 Z" fill="rgba(216,185,140,0.06)"/>
      <path d="M 0 280 Q 80 240, 180 250 T 380 220 T 600 180" stroke="rgba(216,185,140,0.5)" strokeWidth="1.5" fill="none" strokeDasharray="2,4"/>
      <text x="80" y="120" fill="rgba(255,253,251,0.25)" fontFamily="Playfair Display" fontStyle="italic" fontSize="22">Arabian Gulf</text>

      {/* Jumeirah Beach Road */}
      <path d="M 0 360 Q 150 320, 300 340 T 600 320" stroke="rgba(201,120,138,0.55)" strokeWidth="3" fill="none"/>
      <text x="40" y="380" fill="rgba(255,253,251,0.5)" fontFamily="Inter" fontSize="11" letterSpacing="2">JUMEIRAH BEACH ROAD</text>

      {/* cross streets */}
      <path d="M 200 200 L 220 440" stroke="rgba(255,253,251,0.1)" strokeWidth="1" fill="none"/>
      <path d="M 380 200 L 360 440" stroke="rgba(255,253,251,0.1)" strokeWidth="1" fill="none"/>
      <path d="M 500 220 L 480 440" stroke="rgba(255,253,251,0.1)" strokeWidth="1" fill="none"/>

      {/* villa blocks */}
      <g fill="rgba(255,253,251,0.04)" stroke="rgba(255,253,251,0.08)">
        <rect x="60" y="380" width="44" height="34"/>
        <rect x="120" y="385" width="44" height="34"/>
        <rect x="240" y="375" width="44" height="34"/>
        <rect x="420" y="365" width="44" height="34"/>
        <rect x="480" y="360" width="44" height="34"/>
      </g>
      <text x="500" y="420" fill="rgba(255,253,251,0.25)" fontFamily="Inter" fontSize="9" letterSpacing="2">UMM SUQEIM 2</text>
    </svg>
  );
}

function MapSection({ openBooking }) {
  return (
    <section className="map-section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Find us</div>
            <h2 className="display">Villa 710,<br/><em className="italic-display">the Light House.</em></h2>
          </div>
          <div className="right" style={{color: "rgba(255,253,251,0.7)"}}>
            On Jumeirah Beach Road in Umm Suqeim 2 — a few minutes from Mall of the Emirates, Burj Al Arab, Madinat Jumeirah.
          </div>
        </div>

        <div className="map-grid">
          <div className="map-canvas">
            <StylisedMap/>
            <div className="map-pin">
              <div className="pin-circle"></div>
              <div className="pin-label">
                Blo Out Beauty Lounge
                <small>Villa 710</small>
              </div>
            </div>
          </div>

          <div className="contact-block">
            <div className="row">
              <div className="lbl">Address</div>
              <div className="val">Villa 710, Jumeirah Beach Road<br/>Umm Suqeim 2, Dubai
                <small>"The Light House"</small>
              </div>
            </div>
            <div className="row">
              <div className="lbl">Hours</div>
              <div className="val">Daily 09:00 — 21:00</div>
            </div>
            <div className="row">
              <div className="lbl">Phone</div>
              <div className="val">{D.brand.phone}</div>
            </div>
            <div className="row">
              <div className="lbl">WhatsApp</div>
              <div className="val">{D.brand.whatsapp}
                <small>candidate — confirm with client</small>
              </div>
            </div>
            <div className="row">
              <div className="lbl">Facilities</div>
              <div className="val" style={{fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6}}>
                Women-only · On-site parking · Free Wi-Fi<br/>
                Cash, credit & debit
              </div>
            </div>

            <div className="actions">
              <button className="btn btn-on-dark-primary" onClick={openBooking}>Book Now</button>
              <a href={D.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-wa-dark">WhatsApp</a>
              <a href={D.brand.phoneHref} className="btn btn-on-dark-outline">Call</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ openBooking, openBookingFor, setRoute }) {
  return (
    <div className="page-wrap">
      <Hero openBooking={openBooking} setRoute={setRoute}/>
      <TrustStrip/>
      <Signatures openBookingFor={openBookingFor} setRoute={setRoute}/>
      <OffersTeaser setRoute={setRoute} openBookingFor={openBookingFor}/>
      <GalleryStrip setRoute={setRoute}/>
      <TeamStrip setRoute={setRoute}/>
      <ReviewsStrip setRoute={setRoute}/>
      <MapSection openBooking={openBooking}/>
    </div>
  );
}

Object.assign(window, { Home, StylisedMap, MapSection });