"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Heart } from "lucide-react";
import Link from "next/link";

export default function AboutPage() {
  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="about" data-section="about" className="py-20 md:py-32">
        <TestimonialAboutCard
          tag="About Pyatt MSK"
          title="Dedicated to Your Recovery and Wellbeing"
          description="Leading MSK Rehabilitation Provider"
          subdescription="Pyatt MSK Rehabilitation Center"
          icon={Heart}
          imageSrc="http://img.b2bpic.net/free-photo/physiotherapy-doctor-assisting-elderly-patient-with-leg-exercise-clinic_662251-1742.jpg?_wi=3"
          imageAlt="Professional rehabilitation therapy"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics" className="py-20 md:py-32">
        <MetricCardFourteen
          title="Our Impact and Commitment to Excellence"
          tag="By The Numbers"
          metrics={[
            {
              id: "1",
              value: "20+",
              description:
                "Years of combined experience from our team of certified physiotherapists and MSK specialists",
            },
            {
              id: "2",
              value: "10,000+",
              description:
                "Patients successfully treated and returned to their normal activities and lifestyle",
            },
            {
              id: "3",
              value: "95%",
              description:
                "Patient satisfaction rate with our services and recovery outcomes",
            },
            {
              id: "4",
              value: "4.9/5",
              description:
                "Average rating from verified patient reviews on independent healthcare platforms",
            },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="values" data-section="values" className="py-20 md:py-32 bg-gradient-to-b from-transparent to-accent/5">
        <FeatureCardTwentyOne
          tag="Our Values"
          title="Patient-Centered Excellence"
          description="We are committed to providing the highest standard of MSK care with a focus on patient outcomes, professional integrity, and continuous improvement."
          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?_wi=3"
          imageAlt="Patient-centered rehabilitation approach"
          mediaAnimation="slide-up"
          mediaPosition="right"
          accordionItems={[
            {
              id: "1",
              title: "Patient-First Approach",
              content:
                "Every decision we make is guided by what's best for our patients. We listen, we care, and we deliver results.",
            },
            {
              id: "2",
              title: "Evidence-Based Practice",
              content:
                "Our treatment protocols are grounded in the latest research and best practices in physiotherapy and rehabilitation.",
            },
            {
              id: "3",
              title: "Professional Excellence",
              content:
                "Our team continuously pursues professional development and maintains the highest standards of clinical practice.",
            },
            {
              id: "4",
              title: "Accessibility & Inclusion",
              content:
                "We believe quality rehabilitation should be accessible to everyone. We work with insurance and offer flexible payment options.",
            },
          ]}
          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>
  );
}