"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Activity, Dumbbell, Download, Heart, Home, Settings, Target, Wind, Zap } from "lucide-react";

export default function FitnessPage() {
  return (
    <ThemeProvider
      defaultButtonVariant={"elastic-effect"}
      defaultTextAnimation={"entrance-slide"}
      borderRadius={"rounded"}
      contentWidth={"compact"}
      sizing={"mediumLarge"}
      background={"circleGradient"}
      cardStyle={"gradient-radial"}
      primaryButtonStyle={"inset-glow"}
      secondaryButtonStyle={"glass"}
      headingFontWeight={"bold"}
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FitFlow"
          navItems={[
            { name: "Workouts", id: "workouts" },
            { name: "Features", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Download App",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Transform Your Body, Master Your Fitness"
          description="Join millions achieving their fitness goals with personalized workout plans, real-time progress tracking, and expert coaching. Start your transformation today."
          tag="Fitness Revolution"
          tagIcon={Zap}
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Download Now", href: "contact" },
            { text: "Explore Plans", href: "workouts" }
          ]}
          dashboard={{
            title: "Your Training Hub",            logoIcon: Dumbbell,
            imageSrc: "https://img.b2bpic.net/free-vector/gradient-fitness-app-template_23-2151069851.jpg",            searchPlaceholder: "Search workouts...",            sidebarItems: [
              { icon: Home, active: true },
              { icon: Activity },
              { icon: Settings }
            ],
            buttons: [
              { text: "Start Workout", href: "#" },
              { text: "View Stats", href: "#" }
            ],
            stats: [
              {
                title: "Workouts",                values: [24, 31, 45],
                description: "Completed this month"
              },
              {
                title: "Calories",                values: [1240, 1580, 1920],
                valueSuffix: "kcal",                description: "Burned daily average"
              },
              {
                title: "Streak",                values: [7, 12, 21],
                description: "Days active"
              }
            ],
            chartTitle: "Weekly Progress",            chartData: [
              { value: 60 },
              { value: 75 },
              { value: 85 },
              { value: 70 },
              { value: 90 }
            ],
            listTitle: "Recent Workouts",            listItems: [
              { icon: Zap, title: "HIIT Cardio", status: "Completed" },
              { icon: Dumbbell, title: "Upper Body", status: "In Progress" },
              { icon: Wind, title: "Yoga Session", status: "Scheduled" }
            ]
          }}
        />
      </div>

      <div id="workouts" data-section="workouts">
        <FeatureCardEight
          title="Progressive Workout Plans"
          description="Choose your fitness level and progress through scientifically-designed programs. Each plan includes video tutorials, form guidance, and adaptive difficulty."
          tag="Personalized Training"
          tagIcon={Target}
          textboxLayout="split"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Start Free Trial", href: "contact" }
          ]}
          features={[
            {
              id: 1,
              title: "Beginner Series",              description: "Build your foundation with basic exercises, proper form techniques, and gradual intensity increases. Perfect for those starting their fitness journey.",              imageSrc: "https://img.b2bpic.net/free-vector/workout-tracker-app-theme_23-2148636397.jpg"
            },
            {
              id: 2,
              title: "Intermediate Training",              description: "Challenge yourself with advanced techniques, circuit training, and strength building. Ideal for maintaining consistent fitness levels.",              imageSrc: "https://img.b2bpic.net/free-vector/workout-tracker-app-set_23-2148637445.jpg"
            },
            {
              id: 3,
              title: "Advanced Performance",              description: "Master elite-level exercises, functional fitness, and sport-specific training. Designed for experienced athletes and peak performance.",              imageSrc: "https://img.b2bpic.net/free-vector/workout-tracer-mobile-app_23-2148650356.jpg"
            },
            {
              id: 4,
              title: "Custom Programs",              description: "Create personalized routines based on your goals, equipment, and schedule. AI-powered recommendations adapt to your progress.",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-fitness-app-template_23-2151069834.jpg"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <TextSplitAbout
          title="Why FitFlow Leads"
          description={[
            "FitFlow combines cutting-edge technology with expert fitness coaching to deliver personalized results. Our platform tracks every rep, every mile, and every calorie burned with precision analytics.",            "With access to certified trainers, nutrition guidance, and a supportive community of millions, you'll never feel alone on your fitness journey. Real progress, real support, real transformation."
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
          buttons={[
            { text: "See Full Features" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Join millions transforming their bodies and building lasting healthy habits."
          tag="Proven Results"
          metrics={[
            {
              id: "1",              value: "5M+",              description: "Active users worldwide achieving their fitness goals"
            },
            {
              id: "2",              value: "450M",              description: "Total workouts completed on FitFlow"
            },
            {
              id: "3",              value: "92%",              description: "User satisfaction rate and retention"
            },
            {
              id: "4",              value: "21x",              description: "More effective with personalized coaching"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by fitness enthusiasts and professional athletes worldwide"
          cardTag="Real Transformations"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
          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-620.jpg"
            },
            {
              id: "3",              name: "Emily Davis",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg"
            },
            {
              id: "4",              name: "James Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-sports-woman-with-arms-crossed_171337-8914.jpg"
            },
            {
              id: "5",              name: "Lisa Anderson",              imageSrc: "https://img.b2bpic.net/free-photo/physically-fit-woman-with-long-hair-is-standing-crossed-her-hands-dark-background_613910-13266.jpg"
            },
            {
              id: "6",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-618.jpg"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Everything You Need to Know"
          description="Get answers to common questions about FitFlow, subscriptions, and getting the most from your training."
          tag="Support"
          textboxLayout="split"
          useInvertedBackground="noInvert"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-vector/workout-tracker-app-interface_23-2148655435.jpg"
          imageAlt="Fitness training guidance"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I get started with FitFlow?",              content: "Download the app, create your account, and complete a quick fitness assessment. Based on your goals and fitness level, we'll recommend personalized workout plans designed specifically for you."
            },
            {
              id: "2",              title: "What's included in the free trial?",              content: "Your 7-day free trial gives you full access to all beginner workout plans, progress tracking, nutrition guides, and community features. No credit card required to start."
            },
            {
              id: "3",              title: "Can I use FitFlow without gym equipment?",              content: "Absolutely! We offer extensive bodyweight, cardio, and flexibility programs that require zero equipment. Filter workouts by available equipment when selecting your plan."
            },
            {
              id: "4",              title: "How does the AI coaching work?",              content: "Our AI analyzes your workout data, form, recovery patterns, and goals to continuously adapt your program. It suggests when to increase difficulty, take rest days, or adjust your routine."
            },
            {
              id: "5",              title: "Is there a community feature?",              content: "Yes! Connect with millions of users, share achievements, join challenges, get motivation from others, and access group support forums led by certified trainers."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Ready to Transform"
          title="Download FitFlow Today"
          description="Get personalized workouts, expert coaching, and real results. Join thousands achieving their fitness goals every day."
          tagIcon={Download}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-vector/gradient-fitness-app-template_23-2151095465.jpg"
          imageAlt="FitFlow mobile app download"
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="By signing up, you agree to our Terms and Privacy Policy. Start your free 7-day trial today."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="FitFlow"
          copyrightText="© 2025 FitFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Workout Plans", href: "#workouts" },
                { label: "Pricing", href: "#" },
                { label: "Download", href: "#" },
                { label: "Features", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Forums", href: "#" },
                { label: "Challenges", href: "#" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Events", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact Us", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Status", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}