"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Zap, Sparkles, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="radialGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Vitaliy Glek"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Highlights", id: "features" },
            { name: "Legacy", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Watch Now", href: "https://twitch.tv" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="The Greatest Flash Player Alive"
          description="Witness the legendary moments of Vitaliy The Glek Mulika preparing for the Major. The worst player in the world with the most perfect flash timing."
          tag="Preparing for Major"
          tagIcon={Zap}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508782701-rgpzxtr6.jpg", imageAlt: "Tournament moment" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508783414-ln52bf3j.jpg", imageAlt: "Flash gameplay" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508784027-qwzfwcyl.jpg", imageAlt: "Championship stage" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508784624-wrt2s2wl.jpg", imageAlt: "Dramatic moment" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508785324-xclruxem.jpg", imageAlt: "Focused player" }
          ]}
          buttons={[
            { text: "View Highlight Reel", href: "#features" },
            { text: "Subscribe for Updates", href: "#contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="The Legend of Flashes"
          description="From underground tournaments to the brightest stage, Vitaliy The Glek has perfected one thing and one thing only: the art of flashing his entire team. His dedication to this singular skill is unmatched. Other players may aim for headshots, but Glek aims for your retinas."
          tag="About The Flash Master"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508785324-xclruxem.jpg"
          imageAlt="Vitaliy focused"
          buttons={[{ text: "Read Full Bio", href: "#contact" }]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Iconic Flash Moments"
          description="Experience the timeline of legendary flash incidents that define a career"
          tag="Highlight Reel"
          features={[
            {
              id: 1,
              title: "The Pre-Round Flash",
              description: "Glek flashes his team during the buy phase, setting the tone for what's to come. A classic move that has cost countless rounds.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786174-10lisua2.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786785-0m6ci3fd.jpg" }
            },
            {
              id: 2,
              title: "The Clutch Darkness",
              description: "One vs five situation. Glek's solution? Flash the remaining teammate. Strategy at its finest.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786174-10lisua2.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786785-0m6ci3fd.jpg" }
            },
            {
              id: 3,
              title: "The Major Qualifier Incident",
              description: "A moment so bright, teammates needed sunglasses indoors for a week. The flashback heard around the world.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786174-10lisua2.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508786785-0m6ci3fd.jpg" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Teammate Testimonials"
          description="Hear from those who've had the privilege of being flashed by the master"
          tag="Team Reviews"
          testimonials={[
            {
              id: "1",
              name: "Alex K.",
              handle: "@alexkilled",
              testimonial: "Every round with Glek is an adventure. Mostly in darkness.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508787668-x39wdug2.jpg"
            },
            {
              id: "2",
              name: "Marcus T.",
              handle: "@marcusblind",
              testimonial: "I've never seen someone so consistently good at one thing. Blinding us, that is.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508788281-5nv8qss5.jpg"
            },
            {
              id: "3",
              name: "Sarah R.",
              handle: "@sarahcantaimbot",
              testimonial: "Playing with Glek taught me patience. And how to predict flash trajectories.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508788859-5wy6d9m5.jpg"
            },
            {
              id: "4",
              name: "DarkMode Dave",
              handle: "@davelovesdark",
              testimonial: "Glek's flashes are so bright, I play in dark mode to compensate.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508789656-lmoyoqdw.jpg"
            },
            {
              id: "5",
              name: "Echo E.",
              handle: "@echoesofflash",
              testimonial: "The echo of his flashes still rings in my ears. Literally.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508790236-99qgyazg.jpg"
            },
            {
              id: "6",
              name: "Tommy T.",
              handle: "@tommyturned",
              testimonial: "Turned into a flash enthusiast after playing with Glek. Still can't see though.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508790862-n4p6b120.jpg"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Common Questions"
          description="Everything you need to know about The Glek and his legendary flash technique"
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "How did Vitaliy master the flash?",
              content: "Years of dedication. Mostly accidental, but dedication nonetheless."
            },
            {
              id: "2",
              title: "Can teammates predict his flashes?",
              content: "No. Even Glek himself doesn't know when they're coming."
            },
            {
              id: "3",
              title: "Has he ever flashed an enemy?",
              content: "Once. By accident. They walked directly into smokes afterwards."
            },
            {
              id: "4",
              title: "What's his secret?",
              content: "Practice, timing, and a mysterious ability to make purple and white combine in the most inconvenient ways."
            },
            {
              id: "5",
              title: "Is he attending the Major?",
              content: "Yes. Bring sunglasses."
            },
            {
              id: "6",
              title: "How can I learn from Glek?",
              content: "Embrace the darkness. Accept the flash. Become one with the retinas."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Updated"
          title="Join the Flash Community"
          description="Subscribe to get the latest Glek highlights, flash tutorials, and team coordination guides."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="your.blinded.email@example.com"
          buttonText="Subscribe"
          termsText="By subscribing, you agree to receive weekly flash notifications and tactical darkness updates."
          onSubmit={(email) => console.log(email)}
        />
      </div>

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