"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TagAbout from '@/components/sections/about/TagAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Zap, CheckCircle, Star, Instagram, Facebook, Twitter, Youtube } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="animatedGrid"
      cardStyle="shadow-colored"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Home", id: "home" },
            { name: "Classes", id: "classes" },
            { name: "Membership", id: "membership" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="FitLife Gym"
          bottomLeftText="Join Us Now"
          bottomRightText="contact@fitlifegym.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel 
          title="Transform Your Body, Transform Your Life"
          description="Join FitLife Gym and discover a community dedicated to your fitness goals. Expert trainers, state-of-the-art equipment, and endless motivation await."
          tag="Welcome to FitLife"
          tagIcon={Zap}
          buttons={[
            { text: "Start Your Journey", href: "#contact" },
            { text: "View Classes", href: "#classes" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766625118386-uv8g1qze.jpg", imageAlt: "Modern gym facility" },
            { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766962009118-tnfh861f.jpg", imageAlt: "Group fitness class" },
            { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766812616453-l739wtjw.jpg", imageAlt: "Gym equipment" },
            { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766812621069-9m1dnpqz.jpg", imageAlt: "Cardio equipment" },
            { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766812617273-qgukcvdd.jpg", imageAlt: "Strength training area" },
            { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766349634025-os77773y.jpg", imageAlt: "Yoga studio" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout 
          tag="Our Mission"
          description="At FitLife Gym, we believe fitness is not just about physical transformation — it's about building confidence, discipline, and a healthier mindset. We provide the tools, guidance, and community to help you achieve your goals."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree 
          title="Why Choose FitLife Gym"
          description="Premium facilities and expert coaching designed for your success"
          tag="Features"
          tagIcon={CheckCircle}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "01",
              title: "Expert Trainers",
              description: "Certified personal trainers ready to guide you through every workout",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766812617273-qgukcvdd.jpg"
            },
            {
              id: "02",
              title: "Modern Equipment",
              description: "Latest gym equipment and technology for optimal training results",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766812616453-l739wtjw.jpg"
            },
            {
              id: "03",
              title: "Diverse Classes",
              description: "From yoga to HIIT, we offer classes for every fitness level",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766962009118-tnfh861f.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
          title="What Our Members Say"
          description="Join thousands of satisfied members who have transformed their fitness journey"
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Manager",
              company: "Tech Corp",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766962010281-b7wy3xy4.jpg"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Entrepreneur",
              company: "StartupXYZ",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766962011166-0qhi1ibd.jpg"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              role: "Designer",
              company: "Creative Studios",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163106846-gh00h0kn.jpg"
            },
            {
              id: "4",
              name: "David Kim",
              role: "Coach",
              company: "Fitness Pro",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140061652-x0v8jc88.jpg"
            },
            {
              id: "5",
              name: "Lisa Anderson",
              role: "Athlete",
              company: "Elite Training",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766962012063-nypuxgmh.jpg"
            },
            {
              id: "6",
              name: "James Wilson",
              role: "Member",
              company: "FitLife",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163109167-27dt1jxc.jpg"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm 
          title="Ready to Start Your Fitness Journey?"
          description="Fill out the form below to get more information about our memberships and start your transformation today."
          inputs={[
            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your fitness goals...",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          buttonText="Get Started Today"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial 
          logoText="FitLife Gym"
          columns={[
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Memberships", href: "#membership" },
                { label: "Classes", href: "#classes" },
                { label: "Personal Training", href: "#training" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" }
          ]}
          copyrightText="© FitLife Gym, Inc. 2024. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}