// Silk and Blow — service menu, per salon. A menu, not a booking shortcut:
// the booking system cannot deep-link to a service, so there are no per-row Book buttons.
function Services({ salons, onReserve }) {
  const [loc, setLoc] = React.useState('lawrenceville');
  const [filter, setFilter] = React.useState('all');

  const list = MENU[loc] || [];
  const shown = filter === 'all' ? list : list.filter((s) => s.cat === filter);
  const current = salons.find((s) => s.id === loc);

  return (
    <section id="services" className="section bleed" style={{ position: 'relative', background: 'var(--white)', overflow: 'hidden' }}>
      <div className="orb orb-sage" style={{ width: 420, height: 420, top: '10%', right: '-160px', opacity: 0.45 }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="reveal" style={{ maxWidth: 640 }}>
          <span className="kicker-num">02 — The Menu</span>
          <h2 className="display" style={{ fontSize: 'clamp(34px,4.4vw,62px)', marginTop: 16 }}>Services, simply priced</h2>
          <p className="lead" style={{ marginTop: 16, maxWidth: 540 }}>Every service is built around the health of your hair &mdash; low heat, clean product, and a finish that lasts. The two salons keep their own menus, so pick yours below.</p>
        </div>

        <div className="menu-bars" data-d="1">
          <div className="gtabs" role="tablist" aria-label="Choose salon menu">
            {salons.map((s) => (
              <button key={s.id} role="tab" aria-selected={loc === s.id} className={'gtab' + (loc === s.id ? ' on' : '')} onClick={() => setLoc(s.id)}>
                <Icon name="pin" size={14} /> {s.city}
              </button>
            ))}
          </div>
          <div className="gtabs" role="tablist" aria-label="Filter services">
            {MENU_FILTERS.map((f) => (
              <button key={f.id} role="tab" aria-selected={filter === f.id} className={'gtab' + (filter === f.id ? ' on' : '')} onClick={() => setFilter(f.id)}>{f.label}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', marginTop: 'clamp(22px,3vw,34px)' }}>
          {shown.map((s, i) => (
            <article key={s.id} className="menu-row">
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--champagne-300)', letterSpacing: '-0.02em' }}>{String(i + 1).padStart(2, '0')}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px,2.2vw,31px)', color: 'var(--slate)', margin: 0, letterSpacing: '-0.015em' }}>{s.name}</h3>
                  {s.tag && <span className={'tagbadge' + (s.tagTone === 'sky' ? ' tagbadge--sky' : '')}>{s.tag}</span>}
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--slate-45)' }}><Icon name="clock" size={12} /> {s.time}</span>
                </div>
                <p style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--slate-70)', lineHeight: 1.5, margin: 0, maxWidth: 620 }}>{s.desc}</p>
              </div>
              <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4, fontFamily: 'var(--font-display)' }}>
                <span style={{ fontSize: 26, color: 'var(--slate)', letterSpacing: '-0.02em' }}>${s.price}</span>
              </span>
            </article>
          ))}
        </div>

        <div className="menu-cta">
          <WalkInNote />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
            <button className="btn" onClick={onReserve}>Reserve your chair</button>
            <a className="linkline" href="#membership" style={{ textDecoration: 'none' }}>Join Press Club <Icon name="arrowRight" size={14} className="arr" /></a>
          </div>
        </div>
        <p style={{ fontFamily: 'var(--font-display)', fontSize: 13.5, color: 'var(--slate-45)', margin: '18px 0 0', maxWidth: 620 }}>Prices shown are member prices. Services and pricing vary between salons; the full menu for each is in the booking system.</p>
      </div>
    </section>
  );
}

Object.assign(window, { Services });