"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function MatrixFanPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="The Matrix"
          navItems={[
            { name: "About", id: "about" },
            { name: "Characters", id: "characters" },
            { name: "Timeline", id: "timeline" },
            { name: "Community", id: "community" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Join Us", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo 
          logoText="The Matrix"
          description="Welcome to the ultimate fan destination for The Matrix universe. Explore character profiles, movie timelines, and join our thriving community of fans."
          buttons={[
            { text: "Explore Now", href: "about" },
            { text: "Join Community", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301549.jpg"
          imageAlt="Matrix digital background with neon code"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout 
          heading={[
            { type: "text", content: "Experience the" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/close-up-cute-girl-looking-away_23-2148311241.jpg", alt: "Neo Matrix character" },
            { type: "text", content: "iconic world of The Matrix" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "characters" }
          ]}
        />
      </div>

      <div id="characters" data-section="characters">
        <TeamCardFive 
          title="Main Characters"
          description="Meet the iconic characters that shaped the Matrix universe"
          tag="Heroes & Villains"
          team={[
            {
              id: "1",              name: "Neo",              role: "The One",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-cute-girl-looking-away_23-2148311241.jpg"
            },
            {
              id: "2",              name: "Trinity",              role: "Hacker & Warrior",              imageSrc: "https://img.b2bpic.net/free-photo/pixel-art-design-portrait-bitmap_23-2149232487.jpg"
            },
            {
              id: "3",              name: "Morpheus",              role: "Mentor & Leader",              imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-man-warrior-portrait_23-2150712600.jpg"
            },
            {
              id: "4",              name: "Agent Smith",              role: "Antagonist",              imageSrc: "https://img.b2bpic.net/free-photo/man-funfair-looking-away_23-2148281618.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
        />
      </div>

      <div id="timeline" data-section="timeline">
        <FeatureCardEight 
          title="Matrix Timeline"
          description="A journey through the evolution of The Matrix films"
          tag="Movie History"
          features={[
            {
              id: 1,
              title: "The Matrix",              description: "The groundbreaking original film that revolutionized cinema with its innovative visual effects and philosophical depth.",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-green-cyberpunk-halftone-sound-wave_1217-4370.jpg"
            },
            {
              id: 2,
              title: "The Matrix Reloaded",              description: "The epic sequel that expanded the Matrix universe with deeper mythology, intricate action sequences, and complex character development.",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-green-cyberpunk-halftone-sound-wave_1217-4366.jpg"
            },
            {
              id: 3,
              title: "The Matrix Revolutions",              description: "The climactic conclusion to the original trilogy that resolved key storylines and redefined the nature of the Matrix world.",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-green-cyberpunk-halftone-sound-wave_1217-4366.jpg"
            },
            {
              id: 4,
              title: "The Matrix Resurrections",              description: "The long-awaited return to the Matrix universe with a fresh perspective, new characters, and thought-provoking themes for a new generation.",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-green-cyberpunk-halftone-sound-wave_1217-4301.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardTwo 
          title="Community Impact"
          description="The Matrix fandom by the numbers"
          tag="Global Community"
          metrics={[
            { id: "1", value: "4", description: "Groundbreaking Films" },
            { id: "2", value: "Billions", description: "Box Office Revenue" },
            { id: "3", value: "30+", description: "Years of Cultural Impact" },
            { id: "4", value: "Millions", description: "Dedicated Fans Worldwide" }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="scale-rotate"
        />
      </div>

      <div id="featured-content" data-section="featured-content">
        <BlogCardOne 
          title="Latest Matrix Content"
          description="Discover in-depth analysis, theories, and behind-the-scenes insights from our community"
          tag="Featured"
          blogs={[
            {
              id: "1",              category: "Philosophy",              title: "The Meaning of the Red Pill",              excerpt: "Exploring the philosophical implications and metaphorical significance of the red pill in The Matrix universe.",              imageSrc: "https://img.b2bpic.net/free-photo/abstract-techno-background_1048-8572.jpg",              authorName: "Alex Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/abstract-techno-background_1048-8572.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: "Production",              title: "Behind the Scenes: Visual Effects Revolution",              excerpt: "How The Matrix revolutionized digital cinematography and set new standards for action filmmaking in Hollywood.",              imageSrc: "https://img.b2bpic.net/free-photo/business-analytics_53876-163234.jpg",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/business-analytics_53876-163234.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: "Theory",              title: "Fan Theories: Is Neo Still The One?",              excerpt: "Analyzing the latest theories about Neo's role and significance in The Matrix Resurrections storyline.",              imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18936.jpg",              authorName: "Michael Davis",              authorAvatar: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18936.jpg",              date: "10 Jan 2025"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble 
          title="Frequently Asked Questions"
          description="Get answers to common questions about The Matrix universe and our community"
          tag="Help & Support"
          faqs={[
            {
              id: "1",              title: "What is the correct watch order for The Matrix films?",              content: "The original release order (1999, 2003, 2003) is recommended for first-time viewers. However, some fans enjoy revisiting The Matrix Reloaded and Revolutions before watching Resurrections for context on the timeline and character relationships."
            },
            {
              id: "2",              title: "Is The Matrix based on a book or original story?",              content: "The Matrix is an original story created and directed by Lana and Lilly Wachowski. While not based on an existing book, it draws inspiration from various philosophical concepts, cyberpunk literature, and sci-fi traditions."
            },
            {
              id: "3",              title: "What does 'The One' mean in The Matrix?",              content: "The One refers to a person prophesied to possess god-like powers within the Matrix and the ability to manipulate its code. Neo is identified as The One, destined to end the war between humans and machines."
            },
            {
              id: "4",              title: "Are there other Matrix movies or shows beyond the films?",              content: "Yes! Beyond the four main films, there are animated shorts (The Animatrix), comics, video games, and a live-action series called The Matrix Resurrections. The universe continues to expand with new content."
            },
            {
              id: "5",              title: "How can I join the community and contribute?",              content: "You can join our community by signing up through the 'Join Us' section. Members can participate in discussions, share fan theories, contribute content, and connect with other Matrix enthusiasts from around the world."
            },
            {
              id: "6",              title: "What makes The Matrix culturally significant?",              content: "The Matrix revolutionized sci-fi cinema with groundbreaking visual effects, philosophical depth, and cultural commentary. It introduced 'bullet-time' technology, explored concepts of reality and consciousness, and influenced countless films and media."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter 
          tag="Join Our Community"
          title="Enter the Matrix"
          description="Subscribe to stay updated with the latest Matrix news, exclusive fan content, community events, and discussions."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. You can unsubscribe at any time. By subscribing, you agree to receive updates about The Matrix fan community."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis 
          logoText="The Matrix"
          columns={[
            {
              items: [
                { label: "About", href: "about" },
                { label: "Characters", href: "characters" },
                { label: "Timeline", href: "timeline" }
              ]
            },
            {
              items: [
                { label: "Community", href: "community" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Disclaimer", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}