import React, { useMemo } from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import {
  Activity,
  Zap,
  Heart,
  Brain,
  Baby,
  UserCheck,
  Dumbbell,
  ChevronDown,
  MapPin,
  Phone,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useNavigate, Link as RouterLink } from 'react-router-dom';

const Services = () => {
  const navigate = useNavigate();

  const handleBookOnline = () => {
    navigate('/booking');
  };

  // ✅ Improvements:
  // - Added SEO-friendly FAQ (accordion) + JSON-LD
  // - Added service anchor links + "Learn more" CTA per service
  // - Better internal linking (RouterLink instead of <a>) to avoid full page reload
  // - "Sticky" quick nav on desktop
  // - More scannable layout: bullets, headings, better spacing

  const services = useMemo(
    () => [
      {
        id: 'sports-injury-rehab',
        icon: <Dumbbell className="w-12 h-12 text-physio-blue" />,
        title: 'Sports Injury Rehabilitation',
        description:
          'Specialized treatment for sports-related injuries including sprains, strains, and overuse conditions. We work with athletes of all levels to optimize recovery and safely return to sport.',
        benefits: [
          'Comprehensive injury assessment',
          'Sport-specific rehabilitation programs',
          'Gradual return-to-play protocols',
          'Performance optimization strategies',
          'Injury prevention education',
        ],
        relatedLinks: [
          { to: '/blog/sports-injury-physiotherapy-recovery', label: 'Sports injuries & rehabilitation' },
        ],
      },
      {
        id: 'post-surgical-recovery',
        icon: <Activity className="w-12 h-12 text-physio-teal" />,
        title: 'Post-Surgical Recovery',
        description:
          'Expert rehab following orthopaedic surgery, including joint replacements, ACL reconstruction, and other surgical procedures. We help you regain strength, mobility, and confidence.',
        benefits: [
          'Customized post-operative protocols',
          'Pain and swelling management',
          'Scar tissue mobilization',
          'Progressive strengthening exercises',
          'Functional movement restoration',
        ],
      },
      {
        id: 'chronic-pain',
        icon: <Zap className="w-12 h-12 text-physio-blue-dark" />,
        title: 'Chronic Pain Management',
        description:
          'Evidence-based care for persistent pain, including back/neck pain, arthritis, and long-term pain conditions. We combine hands-on treatment, exercise, and education to improve function and control symptoms.',
        benefits: [
          'Comprehensive pain assessment',
          'Manual therapy techniques',
          'Therapeutic exercise programs',
          'Pain education and self-management',
          'Lifestyle modification guidance',
        ],
        relatedLinks: [
          { to: '/blog/mechanical-vs-non-mechanical-back-pain', label: 'Understand back pain' },
        ],
      },
      {
        id: 'orthopaedic-physio',
        icon: <Heart className="w-12 h-12 text-physio-green" />,
        title: 'Orthopaedic Physiotherapy',
        description:
          'Care for musculoskeletal conditions affecting bones, joints, muscles, and ligaments. From acute injuries to degenerative conditions, we provide comprehensive orthopaedic care.',
        benefits: [
          'Joint mobilization and manipulation',
          'Soft tissue therapy',
          'Postural correction',
          'Biomechanical analysis',
          'Home exercise programs',
        ],
        relatedLinks: [
          { to: '/blog/knee-osteoarthritis-exercises-physio', label: 'Knee pain & osteoarthritis' },
        ],
      },
      {
        id: 'neuro-rehab',
        icon: <Brain className="w-12 h-12 text-physio-teal-dark" />,
        title: 'Neurological Rehabilitation',
        description:
          "Specialized rehab for neurological conditions such as stroke, multiple sclerosis, Parkinson's disease, and spinal cord injuries. We focus on improving mobility, balance, and independence.",
        benefits: [
          'Balance and coordination training',
          'Gait re-education',
          'Spasticity management',
          'Functional task practice',
          'Assistive device prescription',
        ],
      },
      {
        id: 'paediatric-physio',
        icon: <Baby className="w-12 h-12 text-physio-blue" />,
        title: 'Pediatric Physiotherapy',
        description:
          'Support for children with developmental delays, congenital conditions, sports injuries, and other paediatric concerns. We keep sessions positive, practical, and engaging.',
        benefits: [
          'Developmental milestone support',
          'Play-based therapy approaches',
          'Parent education and training',
          'School and activity modifications',
          'Growth and development monitoring',
        ],
      },
      {
        id: 'geriatric-care',
        icon: <UserCheck className="w-12 h-12 text-physio-teal" />,
        title: 'Geriatric Care',
        description:
          'Age-appropriate physiotherapy to maintain independence, reduce fall risk, manage age-related conditions, and keep you moving confidently.',
        benefits: [
          'Fall risk assessment and prevention',
          'Balance and stability training',
          'Strength and flexibility programs',
          'Mobility aid assessment',
          'Chronic disease management',
        ],
      },
    ],
    []
  );

  const faqs = useMemo(
    () => [
      {
        q: 'Do I need a GP referral to see a physiotherapist?',
        a: 'No. You can book directly. A referral may be needed for specific funding pathways (e.g., EPC/Medicare plans), but it is not required for standard appointments.',
      },
      {
        q: 'How many sessions will I need?',
        a: 'It depends on your condition, goals, and how long symptoms have been present. After your first assessment, we’ll give you a clear plan and expected timeline.',
      },
      {
        q: 'What should I bring to my first appointment?',
        a: 'Bring any relevant scans/reports, a list of medications (if applicable), and wear comfortable clothing that allows movement of the area being treated.',
      },
      {
        q: 'Do you treat knee, back, neck pain and dizziness?',
        a: 'Yes. We commonly treat back/neck pain, knee issues (including osteoarthritis), and dizziness/balance problems—along with many other musculoskeletal conditions.',
      },
    ],
    []
  );

  const pageTitle = 'Our Services - AlphaCare Physiotherapy Marion | Comprehensive Treatment Options';
  const pageDescription =
    'Explore our physiotherapy services in Marion, SA: sports injury rehab, post-surgical recovery, chronic pain management, orthopaedic and neurological rehab, paediatric physio and geriatric care.';

  // ✅ JSON-LD FAQ for SEO
  const faqJsonLd = useMemo(() => {
    const mainEntity = faqs.map((f) => ({
      '@type': 'Question',
      name: f.q,
      acceptedAnswer: { '@type': 'Answer', text: f.a },
    }));

    return {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity,
    };
  }, [faqs]);

  return (
    <>
      <Helmet>
        <title>{pageTitle}</title>
        <meta name="description" content={pageDescription} />
        <script type="application/ld+json">{JSON.stringify(faqJsonLd)}</script>
      </Helmet>

      {/* Hero Section */}
      <section className="bg-physio-gradient text-white py-20">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center max-w-4xl mx-auto"
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-white">Our Services</h1>
            <p className="text-xl text-physio-blue-light leading-relaxed font-medium">
              Comprehensive physiotherapy treatments tailored to your unique needs and goals
            </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                onClick={handleBookOnline}
                className="bg-white text-physio-blue-dark hover:bg-physio-neutral-100 px-8 py-6 text-lg transition-all duration-300 shadow-xl hover:scale-105 font-bold"
              >
                Book Online
              </Button>
              <Button
                onClick={() => navigate('/contact')}
                variant="outline"
                className="border-2 border-white text-white bg-transparent hover:bg-white/10 px-8 py-6 text-lg transition-all duration-300"
              >
                Contact Us
              </Button>
            </div>

            <p className="mt-8 text-lg text-white/95">
              Learn more{' '}
              <RouterLink to="/about" className="underline font-semibold">
                about AlphaCare Physio
              </RouterLink>
              , explore the conditions we treat at our{' '}
              <RouterLink to="/physiotherapist-marion" className="underline font-semibold">
                Marion clinic
              </RouterLink>
              , or browse our services below.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Quick Nav */}
      <section className="bg-white border-b border-physio-neutral-200">
        <div className="container mx-auto px-4 py-6">
          <div className="flex flex-wrap items-center justify-center gap-3">
            {services.map((s) => (
              <a
                key={s.id}
                href={`#${s.id}`}
                className="px-4 py-2 rounded-full text-sm font-semibold border border-physio-neutral-200 text-physio-blue-dark hover:border-physio-blue/40 hover:bg-physio-blue-bg/40 transition"
              >
                {s.title}
              </a>
            ))}
          </div>
          <div className="mt-3 text-center text-xs text-physio-neutral-500 flex items-center justify-center gap-2">
            <ChevronDown className="w-4 h-4" />
            Jump to a service
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-20 bg-physio-neutral-50">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 gap-12">
            {services.map((service, index) => (
              <motion.div
                key={service.id}
                id={service.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.08 }}
                className="bg-white rounded-xl shadow-md border border-physio-neutral-200 overflow-hidden hover:shadow-xl hover:shadow-physio-blue/10 transition-all duration-300"
              >
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
                  <div className="md:col-span-1 p-8 bg-physio-blue-bg flex flex-col items-center justify-center text-center border-r border-physio-neutral-100">
                    <div className="mb-4 p-4 bg-white rounded-full shadow-sm">{service.icon}</div>
                    <h2 className="text-2xl font-bold text-physio-blue-dark">{service.title}</h2>
                    <p className="mt-2 text-sm text-physio-neutral-600">
                      Serving Marion, Mitchell Park & nearby suburbs
                    </p>
                  </div>

                  <div className="md:col-span-2 p-8">
                    <p className="text-lg text-physio-neutral-600 mb-6 leading-relaxed">
                      {service.description}
                    </p>

                    <div className="mb-6">
                      <p className="font-semibold text-physio-blue-dark mb-3">What we offer:</p>
                      <ul className="space-y-2">
                        {service.benefits.map((benefit, idx) => (
                          <li key={idx} className="flex items-start gap-2">
                            <span className="text-physio-teal mt-1">•</span>
                            <span className="text-physio-neutral-600">{benefit}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* Related links (internal SEO) */}
                    {service.relatedLinks?.length ? (
                      <div className="mb-6">
                        <p className="font-semibold text-physio-blue-dark mb-2">Related reading:</p>
                        <div className="flex flex-wrap gap-3">
                          {service.relatedLinks.map((l) => (
                            <RouterLink
                              key={l.to}
                              to={l.to}
                              className="text-physio-blue underline hover:text-physio-blue-dark font-semibold"
                            >
                              {l.label}
                            </RouterLink>
                          ))}
                        </div>
                      </div>
                    ) : null}

                    <div className="flex flex-col sm:flex-row gap-3">
                      <Button
                        onClick={handleBookOnline}
                        className="bg-physio-blue hover:bg-physio-blue-dark text-white transition-all duration-300 shadow-md"
                      >
                        Book This Service
                      </Button>
                      <Button
                        variant="outline"
                        onClick={() => navigate('/contact')}
                        className="border-2 border-physio-blue text-physio-blue hover:bg-physio-blue-bg"
                      >
                        Ask a Question
                      </Button>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* What to Expect */}
      <section className="py-20 bg-white border-t border-physio-neutral-200">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl md:text-4xl font-bold text-physio-blue-dark mb-6">
                What to Expect During Your Visit
              </h2>

              <div className="space-y-5">
                <div className="bg-physio-neutral-50 border border-physio-neutral-200 rounded-xl p-5">
                  <h3 className="text-xl font-semibold text-physio-blue mb-2">Initial Assessment</h3>
                  <p className="text-physio-neutral-600 leading-relaxed">
                    Your first session includes a thorough review of your symptoms, relevant history, and goals. We’ll assess
                    movement, strength, and function to identify what’s driving your issue.
                  </p>
                </div>

                <div className="bg-physio-neutral-50 border border-physio-neutral-200 rounded-xl p-5">
                  <h3 className="text-xl font-semibold text-physio-blue mb-2">Treatment Plan</h3>
                  <p className="text-physio-neutral-600 leading-relaxed">
                    You’ll receive a clear plan that may include hands-on therapy, tailored exercise, and education—so you know
                    what we’re doing and why.
                  </p>
                </div>

                <div className="bg-physio-neutral-50 border border-physio-neutral-200 rounded-xl p-5">
                  <h3 className="text-xl font-semibold text-physio-blue mb-2">Ongoing Care</h3>
                  <p className="text-physio-neutral-600 leading-relaxed">
                    We track progress and update your program as you improve. Our goal is to get you back to normal activity
                    with confidence and long-term strategies.
                  </p>
                </div>
              </div>

              <div className="mt-8 flex flex-col sm:flex-row gap-3">
                <Button
                  onClick={handleBookOnline}
                  className="bg-physio-blue hover:bg-physio-blue-dark text-white transition-all duration-300 shadow-md"
                >
                  Book an Assessment
                </Button>
                <Button
                  variant="outline"
                  onClick={() => navigate('/contact')}
                  className="border-2 border-physio-blue text-physio-blue hover:bg-physio-blue-bg"
                >
                  Speak to Our Team
                </Button>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <img
                className="rounded-xl shadow-xl shadow-physio-blue/20 w-full h-auto object-cover border-4 border-white"
                alt="Physiotherapist conducting patient assessment"
                src="https://horizons-cdn.hostinger.com/7582bfac-3acf-4347-93c9-6084476e4580/lucid-origin_a_confident_physiotherapist_with_a_warm_smile_and_gentle_eyes_sitting_on_the_edg-0-LPhTc.jpg"
                loading="lazy"
                decoding="async"
              />
            </motion.div>
          </div>
        </div>
      </section>

      {/* FAQ (SEO booster) */}
      <section className="py-20 bg-physio-neutral-50 border-t border-physio-neutral-200">
        <div className="container mx-auto px-4 max-w-4xl">
          <h2 className="text-3xl md:text-4xl font-bold text-physio-blue-dark mb-8 text-center">
            Frequently Asked Questions
          </h2>

          <div className="space-y-4">
            {faqs.map((f, i) => (
              <details
                key={i}
                className="group bg-white border border-physio-neutral-200 rounded-xl p-5 shadow-sm hover:shadow-md transition"
              >
                <summary className="cursor-pointer list-none flex items-center justify-between gap-4">
                  <span className="text-lg font-semibold text-physio-blue-dark">{f.q}</span>
                  <ChevronDown className="w-5 h-5 text-physio-blue transition-transform duration-200 group-open:rotate-180" />
                </summary>
                <p className="mt-4 text-physio-neutral-600 leading-relaxed">{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-20 bg-physio-gradient text-white">
        <div className="container mx-auto px-4 text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Begin Your Treatment?</h2>
            <p className="text-xl mb-8 max-w-2xl mx-auto text-physio-blue-light">
              Book an assessment at AlphaCare Physiotherapy in Marion and get a clear plan to move better.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                onClick={handleBookOnline}
                className="bg-white text-physio-blue-dark hover:bg-physio-neutral-100 px-8 py-6 text-lg transition-all duration-300 shadow-xl hover:scale-105 font-bold"
              >
                Book Online
              </Button>
              <Button
                onClick={() => navigate('/contact')}
                variant="outline"
                className="border-2 border-white text-white bg-transparent hover:bg-white/10 px-8 py-6 text-lg transition-all duration-300"
              >
                Contact Us
              </Button>
            </div>

            {/* Local contact micro-CTA */}
            <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-6 text-white/95">
              <div className="flex items-center gap-2">
                <MapPin className="w-5 h-5" />
                <span className="font-semibold">Marion • Mitchell Park • Nearby suburbs</span>
              </div>
              <div className="flex items-center gap-2">
                <Phone className="w-5 h-5" />
                <a className="underline font-semibold" href="tel:1300433233">
                  1300 433 233
                </a>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Common conditions we treat (kept, but improved internal routing) */}
        <div className="mt-12 max-w-xl mx-auto bg-white rounded-xl p-6 shadow-xl">
          <h3 className="text-xl font-bold text-physio-blue-dark mb-4">Common conditions we treat</h3>

          <ul className="space-y-3">
            <li>
              <RouterLink
                to="/blog/mechanical-vs-non-mechanical-back-pain"
                className="text-physio-blue underline hover:text-physio-blue-dark"
              >
                Understand back pain
              </RouterLink>
            </li>

            <li>
              <RouterLink
                to="/blog/sports-injury-physiotherapy-recovery"
                className="text-physio-blue underline hover:text-physio-blue-dark"
              >
                Sports injuries and rehabilitation
              </RouterLink>
            </li>

            <li>
              <RouterLink
                to="/blog/knee-osteoarthritis-exercises-physio"
                className="text-physio-blue underline hover:text-physio-blue-dark"
              >
                Knee pain and osteoarthritis
              </RouterLink>
            </li>

            <li>
              <RouterLink
                to="/blog/vestibular-rehabilitation-balance-dizziness"
                className="text-physio-blue underline hover:text-physio-blue-dark"
              >
                Dizziness and balance problems
              </RouterLink>
            </li>
          </ul>
        </div>
      </section>
    </>
  );
};

export default Services;