"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { BookOpen, Brain, Brush, Film, Lightbulb, MessageSquare, Music, Palette, Zap } from "lucide-react";

export default function MatrixPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="MATRIX"
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Community", id: "community" },
            { name: "FAQ", id: "faq" },{"name":"Shop","id":"/shop"}]}
          button={{
            text: "Join Us",            href: "newsletter"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="THE MATRIX"
          description="Enter the world of the most iconic sci-fi universe. Connect with fellow fans, explore theories, and celebrate the digital revolution."
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-green-cyberpunk-halftone-sound-wave_1217-4370.jpg",              imageAlt: "Matrix digital world"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-green-cyberpunk-halftone-sound-wave_1217-4366.jpg",              imageAlt: "Matrix code and technology"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301549.jpg",              imageAlt: "Matrix simulation"
            }
          ]}
          buttons={[
            {
              text: "Explore Community",              href: "community"
            },
            {
              text: "Learn More",              href: "about"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>
      
      <div id="about" data-section="about">
        <TextSplitAbout
          title="Welcome to the Matrix"
          description={[
            "This is a community dedicated to fans of The Matrix franchise. From the groundbreaking original trilogy to the latest installments, we celebrate the philosophical depth, stunning visuals, and cultural impact of this revolutionary series.",            "Our mission is to bring together fans worldwide who appreciate the themes of reality, consciousness, and human choice. Whether you're here for discussions, fan theories, or simply to connect with like-minded enthusiasts, you've found your digital sanctuary."
          ]}
          buttons={[
            {
              text: "Join Discussion",              href: "community"
            }
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureBento
          title="Why Join Our Community"
          description="Discover what makes the Matrix fan community special and why thousands of fans engage with us daily."
          features={[
            {
              title: "Global Fan Network",              description: "Connect with fans from around the world who share your passion for The Matrix universe.",              bentoComponent: "globe"
            },
            {
              title: "Deep Analysis & Theories",              description: "Explore philosophical concepts, hidden meanings, and fan theories shared by the community.",              bentoComponent: "orbiting-icons",              centerIcon: Brain,
              items: [
                { icon: Lightbulb, ring: 1 },
                { icon: BookOpen, ring: 2 },
                { icon: MessageSquare, ring: 3 }
              ]
            },
            {
              title: "Fan Creations Showcase",              description: "Share and discover amazing fan art, videos, and creative content from the community.",              bentoComponent: "marquee",              centerIcon: Palette,
              variant: "icon",              icons: [Brush, Film, Music, Zap]
            },
            {
              title: "Event Tracking",              description: "Stay updated on latest Matrix releases, anniversaries, and community events.",              bentoComponent: "timeline",              heading: "Upcoming Events",              subheading: "Mark your calendar",              items: [
                {
                  label: "Release Anniversary",                  detail: "Celebrate The Matrix's iconic release date"
                },
                {
                  label: "Community Meetup",                  detail: "Join fans for discussions and screenings"
                },
                {
                  label: "Theory Showcase",                  detail: "Present your best fan theories"
                }
              ],
              completedLabel: "Upcoming"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="community" data-section="community">
        <ProductCardFour
          title="Community Highlights"
          description="Check out amazing fan creations and community contributions that keep our culture alive."
          products={[
            {
              id: "1",              name: "Fan Theories Hub",              price: "Free Access",              variant: "200+ Active Discussions",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-man-digital-art_23-2151197880.jpg",              imageAlt: "Fan theories and discussions"
            },
            {
              id: "2",              name: "Art Gallery",              price: "Free Submission",              variant: "500+ Artworks",              imageSrc: "https://img.b2bpic.net/free-photo/international-day-education-futuristic-style_23-2150998679.jpg",              imageAlt: "Community fan art showcase"
            },
            {
              id: "3",              name: "Video Compilations",              price: "Free Streaming",              variant: "Curated Collections",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-fantasy-sea-creature_23-2151626034.jpg",              imageAlt: "Video content library"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Fans Say"
          description="Hear from members of our vibrant Matrix fan community."
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              handle: "@matrixphilosopher",              testimonial: "This community gave me a space to explore the deep philosophical themes of Matrix with people who genuinely care. Incredible discussions!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-laughing_23-2148859448.jpg",              imageAlt: "Alex Chen"
            },
            {
              id: "2",              name: "Sarah Mitchell",              handle: "@scifi_artist",              testimonial: "The support and feedback I received on my Matrix fan art from this community was amazing. It inspired me to create more!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "3",              name: "Marcus Johnson",              handle: "@theory_master",              testimonial: "Best place to connect with fellow fans. The theories shared here have completely changed how I view the films.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "4",              name: "Emma Rodriguez",              handle: "@digital_nomad",              testimonial: "Found my people here. The community is welcoming, smart, and passionate about The Matrix. Couldn't ask for better.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-beautiful-man_23-2148780802.jpg",              imageAlt: "Emma Rodriguez"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Get answers to common questions about our Matrix fan community and how to get involved."
          faqs={[
            {
              id: "1",              title: "Is this an official Matrix community?",              content: "We are an independent fan community dedicated to celebrating The Matrix franchise. We are not officially affiliated with Warner Bros. or the creators, but we operate with respect for the intellectual property and community guidelines."
            },
            {
              id: "2",              title: "How do I join the community?",              content: "Simply sign up with your email through our newsletter and you'll gain access to discussion forums, fan galleries, and exclusive community events. It's free and open to all fans!"
            },
            {
              id: "3",              title: "Can I share my fan art and creations?",              content: "Absolutely! We have dedicated spaces for fan art, videos, and creative content. Please ensure your creations respect copyright guidelines, and give credit where due."
            },
            {
              id: "4",              title: "What makes your community different?",              content: "We focus on thoughtful discussion, respect for different interpretations, and celebrating all aspects of The Matrix universe including philosophy, action sequences, cinematography, and cultural impact."
            },
            {
              id: "5",              title: "Are there community events?",              content: "Yes! We organize watch parties, theory showcases, Q&As with creators, and celebrate anniversaries and new releases. Check our events calendar regularly for upcoming activities."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>
      
      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Stay Connected"
          tagIcon={Zap}
          title="Enter the Matrix Community"
          description="Subscribe to our newsletter for exclusive discussions, fan theories, events updates, and the latest Matrix news delivered to your inbox."
          background={{
            variant: "rotated-rays-animated-grid"
          }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Join Now"
          termsText="We respect your privacy. You can unsubscribe anytime. No spam, just pure Matrix fandom."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="MATRIX"
          leftLink={{
            text: "Privacy Policy",            href: "#privacy"
          }}
          rightLink={{
            text: "Code of Conduct",            href: "#conduct"
          }}
        />
      </div>
    </ThemeProvider>
  );
}