"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, BookOpen, Users, Sparkles, Heart, HelpCircle, Mail } from "lucide-react";

export default function StrangerThingsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="solid-accent"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Story", id: "about" },
            { name: "Characters", id: "feature" },
            { name: "Shop", id: "product" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Stranger Things"
          bottomLeftText="Hawkins, Indiana"
          bottomRightText="hello@strangerthings.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Stranger Things by Netflix"
          description="When a young boy disappears in the summer of 1983, his friends discover secret government experiments and a strange alternate dimension called The Upside Down."
          tag="New Season"
          tagIcon={Zap}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932457949-g9at0u7m.jpg"
          imageAlt="The Upside Down portal"
          frameStyle="browser"
          buttons={[
            { text: "Watch Now", href: "https://www.netflix.com/search?q=stranger%20things" },
            { text: "Shop Merch", href: "product" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutCards
          title="The Story"
          description="A thrilling mix of supernatural horror, heartfelt drama, and 1980s nostalgia. When young Will Byers vanishes, his friends uncover a dangerous secret hidden beneath the small town of Hawkins."
          tag="Plot Overview"
          tagIcon={BookOpen}
          features={[
            {
              id: "mystery",
              title: "The Mystery",
              description: "Strange occurrences and government conspiracies threaten the town of Hawkins. Will's friends must uncover the truth.",
              label: "4 Seasons"
            },
            {
              id: "upside-down",
              title: "The Upside Down",
              description: "A dark mirror of our world. A nightmarish dimension where the Demogorgon hunts and time flows differently.",
              label: "Alternate Dimension"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardFifteen
          title="Meet the Cast"
          description="Discover the heroes and villains who shaped the story of Stranger Things."
          tag="Characters"
          tagIcon={Users}
          features={[
            {
              id: "1",
              title: "The Kids",
              description: "Young friends facing supernatural forces with determination and loyalty",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932163324-sgb0wvpw.jpg",
              imageAlt: "The main cast of kids"
            },
            {
              id: "2",
              title: "Psychic Powers",
              description: "Eleven's extraordinary abilities are key to understanding the Upside Down",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932458223-izb6b2wa.jpg",
              imageAlt: "Telekinetic powers visualization"
            },
            {
              id: "3",
              title: "The Monsters",
              description: "Terrifying creatures emerge from the shadows of the Upside Down",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932164133-i7jseb11.jpg",
              imageAlt: "Demogorgon creature design"
            },
            {
              id: "4",
              title: "80s Nostalgia",
              description: "Retro style, iconic music, and authentic period details bring the era to life",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932166195-lu2mydg5.jpg",
              imageAlt: "80s aesthetic and style"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardSeven
          title="Official Merchandise"
          description="Own a piece of Hawkins. Exclusive apparel, collectibles, and merchandise celebrating the phenomenon."
          tag="Limited Stock"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",
              name: "Hawkins Lab Hoodie",
              price: "$49.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932167229-tyyyiqj2.jpg",
              imageAlt: "Hawkins Lab Hoodie"
            },
            {
              id: "2",
              name: "Upside Down T-Shirt",
              price: "$29.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766341395857-2kgi2qab.jpg",
              imageAlt: "Upside Down T-Shirt"
            },
            {
              id: "3",
              name: "Character Collectible Set",
              price: "$89.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932168423-0oglg3zr.jpg",
              imageAlt: "Character Collectible Set"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwelve
          cardTitle="Loved by millions of fans worldwide. A cultural phenomenon that redefined supernatural TV."
          cardTag="Fan Favorite"
          cardTagIcon={Heart}
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932169415-mzrluh9d.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932170169-pgcsy25o.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "James Wilson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932170877-sfvufbqr.jpg",
              imageAlt: "James Wilson"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about Stranger Things."
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "When does the new season premiere?",
              content: "Check Netflix for the latest premiere dates. New seasons are announced through official Netflix channels and our social media."
            },
            {
              id: "2",
              title: "Where can I watch Stranger Things?",
              content: "Stranger Things is exclusively available on Netflix. Subscribe to Netflix to stream all seasons and episodes."
            },
            {
              id: "3",
              title: "Is merchandise available internationally?",
              content: "Yes, our official merchandise is available for international shipping. Check the shop for available items in your region."
            },
            {
              id: "4",
              title: "How can I stay updated on new content?",
              content: "Subscribe to our newsletter and follow our social media accounts for the latest news, announcements, and exclusive behind-the-scenes content."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Stay Connected"
          ctaDescription="Subscribe to our newsletter for exclusive updates, merchandise drops, and Stranger Things news."
          ctaButton={{ text: "Subscribe Now", href: "#" }}
          ctaIcon={Mail}
          faqs={[
            {
              id: "1",
              title: "How often will I receive updates?",
              content: "We send updates monthly with exclusive news, merchandise previews, and special offers for our subscribers."
            },
            {
              id: "2",
              title: "Can I unsubscribe anytime?",
              content: "Absolutely. You can unsubscribe from our newsletter at any time using the link provided in every email."
            },
            {
              id: "3",
              title: "Do you share subscriber information?",
              content: "No. We respect your privacy. Your email is never shared with third parties. See our privacy policy for details."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932172043-f8olo4mi.jpg"
          imageAlt="Stranger Things atmosphere"
          logoText="Stranger Things"
          copyrightText="© 2024 Stranger Things. All rights reserved."
          columns={[
            {
              title: "Show",
              items: [
                { label: "Watch on Netflix", href: "https://www.netflix.com/search?q=stranger%20things" },
                { label: "Episodes", href: "#" },
                { label: "Characters", href: "feature" },
                { label: "Behind the Scenes", href: "#" }
              ]
            },
            {
              title: "Shop",
              items: [
                { label: "Merchandise", href: "product" },
                { label: "Apparel", href: "#" },
                { label: "Collectibles", href: "#" },
                { label: "Gift Sets", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}