"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { CheckCircle, Dumbbell, Heart, Sparkles, Star, TrendingUp, Users, Zap } from "lucide-react";

export default function FitnessPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="FitFlow"
          navItems={[
            { name: "Workouts", id: "workouts" },
            { name: "Features", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Download", id: "download" }
          ]}
          button={{
            text: "Get Started",            href: "download"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Your Personal Fitness Coach in Your Pocket"
          description="Transform your body and mind with AI-powered workout plans, real-time form feedback, and a global community of fitness enthusiasts. Get stronger, faster, smarter."
          tag="Transform Your Fitness Journey"
          tagIcon={Zap}
          background={{ variant: "canvas-reveal" }}
          imageSrc="https://img.b2bpic.net/free-photo/closeup-female-athlete-using-mobile-phone-while-checking-heart-rate-wristwatch_637285-3472.jpg"
          imageAlt="FitFlow fitness app interface showing workout dashboard"
          buttons={[
            { text: "Download Now", href: "download" },
            { text: "View Workouts", href: "workouts" }
          ]}
        />
      </div>

      <div id="workouts" data-section="workouts">
        <FeatureCardTwelve
          features={[
            {
              id: "strength",              label: "Strength",              title: "Build Muscle & Power",              items: [
                "Progressive overload training",                "Form correction with AI camera",                "Personalized rep ranges",                "Recovery tracking"
              ],
              buttons: [
                { text: "Start Now", href: "download" }
              ]
            },
            {
              id: "cardio",              label: "Cardio",              title: "Boost Endurance & Stamina",              items: [
                "HIIT & steady-state routines",                "Heart rate zone optimization",                "Real-time pace feedback",                "Performance metrics"
              ],
              buttons: [
                { text: "Start Now", href: "download" }
              ]
            },
            {
              id: "flexibility",              label: "Flexibility",              title: "Increase Range & Mobility",              items: [
                "Guided yoga & stretching",                "Injury prevention protocols",                "Personalized flexibility goals",                "Recovery optimization"
              ],
              buttons: [
                { text: "Start Now", href: "download" }
              ]
            }
          ]}
          animationType="opacity"
          title="Choose Your Workout Plan"
          description="Customizable programs designed by certified trainers for every fitness level and goal"
          tag="Workout Plans"
          tagIcon={Dumbbell}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="highlights" data-section="highlights">
        <ProductCardFour
          products={[
            {
              id: "ai-coach",              name: "AI-Powered Coach",              price: "Real-time",              variant: "Form Correction & Guidance",              imageSrc: "https://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg",              imageAlt: "AI form correction during strength training"
            },
            {
              id: "progress-tracking",              name: "Progress Analytics",              price: "Detailed",              variant: "Stats, Charts & Insights",              imageSrc: "https://img.b2bpic.net/free-photo/woman-gym-with-smartphone-template_23-2148111618.jpg",              imageAlt: "Progress tracking dashboard with analytics"
            },
            {
              id: "community",              name: "Global Community",              price: "Connected",              variant: "Challenges & Motivation",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg",              imageAlt: "Community workout challenges and social features"
            },
            {
              id: "nutrition",              name: "Nutrition Guidance",              price: "Personalized",              variant: "Meal Plans & Macro Tracking",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63678.jpg",              imageAlt: "Nutrition planning interface"
            }
          ]}
          title="Premium Features Inside"
          description="Everything you need to achieve your fitness goals with advanced tracking and personalization"
          tag="App Features"
          tagIcon={Sparkles}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "500",              title: "thousand",              description: "Active users worldwide",              icon: Users
            },
            {
              id: "2",              value: "2.5",              title: "million",              description: "Workouts completed",              icon: Heart
            },
            {
              id: "3",              value: "4.9",              title: "stars",              description: "App store rating",              icon: Star
            },
            {
              id: "4",              value: "89",              title: "percent",              description: "User retention rate",              icon: TrendingUp
            }
          ]}
          title="Our Impact"
          description="Join thousands of users who have transformed their fitness journey with FitFlow"
          tag="Success Stories"
          tagIcon={TrendingUp}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-622.jpg"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/physically-fit-woman-with-long-hair-is-standing-crossed-her-hands-dark-background_613910-13266.jpg"
            }
          ]}
          cardTitle="Over 500,000 members trust FitFlow to achieve their fitness goals and transform their lives"
          cardTag="Trusted by fitness enthusiasts worldwide"
          cardTagIcon={CheckCircle}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="download" data-section="download">
        <TextSplitAbout
          title="Ready to Transform?"
          description={[
            "Download FitFlow today and start your fitness transformation. Get 7 days free premium access to all features and unlimited workout plans.",            "Join a community of thousands already achieving their goals. Whether you're a beginner or advanced athlete, FitFlow adapts to your level and pushes you toward success."
          ]}
          useInvertedBackground="noInvert"
          showBorder={false}
          buttons={[
            {
              text: "Download on iOS",              href: "https://www.apple.com",              props: {
                className: "w-full"
              }
            },
            {
              text: "Download on Android",              href: "https://www.google.com",              props: {
                className: "w-full"
              }
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about FitFlow and how to get started"
          faqs={[
            {
              id: "1",              title: "Is FitFlow suitable for beginners?",              content: "Absolutely! FitFlow is designed for all fitness levels. Our AI adapts workouts based on your experience and progression, starting with foundational exercises and gradually increasing intensity as you improve."
            },
            {
              id: "2",              title: "How does the AI form correction work?",              content: "Our advanced computer vision technology uses your device camera to analyze your exercise form in real-time. It provides instant feedback to help you maintain proper technique and prevent injuries."
            },
            {
              id: "3",              title: "Can I use FitFlow without equipment?",              content: "Yes! FitFlow includes bodyweight-only workout plans perfect for home training. We also offer equipment-specific routines for gym workouts or training with dumbbells, kettlebells, and resistance bands."
            },
            {
              id: "4",              title: "What's included in the free trial?",              content: "Your 7-day free trial gives you unlimited access to all features including AI coaching, workout customization, progress tracking, nutrition guidance, and community features. No credit card required to start."
            },
            {
              id: "5",              title: "How often should I update my fitness goals?",              content: "We recommend reviewing your goals every 4-6 weeks as you progress. FitFlow will suggest adjustments based on your performance, recovery data, and engagement patterns to keep you challenged and motivated."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="FitFlow"
          copyrightText="© 2025 FitFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Workouts", href: "workouts" },
                { label: "Pricing", href: "download" },
                { label: "Download", href: "download" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "https://fitflow.com/about" },
                { label: "Blog", href: "https://fitflow.com/blog" },
                { label: "Careers", href: "https://fitflow.com/careers" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "https://fitflow.com/privacy" },
                { label: "Terms of Service", href: "https://fitflow.com/terms" },
                { label: "Cookie Policy", href: "https://fitflow.com/cookies" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}