/* ActiveFit360 marketing — Services page */
const NS_sv = window.Activefit360DesignSystem_d87766;

const AF_FAQS = [
  { q: 'What should I expect during my first session?', a: 'Your first visit includes a comprehensive evaluation of your condition, medical history, and personal goals. We perform a physical assessment, develop a personalized treatment plan, and you’ll receive your first treatment plus a home exercise program.' },
  { q: 'Do I need a doctor’s referral?', a: 'In Illinois you do not need a referral to see a physical therapist, thanks to Direct Access laws — so you can start treatment faster. Some insurance plans may require a referral for reimbursement, so it’s worth checking with your provider.' },
  { q: 'How long is each session?', a: 'Initial evaluations are typically 60 minutes. Follow-up treatment sessions are also 60 minutes, so you always receive thorough, one-on-one care from your therapist.' },
  { q: 'What types of payment do you accept?', a: 'We accept self-pay and can provide a superbill to submit for out-of-network reimbursement. We accept cash, checks, and all major credit cards, and work with major insurance plans.' },
  { q: 'What should I wear?', a: 'Wear comfortable, loose-fitting clothing that lets you move freely — athletic wear is ideal. Your therapist needs to be able to see and access the area being treated.' },
  { q: 'How many sessions will I need?', a: 'It varies by individual and depends on your condition, goals, and progress. Your therapist will recommend a treatment schedule after your initial evaluation.' },
];

function ServicesPage({ onBook, onNavigate }) {
  const { Card, Button, Badge, Accordion } = NS_sv;
  const I = window.Icon;
  return (
    <React.Fragment>
      {/* header */}
      <section style={{ padding: '24px var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', background: 'var(--wash-mint)', borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(36px,5vw,72px)', textAlign: 'center' }}>
          <Badge variant="neutral" icon={<I name="leaf" size={11} />}>Evidence-based, patient-centered care</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px,5vw,58px)', letterSpacing: '-0.025em', color: 'var(--ink-900)', margin: '18px auto 0', maxWidth: '20ch', lineHeight: 1.05 }}>
            Holistic therapy to help you recover, strengthen & thrive
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-muted)', margin: '18px auto 0', maxWidth: '54ch', lineHeight: 1.6 }}>
            Every plan begins with a one-on-one evaluation from a licensed physical therapist. No rushed visits — just focused, lasting care.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={onBook}>Book an Appointment</Button>
            <Button variant="ghost" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={() => onNavigate('contact')}>Contact us</Button>
          </div>
        </div>
      </section>

      {/* specialties grid */}
      <section style={{ padding: 'var(--space-16) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <window.SectionHead eyebrow="Specialties" title="What we treat" />
          <div className="af-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {window.AF_SERVICES.map(s => (
              <Card key={s.title} interactive style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ width: 54, height: 54, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <I name={s.icon} size={26} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--ink-900)', margin: '18px 0 8px' }}>{s.title}</h3>
                <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.55, margin: 0, flex: 1 }}>{s.desc}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* care models recap */}
      <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <window.SectionHead center eyebrow="How you get care" title="Three ways to work with us" />
          <div className="af-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {window.AF_CARE_MODELS.map(m => (
              <Card key={m.id}>
                <span style={{ width: 50, height: 50, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <I name={m.icon} size={24} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, color: 'var(--ink-900)', margin: '16px 0 7px' }}>{m.title}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55, margin: 0 }}>{m.tagline}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
        <div style={{ maxWidth: 780, margin: '0 auto' }}>
          <window.SectionHead center eyebrow="FAQ" title="Questions, answered" />
          <Accordion items={AF_FAQS} />
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { ServicesPage });