"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Dumbbell } from "lucide-react";

export default function FitnessLandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Plans", id: "plans" },
            { name: "Results", id: "metrics" },
            { name: "Community", id: "testimonials" },
            { name: "Download", id: "contact" }
          ]}
          brandName="FitFlow"
          bottomLeftText="Join the Movement"
          bottomRightText="hello@fitflow.app"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Transform Your Body, Build Your Best Self"
          description="Join thousands of users achieving their fitness goals with personalized workout plans, real-time progress tracking, and a supportive community. Start your journey today."
          tag="Fitness Revolution"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/build-your-own-body-strength-fitness-exercise-get-fit_53876-21382.jpg"
          imageAlt="fitness workout training motivation athlete"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Download Free", href: "https://apps.apple.com" },
            { text: "Learn More", href: "plans" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Why FitFlow is Your Fitness Partner" }
          ]}
          buttons={[
            { text: "Explore Plans", href: "plans" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="plans" data-section="plans">
        <FeatureCardTwentyFour
          title="Choose Your Workout Style"
          description="Select from our expertly-designed workout plans tailored to your goals and fitness level."
          tag="Personalized Plans"
          tagIcon={Dumbbell}
          features={[
            {
              id: "1",              title: "Cardio Blast",              author: "By Coach Maria",              description: "High-energy cardio workouts designed to burn calories, improve endurance, and boost your cardiovascular health. Perfect for beginners to advanced.",              tags: ["Cardio", "30 mins", "All Levels"],
              imageSrc: "https://img.b2bpic.net/free-photo/young-fit-tone-up-mixed-race-woman-doing-fitness-workout-with-abs-wheel-loft-sunny-day_633478-2126.jpg",              imageAlt: "cardio running workout fitness training"
            },
            {
              id: "2",              title: "Strength & Power",              author: "By Coach James",              description: "Build lean muscle and increase strength with structured weightlifting programs. Progressive training with detailed form guides and tracking.",              tags: ["Strength", "45 mins", "Intermediate"],
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-hands-with-dumbbells-two-fitness-girls-sportswear-doing-lunges-with-dumbbells-modern-gym-health-diet-sport_613910-20774.jpg",              imageAlt: "strength weightlifting gym training muscle"
            },
            {
              id: "3",              title: "Zen Yoga Flow",              author: "By Coach Elena",              description: "Balance flexibility, core strength, and mental wellness. Perfect for recovery days or those seeking a mindful fitness experience.",              tags: ["Flexibility", "40 mins", "All Levels"],
              imageSrc: "https://img.b2bpic.net/free-photo/determined-athletic-woman-working-out-plank-pose-while-listening-music-earphones-health-club_637285-5225.jpg",              imageAlt: "yoga flexibility wellness stretching calm"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Join Our Growing Community"
          description="See how FitFlow is transforming lives every day"
          metrics={[
            { id: "1", value: "500K+", description: "Active Users Worldwide" },
            { id: "2", value: "2.5M+", description: "Workouts Completed" },
            { id: "3", value: "98%", description: "User Satisfaction Rate" },
            { id: "4", value: "45 min", description: "Average Daily Engagement" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="FitFlow completely transformed how I approach fitness. The personalized plans keep me motivated, and tracking my progress has never been easier. I've lost 20 pounds in 3 months and feel stronger than ever!"
          rating={5}
          author="Sarah Johnson, 32 - Lost 20 lbs"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg", alt: "Sarah Johnson" },
            { src: "https://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg", alt: "Michael Chen" },
            { src: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", alt: "Emily Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "David Kim" },
            { src: "https://img.b2bpic.net/free-photo/attractive-european-girl-with-charming-smile-keeps-arms-folded-wears-round-spectacles_273609-18493.jpg", alt: "Jessica Martinez" },
            { src: "https://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg", alt: "Alex Thompson" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your fitness transformation? Download FitFlow today and get your first week free. Join thousands of users achieving their goals."
          animationType="entrance-slide"
          buttons={[
            { text: "Download on iOS", href: "https://apps.apple.com" },
            { text: "Download on Android", href: "https://play.google.com" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="FitFlow"
          copyrightText="© 2025 FitFlow | Transform Your Life"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "plans" },
                { label: "Pricing", href: "#" },
                { label: "Download", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact", href: "contact" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}