"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, CheckCircle, Zap, Heart, HelpCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Workouts", id: "workouts" },
            { name: "Features", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Download", id: "contact" }
          ]}
          brandName="FitFlow"
          bottomLeftText="Transform Your Fitness"
          bottomRightText="hello@fitflow.app"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Transform Your Body, Transform Your Life"
          description="Join millions of users achieving their fitness goals with personalized workout plans, expert guidance, and a supportive community."
          background={{ variant: "sparkles-gradient" }}
          tag="Download Now"
          tagIcon={Sparkles}
          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"
          buttons={[
            { text: "Download App", href: "https://apps.apple.com" },
            { text: "Learn More", href: "features" }
          ]}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg", alt: "User 1" },
            { src: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg", alt: "User 2" },
            { src: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-622.jpg", alt: "User 3" }
          ]}
          avatarText="Trusted by 500K+ Active Users"
        />
      </div>

      <div id="workouts" data-section="workouts">
        <ProductCardTwo
          title="Explore Workout Plans"
          description="Choose from our comprehensive library of scientifically-designed workout programs tailored to your fitness level and goals."
          tag="Popular Plans"
          tagIcon={Zap}
          products={[
            {
              id: "1",              brand: "Beginner",              name: "Foundation Builder",              price: "Free",              rating: 5,
              reviewCount: "12.5k",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg",              imageAlt: "Beginner foundation workout program"
            },
            {
              id: "2",              brand: "Intermediate",              name: "Strength & Power",              price: "$9.99/mo",              rating: 5,
              reviewCount: "18.3k",              imageSrc: "https://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg",              imageAlt: "Intermediate strength training program"
            },
            {
              id: "3",              brand: "Advanced",              name: "Elite Athlete",              price: "$19.99/mo",              rating: 5,
              reviewCount: "9.8k",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63678.jpg",              imageAlt: "Advanced elite athlete program"
            },
            {
              id: "4",              brand: "Wellness",              name: "Mind & Body",              price: "$7.99/mo",              rating: 5,
              reviewCount: "15.2k",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg",              imageAlt: "Wellness mind and body program"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore All Plans", href: "https://fitflow.app/plans" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Experience the FitFlow Difference"
          description="Cutting-edge technology meets expert coaching to deliver results you can see and feel."
          tag="Features"
          tagIcon={CheckCircle}
          features={[
            {
              id: 1,
              title: "AI-Powered Form Checking",              description: "Real-time feedback on your exercise form using advanced computer vision. Get instant corrections to prevent injuries and maximize results.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg" }
            },
            {
              id: 2,
              title: "Personalized Nutrition Plans",              description: "Custom meal plans synchronized with your workouts. Macros adjusted based on your goals and dietary preferences.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63678.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg" }
            },
            {
              id: 3,
              title: "Live Group Classes",              description: "Join thousands in live, interactive fitness classes led by certified trainers. Connect with your community and stay motivated.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63307.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/young-woman-gym-dumbbells-gym-workout-gym_169016-63678.jpg" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="FitFlow by the Numbers"
          description="Real results from real people using FitFlow every day."
          tag="Impact"
          tagIcon={Zap}
          metrics={[
            {
              id: "1",              value: "500K+",              description: "Active Users Worldwide"
            },
            {
              id: "2",              value: "95%",              description: "Reach Fitness Goals"
            },
            {
              id: "3",              value: "2.5M",              description: "Workouts Completed"
            },
            {
              id: "4",              value: "4.8★",              description: "App Store Rating"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Users Say"
          description="Real transformations from real people who trusted FitFlow to guide their fitness journey."
          tag="Testimonials"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Marketing Professional",              company: "Tech Startup",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg",              imageAlt: "Sarah Johnson fitness transformation"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Business Executive",              company: "Finance Corp",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg",              imageAlt: "Michael Chen fitness results"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Fitness Coach",              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: "Emily Rodriguez coaching experience"
            }
          ]}
          kpiItems={[
            { value: "180+", label: "Days Average Streak" },
            { value: "87%", label: "Goal Achievement Rate" },
            { value: "12 lbs", label: "Avg Weight Loss" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your transformation? Download FitFlow today and join thousands achieving their fitness goals."
          background={{ variant: "radial-gradient" }}
          animationType="background-highlight"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Download on iOS", href: "https://apps.apple.com" },
            { text: "Download on Android", href: "https://play.google.com" }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Get answers to common questions about FitFlow, our workouts, pricing, and features."
          tag="Help"
          tagIcon={HelpCircle}
          imageSrc="https://img.b2bpic.net/free-photo/strong-man-training-gym_1303-23831.jpg"
          imageAlt="FitFlow fitness help and support"
          mediaPosition="left"
          faqs={[
            {
              id: "1",              title: "Is FitFlow suitable for beginners?",              content: "Absolutely! FitFlow has specially designed programs for all fitness levels, from complete beginners to advanced athletes. Our AI adapts to your fitness level and progression."
            },
            {
              id: "2",              title: "How much does FitFlow cost?",              content: "FitFlow offers a free tier with access to foundation workouts. Premium plans start at $7.99/month for wellness programs and go up to $19.99/month for our elite athlete program."
            },
            {
              id: "3",              title: "Can I cancel my subscription anytime?",              content: "Yes, you can cancel your subscription at any time with no penalties. We want you to stay because you love FitFlow, not because it's locked."
            },
            {
              id: "4",              title: "Do I need gym equipment to use FitFlow?",              content: "No! FitFlow offers bodyweight workouts, dumbbell routines, and full gym programs. Choose what works for your home gym or fitness level."
            },
            {
              id: "5",              title: "How does the AI form checking work?",              content: "Our app uses your device camera to analyze your exercise form in real-time. It provides instant feedback on posture, range of motion, and technique to prevent injuries."
            },
            {
              id: "6",              title: "Can I sync FitFlow with other health apps?",              content: "Yes! FitFlow integrates with Apple Health, Google Fit, and other popular health tracking apps to keep all your fitness data in one place."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/athlete-gym-swings-triceps-with-barbell-sports-lifestyle_169016-59855.jpg"
          imageAlt="FitFlow community fitness training"
          logoText="FitFlow"
          copyrightText="© 2025 FitFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Workouts", href: "workouts" },
                { label: "Pricing", href: "pricing" },
                { label: "Features", href: "features" },
                { label: "Download", href: "contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#careers" },
                { label: "Blog", href: "#blog" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Help Center", href: "#help" },
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Community", href: "#community" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}