/* Family Diagnostics — shared page parts: navy page header, service data, service detail page. */
const { Eyebrow, Button, TextLink, Card, Icon, IconTile, SectionIntro, ServiceCard, CheckList, CtaBand } = window.FamilyDiagnosticsDesignSystem_6d724e;

function PageHero({ eyebrow, heading, children, image, imageAlt }) {
  return (
    <section style={{ position: 'relative', background: 'var(--color-brand-navy)', overflow: 'hidden' }}>
      {image ? (
        <React.Fragment>
          <img src={image} alt={imageAlt || ''} width="1400" height="800" decoding="async"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <span aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg,rgba(28,36,75,.96) 0%,rgba(28,36,75,.86) 42%,rgba(28,36,75,.52) 78%,rgba(28,36,75,.38) 100%)' }}></span>
        </React.Fragment>
      ) : null}
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', padding: 'clamp(56px,7vw,104px) clamp(16px,4vw,64px)', display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'flex-start' }}>
        {eyebrow ? <Eyebrow tone="onDark">{eyebrow}</Eyebrow> : null}
        <h1 style={{ margin: 0, font: '700 clamp(32px,4.5vw,60px)/1.08 "Plus Jakarta Sans",sans-serif', letterSpacing: '-.02em', color: '#fff', maxWidth: '18ch', textWrap: 'pretty' }}>{heading}</h1>
        {children ? <p style={{ margin: 0, font: '400 19px/1.65 "Source Sans 3",sans-serif', color: 'rgba(255,255,255,.72)', maxWidth: '58ch' }}>{children}</p> : null}
      </div>
    </section>
  );
}

