"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Star, Zap } from "lucide-react";

export default function FitForcePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="FitForce"
          bottomLeftText="Transform Your Body"
          bottomRightText="contact@fitforce.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Transform Your Body, Elevate Your Life"
          description="Work with a certified personal trainer to achieve your fitness goals. Personalized coaching, proven results, and lasting transformation await."
          tag="Elite Training"
          tagIcon={Zap}
          background={{ variant: "radial-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-internationals-friends-is-engaged-gym_1157-32114.jpg",              imageAlt: "Personal trainer coaching a client"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-internationals-friends-is-engaged-gym_1157-32112.jpg",              imageAlt: "Professional fitness coaching session"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-fit-woman-training-gym_23-2148768865.jpg",              imageAlt: "Fitness transformation results"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-helping-man-gym_23-2149740152.jpg",              imageAlt: "One-on-one training experience"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-people-training-together-gym_23-2150290026.jpg",              imageAlt: "Athlete training session"
            }
          ]}
          buttons={[
            { text: "Start Your Journey", href: "contact" },
            { text: "View Services", href: "services" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Expert Training for Real Results"
          description="With over 10 years of experience in fitness coaching, I specialize in creating personalized training programs tailored to your unique goals. Whether you're starting from zero or pushing for peak performance, I'm here to guide you through every step of your transformation journey."
          tag="About Your Trainer"
          imageSrc="https://img.b2bpic.net/free-photo/young-adult-doing-indoor-sport-gym_23-2149205542.jpg"
          imageAlt="Professional personal trainer"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "testimonials" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
                          title="Custom Training Programs"
                          description="Tailored workout plans designed to help you achieve your fitness goals efficiently."
                          tag="Programs"
                          tagIcon={Sparkles}
                          textboxLayout="default"
                          animationType="slide-up"
                          gridVariant="three-columns-all-equal-width"
                          features={[
                            {
                              id: "01",
                              title: "Strength Training",
                              description: "Build muscle and increase your strength with our expertly crafted strength training programs.",
                              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                              imageAlt: "Strength training"
                            },
                            {
                              id: "02",
                              title: "Cardiovascular Fitness",
                              description: "Improve your cardiovascular health and endurance with our high-intensity interval training programs.",
                              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                              imageAlt: "Cardiovascular fitness"
                            },
                            {
                              id: "03",
                              title: "Flexibility and Mobility",
                              description: "Enhance your flexibility and mobility with our yoga and stretching programs.",
                              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                              imageAlt: "Flexibility and mobility"
                            },
                            {
                              id: "04",
                              title: "Weight Loss",
                              description: "Lose weight and maintain a healthy lifestyle with our comprehensive weight loss programs.",
                              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                              imageAlt: "Weight loss"
                            }
                          ]}
                          useInvertedBackground="noInvert"
                        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Success Stories"
          description="Real transformations from real clients. See what our training can do for you."
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "Lost 45 Pounds and Found Confidence",              quote: "I walked in not believing I could do it. Six months with this trainer and I'm unrecognizable. The personalized approach and constant encouragement made all the difference. I feel stronger in every way.",              name: "Marcus Johnson",              role: "CEO, Tech Company",              imageSrc: "https://img.b2bpic.net/free-photo/male-boxer-posing-t-shirt-with-arms-crossed_23-2148426241.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "2",              title: "From Sedentary to Strong in 12 Weeks",              quote: "I was skeptical about personal training until I met this coach. The structured program, attention to form, and motivational energy completely transformed my fitness journey and mindset.",              name: "Sarah Mitchell",              role: "Marketing Director",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-man_23-2150770955.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "3",              title: "Built Muscle and Reached My Goals",              quote: "Professional, knowledgeable, and results-driven. I achieved my strength goals in 16 weeks with a customized program that actually worked. Best investment I've made in myself.",              name: "David Chen",              role: "Software Engineer",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-smiley-man-gym_23-2150007196.jpg",              imageAlt: "David Chen"
            },
            {
              id: "4",              title: "Exceeded All My Expectations",              quote: "The combination of expert programming and genuine care for my success is unmatched. I've never felt more capable or confident in my body.",              name: "Jennifer Rodriguez",              role: "Entrepreneur",              imageSrc: "https://img.b2bpic.net/free-photo/young-sports-man-happy-expression_1194-1589.jpg",              imageAlt: "Jennifer Rodriguez"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Investment in Your Health"
          description="Flexible training packages designed to fit your goals and budget"
          tag="Pricing"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          plans={[
            {
              id: "1",              price: "$120",              name: "Single Session",              buttons: [
                { text: "Book Now", href: "contact" }
              ],
              features: [
                "60-minute one-on-one session",                "Form analysis and correction",                "Custom exercise selection",                "Post-session guidance"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$480/mo",              name: "4-Week Package",              buttons: [
                { text: "Get Started", href: "contact" }
              ],
              features: [
                "4 sessions per month",                "Personalized program design",                "Nutrition guidance",                "Progress tracking and adjustments",                "Email support between sessions"
              ]
            },
            {
              id: "3",              price: "$1,400",              name: "12-Week Transformation",              buttons: [
                { text: "Begin Transformation", href: "contact" }
              ],
              features: [
                "12 one-on-one sessions",                "Complete fitness assessment",                "Customized nutrition plan",                "Weekly check-ins and adjustments",                "Before and after progress photos",                "Lifetime program access"
              ]
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to Transform?"
          description="Subscribe to my newsletter for exclusive training tips, motivation, and early access to new programs. Join hundreds of clients already on their transformation journey."
          tagIcon={Zap}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/woman-helping-man-workout-high-angle_23-2149740177.jpg"
          imageAlt="Professional gym facility"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Join Now"
          termsText="By signing up, you agree to receive fitness tips and exclusive offers. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="FitForce"
          columns={[
            {
              items: [
                { label: "Home", href: "home" },
                { label: "Services", href: "services" },
                { label: "Testimonials", href: "testimonials" }
              ]
            },
            {
              items: [
                { label: "Pricing", href: "pricing" },
                { label: "About", href: "about" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Phone", href: "#" },
                { label: "Email", href: "#" },
                { label: "Address", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}