// Hero.jsx — CH LANDING photo, no pill badge, responsive
function ChHero({ onCta }) {
  const isMobile = window.useIsMobile();

  return (
    <section style={{
      background: '#F0EEE6',
      padding: isMobile ? '52px 24px 0' : '90px 40px 110px',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: 'Montserrat, sans-serif',
    }}>
      <div style={{
        position: 'absolute', right: -160, top: -120,
        width: 680, height: 680, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(127,214,207,0.13) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div style={{
        maxWidth: 1200, margin: '0 auto', position: 'relative',
        display: isMobile ? 'flex' : 'grid',
        flexDirection: isMobile ? 'column' : undefined,
        gridTemplateColumns: isMobile ? undefined : '1fr 1fr',
        gap: isMobile ? 40 : 64,
        alignItems: 'center',
      }}>

        {/* LEFT — text */}
        <div>
          <h1 style={{
            fontWeight: 800,
            fontSize: isMobile ? 38 : 62,
            lineHeight: 1.04,
            letterSpacing: isMobile ? '-0.5px' : '-1.5px',
            color: '#1A1A1A', margin: '0 0 20px',
          }}>
            REAL{' '}
            <span style={{ color: '#1B544F' }}>PSYCHOLOGISTS.</span>
            <br/>Real Science.
            <br/>Real Life.
          </h1>

          <p style={{
            fontWeight: 400,
            fontSize: isMobile ? 15 : 17,
            lineHeight: 1.8, color: '#666',
            margin: '0 0 32px', maxWidth: 480,
          }}>
            Welcome to Clinically Happy, a platform by two real psychologists bringing
            science-backed answers to your real life questions.
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <ChButton onClick={() => onCta && onCta('about')}>Meet the DrF's</ChButton>
            <ChButton variant="secondary" onClick={() => onCta && onCta('books')}>Our Books</ChButton>
          </div>

          {/* Social proof strip */}
          <div style={{
            marginTop: 36, paddingTop: 28,
            borderTop: '1px solid rgba(27,84,79,0.10)',
            display: 'flex', gap: isMobile ? 20 : 36,
          }}>
            {[
              { n: '20+', label: 'Years in Practice' },
              { n: '3',   label: 'Published Books' },
              { n: '6',   label: 'Media Features' },
            ].map(({ n, label }) => (
              <div key={label}>
                <div style={{ fontWeight: 800, fontSize: isMobile ? 22 : 28, color: '#1B544F', letterSpacing: '-0.5px' }}>{n}</div>
                <div style={{ fontWeight: 600, fontSize: 9, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#999', marginTop: 2 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — photo */}
        <div style={{ position: 'relative', width: '100%' }}>
          {!isMobile && (
            <div style={{
              position: 'absolute', inset: -12, borderRadius: 28,
              background: 'linear-gradient(145deg, rgba(127,214,207,0.22) 0%, rgba(27,84,79,0.10) 100%)',
              zIndex: 0,
            }} />
          )}
          <div style={{
            borderRadius: isMobile ? '20px 20px 0 0' : 20,
            overflow: 'hidden',
            aspectRatio: isMobile ? '4/3' : '4/5',
            boxShadow: '0 24px 64px rgba(27,84,79,0.20)',
            position: 'relative', zIndex: 1,
          }}>
            <img
              src="/assets/photos/ch-landing.jpg"
              alt="Dr. Carla Fry and Dr. Lisa Ferrari — licensed psychologists making psychology practical for parents"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
            />
          </div>
          {!isMobile && (
            <img src="/assets/logo-mint-nb.png" alt="Clinically Happy"
                 style={{
                   position: 'absolute', left: -36, bottom: -24, width: 120, opacity: 0.80,
                   transform: 'rotate(-6deg)', zIndex: 2,
                 }} />
          )}
        </div>
      </div>
    </section>
  );
}

window.ChHero = ChHero;