"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, Sparkles, CheckCircle, TrendingUp, Star, HelpCircle } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Trivia Master"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Leaderboard", id: "leaderboard" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Play Now", href: "#play" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Challenge Your Mind, Compete, Win Big"
          description="Join thousands of trivia enthusiasts in the ultimate quiz game. Test your knowledge across endless categories, climb the leaderboard, and prove you're the ultimate trivia champion."
          tag="Play For Free"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Start Playing", href: "#play" },
            { text: "View Categories", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-vector/counting-game-kids_52683-51715.jpg",              imageAlt: "Trivia game interface showing quiz questions and leaderboard"
            }
          ]}
          mediaAnimation="slide-up"
          ariaLabel="Hero section for trivia game platform"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Game Features That Keep You Hooked"
          description="Experience the most engaging trivia platform with features designed to maximize fun and competition."
          tag="Gameplay Highlights"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[{ text: "Explore All Features", href: "#" }]}
          buttonAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Real-Time Multiplayer",              description: "Compete against players worldwide in instant, high-energy trivia battles. See live scoreboards and feel the rush of real-time competition.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/task-management-application-template_23-2148676932.jpg",                imageAlt: "Real-time multiplayer trivia interface"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/task-management-application-template_23-2148676932.jpg",                imageAlt: "Live multiplayer game scoreboard"
              }
            },
            {
              id: 2,
              title: "500+ Question Categories",              description: "From history to pop culture, science to sports. Choose your specialty or challenge yourself across diverse topics to expand your knowledge.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/book-infographics-set_1284-6972.jpg",                imageAlt: "Trivia category selection menu"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/book-infographics-set_1284-6972.jpg",                imageAlt: "Browse trivia question categories"
              }
            },
            {
              id: 3,
              title: "Earn Badges & Rewards",              description: "Unlock achievements, earn points, and collect badges as you master each category. Show off your accomplishments to the community.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/golden-star-set_23-2147731295.jpg",                imageAlt: "Rewards and achievement badges system"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/golden-star-set_23-2147731295.jpg",                imageAlt: "Player achievement unlocks display"
              }
            }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          ariaLabel="Game features section"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardNine
          title="How to Get Started in 3 Simple Steps"
          description="Sign up, choose your challenge, and start playing. It's that easy to join the trivia revolution."
          tag="Quick Setup"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Create Your Account",              description: "Sign up with your email or social account in under 30 seconds. Choose your username and avatar to make your profile unique.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/internet-shopping-man-online-with-tablet-pc-credit-card-internet-shopper-buying-things-internet_1391-605.jpg",                imageAlt: "Account creation signup screen"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/internet-shopping-man-online-with-tablet-pc-credit-card-internet-shopper-buying-things-internet_1391-605.jpg",                imageAlt: "Profile setup interface"
              }
            },
            {
              id: 2,
              title: "Select Your Challenge",              description: "Pick a difficulty level and category that interests you. Start with Easy mode or jump straight to Hard for a real brain workout.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149191913.jpg",                imageAlt: "Difficulty level selection"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149191913.jpg",                imageAlt: "Game mode selection interface"
              }
            },
            {
              id: 3,
              title: "Start Playing & Compete",              description: "Answer rapid-fire questions, rack up points, and climb the leaderboard. Challenge your friends or go head-to-head with strangers.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-vector/task-management-application-template_23-2148676932.jpg",                imageAlt: "Active trivia game play"
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-vector/task-management-application-template_23-2148676932.jpg",                imageAlt: "Leaderboard competition view"
              }
            }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          ariaLabel="How to get started section"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Join Our Thriving Community"
          description="See the numbers behind our success and why millions choose Trivia Master."
          tag="By The Numbers"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          animationType="scale-rotate"
          textboxLayout="centered"
          useInvertedBackground={false}
          metrics={[
            {
              id: "players",              title: "Active Players",              subtitle: "Growing daily",              category: "Community",              value: "2.5M+"
            },
            {
              id: "questions",              title: "Questions Available",              subtitle: "Constantly updated",              category: "Content",              value: "50K+"
            },
            {
              id: "games",              title: "Games Played",              subtitle: "Every single day",              category: "Engagement",              value: "10M+"
            },
            {
              id: "countries",              title: "Countries",              subtitle: "Playing together",              category: "Global",              value: "150+"
            }
          ]}
          ariaLabel="Community metrics section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Loved by Trivia Fans Everywhere"
          description="See what players are saying about their experience on Trivia Master."
          tag="Player Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          animationType="scale-rotate"
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Quiz Enthusiast",              company: "Trivia Master Pro",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/england-fan-watching-euro-cup-finale_23-2151698279.jpg",              imageAlt: "Sarah Chen profile picture"
            },
            {
              id: "2",              name: "Marcus Thompson",              role: "Competitive Player",              company: "Leaderboard Champion",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-smiling-holding-her-chin_23-2149374984.jpg",              imageAlt: "Marcus Thompson profile picture"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Daily Player",              company: "Knowledge Seeker",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/teamwork-has-biggest-power_329181-20419.jpg",              imageAlt: "Emma Rodriguez profile picture"
            },
            {
              id: "4",              name: "James Liu",              role: "Casual Trivia Fan",              company: "Weekend Warrior",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing_23-2148506476.jpg",              imageAlt: "James Liu profile picture"
            },
            {
              id: "5",              name: "Lisa Anderson",              role: "Category Master",              company: "All-Around Champion",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-brunet-young-dark-skinned-man-sport-black-t-shirt-looks-straight_197531-23723.jpg",              imageAlt: "Lisa Anderson profile picture"
            },
            {
              id: "6",              name: "David Patel",              role: "Dedicated Player",              company: "Trivia Aficionado",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-holding-soccer-ball-smiling-confident-standing-white-wall_141793-56725.jpg",              imageAlt: "David Patel profile picture"
            }
          ]}
          ariaLabel="Player testimonials section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Got questions? We have answers. Learn everything you need to know about Trivia Master."
          tag="Help Center"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
          faqs={[
            {
              id: "1",              title: "Is Trivia Master really free to play?",              content: "Yes! Trivia Master is completely free to play. You can enjoy unlimited games, compete on leaderboards, and unlock badges without spending a dime. We offer premium features for those who want extra perks, but the core game is always free."
            },
            {
              id: "2",              title: "How often are new questions added?",              content: "We add hundreds of new trivia questions every week across all categories. Our content team works around the clock to keep the game fresh, challenging, and engaging for all players."
            },
            {
              id: "3",              title: "Can I play with my friends?",              content: "Absolutely! Trivia Master features multiple multiplayer modes. You can create private games to challenge specific friends or jump into public matches against players worldwide. Share your game code to invite friends to private rooms."
            },
            {
              id: "4",              title: "How does the leaderboard system work?",              content: "Players earn points based on correct answers and speed. Points are calculated across weekly, monthly, and all-time leaderboards. The faster you answer correctly, the more points you earn. Reach the top to win exclusive badges."
            },
            {
              id: "5",              title: "What if I report an incorrect question?",              content: "We take accuracy seriously. If you believe a question or answer is wrong, you can report it directly in-game. Our moderation team reviews all reports within 24 hours and removes incorrect content immediately."
            },
            {
              id: "6",              title: "Is there an offline mode?",              content: "Currently, Trivia Master is an online-only game to ensure fair competition and real-time multiplayer experiences. We're exploring offline mode options for future updates."
            }
          ]}
          ariaLabel="FAQ section"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Ready to become a trivia legend? Join millions of players and start your journey to the top of the leaderboard today."
          animationType="entrance-slide"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Play Now For Free", href: "#play" },
            { text: "Learn More", href: "#features" }
          ]}
          ariaLabel="Final call to action section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Trivia Master"
          columns={[
            {
              items: [
                { label: "Play Game", href: "#" },
                { label: "Browse Categories", href: "#features" },
                { label: "Leaderboard", href: "#metrics" },
                { label: "View Rules", href: "#" }
              ]
            },
            {
              items: [
                { label: "Contact Support", href: "#" },
                { label: "Report Bug", href: "#" },
                { label: "Request Feature", href: "#" },
                { label: "Feedback", href: "#" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#" },
                { label: "Our Team", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Legal", href: "#" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Discord", href: "https://discord.com" }
              ]
            }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}