// services.jsx — Services page for Version Française Pour Elle
// Real HTML menu, verified hair prices, "Book on Fresha" for unverified.

function ServicesPage({ lang }) {
  const D = window.VFPE_DATA;
  const t = D.t[lang];
  const [active, setActive] = React.useState("hair");

  // Sticky category nav — IntersectionObserver tracks which section is in view.
  React.useEffect(() => {
    const opts = { rootMargin: "-120px 0px -50% 0px", threshold: 0 };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, opts);
    document.querySelectorAll("[data-cat]").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 130;
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <main>
      {/* ── Hero band ─────────────────────────────────────────── */}
      <section className="srv-hero" data-screen-label="Services / Hero">
        <div className="container srv-hero-inner">
          <Reveal>
            <Eyebrow>{lang === "fr" ? "La Carte" : "The Menu"}</Eyebrow>
            <h1 className="h1 display" style={{ marginTop: 24, marginBottom: 24 }}>
              {lang === "fr" ? <>Soins & rituels,<br/><em>tarifs en clair</em>.</>
                             : <>Treatments & rituals,<br/><em>prices in plain sight</em>.</>}
            </h1>
            <p className="lead">
              {lang === "fr"
                ? "Tous les tarifs « cheveux » sont publiés. Pour les autres prestations, réservez sur Fresha — un devis vous est proposé en quelques secondes."
                : "All hair prices are published. For other treatments, book through Fresha — you'll see your quote in seconds."}
            </p>
          </Reveal>
        </div>
      </section>

      {/* ── Sticky category nav ──────────────────────────────── */}
      <div className="srv-nav-wrap">
        <div className="container">
          <div className="srv-nav" role="tablist">
            {D.services.map((s) => (
              <button
                key={s.id}
                className={cx("srv-nav-btn", active === s.id && "on")}
                onClick={() => scrollTo(s.id)}
                role="tab"
                aria-selected={active === s.id}
              >
                {L({ en: s.en, fr: s.fr }, lang)}
                {!s.verified && <span className="srv-nav-dot" aria-hidden />}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* ── Category sections ────────────────────────────────── */}
      <section className="srv-body">
        <div className="container">
          {D.services.map((cat, idx) => (
            <CategorySection key={cat.id} cat={cat} lang={lang} idx={idx} />
          ))}
        </div>
      </section>

      {/* ── Book band ────────────────────────────────────────── */}
      <CloserBand lang={lang} />

      <style>{`
        .srv-hero {
          padding: clamp(72px, 10vw, 144px) 0 clamp(48px, 7vw, 88px);
          border-bottom: 1px solid var(--gold-hairline);
        }
        .srv-hero-inner { max-width: 720px; }

        .srv-nav-wrap {
          position: sticky;
          top: 78px;
          z-index: 40;
          background: rgba(246, 241, 234, 0.94);
          -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
          border-bottom: 1px solid var(--gold-hairline);
        }
        @media (max-width: 880px) { .srv-nav-wrap { top: 64px; } }
        .srv-nav {
          display: flex;
          gap: 4px;
          overflow-x: auto;
          padding: 14px 0;
          scrollbar-width: none;
        }
        .srv-nav::-webkit-scrollbar { display: none; }
        .srv-nav-btn {
          appearance: none;
          border: 0;
          background: transparent;
          padding: 10px 16px;
          font-size: 11.5px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          font-weight: 500;
          color: var(--ink-50);
          white-space: nowrap;
          border-bottom: 1px solid transparent;
          transition: color 150ms ease, border-color 150ms ease;
          position: relative;
        }
        .srv-nav-btn:hover { color: var(--noir); }
        .srv-nav-btn.on {
          color: var(--noir);
          border-bottom-color: var(--champagne-gold);
        }
        .srv-nav-dot {
          display: inline-block;
          width: 4px; height: 4px;
          background: var(--rose-muted);
          border-radius: 50%;
          margin-left: 8px;
          vertical-align: middle;
        }

        .srv-body { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
      `}</style>
    </main>
  );
}

// ── Category section ────────────────────────────────────────────

function CategorySection({ cat, lang, idx }) {
  const t = window.VFPE_DATA.t[lang];
  // Pair each category with a fresha image for context (Tier A only — real Al Wasl rooms).
  const imageMap = {
    hair:     "media/images/fresha-gallery-02.webp",   // hair wash bay
    nails:    "media/images/fresha-gallery-05.webp",   // nail suite
    eyes:     "media/images/fresha-gallery-06.webp",   // treatment cabin
    facials:  "media/images/fresha-gallery-06.webp",
    massage:  "media/images/fresha-gallery-08.webp",   // pedicure/lounge
    waxing:   "media/images/fresha-gallery-06.webp",
    lycon:    "media/images/fresha-gallery-06.webp",
    moroccan: "media/images/fresha-gallery-07.webp",   // hammam
  };
  const imageCaption = {
    hair:     { en: "Hair Wash Bay",  fr: "Espace shampooing" },
    nails:    { en: "Nail Suite",     fr: "Espace ongles" },
    eyes:     { en: "Treatment Cabin",fr: "Cabine de soins" },
    facials:  { en: "Facial Cabin",   fr: "Cabine soins du visage" },
    massage:  { en: "Body Cabin",     fr: "Cabine corps" },
    waxing:   { en: "Wax Cabin",      fr: "Cabine épilation" },
    lycon:    { en: "Lycon Cabin",    fr: "Cabine Lycon" },
    moroccan: { en: "Moroccan Hammam",fr: "Hammam marocain" },
  };

  return (
    <section
      id={cat.id}
      data-cat={cat.id}
      data-screen-label={`Services / ${cat.en}`}
      className="cat"
    >
      <div className="cat-grid">
        {/* Left — context image + tag */}
        <Reveal>
          <div className="cat-img-stack">
            <div className="cat-img-frame">
              <img src={imageMap[cat.id]} alt={L(imageCaption[cat.id], lang)} />
              <div className="cat-img-tag">
                <span className="micro" style={{ color: "var(--champagne-gold)" }}>{String(idx + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: 12, color: "var(--cream)" }}>{L(imageCaption[cat.id], lang)}</span>
              </div>
            </div>
            <div className="cat-img-marker display">{cat.id === "moroccan" ? "Hammam" : L({ en: cat.en, fr: cat.fr }, lang)}</div>
          </div>
        </Reveal>

        {/* Right — service list */}
        <Reveal delay={120}>
          <div className="cat-list">
            <div className="cat-head">
              <Eyebrow>
                {String(idx + 1).padStart(2, "0")} <span style={{ color: "var(--ink-30)" }}>/</span> {window.VFPE_DATA.services.length.toString().padStart(2, "0")}
              </Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", margin: "16px 0 0", lineHeight: 1.05 }}>
                {L({ en: cat.en, fr: cat.fr }, lang)}
              </h2>
              {!cat.verified && (
                <div className="cat-unverified">
                  <span className="dot" />
                  <span>{lang === "fr"
                    ? "Tarifs sur devis — confirmés sur Fresha à la réservation."
                    : "Prices on request — confirmed on Fresha at booking."}</span>
                </div>
              )}
            </div>

            <ul className="srv-list">
              {cat.items.map((item, i) => (
                <ServiceRow key={i} item={item} lang={lang} verified={cat.verified} />
              ))}
            </ul>

            <div className="cat-foot">
              <a href={window.VFPE_DATA.links.fresha} target="_blank" rel="noopener" className="btn btn-gold btn-sm">
                {t.bookOnFresha} <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .cat { padding: clamp(56px, 8vw, 112px) 0; border-bottom: 1px solid var(--gold-faint); }
        .cat:last-child { border-bottom: 0; }
        .cat-grid {
          display: grid;
          grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
          gap: clamp(28px, 5vw, 80px);
          align-items: start;
        }
        .cat-img-stack { position: sticky; top: 180px; }
        .cat-img-frame {
          position: relative;
          aspect-ratio: 4 / 5;
          overflow: hidden;
          border: 1px solid var(--gold-hairline);
          background: var(--blush-nude);
        }
        .cat-img-frame img { width: 100%; height: 100%; object-fit: cover; }
        .cat-img-tag {
          position: absolute;
          bottom: 14px;
          left: 14px;
          background: rgba(28,26,24,0.78);
          padding: 8px 12px;
          display: flex;
          flex-direction: column;
          gap: 2px;
          backdrop-filter: blur(6px);
        }
        .cat-img-marker {
          font-style: italic;
          font-size: clamp(28px, 4vw, 42px);
          color: var(--champagne-gold);
          margin-top: 24px;
          letter-spacing: -0.01em;
        }

        .cat-head { padding-bottom: 36px; border-bottom: 1px solid var(--gold-hairline); }
        .cat-unverified {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 20px;
          padding: 8px 14px;
          background: var(--cream);
          border: 1px solid var(--gold-faint);
          font-size: 12px;
          color: var(--ink-70);
        }
        .cat-unverified .dot { width: 6px; height: 6px; background: var(--rose-muted); border-radius: 50%; }

        .srv-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .cat-foot {
          margin-top: 32px;
          padding-top: 28px;
          border-top: 1px solid var(--gold-hairline);
        }
        @media (max-width: 880px) {
          .cat-grid { grid-template-columns: 1fr; }
          .cat-img-stack { position: static; }
          .cat-img-frame { aspect-ratio: 16 / 10; }
        }
      `}</style>
    </section>
  );
}

// ── Single service row ─────────────────────────────────────────

function ServiceRow({ item, lang, verified }) {
  const t = window.VFPE_DATA.t[lang];
  return (
    <li className={cx("srv-row", item.signature && "srv-row-signature", item.featured && "srv-row-featured")}>
      <div className="srv-row-name">
        <span className="srv-row-title">{L(item.name, lang)}</span>
        {item.signature && (
          <span className="srv-signature">{lang === "fr" ? "Signature" : "Signature"}</span>
        )}
      </div>
      <div className="srv-row-dots" aria-hidden />
      <div className="srv-row-meta">
        {item.duration && <span className="srv-row-duration tabular">{item.duration}</span>}
        <span className="srv-row-price tabular">
          {verified && item.price != null
            ? (
              <>
                {item.from && <span className="srv-from">{t.from}</span>}
                <span className="srv-price-value">{t.aed} {item.price.toLocaleString(lang === "fr" ? "fr-FR" : "en-US")}</span>
              </>
            )
            : <span className="srv-onrequest">{t.bookOnFresha}</span>
          }
        </span>
      </div>

      <style>{`
        .srv-row {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) auto;
          align-items: baseline;
          gap: 16px;
          padding: 18px 0;
          border-bottom: 1px solid var(--gold-faint);
        }
        .srv-row:last-child { border-bottom: 0; }
        .srv-row-name { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
        .srv-row-title { font-size: 16px; color: var(--noir); }
        .srv-row-signature .srv-row-title { color: var(--noir); font-weight: 500; }
        .srv-signature {
          display: inline-block;
          font-size: 9.5px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          padding: 3px 8px;
          background: var(--champagne-gold);
          color: var(--noir);
          font-weight: 600;
        }
        .srv-row-dots {
          height: 1px;
          background-image: radial-gradient(circle, var(--ink-15) 1px, transparent 1px);
          background-size: 6px 1px;
          background-repeat: repeat-x;
          background-position: center;
          align-self: center;
        }
        .srv-row-meta {
          display: inline-flex;
          align-items: baseline;
          gap: 20px;
          justify-content: flex-end;
        }
        .srv-row-duration {
          font-size: 12px;
          color: var(--ink-50);
          letter-spacing: 0.04em;
        }
        .srv-row-price { font-size: 16px; color: var(--noir); display: inline-flex; gap: 6px; align-items: baseline; }
        .srv-from { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); }
        .srv-price-value { font-weight: 500; }
        .srv-onrequest {
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-50);
          border-bottom: 1px solid var(--champagne-gold);
          padding-bottom: 2px;
          font-weight: 500;
        }
        @media (max-width: 600px) {
          .srv-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
          .srv-row-dots { display: none; }
          .srv-row-meta { justify-content: flex-start; gap: 14px; }
        }
      `}</style>
    </li>
  );
}

Object.assign(window, { ServicesPage });