// Pretty Rare — Why clients choose us (specific reasons, editorial list)

const REASONS = [
  { t: 'Registered Nurse-led', d: 'Your care is guided by a qualified registered nurse, with professional standards at the centre of everything.' },
  { t: 'Safety and suitability first', d: 'Every recommendation begins with assessing whether a treatment is genuinely right for you.' },
  { t: 'Boutique, personal service', d: 'A small, considered clinic where you are known by name and never treated like a number.' },
  { t: 'Natural-looking treatment planning', d: 'Considered, restrained planning designed around a soft, refreshed appearance.' },
  { t: 'A calm, feminine environment', d: 'A beautiful, unhurried space created to feel welcoming, private and reassuring.' },
  { t: 'Gold Coast based', d: 'Boutique cosmetic and wellness care, here for you in Palm Beach on the Gold Coast.' },
];

function SiteWhy() {
  return (
    <section data-screen-label="why" className="section">
      <div className="wrap" style={{
        display: 'grid', gridTemplateColumns: '0.82fr 1.18fr', gap: 80, alignItems: 'start',
      }}>
        <div style={{ position: 'sticky', top: 120 }}>
          <div className="kicker" style={{ marginBottom: 26 }}>Why Pretty Rare</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(30px, 3.4vw, 46px)', lineHeight: 1.1,
            letterSpacing: '-0.016em', color: 'var(--fg)', margin: 0,
          }}>
            Considered care.<br/>Beautiful details.<br/>
            <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>Professional guidance.</span>
          </h2>
          <p style={{
            fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 16,
            lineHeight: 1.68, color: 'var(--fg-soft)', margin: '20px 0 0 0', maxWidth: 340,
          }}>
            The details that make Pretty Rare feel like somewhere you want to return to.
          </p>
        </div>

        <div>
          {REASONS.map((r, i) => (
            <div key={r.t} style={{
              display: 'grid', gridTemplateColumns: '56px 1fr', gap: 22,
              padding: i === 0 ? '0 0 34px 0' : '34px 0',
              borderTop: i === 0 ? 'none' : '1px solid var(--border)',
              alignItems: 'start',
            }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
                fontSize: 30, color: 'var(--accent)', lineHeight: 1.1,
              }}>{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 600,
                  fontSize: 'clamp(22px, 2vw, 27px)', letterSpacing: '-0.01em',
                  lineHeight: 1.18, color: 'var(--fg)', margin: 0,
                }}>{r.t}</h3>
                <p style={{
                  fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 15.5,
                  lineHeight: 1.66, color: 'var(--fg-soft)', margin: '12px 0 0 0', maxWidth: 540,
                }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteWhy = SiteWhy;