"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardSplit from '@/components/sections/hero/HeroBillboardSplit';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Zap } from "lucide-react";

export default function StrangerThingsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Stranger Things"
          navItems={[
            { name: "About", id: "about" },
            { name: "Seasons", id: "seasons" },
            { name: "Cast", id: "cast" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardSplit
          title="Welcome to the Upside Down"
          description="Explore the dark supernatural mysteries of Hawkins, Indiana. Discover the interdimensional portal, powerful psychokinetic abilities, and the creatures that lurk beyond our reality."
          tag="Netflix Series"
          tagIcon={Zap}
          buttons={[
            { text: "Explore Seasons", href: "seasons" },
            { text: "Meet the Cast", href: "cast" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508752218-v1i2cs9a.jpg"
          imageAlt="Stranger Things promotional artwork"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutCards
          title="About the Series"
          description="Stranger Things is an American science fiction horror drama television series created by the Duffer Brothers. The show combines elements of sci-fi, horror, and 80s nostalgia to create a unique viewing experience."
          tag="The Story"
          features={[
            {
              id: "1",
              title: "4 Seasons Released",
              description: "Follow the journey from the initial disappearance to the final battle against supernatural forces threatening our world.",
              label: "2016-2022"
            },
            {
              id: "2",
              title: "Global Phenomenon",
              description: "A massive worldwide success that captivated audiences with its gripping storytelling and compelling characters.",
              label: "Award-Winning"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="seasons" data-section="seasons">
        <FeatureCardFifteen
          title="Explore the Seasons"
          description="Each season brings new mysteries, deeper lore, and shocking revelations about the Upside Down and its dark inhabitants."
          tag="Story Progression"
          features={[
            {
              id: "1",
              title: "Season 1",
              description: "A young boy vanishes into thin air. His friends discover strange forces at work in their small town.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg",
              imageAlt: "Stranger Things Season 1"
            },
            {
              id: "2",
              title: "Season 2",
              description: "The Upside Down emerges once more. A shadowy entity threatens to consume everything they hold dear.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zrhse4",
              imageAlt: "Stranger Things Season 2"
            },
            {
              id: "3",
              title: "Season 3",
              description: "New dangers arise as a sinister force awakens. The stakes have never been higher for Hawkins and beyond.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg",
              imageAlt: "Stranger Things Season 3"
            },
            {
              id: "4",
              title: "Season 4",
              description: "The ultimate battle unfolds. Secrets of the past collide with threats of the present in an epic conclusion.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zrhse4",
              imageAlt: "Stranger Things Season 4"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="cast" data-section="cast">
        <TeamCardOne
          title="Meet the Cast"
          description="The talented ensemble bringing the residents of Hawkins to life through incredible performances."
          tag="The Ensemble"
          members={[
            {
              id: "1",
              name: "Winona Ryder",
              role: "Joyce Byers",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Winona Ryder as Joyce Byers"
            },
            {
              id: "2",
              name: "David Harbour",
              role: "Jim Hopper",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "David Harbour as Jim Hopper"
            },
            {
              id: "3",
              name: "Millie Bobby Brown",
              role: "Eleven",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Millie Bobby Brown as Eleven"
            },
            {
              id: "4",
              name: "Finn Wolfhard",
              role: "Mike Wheeler",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Finn Wolfhard as Mike Wheeler"
            },
            {
              id: "5",
              name: "Caleb McLaughlin",
              role: "Lucas Sinclair",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Caleb McLaughlin as Lucas Sinclair"
            },
            {
              id: "6",
              name: "Gaten Matarazzo",
              role: "Dustin Henderson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Gaten Matarazzo as Dustin Henderson"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Fans Say"
          description="Experience the show through the eyes of devoted fans and critics worldwide."
          tag="Fan Reviews"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "Viewer",
              company: "Netflix Fan",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              role: "Entertainment Critic",
              company: "Pop Culture Weekly",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              role: "Show Enthusiast",
              company: "Fan Community",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "Alex Thompson",
              role: "Media Reviewer",
              company: "Entertainment Today",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Alex Thompson"
            },
            {
              id: "5",
              name: "Jessica Lee",
              role: "Devoted Fan",
              company: "Stranger Things Community",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Jessica Lee"
            },
            {
              id: "6",
              name: "Daniel Kim",
              role: "TV Critic",
              company: "Series Analysis",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Daniel Kim"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Get answers to common questions about the show, its plot, and the lore of Stranger Things."
          tag="Help Center"
          faqs={[
            {
              id: "1",
              title: "What is the Upside Down?",
              content: "The Upside Down is a dark, alternate dimension that mirrors our world. It exists alongside Earth but is ruled by dangerous supernatural creatures and is shrouded in perpetual darkness and decay."
            },
            {
              id: "2",
              title: "Who is Eleven?",
              content: "Eleven is a young girl with powerful psychokinetic abilities. She was held captive and experimented on at a secret government facility before escaping to Hawkins."
            },
            {
              id: "3",
              title: "Is there a Season 5?",
              content: "Season 5 is confirmed as the final season of Stranger Things. The Duffer Brothers have announced that Season 5 will bring the story to a conclusive end."
            },
            {
              id: "4",
              title: "When does the show take place?",
              content: "The series begins in 1983 and progresses through the 1980s. The story spans several years across the four seasons, with significant time jumps between seasons."
            },
            {
              id: "5",
              title: "Where can I watch Stranger Things?",
              content: "Stranger Things is exclusively available on Netflix. You can watch all four seasons with a Netflix subscription."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531043550-5fr36xdl.jpg"
          imageAlt="Sci-fi illustration"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Stay updated with the latest news and updates from Hawkins"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          animationType="reveal-blur"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Stranger Things"
        />
      </div>
    </ThemeProvider>
  );
}