// Per-discipline service pages. One page per discipline (not per disorder) so each
// becomes the SEO pillar that future blog posts link back to.
// Content is parent-facing and deliberately avoids outcome guarantees.

const SERVICE_PAGES = {
  "speech-therapy": {
    eyebrow: "Speech Therapy",
    name: "Speech Therapy",
    title: "Pediatric speech therapy in Orland Park",
    lead: "Helping kids find their voices, strengthen connections, and grow their communication skills.",
    photo: "Speech session",
    tone: "sky",
    icon: "messages-square",
    intro: [
      "Communication is how children share who they are. When it feels hard, everyday moments can turn into frustration for the whole family. Our speech-language pathologists strengthen children's social communication, articulation, receptive and expressive language, fluency, voice, and play skills through interactive, naturalistic, and engaging activities.",
      "Every child starts with a thorough evaluation, and we build a plan of care around their specific strengths, needs, and goals. You are part of the process from the first conversation onward, with strategies you can carry into daily routines at home.",
    ],
    supportTitle: "What we support",
    support: [
      "Speech sound skills (articulation, phonology, lisps)",
      "Receptive & expressive language",
      "Gestalt language processing",
      "Social communication & pragmatic skills",
      "Childhood apraxia of speech",
      "Fluency & stuttering",
      "Voice & resonance",
      "Oral motor difficulties / myofunctional therapy",
      "AAC & assistive communication",
      "Early language & late talkers",
      "Following directions & listening skills",
      "Play skills",
    ],
    signsTitle: "Signs it may be time to reach out",
    signs: [
      "Few or no words compared with other children the same age",
      "Familiar adults often can't understand what your child is saying",
      "Frustration, withdrawal, or meltdowns when trying to communicate",
      "Repeating phrases or scripts more than using flexible, original language",
      "Trouble following directions or answering simple questions",
      "Difficulty taking turns in conversation or connecting with peers",
      "Stuttering that lasts more than a few months or seems to be getting harder",
      "A hoarse or strained voice that doesn't clear up",
      "Mouth breathing, tongue thrust, or lingering thumb or pacifier habits",
    ],
  },

  "occupational-therapy": {
    eyebrow: "Occupational Therapy",
    name: "Occupational Therapy",
    title: "Pediatric occupational therapy in Orland Park",
    lead: "Building the everyday skills of childhood, from sensory processing to self-care and school readiness.",
    photo: "OT session",
    tone: "sage",
    icon: "puzzle",
    soon: true,
    intro: [
      "A child's \"occupations\" are the things that fill their day: playing, dressing, eating, writing, making friends, and managing big feelings. Occupational therapy builds the underlying skills those activities depend on, so children can take part with more independence and confidence.",
      "Our occupational therapists look at the whole picture, including sensory processing, motor skills, attention, and regulation. Each plan of care follows a thorough evaluation and grows with your child, with coaching so families can support progress between sessions.",
    ],
    supportTitle: "What we support",
    support: [
      "Sensory processing and integration",
      "Fine motor skills",
      "Visual-motor and perceptual skills",
      "Executive function skills",
      "Handwriting & school readiness",
      "Self-care & daily routines",
      "Emotional regulation & coping strategies",
      "Motor planning & coordination",
      "Core strength & postural control",
      "Attention & task follow-through",
      "Social interactions",
      "Play skills",
    ],
    signsTitle: "Signs it may be time to reach out",
    signs: [
      "Strong reactions to sounds, textures, tastes, or movement, or seeming not to notice them",
      "Avoiding messy play, or seeking constant crashing and spinning",
      "Difficulty with buttons, zippers, utensils, or scissors",
      "An awkward pencil grasp, letters that are hard to read, or tiring quickly when writing",
      "Frequent tripping, bumping into things, or seeming clumsy",
      "Big reactions to transitions and changes in routine",
      "Trouble following multi-step routines like getting ready in the morning",
      "Sensitivity to clothing tags, seams, or socks",
      "Needing more help with dressing, bathing, or toileting than peers",
    ],
  },

  "physical-therapy": {
    eyebrow: "Physical Therapy",
    name: "Physical Therapy",
    title: "Pediatric physical therapy in Orland Park",
    lead: "Helping children move with strength and confidence so they can keep up and join in.",
    photo: "PT session",
    tone: "honey",
    icon: "footprints",
    soon: true,
    intro: [
      "Movement is how young children explore the world. Our physical therapists support gross motor development, strength, balance, coordination, and mobility, so children can move comfortably and take part in the activities they care about.",
      "We work with everyone from infants to teens, and care is always built on a thorough evaluation. Sessions are active and encouraging, and we show families how to practice in ways that fit real life.",
    ],
    supportTitle: "What we support",
    support: [
      "Gross motor development & delays",
      "Strength & endurance",
      "Balance & coordination",
      "Gait & mobility",
      "Torticollis & head-turning preference",
      "Early intervention for infants",
      "Toe walking",
      "Low muscle tone & hypermobility",
      "Motor milestones & developmental support",
      "Post-injury & post-surgical recovery",
      "Return to play & sports readiness",
      "Coordination for daily activities",
    ],
    signsTitle: "Signs it may be time to reach out",
    signs: [
      "Not yet rolling, sitting, crawling, or walking around the expected time",
      "A strong preference for turning the head one way, or a flat spot developing",
      "Walking on tiptoes most of the time",
      "Tripping, falling, or tiring much more than other children the same age",
      "Sitting in a W position most of the time, or avoiding putting weight on the legs",
      "Difficulty with stairs, jumping, running, or keeping up on the playground",
      "Complaints of leg pain or fatigue after everyday activity",
      "Using one side of the body noticeably more than the other",
      "Avoiding physical play or sports because movement feels hard",
    ],
  },

  "feeding-therapy": {
    eyebrow: "Feeding Therapy",
    name: "Feeding Therapy",
    title: "Pediatric feeding therapy in Orland Park",
    lead: "Pressure-free support for happier, calmer mealtimes.",
    photo: "Feeding session",
    tone: "blush",
    icon: "utensils",
    soon: true,
    intro: [
      "Mealtimes should be one of the warmest parts of the day. When eating is difficult, they can become the most stressful. We help children expand textures and food variety, build oral-motor skills, and turn eating into a positive, low-stress experience.",
      "Our approach is patient and never forceful. We start with a thorough evaluation, coordinate with your child's physician or dentist when it's helpful, and coach families so progress continues at your own table.",
    ],
    supportTitle: "What we support",
    support: [
      "Picky & selective eating",
      "Texture & sensory food aversions",
      "Dysphagia & swallowing difficulties",
      "Oral-motor skills",
      "Pre & post frenectomy care",
      "Bottle, breast & cup transitions",
      "Straw drinking",
      "Starting and progressing solids",
      "Gagging & mealtime distress",
      "Mealtime routines & family strategies",
      "Growth & intake concerns, alongside your medical team",
      "Expanding accepted foods",
    ],
    signsTitle: "Signs it may be time to reach out",
    signs: [
      "Eating only a small, shrinking list of foods",
      "Refusing entire food groups or textures",
      "Gagging, coughing, or choking during meals",
      "Meals that regularly stretch long or end in distress",
      "Difficulty moving from purees to table foods",
      "Trouble with the bottle, breast, cup, or straw",
      "A wet or gurgly voice after drinking",
      "Concerns about weight, growth, or how much your child is taking in",
      "Recovering from a tongue or lip tie release",
    ],
    medicalNote: "If your child is choking, having trouble breathing while eating, or losing weight, please contact your pediatrician right away. Feeding therapy works alongside medical care, not in place of it.",
  },
};

