// Sections.jsx — SectionHead, Intro, WhyUs (value pillars), WhatIsDPC teaser, About (Meet Azra)
function SectionHead({ eyebrow, title, sub, center }) {
  return (
    <div className={'ph-sechead' + (center ? ' is-center' : '')}>
      <span className="eyebrow">{eyebrow}</span>
      <h2>{title}</h2>
      {sub && <p className="lead">{sub}</p>}
    </div>
  );
}

/* ---- Calm intro band ---- */
function Intro() {
  return (
    <section className="ph-section is-warm ph-intro" id="intro">
      <div className="ph-container">
        <p className="ph-intro-lead">
          We started Peaceful Hearts because you deserve more than a hurried fifteen minutes.
          Here, care is calm and personal. You’re listened to, you’re known, and you never feel
          like just another name on the schedule.
        </p>
      </div>
    </section>
  );
}

/* ---- Value-pillar cards: "Why patients choose us" ---- */
const phPillars = [
  { icon: 'clock', t: 'More time with you', d: 'Visits aren’t rushed, so we can really listen and focus on prevention, not just quick fixes.' },
  { icon: 'message', t: 'Easy access', d: 'Message your provider through a secure portal and hear back within 24 hours. Same-day and next-day visits when you need them.' },
  { icon: 'dollar', t: 'Simple, honest pricing', d: 'One monthly fee. No copays, no hidden costs, and no surprise bills in the mail.' },
  { icon: 'heart', t: 'A real relationship', d: 'You see the same provider every time, someone who knows your history and your goals.' },
];

function WhyUs() {
  return (
    <section className="ph-section" id="services">
      <div className="ph-container">
        <SectionHead center eyebrow="Why patients choose us"
          title="Primary care, the way it should feel."
          sub="Four things you’ll notice from your very first visit." />
        <div className="ph-grid-4">
          {phPillars.map(f => (
            <div className="ph-feature" key={f.t}>
              <div className="ph-feature-ic"><Icon name={f.icon} size={24} color="#1E364E" /></div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
        <div className="ph-center-cta">
          <a className="btn btn-secondary" href="services.html">See everything that’s covered</a>
        </div>
      </div>
    </section>
  );
}

/* ---- "What is DPC" teaser (intro to the comparison block) ---- */
function WhatIsDPC() {
  return (
    <section className="ph-section is-warm" id="dpc">
      <div className="ph-container">
        <div className="ph-dpc-intro">
          <div className="ph-dpc-lead">
            <span className="eyebrow">What is Direct Primary Care?</span>
            <h2>A simpler way to get care.</h2>
          </div>
          <div className="ph-dpc-body">
            <p>Instead of paying per visit through insurance, you pay one membership fee for longer
              visits, easy access, and a provider who’s there when you need them.</p>
            <p>It works alongside your insurance, not in place of it. You keep your coverage for
              hospitals and specialists while your everyday care gets simpler.</p>
            <a className="btn btn-secondary" href="what-is-dpc.html">Learn how DPC works</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- About / Meet Azra (teaser) ---- */
function About() {
  return (
    <section className="ph-section" id="about">
      <div className="ph-container ph-about">
        <div className="ph-about-media">
          <Photo label="Azra Dhanji, APRN, FNP-C" src="assets/azra-dhanji-headshot.jpg" position="center 22%" h="440px" />
        </div>
        <div className="ph-about-copy">
          <span className="eyebrow">Meet your provider</span>
          <h2>Care starts with the person giving it.</h2>
          <p>Azra Dhanji, APRN, FNP-C, built Peaceful Hearts alongside like-minded healthcare
            professionals to give people the time and attention that’s so often missing from primary care.</p>
          <p>You’ll see the same familiar face at every visit, someone who knows your history
            and your goals.</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" /> A small, capped panel, so you’re never rushed</li>
            <li><Icon name="check" size={20} color="#506330" /> The same provider every visit</li>
          </ul>
          <div className="ph-about-actions">
            <a className="btn btn-primary" href="about.html">Meet Azra</a>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { SectionHead, Intro, WhyUs, WhatIsDPC, About });