// Facette — Treatments page

const { TREATMENT_CATEGORIES: CATS } = window.FacetteData;

function Treatments({ branch, openBook, isMobile }) {
  const [active, setActive] = React.useState(CATS[0].id);
  const refs = React.useRef({});

  const scrollTo = (id) => {
    setActive(id);
    const el = refs.current[id];
    if (el) {
      // scroll within the closest scroll container
      const container = el.closest('.stage-desktop, .ios-scroll, .site') || document.scrollingElement;
      if (container && container !== document.scrollingElement) {
        const containerRect = container.getBoundingClientRect();
        const elRect = el.getBoundingClientRect();
        const offset = elRect.top - containerRect.top + container.scrollTop - 140;
        container.scrollTo({ top: offset, behavior: 'smooth' });
      } else {
        el.scrollIntoView({ block: 'start' });
      }
    }
  };

  return (
    <React.Fragment>
      {/* HERO */}
      <section className="tx-hero">
        <div className="tx-hero-inner">
          <div className="eyebrow"><span className="dot"></span>The full menu · with prices, finally</div>
          <h1>Every facial,<br/><em>every price.</em></h1>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: 48, alignItems: 'end' }}>
            <p className="lede" style={{ maxWidth: '64ch' }}>
              No JPG menus, no “DM for price.” Pick a category to jump in.
              Every row is bookable — tap to open the calendar.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
              <div className="chip"><span className="star">★</span> 4.9 on Fresha</div>
              <div className="chip">From AED 385</div>
            </div>
          </div>
        </div>
      </section>

      {/* CAT NAV */}
      <div className="tx-catnav">
        <div className="tx-catnav-inner">
          {CATS.map((c) => (
            <button
              key={c.id}
              className={active === c.id ? 'active' : ''}
              onClick={() => scrollTo(c.id)}>
              {c.label}
            </button>
          ))}
        </div>
      </div>

      {/* CATEGORIES */}
      {CATS.map((c) => (
        <section key={c.id} className="tx-cat" ref={(el) => { refs.current[c.id] = el; }} id={`cat-${c.id}`}>
          <div className="tx-cat-inner">
            <div className="tx-cat-head">
              <div>
                <div className="eyebrow"><span className="dot"></span>{c.label}</div>
                <h2 dangerouslySetInnerHTML={{ __html: c.name.replace(/&/g, '<em>&</em>') }} />
              </div>
              <div className="tch-desc">{c.desc}</div>
            </div>
            <div className="tx-rows">
              {c.items.map((it, i) => (
                <TxRow key={i} item={it} onBook={() => openBook(it)} />
              ))}
            </div>
          </div>
        </section>
      ))}

      {/* Note */}
      <section className="section-tight" style={{ background: 'var(--bg-warm)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: 32, alignItems: 'center' }}>
            <div className="eyebrow"><span className="dot"></span>A note on prices</div>
            <div>
              <p className="body" style={{ color: 'var(--ink)', marginBottom: 12 }}>
                All prices in AED. Prices include VAT. <strong>“Price on request”</strong> rows are signature facials priced after a complimentary consultation —
                no surprise add-ons, no commission upsell.
              </p>
              <p className="body" style={{ color: 'var(--ink-2)' }}>
                Members save 20% on every facial booked outside their plan, and 10% on retail products in-branch.
              </p>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function TxRow({ item, onBook }) {
  return (
    <div className="tx-row" onClick={onBook}>
      <div className="txr-thumb"><Img src={item.thumb} alt={item.name} /></div>
      <div className="txr-body">
        <div className="txr-name">{item.name}</div>
        <div className="txr-desc">{item.desc}</div>
      </div>
      <div className="txr-meta">
        <div>{item.duration}</div>
        {formatPrice(item)}
      </div>
      <div className="txr-cta">
        <button className="btn btn-secondary btn-sm" onClick={(e) => { e.stopPropagation(); onBook(); }}>
          {item.tbc ? 'Enquire' : 'Book'}
        </button>
      </div>
    </div>
  );
}

window.Treatments = Treatments;