"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Activity, Check, Compass, Download, Dumbbell, Flame, HelpCircle, Heart, Home, Settings, Star, Target, TrendingUp, Zap } from "lucide-react";

export default function FitFlowLandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="FitFlow"
          navItems={[
            { name: "Workouts", id: "workouts" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Download", id: "download" }
          ]}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Transform Your Fitness Journey"
          description="Personalized workout plans, real-time progress tracking, and expert guidance all in one app. Start your transformation today."
          tag="Fitness Made Simple"
          tagIcon={Zap}
          buttons={[
            { text: "Download Now", href: "#download" },
            { text: "View Plans", href: "#workouts" }
          ]}
          background={{ variant: "aurora" }}
          dashboard={{
            title: "Your Fitness Dashboard",            logoIcon: Flame,
            imageSrc: "https://img.b2bpic.net/free-photo/closeup-female-athlete-text-messaging-mobile-phone_637285-6214.jpg",            imageAlt: "FitFlow fitness app dashboard",            searchPlaceholder: "Search workouts...",            buttons: [
              { text: "Start Workout", href: "#" },
              { text: "View Progress", href: "#" }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: Activity },
              { icon: TrendingUp },
              { icon: Settings }
            ],
            stats: [
              {
                title: "Calories Burned",                values: [245, 312, 428],
                valuePrefix: "",                valueSuffix: "kcal",                description: "Today's burn rate"
              },
              {
                title: "Workouts",                values: [12, 18, 24],
                valuePrefix: "",                valueSuffix: "",                description: "This month"
              },
              {
                title: "Streak",                values: [7, 14, 21],
                valuePrefix: "",                valueSuffix: "days",                description: "Consistency bonus"
              }
            ],
            chartTitle: "Weekly Progress",            chartData: [
              { value: 60 },
              { value: 75 },
              { value: 90 },
              { value: 70 },
              { value: 85 }
            ],
            listTitle: "Recent Workouts",            listItems: [
              { icon: Zap, title: "HIIT Cardio", status: "Completed" },
              { icon: Dumbbell, title: "Upper Body", status: "In Progress" },
              { icon: Compass, title: "Yoga Flow", status: "Scheduled" }
            ]
          }}
        />
      </div>
      
      <div id="workouts" data-section="workouts">
        <FeatureCardTen
          title="Workout Plans Designed for You"
          description="Choose from professionally crafted programs tailored to your goals. Whether you're building strength, improving endurance, or finding balance, we have the perfect plan."
          tag="Personalized Training"
          tagIcon={Target}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Strength Training",              description: "Build muscle and increase power with science-backed resistance training. Progressive overload ensures continuous improvement.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/closeup-female-athlete-using-mobile-phone-while-checking-heart-rate-wristwatch_637285-3472.jpg"
              },
              items: [
                { icon: Check, text: "Progressive strength gains" },
                { icon: Check, text: "Full-body and split routines" },
                { icon: Check, text: "Form guidance with videos" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Cardio & Endurance",              description: "Improve cardiovascular health and stamina with diverse cardio workouts. From steady-state to high-intensity intervals.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/woman-gym-with-smartphone-template_23-2148111618.jpg"
              },
              items: [
                { icon: Check, text: "HIIT and steady cardio" },
                { icon: Check, text: "Heart rate zone training" },
                { icon: Check, text: "Real-time performance metrics" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Flexibility & Recovery",              description: "Enhance mobility, reduce soreness, and promote recovery. Balance your intense workouts with strategic stretching and yoga.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/view-athlete-using-cell-phone-health-club_637285-8290.jpg"
              },
              items: [
                { icon: Check, text: "Guided yoga sessions" },
                { icon: Check, text: "Recovery day programs" },
                { icon: Check, text: "Flexibility progression plans" }
              ],
              reverse: false
            }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Why Thousands Trust FitFlow"
          description="We combine cutting-edge fitness science with intuitive technology to create the ultimate workout companion. Our team of certified trainers, nutritionists, and engineers work together to deliver results."
          tag="Our Mission"
          tagIcon={Heart}
          metrics={[
            { value: "50K+", title: "Active Users Worldwide" },
            { value: "2.5M+", title: "Workouts Completed" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/sports-woman-sitting-steps-outdoors-chatting-by-phone_171337-8202.jpg"
          imageAlt="FitFlow certified fitness trainer"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Real Results from Real Users"
          description="See how FitFlow has transformed the fitness journeys of thousands of users worldwide"
          tag="Success Stories"
          tagIcon={Star}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Marketing Manager",              company: "TechCorp",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/adorable-lovely-smiling-girl-with-long-wavy-hairstyle-black-sport-top-is-holding-arms-chest-looking-window-isolated-background_291650-2273.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Rodriguez",              role: "Software Engineer",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/brunette-woman-wearing-sport-clothes_329181-13209.jpg",              imageAlt: "James Rodriguez"
            },
            {
              id: "3",              name: "Emily Chen",              role: "Product Designer",              company: "Creative Studios",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-blond-woman_618663-83.jpg",              imageAlt: "Emily Chen"
            },
            {
              id: "4",              name: "Michael Thompson",              role: "Fitness Coach",              company: "Wellness Pro",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-caucasian-woman-wearing-sportswear-looking-confident-camera-with-smile-with-crossed-arms-hand-raised-chin-thinking-positive_839833-7891.jpg",              imageAlt: "Michael Thompson"
            },
            {
              id: "5",              name: "Lisa Anderson",              role: "Entrepreneur",              company: "FitLife Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/middle-aged-fitness-woman-sport-activewear-cross-arms-chest-smiling-being-healthy-fit-training-exercising-white-background_176420-50325.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "David Park",              role: "Healthcare Professional",              company: "Wellness Center",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-622.jpg",              imageAlt: "David Park"
            }
          ]}
        />
      </div>
      
      <div id="download" data-section="download">
        <ProductCardFour
          title="Download FitFlow Now"
          description="Join thousands of fitness enthusiasts who are achieving their goals with FitFlow. Available on iOS and Android."
          tag="Get Started"
          tagIcon={Download}
          textboxLayout="default"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "ios",              name: "Download on App Store",              price: "Free + Premium",              variant: "iOS 14.0+  •  iPhone & iPad",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-view-fit-young-woman-holding-mobile-phone-displaying-blank-white-screen_23-2148047390.jpg",              imageAlt: "FitFlow iOS app",              onProductClick: () => window.open('https://apps.apple.com', '_blank')
            },
            {
              id: "android",              name: "Get it on Google Play",              price: "Free + Premium",              variant: "Android 8.0+  •  Tablets Supported",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-view-fit-young-woman-holding-mobile-phone-displaying-blank-white-screen_23-2148047390.jpg",              imageAlt: "FitFlow Android app",              onProductClick: () => window.open('https://play.google.com', '_blank')
            }
          ]}
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Have questions about FitFlow? We've got answers."
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Do I need fitness experience to use FitFlow?",              content: "Not at all! FitFlow is designed for everyone—from complete beginners to advanced athletes. Our app provides personalized recommendations based on your fitness level and adjusts workouts as you progress. Video demonstrations and form cues help ensure you're exercising safely and effectively."
            },
            {
              id: "2",              title: "What's included in the free version?",              content: "The free version gives you access to a library of foundational workouts, basic progress tracking, and personalized workout recommendations. Premium members unlock advanced analytics, unlimited custom plans, nutrition guidance, and one-on-one coach support."
            },
            {
              id: "3",              title: "How often are new workouts added?",              content: "We add new workouts and training programs every week. Our team of certified trainers constantly creates fresh content to keep your fitness routine engaging and challenging. Premium members get early access to new programs."
            },
            {
              id: "4",              title: "Can I sync FitFlow with other fitness apps?",              content: "Yes! FitFlow integrates with Apple Health, Google Fit, and popular wearables like Fitbit and Apple Watch. Your workout data syncs seamlessly, giving you a complete view of your fitness journey across all platforms."
            },
            {
              id: "5",              title: "Is there a trial period for premium?",              content: "Absolutely! New users get a 14-day free trial of FitFlow Premium. No credit card required for the trial. After the trial ends, you can choose to subscribe or continue with the free version."
            }
          ]}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#workouts" },
                { label: "Pricing", href: "#download" },
                { label: "App Status", href: "#" },
                { label: "Updates", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Settings", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 FitFlow. All rights reserved. Transform your fitness journey today."
        />
      </div>
    </ThemeProvider>
  );
}