// page-employers.jsx — employer group pricing (Azra's offer, Oct 2026).
// Rates and copy follow her flyer: Employee $70, Employee + Spouse $135, with the
// standard individual rate shown for comparison. Group enrollment is arranged
// personally, so the CTA is contact, not the SigmaMD self-signup link.
const phGroupRates = [
  { id: 'employee', name: 'Employee', price: 70, badge: 'Group rate', on: true,
    blurb: 'Per enrolled employee, through your business.' },
  { id: 'spouse', name: 'Employee + Spouse', price: 135, badge: 'Group rate',
    blurb: 'Two adults together on one simple rate.' },
  { id: 'standard', name: 'Standard Individual', price: 85,
    blurb: 'Our regular individual rate, for comparison.' },
];

const phWhyEmployers = [
  { icon: 'dollar', title: 'Affordable, predictable healthcare costs',
    text: 'One flat monthly rate per person. No claims, no copays, no surprise bills to reconcile.' },
  { icon: 'activity', title: 'Healthier, more productive teams',
    text: 'Same and next-day appointments mean small problems get handled before they become sick days.' },
  { icon: 'clock', title: 'Convenient, accessible care',
    text: 'Your team reaches their provider directly by call, text, or video, with unhurried in-person visits.' },
  { icon: 'shield', title: 'Preventive health focus',
    text: 'Annual physicals, screenings, and ongoing support that keep care ahead of illness.' },
  { icon: 'heart', title: 'A partner in employee well-being',
    text: 'A provider who knows your people by name, backed by a practice built on real relationships.' },
];

const phGroupIncludes = [
  { icon: 'calendar', label: 'Annual physicals' },
  { icon: 'message', label: 'Sick visits' },
  { icon: 'refresh', label: 'Chronic disease management' },
  { icon: 'heart', label: 'Women’s health' },
  { icon: 'pill', label: 'Medication management' },
  { icon: 'activity', label: 'Labs & wellness' },
];

function EmployersPage() {
  return (
    <Page active="employers">
      <PageHead variant="navy" eyebrow="For Employers" title="Primary care your team will actually use"
        lead="Affordable, exclusive membership rates for small businesses and employer groups in Sanford and the greater Orlando area." />

      <section className="ph-section">
        <div className="ph-container">
          <SectionHead center eyebrow="Employer group pricing" title="Simple rates for your whole team"
            sub="These special employer group rates are for your business and your eligible employees. Memberships are for adults 18 and older." />
          <div className="ph-plans is-three">
            {phGroupRates.map(r => (
              <div className={'ph-plan' + (r.on ? ' is-popular' : '')} key={r.id}>
                {r.badge && <span className="ph-plan-flag">{r.badge}</span>}
                <h3>{r.name}</h3>
                <p className="ph-plan-blurb">{r.blurb}</p>
                <div className="ph-plan-price">
                  <span className="ph-plan-cur">$</span>{r.price}
                  <span className="ph-plan-per">/month</span>
                </div>
              </div>
            ))}
          </div>
          <p className="ph-plans-note">Help your team get the care they deserve, at a price that works
            for your business. Every group membership includes everything in Standard Membership:
            unlimited visits with no copays, direct call, text and video access, and wholesale labs
            and medications.</p>
        </div>
      </section>

      <section className="ph-section is-tint">
        <div className="ph-container">
          <SectionHead center eyebrow="Why it works" title="Why employers choose us" />
          <ul className="ph-why">
            {phWhyEmployers.map(w => (
              <li key={w.title}>
                <div className="ph-why-ic"><Icon name={w.icon} size={22} color="#506330" /></div>
                <div>
                  <h3>{w.title}</h3>
                  <p>{w.text}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="ph-section is-warm">
        <div className="ph-container">
          <SectionHead center eyebrow="Included care" title="What every membership covers" />
          <div className="ph-chips is-center">
            {phGroupIncludes.map(c => (
              <span className="ph-chip" key={c.label}>
                <Icon name={c.icon} size={17} color="#506330" /> {c.label}
              </span>
            ))}
          </div>
          <p className="ph-plans-note">Membership is not health insurance and does not replace it.
            We recommend employees keep a high-deductible or catastrophic plan for hospital and
            specialist coverage.</p>
        </div>
      </section>

      <section className="ph-cta">
        <div className="ph-container ph-cta-inner">
          <div>
            <span className="eyebrow ph-cta-eyebrow">Employer groups</span>
            <h2>Ready to invest in your team’s health?</h2>
            <p>Tell us about your business and how many people you’d like to cover.
              Azra will walk you through group enrollment and answer every question.</p>
          </div>
          <div className="ph-cta-actions">
            <a className="btn btn-green btn-lg"
              href="mailto:info@peacefulheartsdirect.com?subject=Employer%20group%20pricing">
              Email us about group care</a>
            <a className="btn btn-lg ph-btn-ghostlight" href="tel:+13215787417">Call 321-578-7417</a>
          </div>
        </div>
      </section>
    </Page>
  );
}
renderApp(<EmployersPage />);