"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Heart, Users, Star, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Star Wars Fans"
          navItems={[
            { name: "About", id: "about" },
            { name: "Content", id: "features" },
            { name: "Community", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Join Community", href: "contact" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="STAR WARS FANS"
          description="Join the ultimate community for Star Wars enthusiasts. Explore stories, connect with fellow fans, and celebrate the galaxy far, far away."
          buttons={[
            { text: "Explore Now", href: "features" },
            { text: "Join Us", href: "contact" }
          ]}
          slides={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508752218-v1i2cs9a.jpg", imageAlt: "Star Wars galaxy and space" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508752993-wpphex66.jpg", imageAlt: "Star Wars futuristic spaceship" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg", imageAlt: "Star Wars dark space scene" }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>
      
      <div id="about" data-section="about">
        <SplitAbout
          title="About Our Community"
          description="We are a passionate community of Star Wars fans united by our love for the epic saga. From the original trilogy to the latest series, we celebrate every aspect of this incredible universe."
          tag="Our Story"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          bulletPoints={[
            {
              title: "Fan Driven",
              description: "Created by fans for fans who want to celebrate and discuss their favorite Star Wars content",
              icon: Heart
            },
            {
              title: "Community First",
              description: "We foster a welcoming environment where enthusiasts can share theories, art, and passion",
              icon: Users
            },
            {
              title: "Ever Growing",
              description: "Our community continues to expand with new members sharing the same love for the galaxy",
              icon: Star
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508754581-ac56mcoq.jpg"
          imageAlt="Star Wars fan community gathering"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardOne
          title="What You'll Find Here"
          description="Discover content created by fans, for fans. From episode breakdowns to character analysis and exclusive community discussions."
          tag="Content"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          features={[
            {
              title: "Episode Reviews",
              description: "In-depth analysis of every episode from all Star Wars series and films",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508755463-1pzweejz.jpg",
              imageAlt: "Episode reviews and analysis"
            },
            {
              title: "Character Guides",
              description: "Complete character profiles and relationship maps across the Star Wars universe",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508756075-khdynat4.jpg",
              imageAlt: "Character guides and profiles"
            },
            {
              title: "Story Theories",
              description: "Fan theories and discussions about plot twists, connections, and future storylines",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508756672-dovk6x69.jpg",
              imageAlt: "Story theories and discussions"
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Fans Are Saying"
          description="Hear from members of our thriving Star Wars fan community around the world"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Alex Chen",
              role: "Fan Since 1977",
              company: "Original Trilogy Enthusiast",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508757496-j86cmi4y.jpg",
              imageAlt: "Alex Chen portrait"
            },
            {
              id: "2",
              name: "Maria Rodriguez",
              role: "Community Moderator",
              company: "Star Wars Fans Network",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508758014-m1ha4q9s.jpg",
              imageAlt: "Maria Rodriguez portrait"
            },
            {
              id: "3",
              name: "James Wilson",
              role: "Content Creator",
              company: "Theory Channel",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508758658-inewmnt1.jpg",
              imageAlt: "James Wilson portrait"
            },
            {
              id: "4",
              name: "Sophie Turner",
              role: "New Fan",
              company: "Star Wars Discovery",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161461696-6yzx562u.jpg",
              imageAlt: "Sophie Turner portrait"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Stay Connected"
          title="Join Our Community"
          description="Subscribe to stay updated with the latest Star Wars discussions, theories, and community events."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508759797-zi0jzk89.jpg"
          imageAlt="Star Wars fan community newsletter"
          mediaPosition="right"
          tagIcon={Mail}
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. You can unsubscribe at any time."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="STAR WARS FANS"
        />
      </div>
    </ThemeProvider>
  );
}