"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import TeamCardSeven from '@/components/sections/team/TeamCardSeven';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles } from "lucide-react";

export default function StrangerThingsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="noiseGradient"
      cardStyle="spotlight"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Stranger Things"
          navItems={[
            { name: "Story", id: "about" },
            { name: "Episodes", id: "features" },
            { name: "Characters", id: "team" },
            { name: "Community", id: "testimonial" }
          ]}
          button={{
            text: "Join Newsletter",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="STRANGER THINGS"
          description="Welcome to Hawkins. A fan-dedicated exploration of the supernatural mystery that captured the world. Explore the upside down, meet the characters, and join our community of devoted viewers."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374053287-40fone7i.jpg"
          imageAlt="Stranger Things portal and dark atmospheric scene"
          frameStyle="browser"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="The Story"
          description={[
            "When a young boy disappears in the small town of Hawkins, Indiana, his friends, family and local police encounter something far more sinister and strange than anything they could have imagined.",
            "Stranger Things is a thrilling journey through the mysteries of a hidden world, filled with supernatural creatures, telekinetic powers, and alternate dimensions. This fan site celebrates the cultural phenomenon that redefined television storytelling."
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Watch on Netflix",
              href: "https://www.netflix.com"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFifteen
          title="Key Story Arcs"
          description="Discover the interconnected storylines that make Stranger Things an unforgettable experience"
          features={[
            {
              id: "1",
              title: "Hawkins Lab",
              description: "Secret government experiments that unleashed extraordinary abilities and opened doorways to dark realms",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374055299-p4ybc7pm.jpg"
            },
            {
              id: "2",
              title: "The Demogorgon",
              description: "A terrifying creature from the Upside Down that threatens the peaceful town of Hawkins",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374056328-zln967g2.jpg"
            },
            {
              id: "3",
              title: "Psychokinetic Powers",
              description: "Young Eleven possesses incredible telepathic and telekinetic abilities that defy explanation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374057782-hx0xov5s.jpg"
            },
            {
              id: "4",
              title: "Alternate Dimensions",
              description: "The Upside Down is a dark mirror world connected to our reality through mysterious gateways",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374058362-l7df25ap.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Mythology"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSeven
          title="Cast of Heroes"
          team={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374063392-kk5qmfzs.jpg",
              imageAlt: "Cast member one"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374064404-4793updq.jpg",
              imageAlt: "Cast member two"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374065602-35o1o6ju.jpg",
              imageAlt: "Cast member three"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374066315-94zjqz0u.jpg",
              imageAlt: "Cast member four"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374066764-yyj8dd4f.jpg",
              imageAlt: "Cast member five"
            },
            {
              id: "6",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374067694-a57uu5hn.jpg",
              imageAlt: "Cast member six"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Fans Say"
          description="Join millions of viewers who have been captivated by this incredible series"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              handle: "@strangefan2024",
              testimonial: "Stranger Things is the most captivating show ever made. Every season raises the stakes and delivers pure entertainment that keeps you on the edge of your seat.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374059403-ws9eyxxd.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Rodriguez",
              handle: "@hawkins_lover",
              testimonial: "The character development is phenomenal. From Eleven to Max, every character has an incredible arc that makes you care about their journey deeply.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374060095-8bo57oj2.jpg",
              imageAlt: "James Rodriguez"
            },
            {
              id: "3",
              name: "Emma Chen",
              handle: "@upside_down_fan",
              testimonial: "This show reinvented television. The nostalgia, the mystery, the horror—it all comes together perfectly in every episode.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374060728-fvhc2t7g.jpg",
              imageAlt: "Emma Chen"
            },
            {
              id: "4",
              name: "Michael Torres",
              handle: "@demogorgon_slayer",
              testimonial: "Stranger Things brought my family together. We bonded over theories, watched together, and it became our favorite tradition.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374061351-8fx0qkkf.jpg",
              imageAlt: "Michael Torres"
            },
            {
              id: "5",
              name: "Lisa Anderson",
              handle: "@netflix_obsessed",
              testimonial: "The cinematography, the soundtrack, the writing—everything is perfection. This is what peak television looks like.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374061867-d2pxh75s.jpg",
              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",
              name: "David Kim",
              handle: "@sci_fi_devotee",
              testimonial: "A masterpiece of modern television. The way they blend 80s nostalgia with supernatural horror is absolutely genius.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374062682-91skg3kx.jpg",
              imageAlt: "David Kim"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          speed={30}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about Stranger Things"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "How many seasons are there?",
              content: "Stranger Things has 4 complete seasons available on Netflix, with the fifth and final season in development. Each season builds upon the previous mystery and raises the stakes for the characters."
            },
            {
              id: "2",
              title: "Where is Hawkins?",
              content: "Hawkins is a fictional town in Indiana. While not a real location, the show captures the essence of 1980s small-town America with remarkable authenticity and nostalgia."
            },
            {
              id: "3",
              title: "What is the Upside Down?",
              content: "The Upside Down is an alternate dimension that exists parallel to our world. It's a dark, dangerous mirror of Hawkins where creatures and unexplained phenomena originate. Portals connect the two worlds."
            },
            {
              id: "4",
              title: "Who is Eleven?",
              content: "Eleven is a young girl with extraordinary telekinetic and telepathic abilities. She was created through secret government experiments at Hawkins Lab and becomes central to understanding the mysteries unfolding in the town."
            },
            {
              id: "5",
              title: "Is the show scary?",
              content: "Yes, Stranger Things contains horror elements and intense supernatural sequences. It's rated TV-14, featuring creature scares, violence, and dark themes appropriate for mature teens and adults."
            },
            {
              id: "6",
              title: "When did Stranger Things premiere?",
              content: "Stranger Things premiered on Netflix on July 15, 2016. It quickly became a cultural phenomenon and has maintained massive popularity with each subsequent season release."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Connected"
          title="Join the Community"
          description="Subscribe to our newsletter for exclusive fan content, episode discussions, and updates about the Stranger Things universe."
          tagIcon={Sparkles}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. You can unsubscribe at any time. We send updates about Stranger Things content and fan discussions."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Stranger Things"
          copyrightText="© 2025 Stranger Things Fan Community. Stranger Things is a Netflix Original Series."
          columns={[
            {
              title: "Explore",
              items: [
                {
                  label: "Story",
                  href: "about"
                },
                {
                  label: "Episodes",
                  href: "features"
                },
                {
                  label: "Cast",
                  href: "team"
                },
                {
                  label: "Community",
                  href: "testimonials"
                }
              ]
            },
            {
              title: "Resources",
              items: [
                {
                  label: "FAQ",
                  href: "faq"
                },
                {
                  label: "Newsletter",
                  href: "contact"
                },
                {
                  label: "Netflix",
                  href: "https://www.netflix.com"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Disclaimer",
                  href: "https://www.netflix.com"
                },
                {
                  label: "Contact",
                  href: "contact"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}