// page-membership.jsx — "Simple, transparent membership"
const phIncludes = ['Preventive care & annual physicals', 'Sick visits (in person & virtual)',
  'Chronic disease management', 'Medication management', 'Women’s health',
  'Mental health screening & support', 'Care coordination & referrals',
  'Direct portal messaging with a reply within 24 hours', 'Discounted labs'];
const phExtras = ['Labs (discounted, near-cost)', 'Medications', 'Imaging or specialist visits outside the practice'];

function MembershipPage() {
  return (
    <Page active="membership" controls={['pricing']}>
      {(t) => (
        <>
          <PageHead variant="warm" eyebrow="Membership"
            title="Simple, transparent membership"
            lead="One monthly fee. No copays, no hidden costs, no surprise bills." />

          <Pricing emphasis={(t.pricingEmphasis || 'Founding').toLowerCase()} showHead={false} showNote={false} />

          <div className="ph-container">
            <p className="ph-plans-note">Letting us know you’re interested is free and not a commitment.
              Azra will reach out personally to talk it through and answer your questions.</p>
          </div>

          <section className="ph-section">
            <div className="ph-container">
              <div className="ph-member-grid">
                <div className="ph-tile">
                  <h3>Every membership includes</h3>
                  <ul className="ph-ticks">
                    {phIncludes.map(i => <li key={i}><Icon name="check" size={19} color="#506330" /> {i}</li>)}
                  </ul>
                </div>
                <div className="ph-tile is-muted">
                  <h3>What may cost extra</h3>
                  <ul className="ph-ticks is-muted">
                    {phExtras.map(i => <li key={i}><Icon name="arrow" size={18} color="#868D97" /> {i}</li>)}
                  </ul>
                  <p className="ph-bio-credential" style={{ marginTop: 'var(--space-4)' }}>
                    No copays, no hidden fees, no surprise bills.</p>
                </div>
              </div>
            </div>
          </section>

          <section className="ph-section is-warm">
            <div className="ph-container">
              <div className="ph-callout">
                <div className="ph-callout-ic"><Icon name="sparkle" size={26} color="#1E364E" /></div>
                <div>
                  <h3>Good to know</h3>
                  <p>DPC works alongside insurance and isn’t insurance itself. Keep a high-deductible or
                    catastrophic plan for hospital, ER, and specialist needs. HSA and FSA funds may cover
                    many qualified costs, though rules on membership fees vary, so check with your HSA
                    provider or tax advisor.</p>
                </div>
              </div>
            </div>
          </section>

          <Reassurance />
          <CTABand />
        </>
      )}
    </Page>
  );
}
renderApp(<MembershipPage />);