// AboutPage.jsx — Good Inside-inspired, fully responsive
function ChAboutPage({ onCta }) {
  const isMobile = window.useIsMobile();

  return (
    <div style={{ background: '#fff', fontFamily: 'Montserrat, sans-serif' }}>

      {/* ── HERO ── */}
      <section style={{
        background: '#F0EEE6',
        padding: isMobile ? '60px 24px 0' : '100px 40px 0',
        overflow: 'hidden',
        position: 'relative',
      }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>

          <div style={{ textAlign: 'center', marginBottom: isMobile ? 36 : 52 }}>
            <div style={{
              fontWeight: 700, fontSize: 11, letterSpacing: '4px', textTransform: 'uppercase',
              color: '#7FD6CF', marginBottom: 18,
            }}>Meet the DrF's</div>
            <h1 style={{
              fontWeight: 800, fontSize: isMobile ? 40 : 68, lineHeight: 1.0,
              letterSpacing: isMobile ? '-1px' : '-2px',
              color: '#1A1A1A', margin: 0,
            }}>
              Two psychologists.<br/>
              <span style={{ color: '#1B544F' }}>One mission.</span>
            </h1>
            <p style={{
              fontSize: isMobile ? 15 : 18, lineHeight: 1.75, color: '#555',
              margin: '24px auto 0', maxWidth: 620,
            }}>
              Dr. Carla Fry and Dr. Lisa Ferrari have spent two decades helping families navigate
              the hard stuff. Now they're bringing those conversations to a much bigger room.
            </p>
          </div>

          <div style={{
            borderRadius: '20px 20px 0 0', overflow: 'hidden',
            maxWidth: 860, margin: '0 auto',
            boxShadow: '0 -4px 40px rgba(27,84,79,0.10)',
            aspectRatio: isMobile ? '4/3' : '16/9',
          }}>
            <img
              src="/assets/photos/drs-studio-v2.jpg"
              alt="Dr. Carla Fry and Dr. Lisa Ferrari, Licensed Psychologists and founders of Clinically Happy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
            />
          </div>
        </div>
      </section>

      {/* ── FOUNDERS ── */}
      <section style={{
        background: '#fff',
        padding: isMobile ? '64px 24px' : '100px 40px',
      }}>
        <div style={{ maxWidth: 1060, margin: '0 auto' }}>

          <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 64 }}>
            <div style={{
              fontWeight: 700, fontSize: 11, letterSpacing: '4px', textTransform: 'uppercase',
              color: '#1B544F', marginBottom: 14,
            }}>The Founders</div>
            <h2 style={{
              fontWeight: 800, fontSize: isMobile ? 36 : 48, letterSpacing: '-1px', color: '#1A1A1A', margin: 0,
            }}>The DrF's</h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 48 }}>
            <FounderCard
              name="Carla Fry"
              credential="PhD · Licensed Psychologist"
              photo="/assets/photos/dr-fry-v2.jpg"
              photoPosition="center top"
              accent="#7FD6CF"
              bio="Dr. Carla Fry is a Licensed Psychologist, educator, and founder of Clinically Happy with over 20 years of clinical experience. She specializes in family systems, anxiety, and resilience, with a particular passion for translating dense research into language parents can actually use on a Tuesday night. Known for her thoughtful, grounded approach, Dr. Fry helps make psychology feel practical, approachable, and genuinely helpful in everyday life."
            />
            <FounderCard
              name="Lisa Ferrari"
              credential="PhD · Licensed Psychologist"
              photo="/assets/photos/dr-ferrari-close.jpg"
              photoPosition="center top"
              accent="#1B544F"
              bio="Dr. Lisa Ferrari is a Licensed Psychologist, speaker, and founder of Clinically Happy. Her work focuses on adolescents, relationships, parenting, and the beautifully complicated realities of family life. Known for her warm, candid, and relatable approach, she helps make psychology feel practical, accessible, and deeply human."
            />
          </div>
        </div>
      </section>

      {/* ── STORY ── */}
      <section style={{ background: '#F0EEE6', padding: isMobile ? '64px 24px' : '100px 40px' }}>
        <div style={{
          maxWidth: 1060, margin: '0 auto',
          display: isMobile ? 'flex' : 'grid',
          flexDirection: isMobile ? 'column' : undefined,
          gridTemplateColumns: isMobile ? undefined : '1fr 1fr',
          gap: isMobile ? 32 : 72,
          alignItems: 'center',
        }}>
          <div style={{
            borderRadius: 20, overflow: 'hidden',
            aspectRatio: '4/3',
            boxShadow: '0 20px 60px rgba(27,84,79,0.14)',
          }}>
            <img
              src="/assets/photos/drfs-home.jpg"
              alt="Dr. Lisa Ferrari and Dr. Carla Fry, psychologists and authors of Splitting Up: How to Tell Your Kids"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center', display: 'block' }}
            />
          </div>

          <div>
            <div style={{
              fontWeight: 700, fontSize: 11, letterSpacing: '4px', textTransform: 'uppercase',
              color: '#7FD6CF', marginBottom: 20,
            }}>Our Story</div>
            <h2 style={{
              fontWeight: 800, fontSize: isMobile ? 30 : 44, lineHeight: 1.08, letterSpacing: '-1px',
              color: '#1A1A1A', margin: '0 0 24px',
            }}>
              From the clinic<br/>to the conversation.
            </h2>
            <p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.85, color: '#555', margin: '0 0 20px' }}>
              After years of seeing the same questions show up in their separate practices, about
              anxiety, entitlement, divorce, screen time, and the general exhaustion of modern
              parenting, Carla and Lisa decided to stop answering them one family at a time.
            </p>
            <p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.85, color: '#555', margin: 0 }}>
              Clinically Happy was born from the belief that every parent deserves access to
              real clinical insight, not watered-down advice, but the same science-backed tools
              the DrF's use in their offices every day.
            </p>
            <div style={{ marginTop: 36 }}>
              <ChButton onClick={() => onCta && onCta('books')}>See Our Books</ChButton>
            </div>
          </div>
        </div>
      </section>

      {/* ── THREE PILLARS ── */}
      <section style={{ background: '#1B544F', padding: isMobile ? '64px 24px' : '100px 40px' }}>
        <div style={{ maxWidth: 1060, margin: '0 auto' }}>

          <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 64 }}>
            <div style={{
              fontWeight: 700, fontSize: 11, letterSpacing: '4px', textTransform: 'uppercase',
              color: '#7FD6CF', marginBottom: 14,
            }}>What We Believe</div>
            <h2 style={{
              fontWeight: 800, fontSize: isMobile ? 34 : 46, letterSpacing: '-1px', color: '#fff', margin: 0,
            }}>Our three pillars.</h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: 24 }}>
            <Pillar
              n="01"
              title="Real Psychologists"
              body="Two licensed clinicians. Twenty-plus years in private practice. Everything you read here is grounded in our day jobs, not trends."
            />
            <Pillar
              n="02"
              title="Real Science"
              body="Peer-reviewed research, translated. We cite the studies; you get the takeaway in plain English you can actually use."
            />
            <Pillar
              n="03"
              title="Real Life"
              body="Tools that survive contact with a screaming toddler, a tired partner, or a Sunday-night spiral. Useful, not idealized."
            />
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section style={{
        background: '#F0EEE6',
        padding: isMobile ? '64px 24px' : '100px 40px',
        textAlign: 'center',
      }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <h2 style={{
            fontWeight: 800, fontSize: isMobile ? 30 : 46, letterSpacing: '-1px', color: '#1A1A1A',
            margin: '0 0 20px', lineHeight: 1.1,
          }}>
            Have a question for the DrF's?<br/>
            <span style={{ color: '#1B544F' }}>We'd love to hear it.</span>
          </h2>
          <p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.75, color: '#666', margin: '0 0 36px' }}>
            For media inquiries, speaking engagements, or just to say hello.
            The DrF's read every note.
          </p>
          <div style={{
            display: 'flex', gap: 14, justifyContent: 'center',
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: 'center',
          }}>
            <ChButton onClick={() => onCta && onCta('contact')}>Contact the DrF's</ChButton>
            <ChButton variant="secondary" onClick={() => onCta && onCta('books')}>See the Books</ChButton>
          </div>
        </div>
      </section>

    </div>
  );
}

