"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, Download } from "lucide-react";

export default function FitnessLandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="FitFlow"
          navItems={[
            { name: "Plans", id: "plans" },
            { name: "Features", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Download Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Transform Your Fitness Journey"
          description="Get personalized workout plans, real-time tracking, and expert coaching in one powerful app. Join thousands who've achieved their fitness goals."
          background={{ variant: "sparkles-gradient" }}
          tag="Fitness App Launch"
          tagIcon={Zap}
          buttons={[
            { text: "Download on iOS", href: "#contact" },
            { text: "Get on Android", href: "#contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/closeup-female-athlete-text-messaging-mobile-phone_637285-6214.jpg"
          imageAlt="FitFlow fitness app interface"
          avatarText="Trusted by 50,000+ Active Users"
        />
      </div>

      <div id="plans" data-section="plans">
        <ProductCardFour
          title="Our Workout Plans"
          description="Choose from expertly designed programs tailored to your fitness level and goals"
          tag="Workout Plans"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "strength",              name: "Strength Builder",              price: "$9.99",              variant: "12 weeks, 4 days/week",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg",              imageAlt: "Strength training workout"
            },
            {
              id: "yoga",              name: "Yoga & Flexibility",              price: "$7.99",              variant: "8 weeks, 5 days/week",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-is-engaged-gym_1157-29940.jpg",              imageAlt: "Yoga and stretching class"
            },
            {
              id: "cardio",              name: "Cardio Endurance",              price: "$9.99",              variant: "10 weeks, 3 days/week",              imageSrc: "https://img.b2bpic.net/free-photo/man-picking-up-weights-from-rack_329181-14122.jpg",              imageAlt: "Cardio training session"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Why Choose FitFlow"
          description="Experience fitness evolution with cutting-edge features designed for your success"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "AI-Powered Personalization",              description: "Our smart algorithm learns your preferences and adapts workouts in real-time for maximum results.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-female-athlete-text-messaging-mobile-phone_637285-6214.jpg",              imageAlt: "AI personalization interface"
            },
            {
              id: 2,
              title: "Real-Time Progress Tracking",              description: "Monitor every rep, every mile, and every calorie with detailed analytics and insights.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg",              imageAlt: "Progress tracking dashboard"
            },
            {
              id: 3,
              title: "Expert Coach Guidance",              description: "Access video tutorials from certified trainers and get form corrections in every workout.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-is-engaged-gym_1157-29940.jpg",              imageAlt: "Coach demonstration videos"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="See the transformation our members achieve every single day"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Active Members",              description: "Growing community of fitness enthusiasts",              imageSrc: "https://img.b2bpic.net/free-photo/man-picking-up-weights-from-rack_329181-14122.jpg",              imageAlt: "Community fitness training"
            },
            {
              id: "2",              value: "2.3M",              title: "Workouts Completed",              description: "Collective strength of our platform",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg",              imageAlt: "Workout completion celebration"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Members Say"
          description="Real results from real people who transformed their fitness with FitFlow"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Fitness Enthusiast",              company: "London, UK",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-622.jpg",              imageAlt: "Sarah Johnson profile"
            },
            {
              id: "2",              name: "Marcus Chen",              role: "Marathon Runner",              company: "Singapore",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg",              imageAlt: "Marcus Chen profile"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Yoga Instructor",              company: "Madrid, Spain",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg",              imageAlt: "Emma Rodriguez profile"
            }
          ]}
          kpiItems={[
            { value: "92%", label: "Achieve Goals" },
            { value: "4.8/5", label: "App Rating" },
            { value: "30 Days", label: "Avg Transformation" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Download"
          tagIcon={Download}
          title="Start Your Transformation Today"
          description="Join thousands of members already achieving their fitness goals. Get exclusive access to personalized workouts and expert guidance."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/closeup-female-athlete-using-mobile-phone-while-checking-heart-rate-wristwatch_637285-3472.jpg"
          imageAlt="FitFlow app download"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Get Early Access"
          termsText="We respect your privacy. Get exclusive fitness tips and app updates delivered to your inbox."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about FitFlow and getting started with your fitness journey"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I get started with FitFlow?",              content: "Getting started is easy! Download the app, create your profile, and take our quick fitness assessment. We'll recommend personalized workout plans based on your goals and current fitness level."
            },
            {
              id: "2",              title: "Can I customize my workout plans?",              content: "Absolutely! While we provide expertly-designed plans, you can modify exercises, adjust intensity, change workout duration, and swap exercises to match your preferences and available equipment."
            },
            {
              id: "3",              title: "Is FitFlow suitable for beginners?",              content: "Yes! FitFlow is designed for all fitness levels. We have beginner-friendly programs with proper form guidance and progressive difficulty levels. Our AI adapts to your pace and capabilities."
            },
            {
              id: "4",              title: "What if I don't have gym access?",              content: "No problem! We offer home workout plans that require minimal or no equipment. You can build strength and improve fitness using bodyweight exercises, resistance bands, or dumbbells."
            },
            {
              id: "5",              title: "How often should I work out?",              content: "The frequency depends on your goals and current fitness level. Our plans range from 3 to 6 days per week. We recommend rest days for recovery and injury prevention, which we'll schedule for you."
            },
            {
              id: "6",              title: "Can I track my nutrition with FitFlow?",              content: "While FitFlow primarily focuses on workout tracking, our premium members get integration with popular nutrition apps to monitor calories and macronutrients alongside their training progress."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="FitFlow"
          columns={[
            {
              items: [
                { label: "Features", href: "features" },
                { label: "Plans", href: "plans" },
                { label: "Pricing", href: "#pricing" }
              ]
            },
            {
              items: [
                { label: "Community", href: "#community" },
                { label: "Blog", href: "#blog" },
                { label: "Resources", href: "#resources" }
              ]
            },
            {
              items: [
                { label: "About", href: "#about" },
                { label: "Contact", href: "contact" },
                { label: "Support", href: "#support" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Cookie Settings", href: "#cookies" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}