"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Stranger Things"
          button={{
            text: "Watch Now",
            href: "https://www.netflix.com"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Stranger Things"
          description="When a young boy disappears in 1980s Indiana, his friends discover secret government experiments and a strange new world."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mfi5dl"
          imageAlt="Stranger Things Upside Down"
          frameStyle="card"
          logoLineHeight={1.1}
          ariaLabel="Stranger Things hero section"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="A thrilling tale of mystery, friendship, and the supernatural. Set in the 1980s, Stranger Things blends sci-fi horror with coming-of-age drama, captivating millions worldwide."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="characters" data-section="characters">
        <TeamCardTwo
          members={[
            {
              id: "1",
              name: "Eleven",
              role: "Psychokinetic",
              description: "A girl with extraordinary psychokinetic abilities escaped from a secret government lab.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g0q9i8",
              imageAlt: "Eleven character"
            },
            {
              id: "2",
              name: "Mike Wheeler",
              role: "Leader",
              description: "The determined leader of the friend group who discovers the mystery and protects Eleven.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6tddia",
              imageAlt: "Mike Wheeler character"
            },
            {
              id: "3",
              name: "Dustin Henderson",
              role: "Scientist",
              description: "The brilliant and loyal member of the group with a knack for technology and solving puzzles.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gwpk0h",
              imageAlt: "Dustin Henderson character"
            },
            {
              id: "4",
              name: "Lucas Sinclair",
              role: "Protector",
              description: "The grounded voice of reason and protector of the group, always ready for action.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9mncwz",
              imageAlt: "Lucas Sinclair character"
            }
          ]}
          title="Meet the Cast"
          description="The extraordinary characters that drive the mystery"
          tag="Characters"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="seasons" data-section="seasons">
        <FeatureCardSeven
          title="Seasons"
          description="Experience the unfolding mystery across multiple seasons"
          tag="Journey"
          features={[
            {
              id: 1,
              title: "Season One",
              description: "When 12-year-old Will Byers goes missing, his friends uncover a dark secret involving a hidden lab and the Upside Down.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0vw12z",
              imageAlt: "Season One"
            },
            {
              id: 2,
              title: "Season Two",
              description: "As the group adjusts to new friendships and Halloween tricks, the threat from the Upside Down returns stronger than ever.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s33k8z",
              imageAlt: "Season Two"
            },
            {
              id: 3,
              title: "Season Three",
              description: "In the summer of 1985, the group faces a new evil force while navigating the complexities of growing up at Starcourt Mall.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=50mn7g",
              imageAlt: "Season Three"
            },
            {
              id: 4,
              title: "Season Four",
              description: "The final chapter reunites the group to confront the most powerful threat yet from the Upside Down dimension.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bf645r",
              imageAlt: "Season Four"
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="gallery" data-section="gallery">
        <MetricCardSix
          title="Iconic Moments"
          description="Unforgettable scenes from the series"
          tag="Gallery"
          metrics={[
            {
              id: "1",
              value: "4",
              tag: "Seasons",
              title: "Epic story arcs spanning years of mystery"
            },
            {
              id: "2",
              value: "42",
              tag: "Episodes",
              title: "Gripping narrative across multiple seasons"
            },
            {
              id: "3",
              value: "150M+",
              tag: "Viewers",
              title: "Global audience captivated by the mystery"
            },
            {
              id: "4",
              value: "2022",
              tag: "Finale",
              title: "Year the final season concluded"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about Stranger Things"
          textPosition="left"
          faqs={[
            {
              id: "1",
              title: "What is Stranger Things about?",
              content: "Stranger Things is a science fiction horror drama series set in the 1980s that follows a group of friends who encounter a mysterious girl with psychokinetic abilities and discover a dark secret involving a government laboratory and an alternate dimension called the Upside Down."
            },
            {
              id: "2",
              title: "How many seasons are there?",
              content: "There are 4 complete seasons of Stranger Things. The final season concluded in 2022 with a feature-length finale episode that wrapped up the main storyline."
            },
            {
              id: "3",
              title: "Where can I watch Stranger Things?",
              content: "Stranger Things is exclusively available on Netflix. You can watch all seasons and episodes with a Netflix subscription at www.netflix.com"
            },
            {
              id: "4",
              title: "What is the Upside Down?",
              content: "The Upside Down is a dark, parallel dimension that mirrors our world but is decaying and inhabited by dangerous creatures. It serves as the central mystery and threat throughout the series."
            },
            {
              id: "5",
              title: "Is there a Stranger Things movie?",
              content: "While there is no theatrical movie, the final season included a feature-length two-part finale. Netflix has discussed potential spinoffs and movie projects set in the Stranger Things universe."
            },
            {
              id: "6",
              title: "When was Stranger Things released?",
              content: "The first season of Stranger Things premiered on Netflix on July 15, 2016. It quickly became a cultural phenomenon and Netflix's most-watched series at the time."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated"
          description="Subscribe to get the latest news, updates, and announcements from the Stranger Things universe."
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
          useInvertedBackground="noInvert"
        />
      </div>

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