"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TeamCardSeven from '@/components/sections/team/TeamCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Zap, Film, Heart, HelpCircle } from "lucide-react";

export default function StrangerThingsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="noise"
      cardStyle="solid-accent-light"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="minimal"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Stranger Things"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Story", id: "about" },
            { name: "Episodes", id: "features" },
            { name: "Characters", id: "team" },
            { name: "Community", id: "testimonial" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Join Us",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Stranger Things"
          description="Welcome to Hawkins. Discover the supernatural mystery that changed everything. A dark and twisted tale of friendship, adventure, and the power to fight evil."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wo1mku"
          imageAlt="Stranger Things Upside Down dimension"
          frameStyle="card"
          logoLineHeight={1.1}
        />
      </div>

      <div id="about" data-section="about">
        <TagMediaSplitAbout
          title="The Story Begins"
          description="A young boy disappears in 1983. His friends discover secret government experiments and creatures from another dimension."
          tag="Series Overview"
          textboxLayout="default"
          contentTag="THE PHENOMENON"
          contentTagIcon={Zap}
          contentTitle="A Mystery Unfolds in Hawkins"
          contentDescription="When Will Byers vanishes under mysterious circumstances, his friends embark on a dangerous journey through the Upside Down. With the help of a girl with psychokinetic powers, they uncover the truth about government conspiracies and interdimensional threats that threaten their small town and the world."
          contentButtons={[
            { text: "Watch Now", href: "#" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bzatzc"
          imageAlt="Hawkins Lab and the Upside Down"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="The Journey Through Seasons"
          description="Experience the evolution of Hawkins across four intense seasons of mystery, danger, and friendship."
          tag="Episodes"
          tagIcon={Film}
          textboxLayout="default"
          features={[
            {
              id: "01",
              title: "Season 1: The Vanishing",
              description: "A boy disappears. Strange occurrences plague the town. A gateway to another dimension opens.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8yyysq",
              imageAlt: "Season 1 poster"
            },
            {
              id: "02",
              title: "Season 2: The Shadow",
              description: "The threat returns. A shadow looms over Hawkins. New dangers emerge from the Upside Down.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bnoxbi",
              imageAlt: "Season 2 poster"
            },
            {
              id: "03",
              title: "Season 3: The Mall",
              description: "Summer 1985. New friendships and romance bloom. A mind-controlling force threatens everything.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508756075-khdynat4.jpg",
              imageAlt: "Season 3 poster"
            },
            {
              id: "04",
              title: "Season 4: The Awakening",
              description: "The ultimate evil awakens. Vecna rises. The final battle begins across multiple dimensions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508753765-3pfmozxg.jpg",
              imageAlt: "Season 4 poster"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSeven
          title="Meet the Cast"
          team={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818961513-mx8nd1f5.jpg",
              imageAlt: "Lead Actor 1"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Lead Actor 2"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Lead Actor 3"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766709684254-yzpxnfgq.jpg",
              imageAlt: "Supporting Actor 1"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Supporting Actor 2"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardOne
          title="Fans Love the Show"
          description="Discover what viewers around the world are saying about their Stranger Things experience."
          tag="Community"
          tagIcon={Heart}
          textboxLayout="default"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Fan",
              company: "Hawkins Community",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ney8rm",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Series Enthusiast",
              company: "Netflix Fan",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766662881397-kmy1tetm.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Binge Watcher",
              company: "Fan Community",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=obns35",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              role: "Series Fan",
              company: "Upside Down Club",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=abzver",
              imageAlt: "David Kim"
            },
            {
              id: "5",
              name: "Jessica Martinez",
              role: "Devoted Viewer",
              company: "Fan Network",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=05bsd6",
              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",
              name: "James Wilson",
              role: "TV Critic",
              company: "Entertainment Weekly",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=569aqs",
              imageAlt: "James Wilson"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about Stranger Things, the cast, and the show's mysteries."
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What is the Upside Down?",
              content: "The Upside Down is a dark, parallel dimension created by Hawkins Lab experiments. It mirrors our world but is filled with dangerous creatures and twisted versions of familiar places."
            },
            {
              id: "2",
              title: "How many seasons are there?",
              content: "Stranger Things has four seasons available on Netflix, with the story concluding in Season 4. The series follows the supernatural events in Hawkins from 1983 onwards."
            },
            {
              id: "3",
              title: "When does Season 5 release?",
              content: "Season 5 is currently in development and will be the final season of Stranger Things. Netflix has not announced a specific release date yet."
            },
            {
              id: "4",
              title: "Who has psychokinetic powers?",
              content: "Eleven is the main character with psychokinetic abilities, developed through Hawkins Lab experiments. Her powers are crucial to fighting the threats from the Upside Down."
            },
            {
              id: "5",
              title: "Is the show set in a real town?",
              content: "Hawkins is a fictional town created for the series. The show is primarily filmed in Georgia, USA, though set in Indiana."
            },
            {
              id: "6",
              title: "What year does Season 1 take place?",
              content: "Season 1 takes place in 1983 in Hawkins, Indiana, when Will Byers mysteriously disappears, setting the entire series in motion."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Join the Adventure"
          description="Subscribe to stay updated on Stranger Things news, fan theories, and exclusive community content from Hawkins."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Share your favorite Stranger Things moment or theory...",
            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          buttonText="Join Us"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: "Explore",
              items: [
                { label: "Home", href: "hero" },
                { label: "Story", href: "about" },
                { label: "Episodes", href: "features" },
                { label: "Characters", href: "team" }
              ]
            },
            {
              title: "Community",
              items: [
                { label: "Fan Reviews", href: "testimonial" },
                { label: "FAQ", href: "faq" },
                { label: "Contact Us", href: "contact" }
              ]
            },
            {
              title: "External",
              items: [
                { label: "Netflix", href: "https://www.netflix.com" },
                { label: "Official Site", href: "https://www.netflix.com/title/80057281" }
              ]
            }
          ]}
          logoText="Stranger Things"
          copyrightText="© 2025 Stranger Things Fan Site | Netflix Original Series"
        />
      </div>
    </ThemeProvider>
  );
}