"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap, Sparkles } from "lucide-react";
import Link from "next/link";

export default function ServicesPage() {
  const navItems = [
    { name: "Services", id: "services" },
    { name: "Pricing", id: "pricing" },
    { name: "Testimonials", id: "testimonials" },
    { name: "FAQ", id: "faq" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Services",
      items: [
        { label: "Physical Therapy", href: "#services" },
        { label: "Sports Medicine", href: "#services" },
        { label: "Pain Management", href: "#services" },
        { label: "Work Injury Care", href: "#services" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Testimonials", href: "#testimonials" },
        { label: "Pricing", href: "/pricing" },
        { label: "Contact", href: "#contact" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Accessibility", href: "#" },
        { label: "Contact Us", href: "#contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="large"
      background="fluid"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Pyatt MSK" navItems={navItems} />
      </div>

      <div id="services" data-section="services" className="py-20 md:py-32">
        <FeatureCardTwentyOne
          tag="Our Services"
          title="Comprehensive Treatment Services"
          description="Tailored rehabilitation programs addressing a wide range of musculoskeletal conditions. From acute injuries to chronic pain, we have the expertise to help you recover."
          imageSrc="http://img.b2bpic.net/free-photo/personal-trainer-assisting-woman-with-disabilities-her-workout-sports-rehab-centre-with-physiotherapists-patients-working-together-towards-healing_1321-3603.jpg"
          imageAlt="Sports medicine rehabilitation"
          mediaAnimation="slide-up"
          mediaPosition="right"
          accordionItems={[
            {
              id: "1",
              title: "Physical Therapy & Rehabilitation",
              content:
                "Evidence-based treatment for post-injury recovery, surgery rehabilitation, and chronic pain management. Our therapists use advanced techniques to restore function and mobility.",
            },
            {
              id: "2",
              title: "Sports Injury Treatment",
              content:
                "Specialized care for athletes and active individuals. We treat sprains, strains, and performance-related injuries to get you back in the game safely.",
            },
            {
              id: "3",
              title: "Pain Management",
              content:
                "Comprehensive approach to managing acute and chronic pain including manual therapy, exercise prescription, and injury prevention strategies.",
            },
            {
              id: "4",
              title: "Work Injury Rehabilitation",
              content:
                "Occupational rehabilitation and ergonomic assessment to help you return to work safely and prevent future workplace injuries.",
            },
          ]}
          buttons={[{ text: "Explore Services", href: "#services" }]}
          useInvertedBackground={false}
        />
      </div>

      <div id="process" data-section="process" className="py-20 md:py-32">
        <FeatureCardTwentyOne
          tag="Our Process"
          title="Your Personalized Recovery Path"
          description="We follow a structured, evidence-based approach to ensure optimal recovery. Each step is designed with your unique needs in mind."
          imageSrc="http://img.b2bpic.net/free-photo/professional-medic-examining-patient-reaction-light-pupil-response_482257-127007.jpg"
          imageAlt="Patient assessment process"
          mediaAnimation="slide-up"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",
              title: "Step 1: Comprehensive Assessment",
              content:
                "Initial consultation includes detailed medical history, physical examination, and movement analysis to understand your condition and goals.",
            },
            {
              id: "2",
              title: "Step 2: Personalized Treatment Plan",
              content:
                "Based on assessment findings, we create a customized rehabilitation program with clear milestones and expected recovery timeline.",
            },
            {
              id: "3",
              title: "Step 3: Active Treatment & Monitoring",
              content:
                "Regular therapy sessions with continuous progress monitoring, technique adjustments, and home exercise programming to accelerate recovery.",
            },
            {
              id: "4",
              title: "Step 4: Return to Function",
              content:
                "Gradual progression to functional activities with injury prevention strategies and maintenance programs to ensure lasting results.",
            },
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing-services" data-section="pricing-services" className="py-20 md:py-32 bg-gradient-to-b from-transparent to-accent/5">
        <PricingCardFive
          plans={[
            {
              id: "initial-assessment",
              tag: "Initial Assessment",
              price: "$150",
              period: "/session",
              description:
                "Comprehensive evaluation including medical history review, physical examination, and personalized treatment recommendation.",
              button: { text: "Book Assessment", href: "#contact" },
              featuresTitle: "Assessment Includes:",
              features: [
                "60-minute detailed evaluation",
                "Movement analysis and testing",
                "Written treatment plan",
                "Home exercise program",
              ],
            },
            {
              id: "standard-therapy",
              tag: "Standard Sessions",
              tagIcon: Zap,
              price: "$120",
              period: "/session",
              description:
                "Regular physiotherapy sessions focused on your specific treatment goals and functional recovery objectives.",
              button: { text: "Start Treatment", href: "#contact" },
              featuresTitle: "Includes:",
              features: [
                "45-minute therapy session",
                "Advanced treatment techniques",
                "Progress monitoring",
                "Exercise adjustments",
                "Free home exercise videos",
              ],
            },
            {
              id: "package-plan",
              tag: "6-Session Package",
              tagIcon: Sparkles,
              price: "$649",
              period: "total",
              description:
                "Discounted package perfect for structured recovery programs with consistent weekly sessions and comprehensive care.",
              button: { text: "Enroll Now", href: "#contact" },
              featuresTitle: "Package Benefits:",
              features: [
                "6 therapy sessions (save $71)",
                "Dedicated therapist assigned",
                "Priority scheduling",
                "Email exercise support",
                "Progress photos & metrics",
              ],
            },
          ]}
          animationType="slide-up"
          title="Service Pricing"
          description="Transparent pricing for all our rehabilitation services. Choose the plan that works best for your recovery needs."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={footerColumns}
          logoText="Pyatt MSK"
          copyrightText="© 2025 Pyatt MSK Rehabilitation. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}