"use client"

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Zap, Star, Mail, Facebook, Twitter, Instagram, Youtube } from "lucide-react";

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="elevated-accent"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="outline"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Star Wars Hub"
          navItems={[
            { name: "About", id: "about" },
            { name: "Community", id: "features" },
            { name: "News", id: "testimonial" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Welcome to Star Wars Hub"
          description="Join the galaxy's most passionate fan community. Explore exclusive discussions, breaking news, and connect with fellow fans worldwide."
          tag="For Dedicated Fans"
          tagIcon={Sparkles}
          buttons={[
            { text: "Join Community", href: "#contact" },
            { text: "Explore", href: "#features" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
          imageAlt="Star Wars galaxy space"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Our Fan Community"
          description="Star Wars Hub is dedicated to bringing together fans from across the galaxy. We celebrate the legacy, discuss theories, share fan creations, and build connections with fellow enthusiasts who share the same passion for this iconic universe."
          tag="About Us"
          buttons={[
            { text: "Explore More", href: "#features" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574689615-ool04kh4.jpg"
          imageAlt="Star Wars fan community gathering"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwenty
          title="Engage with Our Community"
          description="Discover what makes Star Wars Hub your ultimate destination for fan content and community interaction."
          tag="Community Features"
          tagIcon={Zap}
          images={[
            {
              id: 1,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766741670957-ck9bnfwo.jpg",
              imageAlt: "Fan discussions"
            },
            {
              id: 2,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766574690659-xx2zpu2k.jpg",
              imageAlt: "Community events"
            },
            {
              id: 3,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766741672840-wt1c55uq.jpg",
              imageAlt: "Star Wars news"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTen
          title="Loved by Fans"
          description="Hear what members of our community have to say about their experience at Star Wars Hub."
          tag="Testimonials"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",
              title: "A True Fan Paradise",
              quote: "Star Wars Hub has become my daily destination. The community is welcoming, the discussions are thoughtful, and I feel like I've found my tribe of passionate fans.",
              name: "Alex Chen",
              role: "Lifelong Star Wars Enthusiast",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766504478198-a0v2ow55.jpg",
              imageAlt: "Alex Chen"
            },
            {
              id: "2",
              title: "Best Fan Community Ever",
              quote: "The level of engagement and knowledge sharing here is incredible. I've made friends, learned new perspectives, and deepened my love for the saga.",
              name: "Sarah Johnson",
              role: "Community Member",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766741674067-qieq4gz7.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "3",
              title: "My Favorite Online Space",
              quote: "From breaking news to in-depth theories, this hub has everything. The moderators keep it respectful and fun for everyone.",
              name: "Marcus Williams",
              role: "Content Creator",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766741675098-97364nld.jpg",
              imageAlt: "Marcus Williams"
            },
            {
              id: "4",
              title: "Finally Found My People",
              quote: "After years of being the only Star Wars fan among my friends, I found my community here. The energy and passion is unmatched.",
              name: "Emma Rodriguez",
              role: "New Member",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766741675983-bb3eeam8.jpg",
              imageAlt: "Emma Rodriguez"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about Star Wars Hub and our community."
          textPosition="left"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "Is Star Wars Hub free to join?",
              content: "Yes, membership is completely free. We welcome all fans to join our community without any cost or subscription requirements."
            },
            {
              id: "2",
              title: "What topics can we discuss?",
              content: "We discuss everything Star Wars related including movies, series, books, games, fan theories, and behind-the-scenes content. We maintain a respectful environment for all perspectives."
            },
            {
              id: "3",
              title: "How do I become a member?",
              content: "Join by signing up through our newsletter or website. You'll get instant access to all community discussions, events, and exclusive content."
            },
            {
              id: "4",
              title: "Are spoilers allowed?",
              content: "We have dedicated spoiler discussion threads. Always use spoiler tags when discussing new content to protect other members."
            },
            {
              id: "5",
              title: "How often do you organize events?",
              content: "We host monthly virtual meetups, watch parties, and special events. Join our newsletter to stay updated on upcoming activities."
            },
            {
              id: "6",
              title: "Can I share my fan creations?",
              content: "Absolutely! We have dedicated sections for fan art, fan fiction, theories, and creative content. All original work is welcomed and celebrated."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Stay Connected"
          title="Join Our Newsletter"
          description="Subscribe to get the latest Star Wars news, community highlights, and exclusive member updates delivered to your inbox."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766741677168-ntrhk7a3.jpg"
          imageAlt="Newsletter subscription"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, just pure Star Wars content."
          tagIcon={Mail}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Star Wars Hub"
          description="The ultimate community for Star Wars fans. Connect, discuss, and celebrate the galaxy's greatest saga together."
          copyrightText="© 2025 Star Wars Hub. For fans, by fans."
          columns={[
            {
              title: "Community",
              items: [
                { label: "About Us", href: "about" },
                { label: "Join Community", href: "contact" },
                { label: "Events", href: "features" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "FAQ", href: "faq" },
                { label: "Guidelines", href: "#" },
                { label: "Contact Us", href: "contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}