/* eslint-disable */
// SERVICES PAGE

const PB_S = window.PB_DATA;

function ServicesNav({ active, onJump }) {
  return (
    <aside className="svc-nav" aria-label="Service categories">
      {PB_S.categories.map((c) => (
        <a
          key={c.id}
          href={'#cat-' + c.id}
          className={active === c.id ? 'is-active' : ''}
          onClick={(e) => { e.preventDefault(); onJump(c.id); }}
        >
          <span>{c.name}</span>
          <span className="ct">{String(c.services.length).padStart(2, '0')}</span>
        </a>
      ))}
    </aside>
  );
}

function ServiceRow({ s }) {
  const p = formatPrice(s);
  return (
    <div className={'svc-row' + (s.signature ? ' is-signature' : '')}>
      <div className="dur">{s.dur}</div>
      <div>
        <div className="name">{s.name}</div>
        <div className="desc">{s.desc}</div>
      </div>
      <div />
      <div className="price">
        {p.from && <span className="from">From</span>}
        {p.consult ? <span className="consult">on consultation</span> : p.label}
      </div>
    </div>
  );
}

function PageServices() {
  const [active, setActive] = React.useState('hair-colour');

  React.useEffect(() => {
    function onScroll() {
      const cats = PB_S.categories;
      for (let i = cats.length - 1; i >= 0; i--) {
        const el = document.getElementById('cat-' + cats[i].id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top < 200) { setActive(cats[i].id); break; }
      }
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const jump = (id) => {
    const el = document.getElementById('cat-' + id);
    if (el) window.scrollTo({ top: el.offsetTop - 100, behavior: 'smooth' });
  };

  return (
    <div data-screen-label="Services">
      <section className="page-head shell-wide">
        <div className="crumbs">
          <a href="#/">Home</a><span className="sep">/</span>Services
        </div>
        <h1>Every<br />service, <em>priced</em>.</h1>
        <p className="sub">
          Our full menu — colour prices verified verbatim, every other category
          quoted on consultation by the specialist who will perform it. Complimentary
          consultation with every booked appointment.
        </p>
      </section>

      <section className="shell-wide">
        <div className="svc-layout">
          <ServicesNav active={active} onJump={jump} />
          <div>
            {PB_S.categories.map((c) => (
              <section key={c.id} id={'cat-' + c.id} className="svc-cat">
                <div className="svc-cat-head">
                  <div>
                    <div className="svc-cat-head__num"></div>
                    <h2>{c.name}</h2>
                  </div>
                  <span className="num">— {c.num} / 07</span>
                </div>
                <p className="lede" style={{ marginBottom: 24, maxWidth: '72ch' }}>{c.blurb}</p>
                <div>
                  {c.services.map((s, i) => <ServiceRow key={i} s={s} />)}
                </div>
              </section>
            ))}

            <div style={{ marginTop: 56, padding: 32, border: '1px solid var(--hairline-strong)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
              <div>
                <div className="eyebrow"><span className="dot" />A note on pricing</div>
                <p className="lede" style={{ marginTop: 12 }}>
                  Hair colour is published in full. Nail, facial, lash, brow and body prices
                  live in our booking flow — choose your service to see the exact quote.
                </p>
              </div>
              <a href="#/book" className="btn btn-primary btn-arrow">Open booking</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageServices });