"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import SplitAbout from '@/components/sections/about/SplitAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Gamepad2, ShieldCheck, Zap, Download } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="large"
        background="floatingGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              { name: "Home", id: "hero" },
              { name: "About", id: "about" },
              { name: "Games", id: "games" },
              { name: "FAQ", id: "faq" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="GameVault"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitDualMedia
            title="Immersive Gaming for Everyone"
            description="Discover and download the world's most popular games. From adrenaline-fueled open worlds to precise flight simulations, your next adventure awaits."
            tag="Premium Access"
            background={{ variant: "sparkles-gradient" }}
            rating={5}
            ratingText="Rated by 1M+ gamers"
            mediaItems={[
              { imageSrc: "https://img.b2bpic.net/free-photo/retro-futuristic-space-travel_23-2151837569.jpg?_wi=1" },
              { imageSrc: "https://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828208.jpg?_wi=1" }
            ]}
            buttons={[{ text: "Explore Catalog", href: "#games" }]}
          />
        </div>

        <div id="about" data-section="about">
          <SplitAbout
            title="Redefining Gaming Accessibility"
            description="GameVault is the ultimate hub for premium titles. We provide high-fidelity gaming experiences with zero barriers to entry."
            tag="Our Mission"
            bulletPoints={[
              { title: "High Fidelity", description: "Experience games in stunning detail.", icon: Gamepad2 },
              { title: "Secure Downloads", description: "Safe, fast, and reliable delivery.", icon: ShieldCheck }
            ]}
            imageSrc="https://img.b2bpic.net/free-photo/man-coding-data-center-testing-failover-scenarios-using-notebook_482257-119863.jpg"
            textboxLayout="split"
            useInvertedBackground={false}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureBorderGlow
            title="Platform Features"
            description="Cutting-edge technology designed to deliver the best gaming experience available."
            animationType="slide-up"
            useInvertedBackground={true}
            features={[
              { title: "Performance", description: "Optimized download speeds for heavy titles.", icon: Zap },
              { title: "Security", description: "Rigorous file verification and safety protocols.", icon: ShieldCheck },
              { title: "Accessibility", description: "Available anytime, anywhere for our users.", icon: Download }
            ]}
            textboxLayout="default"
          />
        </div>

        <div id="games" data-section="games">
          <ProductCardOne
            title="Trending Library"
            description="Our most popular titles available for instant download."
            gridVariant="bento-grid"
            animationType="slide-up"
            products={[
              { id: "1", name: "Grand Theft World", price: "Free", imageSrc: "https://img.b2bpic.net/free-photo/retro-futuristic-space-travel_23-2151837569.jpg?_wi=2" },
              { id: "2", name: "Block Build Pro", price: "Free", imageSrc: "https://img.b2bpic.net/free-photo/galaxy-planets-digital-art_23-2151727661.jpg" },
              { id: "3", name: "Sky Flight Simulator", price: "Free", imageSrc: "https://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828208.jpg?_wi=2" }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqDouble
            title="Questions?"
            description="Everything you need to know about GameVault."
            faqs={[
              { id: "f1", title: "Is it really free?", content: "Yes, access is completely free." },
              { id: "f2", title: "Is it safe?", content: "Yes, our library is audited daily." }
            ]}
            faqsAnimation="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            tag="Support"
            title="We are here for you"
            description="Reach out if you have any questions or need technical support."
            background={{ variant: "sparkles-gradient" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoText="GameVault"
            leftLink={{ text: "Privacy", href: "#" }}
            rightLink={{ text: "Terms", href: "#" }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
