// AboutBlock.jsx — about-the-Dr-Fs section, responsive
function ChAboutBlock({ onCta }) {
  const isMobile = window.useIsMobile();
  return (
    <section style={{
      background: '#F0EEE6',
      padding: isMobile ? '64px 24px' : '100px 40px',
      fontFamily: 'Montserrat, sans-serif',
      position: 'relative', overflow: 'hidden',
    }}>
      <img src="/assets/logo-mint-nb.png" alt=""
           style={{
             position: 'absolute', right: -80, top: 40, width: 360, opacity: 0.08, pointerEvents: 'none',
           }} />

      <div style={{
        maxWidth: 1100, margin: '0 auto', position: 'relative',
        display: isMobile ? 'flex' : 'grid',
        flexDirection: isMobile ? 'column' : undefined,
        gridTemplateColumns: isMobile ? undefined : '0.9fr 1.1fr',
        gap: isMobile ? 24 : 64,
        alignItems: isMobile ? 'flex-start' : 'center',
      }}>
        <div>
          <div style={{
            fontWeight: 700, fontSize: 11, letterSpacing: '3.5px', textTransform: 'uppercase',
            color: '#1B544F', marginBottom: 16,
          }}>About</div>
          <h2 style={{
            fontWeight: 800, fontSize: isMobile ? 36 : 48, lineHeight: 1.1, letterSpacing: '-0.6px',
            color: '#1A1A1A', margin: 0,
          }}>
            About the<br/>DrF's.
          </h2>
        </div>

        <div>
          <p style={{
            fontWeight: 400, fontSize: isMobile ? 15 : 17, lineHeight: 1.75, color: '#2c2c2c',
            margin: 0, maxWidth: 580,
          }}>
            Dr. Lisa Ferrari and Dr. Carla Fry, affectionately known as <strong style={{ color: '#1B544F' }}>the DrF's</strong>,
            are clinical psychologists, authors, speakers, and experts in child and family psychology.
            Whether they're teaching at universities, providing psychological treatment at the
            Vancouver Psychology Centre, speaking to multimedia audiences, or writing books,
            Dr. Fry and Dr. Ferrari are devoted to sharing what they know.
          </p>

          <div style={{ marginTop: 28 }}>
            <ChButton variant="secondary" onClick={() => onCta && onCta('about')}>
              Read their full bios
            </ChButton>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ChAboutBlock = ChAboutBlock;