// Pretty Rare Boutique — Experience

function SiteExperience() {
  const mobile = useMobile();
  return (
    <section data-screen-label="experience" style={{
      position: 'relative',
      minHeight: mobile ? '65vh' : '92vh',
      backgroundImage: `url('assets/imagery/treatment-room-01.jpg')`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundAttachment: 'scroll',
      display: 'flex',
      alignItems: 'flex-end',
      overflow: 'hidden',
    }}>
      {/* Deep gradient — bottom heavy */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(11,11,11,0) 25%, rgba(11,11,11,0.55) 65%, rgba(11,11,11,0.82) 100%)',
        pointerEvents: 'none',
      }} />

      <div className="wrap" style={{ position: 'relative', zIndex: 1, paddingBottom: mobile ? 52 : 80, width: '100%' }}>
        <div style={{ maxWidth: mobile ? '100%' : '70%' }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500, color: 'rgba(248,245,244,0.7)', marginBottom: 20 }}>The experience</div>

          <h2 style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: mobile ? 'clamp(44px, 11vw, 64px)' : 'clamp(60px, 7vw, 108px)',
            lineHeight: 0.93, letterSpacing: '-0.04em',
            color: 'var(--pr-off-100)', margin: '0 0 32px',
          }}>
            Nothing clinical<br/>
            <span style={{ fontWeight: 200, color: 'var(--pr-blush-300)', letterSpacing: '-0.025em' }}>about any of it.</span>
          </h2>

          <p style={{
            fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: mobile ? 15 : 17, lineHeight: 1.7,
            color: 'rgba(248,245,244,0.8)',
            maxWidth: 460, margin: 0,
          }}>
            Silk robes. Complimentary tea. A private suite where nothing is rushed. Every detail is shaped around one belief: that care should feel warm and personal, never clinical.
          </p>
        </div>
      </div>
    </section>
  );
}

window.SiteExperience = SiteExperience;