// Silk and Blow — Press Club 25 Founders Edition (homepage section)
function PressClub({ onJoin }) {
  return (
    <section id="membership" className="section bleed" style={{ position: 'relative', background: 'var(--champagne-50)', borderTop: '1px solid rgba(194,163,94,.28)', borderBottom: '1px solid rgba(194,163,94,.28)', overflow: 'hidden' }}>
      <div className="orb orb-champ orb-float" style={{ width: 420, height: 420, top: '-140px', right: '6%', opacity: 0.45 }} />
      <div className="wrap mem-grid" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: 'minmax(0,1.04fr) minmax(0,.96fr)', gap: 'clamp(34px,5vw,84px)', alignItems: 'center' }}>
        <div>
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
            <span className="gold-tick" /><span className="gold-eyebrow">Press Club 25 Founders Edition</span>
          </div>
          <h2 className="display reveal" data-d="1" style={{ fontSize: 'clamp(34px,4.4vw,62px)', margin: 0 }}>Stop planning your day<br />around your hair.</h2>
          <div className="gold-rule reveal" data-d="1" style={{ maxWidth: 200, marginTop: 26 }} />
          <p className="lead reveal" data-d="2" style={{ marginTop: 26, maxWidth: 560 }}>Walk-ins will always be how Silk &amp; Blow works. Press Club is for the woman whose week is already full &mdash; the one who would rather know her chair is held than hope the room is quiet when she arrives.</p>
          <p className="lead reveal" data-d="2" style={{ marginTop: 16, maxWidth: 560 }}>Members book online. That is the whole idea: pick your time, come in, sit down. No waiting on the room, no building your afternoon around a maybe.</p>
          <p className="reveal" data-d="3" style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', fontFamily: 'var(--font-display)', margin: '28px 0 0' }}>
            <span style={{ fontSize: 'clamp(24px,2.4vw,32px)', color: 'var(--gold-deep)', letterSpacing: '-0.02em' }}>$99 per month</span>
            <span style={{ fontSize: 16, color: 'var(--slate-45)' }}>same price at both salons.</span>
          </p>
          <p className="reveal" data-d="3" style={{ fontFamily: 'var(--font-ui)', fontSize: 14, letterSpacing: '0.02em', lineHeight: 1.6, color: 'var(--slate-70)', margin: '12px 0 0', maxWidth: 520 }}>Available at Lawrenceville and East Point only. Press Club is not a Salon Suites benefit &mdash; suites are booked directly with each stylist, no membership.</p>
          <div className="reveal mem-cta" data-d="4" style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 14 }}>
            <button className="btn btn--gold" onClick={onJoin}>Join Press Club <Icon name="arrowRight" size={16} /></button>
          </div>
        </div>
        <div className="reveal" data-d="2">
          <div className="tile mem-photo" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--glass-radius)' }}>
            <img src="/assets/images/member-result.png" alt="A member's freshly finished silk press in the salon chair" style={{ objectPosition: '50% 20%' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 52%, rgba(20,28,40,.42))' }} />
            <span className="tagbadge" style={{ position: 'absolute', top: 18, left: 18 }}>Members Only Booking</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PressClub });