const SERVICE_FAQS = [
  { q: "Do we need a referral to get started?",
    a: "No referral is needed to book a consultation with us. If your child's physician has recommendations or records to share, we're glad to work alongside them." },
  { q: "How does therapy begin?",
    a: "Every child starts with a thorough evaluation. From there we build a plan of care around your child's specific strengths, needs, and goals, and we walk you through all of it before we begin." },
  { q: "Is my child too young or too old?",
    a: "We support a wide range of ages, from infants through the teen years and beyond. Early support can be valuable, and it's never too late to reach out." },
  { q: "Will I be involved in sessions?",
    a: "Yes. Families are partners here. We share practical strategies you can use in everyday routines, because the time between sessions is where a lot of progress happens." },
  { q: "How does payment work?",
    a: "Bloom Well is a private-pay practice, which lets us keep sessions focused on your child rather than on insurance requirements. We'll go over rates with you directly so there are no surprises." },
];

function ServicePage({ slug, onBook, navigate }) {
  const s = SERVICE_PAGES[slug];
  if (!s) return null;
  const toneBg = { sky: "var(--sky-100)", sage: "var(--sage-100)", honey: "var(--honey-100)", blush: "var(--blush-100)" };
  const toneFg = { sky: "var(--sky-600)", sage: "var(--sage-600)", honey: "var(--honey-600)", blush: "var(--blush-500)" };
  const others = Object.keys(SERVICE_PAGES).filter((k) => k !== slug);

  return (
    <React.Fragment>
      <PageHero eyebrow={s.eyebrow} tone={s.tone === "sky" ? "sky" : s.tone === "sage" ? "sage" : "honey"}
        title={s.title} lead={s.lead} />

      <section className="bw-page-section" style={{ maxWidth: 1080, margin: "0 auto", padding: "52px 28px 8px" }}>
        {s.soon && (
          <div className="bw-notice">
            <Icon name="clock" size={19} />
            <span><strong>{s.name} is coming soon.</strong> We're building this program as our team grows. Reach out now and we'll tell you the moment it opens, or point you to the support we already offer.</span>
          </div>
        )}

        <div className="bw-svc-intro">
          <div>
            {s.intro.map((p, i) => (
              <p key={i} style={{ fontSize: 16.5, color: i === 0 ? "var(--text-body)" : "var(--text-muted)", lineHeight: 1.7, margin: "0 0 16px" }}>{p}</p>
            ))}
            <Button variant="primary" onClick={onBook} trailingIcon={<Icon name="arrow-right" size={17} />} style={{ marginTop: 4 }}>
              Schedule a free consultation
            </Button>
          </div>
          <PhotoPlaceholder label={s.photo} tone={s.tone} style={{ aspectRatio: "4 / 3.6", boxShadow: "var(--shadow-md)" }} />
        </div>
      </section>

      <section style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", marginTop: 44 }}>
        <div className="bw-page-section" style={{ maxWidth: 1080, margin: "0 auto", padding: "56px 28px" }}>
          <Eyebrow color={toneFg[s.tone]}>{s.supportTitle}</Eyebrow>
          <h2 style={{ fontSize: 31, margin: "10px 0 26px", letterSpacing: "-0.02em" }}>Areas our {s.name.toLowerCase()} team works on</h2>
          <div className="bw-points-grid" style={{ gap: "12px 24px" }}>
            {s.support.map((p) => (
              <div key={p} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <span style={{ color: toneFg[s.tone], marginTop: 2 }}><Icon name="check" size={17} stroke={2.6} /></span>
                <span style={{ fontSize: 15, color: "var(--text-body)" }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bw-page-section" style={{ maxWidth: 1080, margin: "0 auto", padding: "56px 28px" }}>
        <Eyebrow color={toneFg[s.tone]}>When to ask</Eyebrow>
        <h2 style={{ fontSize: 31, margin: "10px 0 8px", letterSpacing: "-0.02em" }}>{s.signsTitle}</h2>
        <p style={{ fontSize: 16.5, color: "var(--text-muted)", margin: "0 0 26px", maxWidth: "62ch", lineHeight: 1.6 }}>
          Every child develops on their own timeline, and one sign on its own rarely tells the whole story. If any of these sound familiar, a conversation is a good place to start.
        </p>
        <div className="bw-signs-grid">
          {s.signs.map((sign) => (
            <Card key={sign} soft style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
              <span style={{ flex: "none", width: 30, height: 30, borderRadius: "var(--radius-sm)", background: toneBg[s.tone], color: toneFg[s.tone], display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="help-circle" size={17} />
              </span>
              <span style={{ fontSize: 15, color: "var(--text-body)", lineHeight: 1.55 }}>{sign}</span>
            </Card>
          ))}
        </div>
        {s.medicalNote && (
          <div className="bw-notice bw-notice--alert" style={{ marginTop: 26 }}>
            <Icon name="alert-circle" size={19} />
            <span>{s.medicalNote}</span>
          </div>
        )}
      </section>

      <section style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)" }}>
        <div className="bw-page-section" style={{ maxWidth: 820, margin: "0 auto", padding: "56px 28px" }}>
          <div style={{ textAlign: "center", marginBottom: 28 }}>
            <Eyebrow color={toneFg[s.tone]}>Common questions</Eyebrow>
            <h2 style={{ fontSize: 31, margin: "10px 0 0", letterSpacing: "-0.02em" }}>Questions families ask us</h2>
          </div>
          <div className="bw-faq">
            {SERVICE_FAQS.map((f) => (
              <details key={f.q}>
                <summary>{f.q}<Icon name="chevron-down" size={19} /></summary>
                <p>{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section className="bw-page-section" style={{ maxWidth: 1080, margin: "0 auto", padding: "56px 28px" }}>
        <Eyebrow color={toneFg[s.tone]}>Explore more</Eyebrow>
        <h2 style={{ fontSize: 27, margin: "10px 0 22px", letterSpacing: "-0.02em" }}>Our other specialties</h2>
        <div className="bw-svc-other">
          {others.map((k) => {
            const o = SERVICE_PAGES[k];
            return (
              <Card key={k} interactive onClick={() => navigate(k)}>
                <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: toneBg[o.tone], color: toneFg[o.tone], display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={o.icon} size={22} />
                </span>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", margin: "13px 0 5px" }}>
                  <h3 style={{ fontSize: 16.5, margin: 0 }}>{o.name}</h3>
                  {o.soon && <span className="bw-soon">Coming soon</span>}
                </div>
                <p style={{ fontSize: 14, color: "var(--text-muted)", margin: 0, lineHeight: 1.5 }}>{o.lead}</p>
              </Card>
            );
          })}
        </div>
      </section>

      <section style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "52px 28px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 26, flexWrap: "wrap" }}>
          <div>
            <h2 style={{ fontSize: 27, margin: "0 0 6px" }}>Not sure where to start?</h2>
            <p style={{ fontSize: 16.5, color: "var(--text-muted)", margin: 0, maxWidth: "50ch" }}>
              That's what our free consultation is for. We'll listen, ask a few questions, and help you find the right next step for your child.
            </p>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={onBook}>Schedule a consultation</Button>
            <Button variant="outline" size="lg" onClick={() => navigate("getting-started")}>See how it works</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.SERVICE_PAGES = SERVICE_PAGES;
window.ServicePage = ServicePage;