function PageSection({ id, tone = 'white', children, style }) {
  const bg = tone === 'alt' ? 'var(--surface-alt)' : tone === 'info' ? 'var(--surface-info)' : '#fff';
  return (
    <section id={id} style={{ background: bg, padding: 'clamp(56px,8vw,120px) clamp(16px,4vw,64px)', ...style }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function QuestionsCta() {
  return (
    <CtaBand heading="Have Questions?"
      actions={<React.Fragment>
        <Button as="a" href="/contact/" variant="primary" size="lg">Request a Partnership Consultation</Button>
        <Button as="a" href="tel:+14073292721" variant="onDark" size="lg" icon="phone">(407) 329-2721</Button>
      </React.Fragment>}>
      For more information, to request a demonstration, or to schedule a meeting, please contact us.
    </CtaBand>
  );
}

const FD_SERVICES = {
  'abi-testing': {
    nav: 'ABI Testing',
    title: 'Ankle-Brachial Index Testing',
    file: '/our-services/ankle-brachial-index-abi/',
    image: 'assets/photography/svc-abi-testing.webp',
    alt: 'Family Diagnostics technician performing an ankle-brachial index test with blood pressure cuffs on the arm and both ankles',
    summary: 'Evaluates blood flow in the lower extremities and helps identify signs of Peripheral Artery Disease and other circulation problems.',
    intro: 'An Ankle-Brachial Index test evaluates blood flow to the lower extremities by comparing blood-pressure measurements obtained from the arms and ankles. It can help physicians identify evidence of Peripheral Artery Disease and other circulation abnormalities.',
    listTitle: 'Patients Who May Benefit',
    list: ['Patients with diabetes', 'Adults age 65 and older', 'Patients with leg or foot pain', 'Patients with numbness or tingling', 'Patients with nonhealing wounds', 'Patients with cardiovascular risk factors', 'Patients with suspected peripheral vascular disease'],
    expect: 'The test is noninvasive and is performed inside the physician’s clinic. Blood-pressure cuffs and appropriate sensors are placed on the patient to obtain the required measurements. The physician reviews and interprets the results.',
  },
  'ans-testing': {
    nav: 'ANS Testing',
    title: 'Autonomic Nervous System Testing',
    file: '/our-services/autonomic-ans-test/',
    image: 'assets/photography/svc-ans-testing.webp',
    alt: 'Family Diagnostics technician performing autonomic nervous system testing with ECG leads and blood pressure monitoring',
    summary: 'Evaluates how the autonomic nervous system regulates heart rate and blood-pressure responses, including positional changes.',
    intro: 'Autonomic Nervous System testing evaluates how the body regulates involuntary functions such as heart rate and blood-pressure responses. Testing may include measurements obtained while the patient is resting and during a positional or tilt-table change.',
    listTitle: 'Patients Who May Benefit',
    list: ['Patients with diabetes', 'Patients with dizziness or lightheadedness', 'Patients with orthostatic symptoms', 'Patients with fainting or near-fainting episodes', 'Patients with suspected autonomic neuropathy', 'Patients with abnormal heart-rate responses'],
    expect: 'The patient is positioned on the testing table and connected to the appropriate monitoring sensors. Measurements are recorded while resting and during the required testing sequence. The physician reviews the results together with the patient’s symptoms and medical history.',
  },
  'sudomotor-testing': {
    nav: 'Sudomotor Testing',
    title: 'Sudomotor Testing',
    file: '/our-services/sudomotor-test/',
    image: 'assets/photography/svc-sudomotor.webp',
    alt: 'Patient undergoing sudomotor testing with hand and foot sensor plates showing results on screen',
    summary: 'Evaluates sweat-gland and small-fiber nerve function to help identify autonomic or peripheral nerve dysfunction.',
    intro: 'Sudomotor testing evaluates sweat-gland activity and small-fiber nerve function. Abnormal sudomotor responses may be associated with autonomic dysfunction, diabetic neuropathy, or other peripheral nerve conditions.',
    listTitle: 'Patients Who May Benefit',
    list: ['Patients with diabetes or prediabetes', 'Patients with burning, tingling, or numbness', 'Patients with suspected peripheral neuropathy', 'Patients with abnormal sweating', 'Patients with symptoms of autonomic dysfunction', 'Patients at risk for diabetic nerve complications'],
    expect: 'The patient places the hands and feet on the testing plates while the system records sudomotor responses. The test is noninvasive and is performed inside the physician’s clinic. The physician reviews and interprets the results.',
  },
  'carotid-doppler-ultrasound': {
    nav: 'Carotid Doppler Ultrasound',
    title: 'Carotid Doppler Ultrasound',
    file: '/our-services/carotid-doppler-ultrasound/',
    image: 'assets/photography/svc-carotid-doppler.webp',
    alt: 'Family Diagnostics ultrasound technician performing a carotid Doppler ultrasound on a patient’s neck',
    summary: 'Uses ultrasound imaging to evaluate blood flow through the carotid arteries and identify narrowing, plaque, or other vascular abnormalities.',
    intro: 'A Carotid Doppler Ultrasound is a noninvasive vascular study that uses ultrasound imaging to evaluate blood flow through the carotid arteries in the neck. It can help identify plaque buildup, narrowing, or other abnormalities that may affect blood flow to the brain.',
    listTitle: 'Patients Who May Benefit',
    list: ['Patients with cardiovascular risk factors', 'Patients with diabetes', 'Patients with hypertension', 'Patients with high cholesterol', 'Patients with a history of smoking', 'Patients with a carotid bruit', 'Patients with a history of TIA or stroke symptoms', 'Patients with suspected carotid artery disease'],
    expect: 'The patient lies comfortably while the ultrasound technician applies gel to the neck and uses an ultrasound transducer to evaluate the carotid arteries. The study is noninvasive and does not use radiation.',
  },
  'lower-extremity-doppler-ultrasound': {
    nav: 'Lower-Extremity Arterial Doppler Ultrasound',
    title: 'Lower-Extremity Arterial Doppler Ultrasound',
    file: '/our-services/lower-extremity-doppler-ultrasound/',
    image: 'assets/photography/svc-lower-extremity-doppler.webp',
    alt: 'Family Diagnostics ultrasound technician performing a lower-extremity arterial Doppler ultrasound on a patient’s leg',
    summary: 'Uses ultrasound imaging to evaluate arterial blood flow in the legs and identify narrowing, blockage, or other circulation abnormalities.',
    intro: 'A Lower-Extremity Arterial Doppler Ultrasound is a noninvasive vascular study that evaluates arterial blood flow in the legs. It can help identify narrowing, blockage, or other abnormalities affecting circulation to the lower extremities.',
    listTitle: 'Patients Who May Benefit',
    list: ['Patients with leg pain while walking', 'Patients with diabetes', 'Patients with cold feet', 'Patients with weak or absent pulses', 'Patients with nonhealing wounds', 'Patients with skin-color changes', 'Patients with suspected Peripheral Artery Disease', 'Patients with previous vascular procedures'],
    expect: 'The patient lies comfortably while the ultrasound technician applies gel to the legs and uses an ultrasound transducer to evaluate arterial blood flow. The study is noninvasive and does not use radiation.',
  },
  'obstetric-ultrasound': {
    nav: 'Obstetric or Gynecological Ultrasound',
    title: 'Obstetric or Gynecological Ultrasound',
    file: '/our-services/obstetric-ultrasound/',
    image: 'assets/photography/svc-obstetric-gyn-ultrasound.webp',
    alt: 'Family Diagnostics ultrasound technician performing an obstetric ultrasound on a pregnant patient',
    summary: 'Uses ultrasound imaging to evaluate the female reproductive system, pelvic organs, and pregnancy-related conditions based on the physician’s order.',
    intro: 'Obstetric or Gynecological Ultrasound uses sound-wave imaging to evaluate the female reproductive system, pelvic organs, and pregnancy-related conditions. The type of examination performed depends on the physician’s order and the patient’s clinical needs.',
    listTitle: 'Examinations May Include',
    list: ['Pelvic ultrasound', 'Transabdominal ultrasound', 'Transvaginal ultrasound', 'Pregnancy-related ultrasound', 'Evaluation of the uterus and ovaries', 'Evaluation of pelvic pain or abnormal bleeding', 'Evaluation of fibroids, cysts, or other suspected abnormalities'],
    secondTitle: 'Why Practices Offer Obstetric or Gynecological Ultrasound',
    second: ['Convenient testing inside the medical practice', 'Reduces outside referrals', 'Supports timely clinical evaluation', 'Provides ultrasound imaging directly to the ordering provider', 'Improves continuity between testing and follow-up care'],
    expect: 'The examination may be performed through the abdomen or with a transvaginal transducer, depending on the physician’s order and the type of study required. The ultrasound technician will explain the procedure before beginning. Ultrasound imaging does not use ionizing radiation.',
  },
};

const FD_SERVICE_ORDER = ['abi-testing', 'ans-testing', 'sudomotor-testing', 'carotid-doppler-ultrasound', 'lower-extremity-doppler-ultrasound', 'obstetric-ultrasound'];

function ServiceDetail({ slug }) {
  useHashScroll();
  const s = FD_SERVICES[slug];
  const others = FD_SERVICE_ORDER.filter(k => k !== slug).slice(0, 3).map(k => FD_SERVICES[k]);
  return (
    <React.Fragment>
      <FdHeader activeHref={s.file} />
      <main>
        <PageHero eyebrow="Physician-Ordered In-Clinic Testing" heading={s.title}>{s.summary}</PageHero>

        <PageSection>
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <img src={s.image} alt={s.alt} width="1200" height="800" loading="eager" decoding="async"
              style={{ width: '100%', aspectRatio: '3 / 2', objectFit: 'cover', borderRadius: 24 }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <p className="body">{s.intro}</p>
              <h2 className="h3">{s.listTitle}</h2>
              <CheckList columns={1} items={s.list} />
            </div>
          </div>
        </PageSection>

        {s.second ? (
          <PageSection tone="alt">
            <h2 className="h2" style={{ maxWidth: '20ch' }}>{s.secondTitle}</h2>
            <div style={{ marginTop: 32 }}><CheckList columns={2} items={s.second} /></div>
          </PageSection>
        ) : null}

        <PageSection tone={s.second ? 'white' : 'alt'}>
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Eyebrow>Inside Your Clinic</Eyebrow>
              <h2 className="h2">What Patients Can Expect</h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <p className="body">{s.expect}</p>
              <div><Button as="a" href="/contact/" variant="primary" size="lg">Request a Partnership Consultation</Button></div>
            </div>
          </div>
        </PageSection>

        <PageSection tone={s.second ? 'alt' : 'white'}>
          <SectionIntro eyebrow="Our Services" heading="Other Diagnostic Testing We Provide" />
          <div className="grid-3" style={{ marginTop: 'clamp(32px,4vw,48px)' }}>
            {others.map(o => (
              <ServiceCard key={o.file} title={o.nav} image={o.image} imageAlt={o.alt} href={o.file} linkLabel="Learn more">{o.summary}</ServiceCard>
            ))}
          </div>
          <div style={{ marginTop: 32 }}><TextLink href="/our-services/" arrow>View all six diagnostic tests</TextLink></div>
        </PageSection>

        <QuestionsCta />
      </main>
      <FdFooter />
    </React.Fragment>
  );
}

Object.assign(window, { PageHero, PageSection, QuestionsCta, FD_SERVICES, FD_SERVICE_ORDER, ServiceDetail });