// page-services.jsx — "Comprehensive primary care for adults"
const phServices = [
  { icon: 'shield', t: 'Preventive care & annual physicals', d: 'Routine exams, screenings, and a wellness plan to catch things early.' },
  { icon: 'video', t: 'Sick visits, in person or virtual', d: 'Same-day or next-day care, from home or the clinic.' },
  { icon: 'activity', t: 'Chronic disease management', d: 'Steady, attentive care for things like high blood pressure and diabetes.' },
  { icon: 'pill', t: 'Medication management', d: 'Careful reviews, monitoring, and refills, with easy follow-up.' },
  { icon: 'heart', t: 'Women’s health', d: 'Routine women’s health care as part of your everyday care.' },
  { icon: 'message', t: 'Mental health screening & support', d: 'Screening and supportive care, with referrals when needed.' },
  { icon: 'refresh', t: 'Care coordination & referrals', d: 'We line up specialists, imaging, and outside care, and keep it connected.' },
  { icon: 'dollar', t: 'Discounted labs & wellness', d: 'Lab work at discounted, near-cost pricing.' },
];
const phAccess = ['Direct portal messaging with a reply within 24 hours', 'Same-day and next-day appointments',
  'A weekly in-person clinic day', 'Telemedicine visits'];
const phNotIncluded = ['Hospital or emergency care', 'Imaging', 'Specialist visits outside the practice', 'Medications'];

function ServicesPage() {
  return (
    <Page active="services">
      <PageHead variant="warm" eyebrow="Services"
        title="Comprehensive primary care for adults"
        lead="Everything your membership covers, with the time each visit deserves." />

      <section className="ph-section">
        <div className="ph-container">
          <div className="ph-prose is-center" style={{ marginBottom: 'var(--space-7)' }}>
            <p>Your membership covers a wide range of primary care for adults 18 and older,
              in person and by telemedicine.</p>
          </div>
          <div className="ph-grid-3">
            {phServices.map((s, i) => {
              const tone = i % 2 === 0 ? 'green' : 'navy';
              return (
                <div className={'ph-feature ph-feature--' + tone} key={s.t}>
                  <div className="ph-feature-ic"><Icon name={s.icon} size={24} color={tone === 'green' ? '#506330' : '#1E364E'} /></div>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="ph-section is-warm">
        <div className="ph-container">
          <div className="ph-grid-2">
            <div className="ph-tile">
              <h3>How you reach us</h3>
              <ul className="ph-ticks">
                {phAccess.map(a => <li key={a}><Icon name="check" size={19} color="#506330" /> {a}</li>)}
              </ul>
            </div>
            <div className="ph-tile is-muted">
              <h3>Not included</h3>
              <ul className="ph-ticks is-muted">
                {phNotIncluded.map(a => <li key={a}><Icon name="x" size={19} color="#868D97" /> {a}</li>)}
              </ul>
              <p className="ph-bio-credential" style={{ marginTop: 'var(--space-4)' }}>Keep insurance for
                those needs. Full detail is in the Patient Agreement.</p>
            </div>
          </div>
          <div style={{ marginTop: 'var(--space-6)' }}><EmergencyNote /></div>
        </div>
      </section>

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