// page-dpc.jsx — "What is Direct Primary Care?"
function WhyItWorks() {
  const items = ['Fewer ER trips', 'Fewer hospital stays', 'Better-managed chronic conditions',
    'More consistent care', 'Real room for prevention'];
  return (
    <div className="ph-tile">
      <h3>Why it works</h3>
      <p className="ph-bio-credential" style={{ marginBottom: 'var(--space-4)' }}>General tendencies, not guarantees.</p>
      <ul className="ph-ticks">
        {items.map(i => <li key={i}><Icon name="check" size={19} color="#506330" /> {i}</li>)}
      </ul>
    </div>
  );
}

function WhoItsFor() {
  const who = ['Wants a closer relationship', 'Values clear pricing', 'Prefers unrushed care',
    'Uninsured', 'High-deductible plans', 'HSA / FSA users'];
  return (
    <div className="ph-tile is-warm">
      <h3>Who it’s for</h3>
      <p>Anyone who wants a closer relationship with their provider, clear pricing, and unrushed care.</p>
      <div className="ph-chips">
        {who.map(w => <span className="ph-chip" key={w}><Icon name="heart" size={15} color="#506330" /> {w}</span>)}
      </div>
    </div>
  );
}

function DPCPage() {
  return (
    <Page active="dpc" controls={['comparison']}>
      {(t) => (
        <>
          <PageHead variant="navy" eyebrow="Direct Primary Care"
            title="What is Direct Primary Care?"
            lead="A simpler, more personal way to get the care you need." />

          <section className="ph-section">
            <div className="ph-container">
              <div className="ph-prose is-center">
                <p>Direct Primary Care, or DPC, takes insurance out of the middle of your care. Instead
                  of billing visit by visit, you pay one simple monthly fee. In return, you get longer
                  visits, easy access to your provider, and care that’s built around you.</p>
                <p>The difference shows up in the everyday moments: more time when you’re in the room,
                  a quick reply when you have a question, and pricing that’s easy to understand.</p>
              </div>
            </div>
          </section>

          <section className="ph-section is-warm">
            <div className="ph-container">
              <div className="ph-callout">
                <div className="ph-callout-ic"><Icon name="shield" size={28} color="#1E364E" /></div>
                <div>
                  <h3>It works with your insurance</h3>
                  <p>DPC works alongside your insurance. It doesn’t replace it. Many members keep a
                    high-deductible or catastrophic plan for hospital stays, specialists, and emergencies,
                    and come to Peaceful Hearts for everyday and preventive care. Peaceful Hearts is a
                    membership for primary care. It isn’t an insurance plan.</p>
                </div>
              </div>
            </div>
          </section>

          <Comparison layout={t.comparisonLayout} />

          <section className="ph-section">
            <div className="ph-container">
              <div className="ph-grid-2">
                <WhyItWorks />
                <WhoItsFor />
              </div>
            </div>
          </section>

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