"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="animatedGrid"
      cardStyle="solid-accent"
      primaryButtonStyle="outline"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Stranger Things"
          button={{
            text: "Vote Now",
            href: "#voting"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarouselSplit
          title="Welcome to the Upside Down"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005475797-aywnq0jb.jpg",
              imageAlt: "Stranger Things main characters"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932172043-f8olo4mi.jpg",
              imageAlt: "Stranger Things dramatic scene"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005476759-jaoos3ls.jpg",
              imageAlt: "Stranger Things supernatural moment"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005477557-efemyp41.jpg",
              imageAlt: "Stranger Things retro aesthetic"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932162169-usvyg3c1.jpg",
              imageAlt: "Stranger Things dark scene"
            }
          ]}
          buttons={[
            {
              text: "Vote for Your Favorite",
              href: "#voting"
            },
            {
              text: "Learn More",
              href: "#about"
            }
          ]}
        />
      </div>

      <div id="characters" data-section="characters">
        <ProductCardSeven
          title="Meet the Characters"
          description="Explore the heroes, villains, and everyone in between from Stranger Things. Get to know the cast that brings Hawkins to life."
          products={[
            {
              id: "1",
              name: "Mike Wheeler",
              price: "The Leader",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005478677-nbqjpxeg.jpg",
              imageAlt: "Mike Wheeler character"
            },
            {
              id: "2",
              name: "Eleven",
              price: "The Psychic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005480409-5k24l87t.jpg",
              imageAlt: "Eleven character"
            },
            {
              id: "3",
              name: "Dustin Henderson",
              price: "The Genius",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005481253-m6f74fwh.jpg",
              imageAlt: "Dustin Henderson character"
            },
            {
              id: "4",
              name: "Lucas Sinclair",
              price: "The Brave",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767005479605-1xephm48.jpg",
              imageAlt: "Lucas Sinclair character"
            },
            {
              id: "5",
              name: "Nancy Wheeler",
              price: "The Determined",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400738137-qyq96j1r.jpg",
              imageAlt: "Nancy Wheeler character"
            },
            {
              id: "6",
              name: "Jonathan Byers",
              price: "The Artistic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg",
              imageAlt: "Jonathan Byers character"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",
              content: "A tribute to the phenomenon that captivated millions and brought back 80s nostalgia."
            }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Vote Now",
              href: "#voting"
            }
          ]}
        />
      </div>

      <div id="voting" data-section="voting">
        <ContactText
          text="Who is your favorite Stranger Things character? Vote now and see who the community loves most!"
          animationType="entrance-slide"
          buttons={[
            {
              text: "Cast Your Vote",
              href: "#vote-form"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about Stranger Things and voting for your favorite character."
          faqs={[
            {
              id: "1",
              title: "What is Stranger Things?",
              content: "Stranger Things is an American science fiction horror drama series created by the Duffer Brothers. The show is set in the 1980s and follows a group of friends as they encounter supernatural forces and a secret government laboratory."
            },
            {
              id: "2",
              title: "How does the voting work?",
              content: "You can vote for your favorite character using the voting form on this site. Your vote will be recorded and contribute to the overall rankings. You can change your vote anytime by selecting a different character."
            },
            {
              id: "3",
              title: "Who are the main characters?",
              content: "The main cast includes Mike Wheeler, Eleven, Dustin Henderson, Lucas Sinclair, Nancy Wheeler, and Jonathan Byers among many others. Each season introduces new characters and expands the story."
            },
            {
              id: "4",
              title: "When did Stranger Things air?",
              content: "Stranger Things premiered on Netflix on July 15, 2016. The show has released multiple seasons, with the final season concluded in 2024. The series became one of Netflix's most popular shows."
            },
            {
              id: "5",
              title: "Can I submit my own character descriptions?",
              content: "This site currently features curated character information and voting. For additional community content and discussions, you can join the fan community on social media platforms dedicated to Stranger Things."
            },
            {
              id: "6",
              title: "Is this an official site?",
              content: "This is a fan-created website celebrating Stranger Things. It is not affiliated with Netflix or the official Stranger Things production. This is a community project for fans to engage and vote on their favorite characters."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

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