// page-about.jsx — "Meet Azra" + co-founders
const phCoFounders = [
  { initials: 'AP', name: 'Abbas H. Peera, MD', title: 'Co-Founder · Director of Clinical Operations', photo: 'assets/abbas-peera-headshot.jpg' },
  { initials: 'HZ', name: 'Hussain Zhian, PA-C', title: 'Co-Founder · Director of Patient & Community Engagement', photo: 'assets/hussain-zhian-headshot.jpg' },
];

// Circular portrait; falls back to the initials monogram if the photo is missing.
function TeamAvatar({ photo, initials, name, pos }) {
  const [ok, setOk] = useState(!!photo);
  if (ok) {
    return <div className="ph-team-avatar"><img src={photo} alt={name} style={pos ? { objectPosition: pos } : undefined} onError={() => setOk(false)} /></div>;
  }
  return <div className="ph-team-avatar" aria-hidden="true">{initials}</div>;
}

function AboutPage() {
  return (
    <Page active="about">
      <PageHead variant="navy" eyebrow="Meet your provider"
        title="Meet Azra"
        lead="Care starts with the person giving it." />

      <section className="ph-section">
        <div className="ph-container ph-bio">
          <div className="ph-bio-media">
            <Photo label="Azra Dhanji, APRN, FNP-C" src="assets/azra-dhanji-headshot.jpg" position="center 12%" h="520px" />
            <p className="ph-bio-credential">Board-Certified Family Nurse Practitioner, Autonomous Practice.
              Co-Founder &amp; Director of Primary Care Services.</p>
          </div>
          <div className="ph-bio-copy">
            <span className="eyebrow">Azra Dhanji, APRN, FNP-C</span>
            <p className="ph-team-title" style={{ margin: '4px 0 0' }}>Co-Founder · Director of Primary Care Services</p>
            <h2 style={{ margin: '0.4rem 0 1rem' }}>A board-certified Family Nurse Practitioner and co-founder of Peaceful Hearts.</h2>
            <p>She cares for adults across the full picture of primary care: from prevention and everyday
              illnesses to managing long-term conditions and helping you stay well over time.</p>
            <p>What guides her is simple. Good care begins with a real relationship. When you feel heard
              and respected, and when you’re part of the decisions about your own health, better care
              follows. So she makes room for it: time to listen, time to explain things clearly, and time
              to build a plan that fits your life.</p>
            <p>Through Peaceful Hearts, Azra works closely with you to understand your concerns, talk
              through your options, and create a care plan that reflects your goals. Her hope is that you
              leave every visit feeling informed, supported, and confident about your health.</p>
            <ul className="ph-checklist">
              <li><Icon name="check" size={20} color="#506330" /> Board-Certified Family Nurse Practitioner (FNP-C)</li>
              <li><Icon name="check" size={20} color="#506330" /> Autonomous practice authority</li>
              <li><Icon name="check" size={20} color="#506330" /> Co-Founder &amp; Director of Primary Care Services</li>
            </ul>
            <div className="ph-about-actions">
              <a className="btn btn-primary" href="enroll.html">Become a member</a>
              <a className="btn btn-secondary" href="contact.html" style={{ marginLeft: 'var(--space-3)' }}>Get in touch</a>
            </div>
          </div>
        </div>
      </section>

      <section className="ph-section is-warm">
        <div className="ph-container">
          <SectionHead center eyebrow="Leadership" title="Our co-founders"
            sub="Peaceful Hearts was founded by a team who believe care should be personal." />
          <div className="ph-team">
            {phCoFounders.map(c => (
              <div className="ph-team-card" key={c.name}>
                <TeamAvatar photo={c.photo} initials={c.initials} name={c.name} pos={c.pos} />
                <h3>{c.name}</h3>
                <p className="ph-team-title">{c.title}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Quote
        text="When patients feel known, better care follows. That’s the whole reason we built Peaceful Hearts."
        name="Azra Dhanji, APRN, FNP-C"
        detail="Co-Founder, Peaceful Hearts Direct Primary Care" />

      <CTABand />
    </Page>
  );
}
renderApp(<AboutPage />);