"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import BlogCardFive from '@/components/sections/blog/BlogCardFive';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function StarWarsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Star Wars Fans"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Community", id: "about" },
            { name: "News", id: "blog" },
            { name: "Members", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Join Us", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="STAR WARS"
          description="Join the ultimate community for Star Wars fans. Connect with fellow enthusiasts, share your passion, and explore the galaxy together."
          buttons={[
            { text: "Explore Community", href: "about" },
            { text: "Latest News", href: "blog" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png"
          imageAlt="Star Wars galaxy backdrop"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Welcome to the Galaxy"
          description="We are a thriving community dedicated to celebrating everything Star Wars. From the original trilogy to the latest series, we bring fans together to discuss, celebrate, and share their love for this iconic universe."
          tag="About Us"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502904271-z2pntgqf.jpg"
          imageAlt="Star Wars universe"
          buttons={[{ text: "Learn More", href: "contact" }]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwenty
          title="What We Offer"
          description="Connect with the community through various activities and resources designed for Star Wars enthusiasts of all levels."
          images={[
            { id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502906375-82uc6wjl.jpg" },
            { id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502907661-wjlq2nxn.jpg" },
            { id: 3, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502910619-wwr2g7a8.jpg" },
            { id: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png" }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Join Now", href: "contact" }]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Community Leaders"
          description="Meet the passionate individuals leading our Star Wars fan community."
          members={[
            { id: "1", name: "Luke S.", role: "Community Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" },
            { id: "2", name: "Leia M.", role: "Content Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" },
            { id: "3", name: "Han C.", role: "Events Coordinator", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg" }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Alex J.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg" },
            { id: "2", name: "Sarah K.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg" },
            { id: "3", name: "Michael T.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914201-sdgv9pae.jpg" },
            { id: "4", name: "Emma R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg" }
          ]}
          cardTitle="Join thousands of Star Wars fans connecting and sharing their passion every day"
          cardTag="Community Stories"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our community and membership."
          faqs={[
            {
              id: "1",
              title: "How do I join the community?",
              content: "Joining is simple! Complete our registration form on the contact page and you will receive confirmation within 24 hours. Membership is free and open to all Star Wars enthusiasts."
            },
            {
              id: "2",
              title: "What events do you organize?",
              content: "We organize monthly movie screenings, discussion forums, fan meetups, and exclusive viewing events for new releases. Check our news section for upcoming events."
            },
            {
              id: "3",
              title: "Is there a membership fee?",
              content: "No, our community is completely free to join. We rely on volunteer members and donations to keep our community running smoothly."
            },
            {
              id: "4",
              title: "Can I share fan content?",
              content: "Absolutely! We encourage members to share fan art, theories, reviews, and creative content. Please respect copyright and community guidelines when sharing."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
          imageAlt="Star Wars galaxy"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="right"
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardFive
          title="Latest Updates"
          description="Stay informed with the latest news, reviews, and discussions from the Star Wars universe."
          blogs={[
            {
              id: "1",
              title: "A New Hope: The Latest Series Announcement",
              items: ["News", "Jan 15, 2025", "5 min read"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502908501-qegkac9j.jpg"
            },
            {
              id: "2",
              title: "Fan Theories: Exploring Character Connections Across the Saga",
              items: ["Analysis", "Jan 12, 2025", "8 min read"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502909492-uldg0gxd.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join the Community"
          description="Ready to connect with fellow Star Wars fans? Sign up for our newsletter and become part of our growing community today."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your favorite Star Wars moment...",
            rows: 4,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502916033-zltpd7vx.jpg"
          imageAlt="Star Wars community connection"
          mediaPosition="right"
          buttonText="Join Community"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Star Wars Fans"
          copyrightText="© 2025 Star Wars Fan Community. All rights reserved."
          columns={[
            {
              title: "Community",
              items: [
                { label: "About Us", href: "about" },
                { label: "Members", href: "team" },
                { label: "Events", href: "blog" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "News", href: "blog" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "privacy" },
                { label: "Terms of Service", href: "terms" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}