// Pretty Rare Boutique — Intro (editorial two-column)

function SiteIntro() {
  const mobile = useMobile();
  return (
    <section data-screen-label="intro" style={{
      padding: mobile ? '80px 0' : '120px 0',
      background: 'var(--bg)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="wrap">
        {mobile ? (
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>You belong here</div>
            <h2 className="h-1" style={{ marginBottom: 28 }}>
              We know choosing a clinic<br/><span className="thin">is personal.</span>
            </h2>
            <p className="body">You are trusting someone with your face, your confidence, and your sense of self. That trust is something we hold carefully. At Pretty Rare, every visit begins with a genuine conversation. No pressure, no agenda, just listening.</p>
            <p className="body" style={{ marginTop: 16 }}>You will never feel rushed here. You will never feel sold to. And if a treatment is not right for you, we will say so.</p>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: 32, color: 'var(--accent)', lineHeight: 1.3, margin: '32px 0 0' }}>That is our promise to you.</p>
          </div>
        ) : (
          /* Editorial two-column — headline left, body right */
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'end' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 32 }}>You belong here</div>
              <h2 style={{
                fontFamily: 'var(--font-sans)', fontWeight: 700,
                fontSize: 'clamp(52px, 5.5vw, 80px)',
                lineHeight: 0.95, letterSpacing: '-0.04em',
                color: 'var(--fg)', margin: 0,
              }}>
                We know<br/>choosing a<br/>clinic is<br/><span style={{ fontWeight: 200, color: 'var(--accent)', letterSpacing: '-0.025em' }}>deeply personal.</span>
              </h2>
            </div>
            <div>
              <p className="body" style={{ marginTop: 0 }}>You are trusting someone with your face, your confidence, and your sense of self. That trust is something we hold carefully. At Pretty Rare, every visit begins with a genuine conversation. No pressure, no agenda, just listening.</p>
              <p className="body" style={{ marginTop: 20 }}>You will never feel rushed here. You will never feel sold to. And if a treatment is not right for you, we will say so.</p>
              <p style={{ fontFamily: 'var(--font-script)', fontSize: 'clamp(32px, 3vw, 44px)', color: 'var(--accent)', lineHeight: 1.3, margin: '36px 0 0' }}>That is our promise to you.</p>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.SiteIntro = SiteIntro;