/* Sub-pages: Services, Memberships, Gallery, Team, Reviews, Book */
const { useState: _S, useEffect: _E, useMemo: _M, useRef: _R } = React;

// --- Generic page header ---
function PageHead({ eyebrow, title, italic, sub }) {
  return (
    <section style={{paddingTop: 80, paddingBottom: 24}}>
      <div className="container">
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="display" style={{marginTop: 12, fontSize: "clamp(40px, 6vw, 76px)"}}>
          {title} {italic && <em className="italic-display">{italic}</em>}
        </h1>
        {sub && <p style={{maxWidth: 600, color: "var(--plum-soft)", fontSize: 17, marginTop: 18}}>{sub}</p>}
      </div>
    </section>
  );
}

// ===================== SERVICES =====================
function ServicesPage({ openBookingFor }) {
  const [active, setActive] = _S(D.categories[0].id);

  // observe category in view
  _E(() => {
    const sections = D.categories.map(c => document.getElementById(`svc-${c.id}`)).filter(Boolean);
    const onScroll = () => {
      const y = window.scrollY + 160;
      let curr = sections[0]?.id;
      for (const s of sections) { if (s.offsetTop <= y) curr = s.id; }
      if (curr) setActive(curr.replace("svc-", ""));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const jumpTo = (id) => {
    const el = document.getElementById(`svc-${id}`);
    if (el) window.scrollTo({ top: el.offsetTop - 130, behavior: "smooth" });
  };

  return (
    <div className="page-wrap">
      <PageHead
        eyebrow="The Menu"
        title="Hair, nails, lashes,"
        italic="Moroccan bath."
        sub="All services Blo Out offers, organised by category. Verified Happy-Hour and promo prices are shown live; the full standing menu sits behind Fresha's booking flow — confirm at checkout."
      />

      <div className="cat-nav">
        <div className="container cat-nav-inner no-scrollbar">
          {D.categories.map(c => (
            <button key={c.id} className={"cat-pill " + (active === c.id ? "active" : "")} onClick={() => jumpTo(c.id)}>
              {c.title}
            </button>
          ))}
        </div>
      </div>

      <div className="container">
        {D.categories.map(c => (
          <div key={c.id} id={`svc-${c.id}`} className="svc-block">
            <div className="svc-block-head">
              <span className="icon">{c.icon}</span>
              <div>
                <h2 className="display">{c.title}</h2>
                <p>{c.copy}</p>
              </div>
            </div>
            <div className="svc-list">
              {c.items.map((it, i) => (
                <div key={i} className="svc-row">
                  <div>
                    <div className="name">{it.name}</div>
                    <div className="meta">{it.duration}{it.flag && <span className="flag">{it.flag}</span>}</div>
                  </div>
                  <div className="price">
                    {it.price !== null ? (
                      <>
                        {it.was && <span className="was">AED {it.was}</span>}
                        <span className="amount">AED {it.price}</span>
                        <div className="meta" style={{textAlign: "right", marginTop: 2}}>{it.note}</div>
                      </>
                    ) : (
                      <span className="unverified">{it.note}</span>
                    )}
                  </div>
                  <button className="btn btn-sm btn-outline" onClick={() => openBookingFor(it.name)}>Book</button>
                </div>
              ))}
            </div>
          </div>
        ))}

        <div style={{padding: "32px 0 80px", color: "var(--plum-soft)", fontSize: 13, fontStyle: "italic", textAlign: "center"}}>
          Don't see a price? It sits inside Fresha's booking flow. Confirm at checkout, or WhatsApp us for a quick quote.
        </div>
      </div>
    </div>
  );
}

// ===================== MEMBERSHIPS / OFFERS =====================
function MembershipsPage({ openBookingFor }) {
  // Proposed memberships — explicitly flagged as proposal, not invented standing menu
  const proposals = [
    {
      name: "The Blowdry Card",
      tier: "Proposal — client to confirm",
      colour: "var(--cream)",
      price: "—", priceUnit: "8 blowdries",
      perks: ["Save vs walk-in", "Any stylist, any time", "Transferable to a friend"],
    },
    {
      name: "The Glow Membership",
      tier: "Proposal — client to confirm",
      colour: "var(--plum)",
      textColour: "var(--ivory)",
      price: "—", priceUnit: "monthly",
      perks: ["1 blowdry + 1 mani per month", "10% off all add-ons", "Priority Happy-Hour booking"],
      featured: true,
    },
    {
      name: "The Bridal Block",
      tier: "Proposal — client to confirm",
      colour: "var(--cream)",
      price: "—", priceUnit: "package",
      perks: ["Hair + makeup + lashes + Moroccan bath", "Dedicated team on the day", "Trial session included"],
    },
  ];

  return (
    <div className="page-wrap">
      <PageHead
        eyebrow="Offers & Memberships"
        title="The everyday reset,"
        italic="priced for it."
        sub="Verified Happy Hour and promo prices first. Membership tiers below are proposals — pricing to be confirmed with the salon."
      />

      <section style={{paddingTop: 0}}>
        <div className="container">
          <div className="rule" style={{marginBottom: 28}}><span>Live & verified</span></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 className="rule" style={{margin: "80px 0 28px"}}><span>Proposed memberships</span></div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20}} className="memberships-grid">
            {proposals.map((p, i) => (
              <div key={i} style={{
                background: p.colour,
                color: p.textColour || "var(--charcoal)",
                border: "1px solid var(--line)",
                borderRadius: "var(--radius-lg)",
                padding: "36px 28px",
                display: "flex", flexDirection: "column",
                transform: p.featured ? "scale(1.04)" : "none",
                zIndex: p.featured ? 1 : 0,
                position: "relative",
              }}>
                {p.featured && <span style={{position: "absolute", top: 14, right: 14, background: "var(--champagne)", color: "var(--plum)", padding: "4px 10px", borderRadius: 999, fontSize: 11, fontWeight: 600}}>Most popular</span>}
                <div style={{fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: p.textColour ? "rgba(255,253,251,0.6)" : "var(--rose-deep)", fontWeight: 500}}>{p.tier}</div>
                <h3 style={{fontFamily: "var(--font-display)", fontSize: 30, margin: "18px 0 10px", color: p.textColour || "var(--plum)"}}>{p.name}</h3>
                <div style={{display: "flex", alignItems: "baseline", gap: 8, margin: "16px 0 8px"}}>
                  <span style={{fontFamily: "var(--font-display)", fontSize: 52, lineHeight: 1, color: p.textColour || "var(--plum)"}}>{p.price}</span>
                  <span style={{fontSize: 13, opacity: 0.7}}>{p.priceUnit}</span>
                </div>
                <ul style={{listStyle: "none", padding: 0, margin: "16px 0 24px", display: "flex", flexDirection: "column", gap: 10}}>
                  {p.perks.map((perk, k) => (
                    <li key={k} style={{display: "flex", gap: 10, fontSize: 14}}>
                      <span style={{color: "var(--champagne)"}}>✦</span>{perk}
                    </li>
                  ))}
                </ul>
                <button className={"btn " + (p.featured ? "btn-rose" : "btn-outline")} style={{marginTop: "auto", alignSelf: "flex-start", ...(p.featured ? {} : (p.textColour ? {borderColor: "rgba(255,253,251,0.3)", color: p.textColour} : {}))}}>Express interest</button>
              </div>
            ))}
          </div>

          <p style={{textAlign: "center", color: "var(--plum-soft)", fontSize: 13, fontStyle: "italic", marginTop: 40}}>
            Memberships shown above are draft proposals for the new website — pricing and inclusions to be confirmed by Blo Out.
          </p>
        </div>
      </section>
    </div>
  );
}

// ===================== GALLERY =====================
function GalleryPage() {
  const [filter, setFilter] = _S("all");
  const [lb, setLb] = _S(null);
  const all = _M(() => {
    return [
      ...D.gallery.work.map(f => ({ f, kind: "work" })),
      ...D.gallery.venue.map(f => ({ f, kind: "venue" })),
    ];
  }, []);
  const filtered = filter === "all" ? all : all.filter(x => x.kind === filter);
  const images = filtered.map(x => x.f);

  return (
    <div className="page-wrap">
      <PageHead
        eyebrow="Portfolio"
        title="Recent work,"
        italic="real clients."
        sub="A live edit from the chair — hair colour, lashes, nails, and the salon itself. More on Instagram."
      />
      <section style={{paddingTop: 0}}>
        <div className="container">
          <div style={{display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap"}}>
            {["all","work","venue"].map(f => (
              <button key={f} className={"cat-pill " + (filter === f ? "active" : "")} onClick={() => setFilter(f)}>
                {f === "all" ? "Everything" : f === "work" ? "Hair · Nails · Lashes" : "The Salon"}
              </button>
            ))}
          </div>

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

          <p style={{textAlign: "center", color: "var(--plum-soft)", fontSize: 13, fontStyle: "italic", marginTop: 40}}>
            Phase 2: live Instagram feed (<a href={D.brand.instagram} target="_blank" rel="noopener" style={{color: "var(--rose-deep)"}}>@blooutbeauty</a>).
          </p>
        </div>
      </section>
      <Lightbox images={images} index={lb} onClose={() => setLb(null)} setIndex={setLb}/>
    </div>
  );
}

// ===================== TEAM =====================
function TeamPage({ openBookingFor }) {
  const [filter, setFilter] = _S("all");
  const groups = [
    { id: "all", label: "Everyone" },
    { id: "lashes", label: "Lashes" },
    { id: "hair", label: "Hair" },
    { id: "nails", label: "Nails" },
    { id: "spa", label: "Spa & Brows" },
  ];
  const matchesGroup = (t) => {
    if (filter === "all") return true;
    if (filter === "lashes") return /Lash/i.test(t.role);
    if (filter === "hair") return /Hair|Color/i.test(t.role);
    if (filter === "nails") return /Nail/i.test(t.role);
    if (filter === "spa") return /Brow|Facial|Moroccan/i.test(t.role);
  };

  return (
    <div className="page-wrap">
      <PageHead
        eyebrow="The team"
        title="Thirteen specialists,"
        italic="individually rated."
        sub='Every name has their own Fresha rating — the lash team averages 4.8★. "Book your favourite specialist" is a Phase-2 feature.'
      />
      <section style={{paddingTop: 0}}>
        <div className="container">
          <div className="team-filter">
            {groups.map(g => (
              <button key={g.id} className={"cat-pill " + (filter === g.id ? "active" : "")} onClick={() => setFilter(g.id)}>{g.label}</button>
            ))}
          </div>

          <div className="team-grid">
            {D.team.filter(matchesGroup).map(t => (
              <div key={t.name} className="team-card" onClick={() => openBookingFor(`${t.name} — ${t.role}`)}>
                <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: stand-in</span>}
              </div>
            ))}
          </div>

          <div style={{
            margin: "60px auto 20px", maxWidth: 720,
            background: "var(--blush)", borderRadius: "var(--radius-lg)",
            padding: 28, textAlign: "center"
          }}>
            <div className="eyebrow">A note on portraits</div>
            <p style={{margin: "12px 0 0", color: "var(--plum)", fontSize: 14, lineHeight: 1.6}}>
              Only three name-to-photo mappings are confirmed (Gemma, Fouzia, Perveen).
              The other portraits are stand-ins from Blo Out's own staff gallery while we collect
              consented headshots mapped to each specialist.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ===================== REVIEWS =====================
function ReviewsPage() {
  return (
    <div className="page-wrap">
      <PageHead
        eyebrow="Reviews"
        title="Twelve hundred regulars"
        italic="can't be wrong."
        sub={`Verbatim verified reviews from Fresha and Tripadvisor — names and dates exactly as published. Latest review captured ${D.brand.reviewLatest}.`}
      />

      <section style={{paddingTop: 0}}>
        <div className="container">
          <div className="rating-hero">
            <div>
              <div className="big-num">{D.brand.rating}<span style={{color: "var(--champagne)", fontSize: 56, marginLeft: 8}}>★</span></div>
              <div className="stars-big" style={{marginTop: 6}}>★★★★★</div>
            </div>
            <div>
              <div className="eyebrow">From {D.brand.reviewCount.toLocaleString()} reviews on Fresha</div>
              <h3 className="display" style={{margin: "8px 0 8px", fontSize: 28}}>Most-praised: Moroccan Bath, Lashes, Nails.</h3>
              <div className="ctx">Fresha rating re-pulled {D.brand.reviewLatest}. The aggregate is a moving target — we'll refresh on launch day.</div>
              <div style={{display: "flex", gap: 8, marginTop: 18, flexWrap: "wrap"}}>
                <span className="tag">Moroccan Bath</span>
                <span className="tag">Lash Lift</span>
                <span className="tag">Nail Art</span>
                <span className="tag">Caviar Treatment</span>
                <span className="tag">Friendly staff</span>
              </div>
            </div>
          </div>

          <div className="reviews-grid">
            {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={{
            margin: "60px auto 0", maxWidth: 720,
            background: "var(--cream)", border: "1px solid var(--line)",
            borderRadius: "var(--radius-lg)", padding: 28
          }}>
            <div className="eyebrow">What to expect</div>
            <p style={{margin: "12px 0 0", color: "var(--plum)", fontSize: 14, lineHeight: 1.7}}>
              A tiny minority of low reviews flag colour expectations and Moroccan-bath glove add-ons. We pre-empt that by
              <strong> always consulting on colour first</strong> and listing
              <strong> what's included in every Moroccan-bath booking</strong> on the booking page.
              Honest expectations, every time.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ===================== BOOK (visit) =====================
function BookPage({ openBooking }) {
  return (
    <div className="page-wrap">
      <PageHead
        eyebrow="Visit · Book"
        title="Three ways"
        italic="to get on the chair."
        sub={`Daily 09:00 — 21:00. Walk-ins by availability. Same-day slots are common — easier on WhatsApp.`}
      />

      <section style={{paddingTop: 0}}>
        <div className="container">
          <div style={{display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20}} className="book-options">
            <div className="card" style={{padding: 32, display: "flex", flexDirection: "column"}}>
              <div className="eyebrow">Online</div>
              <h3 className="display" style={{margin: "8px 0 12px", fontSize: 28}}>Book online.</h3>
              <p style={{color: "var(--plum-soft)", fontSize: 14, marginBottom: 22}}>
                MVP deep-links to our Fresha listing. Pick service, specialist, time — confirmed by SMS.
              </p>
              <button className="btn btn-primary" onClick={openBooking} style={{alignSelf: "flex-start", marginTop: "auto"}}>Open booking →</button>
            </div>
            <div className="card" style={{padding: 32, display: "flex", flexDirection: "column", background: "var(--plum)", color: "var(--ivory)"}}>
              <div className="eyebrow on-dark">Fastest</div>
              <h3 className="display" style={{margin: "8px 0 12px", fontSize: 28, color: "var(--ivory)"}}>WhatsApp.</h3>
              <p style={{color: "rgba(255,253,251,0.75)", fontSize: 14, marginBottom: 22}}>
                Send the service and your preferred day. Most replies inside 15 minutes during opening hours.
              </p>
              <a className="btn btn-wa" href={D.brand.whatsappHref} target="_blank" rel="noopener" style={{alignSelf: "flex-start", marginTop: "auto"}}>Open WhatsApp →</a>
            </div>
            <div className="card" style={{padding: 32, display: "flex", flexDirection: "column"}}>
              <div className="eyebrow">Old-fashioned</div>
              <h3 className="display" style={{margin: "8px 0 12px", fontSize: 28}}>Call us.</h3>
              <p style={{color: "var(--plum-soft)", fontSize: 14, marginBottom: 22}}>
                Speak to the front desk for bridal blocks, group bookings, or to hold a Moroccan-bath room mid-Happy-Hour.
              </p>
              <a className="btn btn-outline" href={D.brand.phoneHref} style={{alignSelf: "flex-start", marginTop: "auto"}}>{D.brand.phone}</a>
            </div>
          </div>
        </div>
      </section>

      <MapSectionLite/>
    </div>
  );
}

// Small map block used on Book page (no h2 wrapper)
function MapSectionLite() {
  return (
    <section className="map-section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Find us</div>
            <h2 className="display">Villa 710, <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, Umm Suqeim 2 — opposite the beach, minutes from 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</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</small></div></div>
            <div className="row"><div className="lbl">Map</div><div className="val" style={{fontFamily: "var(--font-body)", fontSize: 14}}>{D.brand.coords.lat}, {D.brand.coords.lng}</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesPage, MembershipsPage, GalleryPage, TeamPage, ReviewsPage, BookPage });