"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Heart, Twitter, Facebook, Instagram, Youtube } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="elevated-accent"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Characters", id: "characters" },
            { name: "Vote", id: "voting" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Stranger Things"
          button={{ text: "Vote Now", href: "voting" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Discover the Heroes of Hawkins"
          description="Meet the unforgettable characters from Stranger Things. Explore their stories, personalities, and decide who your favorite is."
          tag="Characters"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005475797-aywnq0jb.jpg"
          imageAlt="Stranger Things characters"
          imagePosition="right"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006071074-zfhikvpu.jpg", alt: "Eleven" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766747396150-cgdd8ezw.jpg", alt: "Mike" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006072010-1ks1z2y6.jpg", alt: "Dustin" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182322949-q7mns6zk.jpg", alt: "Nancy" }
          ]}
          avatarText="Join thousands of fans voting"
          buttons={[
            { text: "Explore Characters", href: "characters" },
            { text: "Start Voting", href: "voting" }
          ]}
        />
      </div>

      <div id="characters" data-section="characters">
        <ProductCardOne
          title="The Characters of Stranger Things"
          description="Meet each character with detailed descriptions and backstories"
          tag="Meet Them"
          products={[
            {
              id: "1",
              name: "Eleven",
              price: "The Gifted One",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006071074-zfhikvpu.jpg",
              imageAlt: "Eleven with psychokinetic powers"
            },
            {
              id: "2",
              name: "Mike Wheeler",
              price: "The Leader",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766747396150-cgdd8ezw.jpg",
              imageAlt: "Mike Wheeler determined look"
            },
            {
              id: "3",
              name: "Dustin Henderson",
              price: "The Inventor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006072010-1ks1z2y6.jpg",
              imageAlt: "Dustin with curly hair"
            },
            {
              id: "4",
              name: "Lucas Sinclair",
              price: "The Protector",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182322097-rrjh965f.jpg",
              imageAlt: "Lucas Sinclair confident"
            },
            {
              id: "5",
              name: "Will Byers",
              price: "The Survivor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageAlt: "Will Byers thoughtful"
            },
            {
              id: "6",
              name: "Nancy Wheeler",
              price: "The Fighter",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182322949-q7mns6zk.jpg",
              imageAlt: "Nancy determined expression"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Character Spotlight"
          description="Learn more about the iconic cast of Stranger Things"
          tabs={[
            {
              id: "eleven",
              label: "Eleven",
              description: "A young girl with psychokinetic and telepathic powers, Eleven escaped from the Hawkins National Laboratory where she was used as a tool for espionage. She is stoic, reserved, but fiercely protective of her friends."
            },
            {
              id: "mike",
              label: "Mike Wheeler",
              description: "The compassionate leader of the friend group, Mike is determined and brave. He shows deep emotional intelligence and loyalty to those he cares about, especially Eleven."
            },
            {
              id: "dustin",
              label: "Dustin Henderson",
              description: "The lovable, tech-savvy member of the group with a heart of gold. Dustin's knowledge of science and gadgets often saves the day, and his humor brightens even the darkest moments."
            },
            {
              id: "nancy",
              label: "Nancy Wheeler",
              description: "Mike's older sister transforms from a typical teenage girl into a determined fighter against supernatural threats. She is resourceful, brave, and fiercely protective of her younger brother."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005475797-aywnq0jb.jpg"
          imageAlt="Stranger Things ensemble"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="voting" data-section="voting">
        <MetricCardSeven
          title="Who is Your Favorite Character?"
          description="Vote for your favorite Stranger Things character and see live results"
          tag="Vote Now"
          metrics={[
            {
              id: "1",
              value: "1,247",
              title: "Votes for Eleven",
              items: ["Most popular character", "Fan favorite", "Psychokinetic powers"]
            },
            {
              id: "2",
              value: "892",
              title: "Votes for Mike Wheeler",
              items: ["Natural leader", "Compassionate", "Always protective"]
            },
            {
              id: "3",
              value: "756",
              title: "Votes for Nancy Wheeler",
              items: ["Strong character arc", "Brave fighter", "Fan appreciation"]
            },
            {
              id: "4",
              value: "623",
              title: "Votes for Dustin",
              items: ["Most lovable character", "Tech genius", "Heart of gold"]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardThirteen
          title="Fan Favorites"
          description="What fans are saying about their favorite Stranger Things characters"
          tag="Community"
          testimonials={[
            {
              id: "1",
              name: "Sarah",
              handle: "@strangefan99",
              testimonial: "Eleven is absolutely incredible. Her character development throughout the series is amazing!",
              rating: 5,
              icon: Heart
            },
            {
              id: "2",
              name: "Mike",
              handle: "@mikewheel92",
              testimonial: "Mike Wheeler is the heart of the show. His leadership and loyalty are inspiring.",
              rating: 5,
              icon: Heart
            },
            {
              id: "3",
              name: "Jessica",
              handle: "@dustinfan",
              testimonial: "Dustin is the comic relief we all need. Such a lovable character!",
              rating: 5,
              icon: Heart
            },
            {
              id: "4",
              name: "Alex",
              handle: "@nancyfan21",
              testimonial: "Nancy's transformation from season 1 to now is one of the best character arcs in the series.",
              rating: 5,
              icon: Heart
            },
            {
              id: "5",
              name: "Emma",
              handle: "@hawkinsfan",
              testimonial: "The whole cast is phenomenal. Each character has their own unique charm and depth.",
              rating: 5,
              icon: Heart
            },
            {
              id: "6",
              name: "David",
              handle: "@upsidedown_fan",
              testimonial: "Stranger Things characters are so well written. They feel real and relatable.",
              rating: 5,
              icon: Heart
            }
          ]}
          showRating={false}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Learn more about Stranger Things and the characters you love"
          faqs={[
            {
              id: "1",
              title: "Who is the main character in Stranger Things?",
              content: "While the show has an ensemble cast, Eleven is often considered the central character. However, Mike Wheeler serves as the emotional core of the friend group, making multiple characters equally important to the story."
            },
            {
              id: "2",
              title: "What are Eleven's powers?",
              content: "Eleven possesses psychokinetic and telepathic abilities. She can move objects with her mind, communicate telepathically, and sense supernatural threats. Her powers were developed in the Hawkins National Laboratory."
            },
            {
              id: "3",
              title: "How many seasons of Stranger Things are there?",
              content: "Stranger Things has 4 complete seasons available on Netflix, with a final season confirmed in development. The series follows the ongoing battle between Hawkins and supernatural threats."
            },
            {
              id: "4",
              title: "Which character has the best character development?",
              content: "Nancy Wheeler and Eleven both undergo significant character development. Nancy transforms from a typical teenager into a brave fighter, while Eleven evolves from a troubled lab subject to a confident member of the group."
            },
            {
              id: "5",
              title: "Are the characters based on real people?",
              content: "The characters of Stranger Things are fictional creations by the Duffer Brothers. However, they are inspired by 1980s pop culture and archetypes from classic films and TV shows of that era."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to share your Stranger Things passion? Join our community of fans and stay updated on character discussions, voting results, and show news."
          animationType="entrance-slide"
          buttons={[
            { text: "Join Community", href: "contact" },
            { text: "Vote Now", href: "voting" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          description="Celebrate the characters of Stranger Things. Vote, discuss, and connect with fellow fans from around the world."
          logoText="Stranger Things Fan Hub"
          copyrightText="2024 Stranger Things Fan Community. For entertainment purposes."
          columns={[
            {
              title: "Navigation",
              items: [
                { label: "Characters", href: "characters" },
                { label: "Voting", href: "voting" },
                { label: "FAQ", href: "faq" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "About Us", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Community", href: "voting" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "terms" },
                { label: "Privacy Policy", href: "privacy" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}