function FounderCard({ name, credential, photo, photoPosition, accent, bio }) {
  return (
    <div>
      <div style={{ position: 'relative', marginBottom: 28 }}>
        <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: 20, overflow: 'hidden',
          aspectRatio: '3/4',
          boxShadow: '0 16px 48px rgba(27,84,79,0.12)',
          background: accent,
          position: 'relative', zIndex: 1,
        }}>
          <img
            src={photo} alt={name}
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: photoPosition || 'center top', display: 'block' }}
          />
        </div>
      </div>
      <h3 style={{
        fontWeight: 800, fontSize: 30, letterSpacing: '-0.3px',
        color: '#7FD6CF', margin: '0 0 14px',
      }}>{name}</h3>
      <p style={{ fontSize: 15, lineHeight: 1.8, color: '#555', margin: 0 }}>{bio}</p>
    </div>
  );
}

function Pillar({ n, title, body }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: hovered ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.07)',
        border: hovered ? '1px solid rgba(127,214,207,0.45)' : '1px solid rgba(127,214,207,0.18)',
        borderRadius: 16, padding: '40px 32px',
        transform: hovered ? 'translateY(-6px) scale(1.03)' : 'translateY(0) scale(1)',
        boxShadow: hovered ? '0 20px 48px rgba(0,0,0,0.25)' : 'none',
        transition: 'transform 320ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 320ms ease, background 240ms ease, border 240ms ease',
        cursor: 'default',
      }}
    >
      <div style={{
        fontFamily: '"Caveat", cursive', fontSize: 52, lineHeight: 1,
        color: '#7FD6CF', fontWeight: 700, marginBottom: 20,
      }}>{n}</div>
      <h3 style={{
        fontWeight: 800, fontSize: 20, letterSpacing: '-0.2px',
        color: '#fff', margin: '0 0 12px',
      }}>{title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.70)', margin: 0 }}>{body}</p>
    </div>
  );
}

window.ChAboutPage = ChAboutPage;