// Pretty Rare — A note from the clinic (human, signed, offset)

function SiteNote() {
  return (
    <section data-screen-label="note" className="section">
      <div className="wrap" style={{
        display: 'grid', gridTemplateColumns: '0.78fr 1.22fr', gap: 84,
        alignItems: 'start',
      }}>
        {/* portrait, dropped a little for asymmetry, on a soft block */}
        <div style={{ position: 'relative', paddingTop: 40 }}>
          <div style={{
            position: 'absolute', top: 0, left: -24, right: 36, bottom: 56,
            background: 'var(--bg-blush)', borderRadius: 16,
          }} />
          <div style={{
            position: 'relative',
            aspectRatio: '4/5', borderRadius: 14, overflow: 'hidden',
            boxShadow: 'var(--shadow-md)',
          }}>
            <div style={{
              width: '100%', height: '100%',
              backgroundImage: `url('assets/imagery/note.jpg')`,
              backgroundSize: 'cover', backgroundPosition: 'center top',
            }} />
          </div>
        </div>

        <div style={{ paddingTop: 12 }}>
          <div className="kicker" style={{ marginBottom: 30 }}>Welcome to Pretty Rare</div>

          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(26px, 2.7vw, 38px)', lineHeight: 1.32,
            letterSpacing: '-0.012em', color: 'var(--fg)', margin: 0,
            maxWidth: 720, textWrap: 'balance',
          }}>
            Pretty Rare is where luxury <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>feels personal</span>.
          </p>

          <p style={{
            fontFamily: 'var(--font-sans)', fontWeight: 400,
            fontSize: 17, lineHeight: 1.74, color: 'var(--fg-soft)',
            margin: '26px 0 0 0', maxWidth: 600,
          }}>
            Every appointment begins with listening. We take the time to understand your
            concerns, your goals, and the way you want to feel before recommending a
            treatment pathway. The experience is warm, professional, and intentionally
            boutique.
          </p>

          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 16 }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
              fontSize: 28, color: 'var(--accent)', lineHeight: 1,
            }}>Brooke</span>
            <span style={{ width: 28, height: 1, background: 'var(--border-gold)' }} />
            <span style={{
              fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-muted)',
              letterSpacing: '0.02em',
            }}>Registered Nurse &amp; Founder</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SiteNote = SiteNote;