/* ===== About — mission / vision / values ===== */
function About() {
  const values = [
    ['hand-heart', 'Respect', 'Valuing the unique journey of each individual.'],
    ['heart-handshake', 'Compassion', 'Empathetic care that goes beyond treatment.'],
    ['shield-check', 'Integrity', 'Ethical practice and honesty in all we do.'],
    ['sparkles', 'Excellence', 'We strive to do our best in all things.'],
  ];
  return (
    <div id="about" style={{ background: 'var(--hs-teal)', position: 'relative', overflow: 'hidden', marginTop: 24 }}>
      {/* corner blobs */}
      <div style={{ position: 'absolute', right: -80, top: -90, width: 260, height: 230, background: 'rgba(143,192,58,.22)', borderRadius: '46% 54% 60% 40%/52% 44% 56% 48%' }} />
      <div style={{ position: 'absolute', left: -70, bottom: -90, width: 220, height: 200, background: 'rgba(240,190,0,.16)', borderRadius: '50%' }} />
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '74px 32px', position: 'relative', zIndex: 1 }}>
        <div className="hs-about-grid" style={{ display: 'grid', gridTemplateColumns: '.85fr 1.15fr', gap: 60, alignItems: 'center' }}>
          <div>
            <Eyebrow color="var(--hs-gold)">Who we are</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3vw,38px)', color: '#fff', margin: '14px 0 18px', lineHeight: 1.15 }}>
              A leading pillar in holistic mental well-being
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.7, color: 'rgba(255,255,255,.82)', margin: 0 }}>
              We provide a warm and welcoming atmosphere where privacy, confidentiality, and personalized mental health care is a commitment.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {values.map(([ic, t, d]) => (
              <div key={t} style={{ background: 'rgba(255,255,255,.07)', border: '1px solid rgba(255,255,255,.12)', borderRadius: 'var(--r-lg)', padding: '22px 22px' }}>
                <Icon name={ic} size={26} color="var(--hs-gold)" />
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#fff', margin: '12px 0 6px' }}>{t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.5, color: 'rgba(255,255,255,.72)' }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { About });