// Silk and Blow — Booking entry module: walk-in first, member booking second, per salon
function Booking({ salons, onReserve, suitesHref }) {
  return (
    <section id="booking" className="bleed" style={{ position: 'relative', display: 'flow-root', background: 'var(--grad-champagne)', overflow: 'visible', paddingBottom: 'clamp(64px, 9vw, 132px)' }}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0 }}>
        <div className="orb orb-sky orb-float" style={{ width: 420, height: 420, top: '6%', right: '-100px', opacity: 0.4 }} />
        <div className="orb orb-champ" style={{ width: 360, height: 360, bottom: '-120px', left: '-60px', opacity: 0.5 }} />
      </div>

      <BenefitStrip dark={false} />

      <div className="wrap booking-body" style={{ position: 'relative', zIndex: 2, marginTop: 'clamp(40px, 5vw, 64px)' }}>
        <div className="glass-tint reveal" style={{ padding: 'clamp(26px, 4vw, 52px)' }}>
          <div style={{ marginBottom: 30, maxWidth: 640 }}>
            <span className="kicker-num">01 — Walk in or reserve</span>
            <h2 className="display" style={{ fontSize: 'clamp(32px,4vw,56px)', marginTop: 14 }}>Come as you are</h2>
            <p className="lead" style={{ marginTop: 14, maxWidth: 540 }}>Atlanta&rsquo;s walk-in silk press and blowout bar. No appointment, no deposit, no pressure &mdash; every chair in both salons takes walk-ins all day.</p>
            <div style={{ marginTop: 22, paddingTop: 22, borderTop: '1px solid rgba(194,163,94,.34)' }}>
              <WalkInNote />
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
            {salons.map((l) => (
              <div key={l.id} className="choice glass glass-strong glass-sm" style={{ padding: 0, overflow: 'hidden', textAlign: 'left', display: 'flex', flexDirection: 'column' }}>
                <div className="tile" style={{ height: 168 }}>
                  <img src={l.image} alt={l.city} />
                </div>
                <div style={{ padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--gold-deep)' }}>
                    <Icon name="pin" size={15} />
                    <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{l.city}, GA</span>
                  </span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--slate-70)', marginTop: 9, lineHeight: 1.5 }}>{l.address}</span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--slate-45)', marginTop: 6 }}>{l.landmark}</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 12, fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--slate-45)' }}>
                    <Icon name="clock" size={13} /> Walk-ins all day
                  </span>
                  <button className="btn btn--sm btn--full" style={{ marginTop: 'auto', marginBlockStart: 20 }} onClick={onReserve}>Reserve your chair</button>
                </div>
              </div>
            ))}
          </div>

          <p style={{ fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.6, color: 'var(--slate-70)', margin: '22px 0 0', maxWidth: 620 }}>
            Not a member yet? You can still walk in today &mdash; or <a href="#membership">join Press Club</a> and reserve from then on. Looking for Salon Suites in Duluth? <a href={suitesHref || '/suites.html'}>Book directly with a stylist</a> &mdash; no membership needed there.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Booking });