"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Zap, Users, Film, Clock, Heart } from 'lucide-react';

export default function StrangerThingsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "Home", id: "home" },
            { name: "Episodes", id: "episodes" },
            { name: "Characters", id: "characters" },
            { name: "News", id: "news" },
            { name: "Community", id: "contact" }
          ]}
          button={{
            text: "Join Now",
            href: "contact"
          }}
          brandName="Stranger Things"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Welcome to the Upside Down"
          description="Dive into the mystery. Explore the supernatural world of Stranger Things - where friendship, bravery, and science clash against dark forces."
          tag="Fan Community"
          tagIcon={Zap}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg"
          imageAlt="Stranger Things dark mysterious atmosphere"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Explore Episodes", href: "episodes" },
            { text: "Meet Characters", href: "characters" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="A Story Like No Other"
          description="In the town of Hawkins, Indiana, a young boy vanishes into thin air. His friends embark on a thrilling adventure to uncover the truth, discovering a gateway to a parallel dimension known as the Upside Down. What begins as a rescue mission evolves into an epic battle against supernatural forces that threaten our world itself."
          tag="The Series"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg"
          imageAlt="Stranger Things season one forest setting"
          buttons={[
            { text: "Learn More", href: "episodes" }
          ]}
        />
      </div>

      <div id="characters" data-section="characters">
        <TeamCardFive
          title="Meet the Heroes"
          description="The brave souls who stand against the darkness"
          tag="Characters"
          tagIcon={Users}
          team={[
            {
              id: "1",
              name: "Eleven",
              role: "Psychokinetic Warrior",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Eleven - Psychokinetic warrior"
            },
            {
              id: "2",
              name: "Mike Wheeler",
              role: "Natural Leader",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Mike Wheeler - The leader"
            },
            {
              id: "3",
              name: "Dustin Henderson",
              role: "Tech Expert",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Dustin Henderson - The tech genius"
            },
            {
              id: "4",
              name: "Lucas Sinclair",
              role: "The Loyal Friend",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Lucas Sinclair - Loyal and brave"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="episodes" data-section="episodes">
        <BlogCardThree
          title="Episode Guides"
          description="Relive the most iconic moments season by season"
          tag="Episodes"
          tagIcon={Film}
          blogs={[
            {
              id: "1",
              category: "Season One",
              categoryIcon: Clock,
              title: "The Beginning of Everything",
              description: "When Will disappears, his friends uncover secrets that shake their town to its core and discover a girl with extraordinary powers.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg",
              imageAlt: "Season One promotional image"
            },
            {
              id: "2",
              category: "Season Two",
              categoryIcon: Clock,
              title: "The Return",
              description: "A year later, darkness returns to Hawkins as a new threat emerges from the Upside Down during the Halloween season.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1sta5m",
              imageAlt: "Season Two promotional image"
            },
            {
              id: "3",
              category: "Season Three",
              categoryIcon: Clock,
              title: "The Mall Days",
              description: "Summer of 1985 brings new romance, new friendships, and a sinister Russian threat lurking beneath Starcourt Mall.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766499827182-mfikwxl7.jpg",
              imageAlt: "Season Three promotional image"
            },
            {
              id: "4",
              category: "Season Four",
              categoryIcon: Clock,
              title: "The Final Battle",
              description: "The group reunites to face their greatest challenge yet as ancient evil awakens and threatens to consume everything they love.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508784624-wrt2s2wl.jpg",
              imageAlt: "Season Four promotional image"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="Loved by Fans Worldwide"
          description="What our community thinks about Stranger Things"
          tag="Community"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",
              quote: "Stranger Things is a masterpiece. The character development, the plot twists, and the nostalgia hit just right every single time.",
              name: "Sarah Mitchell",
              role: "Passionate Fan",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Sarah Mitchell fan testimonial"
            },
            {
              id: "2",
              quote: "The writing is incredible. Every season brings something new while staying true to what made the show amazing from the start.",
              name: "James Chen",
              role: "Series Enthusiast",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "James Chen fan testimonial"
            },
            {
              id: "3",
              quote: "I've watched this series multiple times and I still get chills. It's pure storytelling magic that transcends generations.",
              name: "Emily Rodriguez",
              role: "Devoted Viewer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Emily Rodriguez fan testimonial"
            },
            {
              id: "4",
              quote: "The ensemble cast is perfect. Every actor brings depth and authenticity to their character. Simply exceptional television.",
              name: "David Park",
              role: "Fan Since Day One",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "David Park fan testimonial"
            },
            {
              id: "5",
              quote: "Stranger Things defined a generation of television. The soundtrack, the visuals, the story - all perfection.",
              name: "Lisa Thompson",
              role: "Cultural Observer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Lisa Thompson fan testimonial"
            },
            {
              id: "6",
              quote: "Every episode left me wanting more. This show knows how to create mystery, tension, and emotional depth simultaneously.",
              name: "Marcus Johnson",
              role: "Series Analyst",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Marcus Johnson fan testimonial"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join Our Community"
          description="Subscribe to our newsletter for exclusive Stranger Things content, season updates, behind-the-scenes insights, and join thousands of fans worldwide."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "What aspect of Stranger Things fascinates you most?",
            rows: 4,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766533181222-kt7oakl6.jpg"
          imageAlt="Community connection illustration"
          mediaPosition="right"
          buttonText="Subscribe"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Stranger Things"
          columns={[
            {
              title: "Explore",
              items: [
                { label: "Episodes", href: "#episodes" },
                { label: "Characters", href: "#characters" },
                { label: "News", href: "#news" }
              ]
            },
            {
              title: "Community",
              items: [
                { label: "Join Us", href: "#contact" },
                { label: "Fan Theories", href: "#theories" },
                { label: "Discussion", href: "#discuss" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Watch Online", href: "#watch" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Twitter", href: "#twitter" },
                { label: "Discord", href: "#discord" },
                { label: "Instagram", href: "#instagram" }
              ]
            }
          ]}
          copyrightText="© 2024 Stranger Things Fan Site. All rights reserved. Not affiliated with Netflix."
        />
      </div>
    </ThemeProvider>
  );
}