"use client";

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

export default function PricingPage() {
  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="pricing" data-section="pricing" className="py-20 md:py-32">
        <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="Transparent Pricing"
          description="Choose the plan that works best for your recovery needs. No hidden fees."
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="services-pricing" data-section="services-pricing" className="py-20 md:py-32 bg-gradient-to-b from-transparent to-accent/5">
        <FeatureCardTwentyOne
          tag="What's Included"
          title="Comprehensive Care at Every Level"
          description="All our pricing plans include access to our professional team, advanced treatment techniques, and personalized recovery support."
          imageSrc="http://img.b2bpic.net/free-photo/physiotherapy-doctor-assisting-elderly-patient-with-leg-exercise-clinic_662251-1742.jpg"
          imageAlt="Physiotherapy treatment"
          mediaAnimation="slide-up"
          mediaPosition="right"
          accordionItems={[
            {
              id: "1",
              title: "Professional Assessment",
              content:
                "Every patient receives a comprehensive evaluation to identify their specific needs and create an effective treatment plan.",
            },
            {
              id: "2",
              title: "Evidence-Based Treatment",
              content:
                "We use proven physiotherapy techniques and exercise protocols that have been shown to accelerate recovery and improve outcomes.",
            },
            {
              id: "3",
              title: "Progress Monitoring",
              content:
                "Continuous assessment and documentation of your progress helps us adjust your treatment plan as you recover.",
            },
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Still have questions about our pricing? Contact us to discuss a custom plan for your specific needs."
          animationType="entrance-slide"
          buttons={[
            { text: "Get in Touch", href: "#contact" },
            { text: "Schedule Consultation", href: "tel:+1234567890" },
          ]}
          background={{ variant: "sparkles-gradient" }}
          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>
  );
}