// Pretty Rare Boutique — Experience (responsive dark photo)

function SiteExperience() {
  const mobile = useMobile();
  return (
    <section data-screen-label="experience" style={{
      position: 'relative',
      minHeight: mobile ? '60vh' : '88vh',
      backgroundImage: `url('assets/imagery/treatment-room-01.jpg')`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      display: 'flex', alignItems: 'flex-end',
      padding: mobile ? '60px 24px 48px' : '120px 32px 96px',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(11,11,11,0) 30%, rgba(11,11,11,0.66) 100%)',
        pointerEvents: 'none',
      }} />

      <div className="wrap" style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
        gap: mobile ? 24 : 64,
        alignItems: 'flex-end',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 11,
            letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500,
            color: 'rgba(248, 245, 244, 0.92)', marginBottom: 20,
          }}>The experience</div>
          <h2 className="h-display" style={{
            color: 'var(--pr-off-100)',
            fontSize: mobile ? 'clamp(36px, 9vw, 56px)' : 'clamp(48px, 6.5vw, 92px)',
          }}>
            A space designed<br/>
            <span className="thin" style={{ color: 'var(--pr-blush-200)' }}>to feel like home.</span>
          </h2>
        </div>

        <p style={{
          fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: mobile ? 15 : 16, lineHeight: 1.7,
          color: 'rgba(248, 245, 244, 0.92)',
          maxWidth: 360, margin: 0,
        }}>
          Silk robes. Complimentary tea. Treatment rooms that breathe. Every detail
          is shaped around one belief. Care should feel intimate, never clinical.
        </p>
      </div>
    </section>
  );
}

window.SiteExperience = SiteExperience;