"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Star Wars"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Community", id: "about" },
            { name: "Events", id: "features" },
            { name: "Join", id: "contact" }
          ]}
          button={{ text: "Become a Fan", href: "contact" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="May the Force Be With You"
          description="Join the galaxy's most passionate Star Wars fan community. Connect with fellow fans, discover exclusive content, and celebrate the saga together."
          tag="Fan Community"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574688304-mrli5c1h.jpg"
          imageAlt="Star Wars galaxy and space"
          buttons={[
            { text: "Join Now", href: "contact" },
            { text: "Explore Events", href: "features" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <TagMediaSplitAbout
          title="Our Galactic Community"
          description="Building the ultimate Star Wars fan experience across the galaxy"
          tag="About Us"
          textboxLayout="default"
          contentTag="OUR MISSION"
          contentTitle="Uniting the Star Wars Universe"
          contentDescription="We are a global community of passionate Star Wars fans dedicated to celebrating the saga in all its forms. From the original trilogy to the latest series, we bring fans together to share their love, discuss theories, attend events, and create lasting memories with fellow enthusiasts."
          contentButtons={[{ text: "Learn More", href: "#" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574689615-ool04kh4.jpg"
          imageAlt="Star Wars fan community gathering"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardThree
          title="Why Join Our Community"
          description="Discover what makes us the premier destination for Star Wars fans worldwide"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "01",
              title: "Exclusive Events",
              description: "Attend screenings, conventions, and meetups exclusively for our community members",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574690659-xx2zpu2k.jpg",
              imageAlt: "Event gathering"
            },
            {
              id: "02",
              title: "Fan Content Hub",
              description: "Share and discover fan art, theories, discussions, and creative works from the community",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574691855-lpxzndce.jpg",
              imageAlt: "Cosmic background"
            },
            {
              id: "03",
              title: "Global Network",
              description: "Connect with fellow fans from across the galaxy and build lasting friendships",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574689615-ool04kh4.jpg",
              imageAlt: "Fan community"
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Alex Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574693125-xg66v3h9.jpg",
              imageAlt: "Alex Chen"
            },
            {
              id: "2",
              name: "Sarah Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502906375-82uc6wjl.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "3",
              name: "Marcus Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766504480835-8xmeyz3k.jpg",
              imageAlt: "Marcus Rodriguez"
            },
            {
              id: "4",
              name: "Emily Watson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574694008-8d9dgyqz.jpg",
              imageAlt: "Emily Watson"
            }
          ]}
          cardTitle="Trusted by thousands of Star Wars fans worldwide"
          cardTag="Join the community"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Join the Force"
          ctaDescription="Become part of our galactic community and connect with fellow Star Wars fans"
          ctaButton={{ text: "Get Started", href: "#" }}
          ctaIcon={Zap}
          faqs={[
            {
              id: "1",
              title: "How do I join the community?",
              content: "Simply sign up on our platform to become a member. You'll get access to exclusive events, forums, and community discussions immediately after registration."
            },
            {
              id: "2",
              title: "Are there membership fees?",
              content: "Our community membership is free. Some special events or merchandise may have additional costs, but basic community access is always complimentary."
            },
            {
              id: "3",
              title: "What events do you organize?",
              content: "We organize movie screenings, fan conventions, online discussions, costume contests, and trivia nights throughout the year."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Star Wars"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Community", href: "about" },
                { label: "Events", href: "features" }
              ]
            },
            {
              items: [
                { label: "Join Us", href: "contact" },
                { label: "FAQ", href: "contact" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}