"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";
import FAQAccordion from '@/components/sections/faq/FAQAccordion';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';

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: "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"
                      ]
                    }
                  ]}
                  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="faq" data-section="faq">
        <FAQAccordion title="FitForce FAQ" image="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80">
          <AccordionItem question="What are the benefits of using FitForce products?" answer="Our products are designed to enhance your fitness journey with advanced features like heart rate monitoring, GPS tracking, and personalized workout plans." />
          <AccordionItem question="How do I set up my FitForce device?" answer="Setting up your FitForce device is easy. Simply download the FitForce app, connect your device via Bluetooth, and follow the on-screen instructions." />
          <AccordionItem question="Which payment methods are accepted?" answer="We accept all major credit cards, PayPal, and Apple Pay for your convenience." />
          <AccordionItem question="Can I return my FitForce product if it doesn't meet my expectations?" answer="Absolutely! We offer a 30-day return policy. Just contact our customer service team for a hassle-free return process." />
        </FAQAccordion>
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia faqs={[
            {id: "1", title: "How do I sign up for a membership?", content: "You can sign up for a FitForce membership by visiting our website and clicking the 'Join Now' button."},
            {id: "2", title: "What equipment is available?", content: "We offer a wide range of equipment including treadmills, ellipticals, free weights, and more."},
            {id: "3", title: "Are there any age restrictions?", content: "Our gym is open to all ages, but children under 16 must be accompanied by an adult."}
        ]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" imageAlt="Gym equipment" mediaPosition="left" title="Frequently Asked Questions" description="Have questions about our services? Check out our FAQ section for answers to common inquiries." textboxLayout="vertical" useInvertedBackground="light" />
      </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>
  );
}