"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Users, Target, Award, TrendingUp, TrendingDown, Zap, Dumbbell, Heart, Apple, Leaf, Utensils, Wifi, Smartphone, MessageSquare, Calendar, Play, Settings, HelpCircle, Clock, Star, Trophy, Sparkles, Flame } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FitPro"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Pricing", id: "pricing" }
          ]}
          button={{
            text: "Start Your Journey",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="FITPRO"
          description="Transform your body and mind with personalized training. Expert guidance, proven results, and your success is our mission."
          background={{ variant: "plain" }}
          buttons={[
            { text: "Book Free Consultation", href: "contact" },
            { text: "View Services", href: "services" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/two-internationals-friends-is-engaged-gym_1157-32114.jpg"
          imageAlt="Professional personal trainer demonstrating fitness expertise"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Certified personal training with over 15 years of experience helping clients achieve their fitness goals through customized workout plans and nutritional guidance."
          metrics={[
            { icon: Users, label: "Happy Clients", value: "500+" },
            { icon: Target, label: "Success Rate", value: "95%" },
            { icon: Award, label: "Certifications", value: "8" },
            { icon: TrendingUp, label: "Avg. Transformation", value: "30 lbs" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Training Services"
          description="Comprehensive fitness solutions tailored to your goals, lifestyle, and fitness level"
          tag="What We Offer"
          tagIcon={Zap}
          features={[
            {
              title: "One-on-One Training",              description: "Personalized sessions designed specifically for your goals and fitness level",              bentoComponent: "icon-info-cards",              items: [
                { icon: Dumbbell, label: "Strength", value: "Building" },
                { icon: Heart, label: "Cardio", value: "Endurance" },
                { icon: Zap, label: "Power", value: "Performance" }
              ]
            },
            {
              title: "Group Classes",              description: "High-energy group fitness experiences to stay motivated and accountable",              bentoComponent: "marquee",              centerIcon: Users,
              variant: "text",              texts: ["HIIT Bootcamp", "CrossFit Conditioning", "Strength Circuit", "Core & Flexibility"]
            },
            {
              title: "Nutrition Plans",              description: "Customized meal plans and dietary guidance to complement your training",              bentoComponent: "3d-task-list",              title: "Nutrition Plans",              items: [
                { icon: Apple, label: "Macro Planning", time: "Weekly" },
                { icon: Leaf, label: "Meal Prep", time: "Guided" },
                { icon: Utensils, label: "Lifestyle Tips", time: "Daily" }
              ]
            },
            {
              title: "Online Training",              description: "Remote personalized coaching for flexible fitness on your schedule",              bentoComponent: "phone",              statusIcon: Wifi,
              alertIcon: Smartphone,
              alertTitle: "Live Session",              alertMessage: "Starting in 5 minutes",              apps: [
                { name: "Workouts", icon: Dumbbell },
                { name: "Progress", icon: TrendingUp },
                { name: "Nutrition", icon: Apple },
                { name: "Messages", icon: MessageSquare },
                { name: "Calendar", icon: Calendar },
                { name: "Videos", icon: Play },
                { name: "Settings", icon: Settings },
                { name: "Support", icon: HelpCircle }
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact"
          description="Real results from real clients. See the transformations we've achieved together."
          metrics={[
            { id: "1", value: "500", title: "Clients Trained", description: "Dedicated individuals on their fitness journey", icon: Users },
            { id: "2", value: "95", title: "% Success Rate", description: "Achieving or exceeding fitness goals", icon: Target },
            { id: "3", value: "12K", title: "Sessions", description: "Hours of personalized training delivered", icon: Clock },
            { id: "4", value: "30", title: "Avg. Lbs Lost", description: "Per client in first 90 days", icon: TrendingDown }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Sarah Mitchell", imageSrc: "https://img.b2bpic.net/free-photo/low-angle-view-young-sportsmen-cycling-exercise-bikes-while-working-out-gym_637285-2532.jpg" },
            { id: "2", name: "James Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/indian-man-doing-excercisses-special-equipment-gym-with-personal-trainer_1157-51755.jpg" },
            { id: "3", name: "Emma Thompson", imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-helping-man-gym_23-2149734700.jpg" },
            { id: "4", name: "Marcus Johnson", imageSrc: "https://img.b2bpic.net/free-photo/young-women-taking-part-spinning-class_23-2149332072.jpg" },
            { id: "5", name: "Lisa Chen", imageSrc: "https://img.b2bpic.net/free-photo/woman-helping-man-gym_23-2149627104.jpg" },
            { id: "6", name: "David Martinez", imageSrc: "https://img.b2bpic.net/free-photo/woman-helping-man-workout-high-angle_23-2149740177.jpg" }
          ]}
          cardTitle="Join hundreds of satisfied clients who have transformed their lives through our personalized training programs"
          cardTag="See Their Results"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Flexible Training Plans"
          description="Choose the perfect package that fits your goals and schedule"
          tag="Pricing"
          tagIcon={Zap}
          plans={[
            {
              id: "starter",              badge: "Popular Choice",              badgeIcon: Heart,
              price: "$99",              subtitle: "per month for 4 sessions",              buttons: [{ text: "Get Started", href: "contact" }],
              features: [
                "4 one-on-one sessions per month",                "Customized workout program",                "Form correction and guidance",                "Progress tracking",                "Email support"
              ]
            },
            {
              id: "professional",              badge: "Best Value",              badgeIcon: Trophy,
              price: "$199",              subtitle: "per month for 8 sessions",              buttons: [{ text: "Get Started", href: "contact" }],
              features: [
                "8 one-on-one sessions per month",                "Personalized nutrition plan",                "Advanced program design",                "Weekly progress assessments",                "Priority support",                "Body composition analysis"
              ]
            },
            {
              id: "elite",              badge: "Premium",              badgeIcon: Sparkles,
              price: "$349",              subtitle: "per month for unlimited access",              buttons: [{ text: "Get Started", href: "contact" }],
              features: [
                "Unlimited one-on-one sessions",                "Complete nutrition coaching",                "Lifestyle and wellness planning",                "24/7 messaging support",                "Monthly progress reviews",                "Group class access",                "Supplement guidance"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Transform?"
          tagIcon={Flame}
          title="Start Your Fitness Journey Today"
          description="Book a free consultation with our team to discuss your goals and create a personalized training plan tailored to your needs."
          buttons={[
            { text: "Book Free Consultation", href: "mailto:contact@fitpro.com" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="FitPro"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}