"use client"
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Users, Shield, Zap, Trophy, Flame, Crown, Sparkles, Download } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Clash of Clans"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Gameplay", id: "gameplay" },
            { name: "Mechanics", id: "mechanics" },
            { name: "Community", id: "testimonials" },
            { name: "Download", id: "contact" }
          ]}
          button={{
            text: "Play Now",            href: "https://apps.apple.com/app/clash-of-clans"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Clash of Clans"
          description="Lead your clan to victory in the ultimate strategy mobile game. Build your base, train powerful troops, and raid enemy villages in real-time multiplayer battles."
          background={{ variant: "sparkles-gradient" }}
          tag="Strategy Gaming"
          tagIcon={Zap}
          buttons={[
            {
              text: "Download on App Store",              href: "https://apps.apple.com/app/clash-of-clans"
            },
            {
              text: "Get on Google Play",              href: "https://play.google.com/store/apps/details?id=com.supercell.clashofclans"
            }
          ]}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-vector/game-template-with-cave-background_1308-10312.jpg",              imageAlt: "Clash of Clans gameplay screenshot 1"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/computer-game-with-dragon-characters_1308-31408.jpg",              imageAlt: "Clash of Clans battle scene"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/collection-cubes-with-games-title_23-2148030957.jpg",              imageAlt: "Clash of Clans raid action"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/videogame-screen-design_1308-807.jpg",              imageAlt: "Clash of Clans village base"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/game-template-with-halloween-theme_1308-31311.jpg",              imageAlt: "Clash of Clans troops and units"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="Core Gameplay Features"
          description="Experience the ultimate strategy gaming with these powerful features designed to keep you engaged and entertained."
          tag="Features"
          tagIcon={Sparkles}
          features={[
            {
              icon: Users,
              title: "Clan Wars & Cooperation",              description: "Join forces with your clan members in epic clan wars, cooperative attacks, and team-based strategies for massive rewards."
            },
            {
              icon: Shield,
              title: "Build & Defend",              description: "Design your perfect base layout with advanced defense mechanisms, walls, and towers to protect against raids from enemies worldwide."
            },
            {
              icon: Zap,
              title: "Powerful Troops",              description: "Command a diverse army of legendary units including Barbarians, Archers, Dragons, and Golems with unique abilities and synergies."
            },
            {
              icon: Trophy,
              title: "Competitive Leagues",              description: "Climb the ranks in multiplayer battles, earn trophies, and compete against players globally to prove your strategic mastery."
            },
            {
              icon: Flame,
              title: "Real-Time Battles",              description: "Engage in live PvP battles with real players worldwide, watch troops clash in real-time, and execute complex battle strategies on the fly."
            },
            {
              icon: Crown,
              title: "Endless Progression",              description: "Unlock new buildings, troops, and spells as you advance through multiple leagues and experience continuously evolving gameplay."
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="gameplay" data-section="gameplay">
        <MediaSplitTabsAbout
          title="How to Play"
          description="Master the art of strategy and domination"
          tabs={[
            {
              id: "build",              label: "Build Your Base",              description: "Create a powerful village fortress with defensive towers, walls, and traps. Arrange your buildings strategically to maximize defense against incoming raids. Upgrade structures to unlock new defensive capabilities and increase your base's strength."
            },
            {
              id: "train",              label: "Train Troops",              description: "Recruit and train various unit types from Barbarians to Dragons. Each troop has unique strengths and weaknesses. Combine them strategically to create powerful army compositions that counter your opponents' defenses."
            },
            {
              id: "raid",              label: "Attack & Raid",              description: "Deploy your troops into real-time battles against enemy bases. Plan your attack carefully, using spells and special abilities to overcome defenses. Claim resources and trophies from successful raids to strengthen your village."
            },
            {
              id: "clan",              label: "Join a Clan",              description: "Become part of a community with up to 50 members. Participate in clan wars, share troops in friendly challenges, and climb the global rankings together. Unlock clan rewards and exclusive content through coordinated teamwork."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg"
          imageAlt="Clash of Clans gameplay raid strategy"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="mechanics" data-section="mechanics">
        <MetricCardSeven
          title="Game Impact & Statistics"
          description="Clash of Clans has become a global phenomenon with millions of dedicated players"
          metrics={[
            {
              id: "1",              value: "100M+",              title: "Monthly Active Players",              items: [
                "Players from 200+ countries",                "Cross-platform gaming",                "24/7 matchmaking system"
              ]
            },
            {
              id: "2",              value: "1T+",              title: "Total Battles Played",              items: [
                "Real-time multiplayer combat",                "Strategic depth every battle",                "Continuous engagement"
              ]
            },
            {
              id: "3",              value: "13+",              title: "Years of Updates",              items: [
                "Regular new content",                "Balance improvements",                "Community-driven features"
              ]
            },
            {
              id: "4",              value: "4.8★",              title: "Average App Rating",              items: [
                "Highly rated on all platforms",                "Millions of positive reviews",                "Award-winning gameplay"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Clash of Clans has been my favorite mobile game for years. The strategic depth, constant updates, and amazing community make it the perfect blend of entertainment and challenge. Whether you're a casual player or competitive gamer, there's something for everyone!"
          rating={5}
          author="Alex Chen, Competitive Gamer"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg",              alt: "Player 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/scene-professional-esports-gamer-profile-colored-with-red-blue-light-generative-ai_191095-1967.jpg",              alt: "Player 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/pro-gamer-broadcasting-gameplay-front-internet-audience_482257-77071.jpg",              alt: "Player 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/futuristic-robot-listening-music-headphones_23-2151073024.jpg",              alt: "Player 4"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Clash?"
          ctaDescription="Download Clash of Clans now and join millions of players in the ultimate strategy gaming experience. Available on iOS and Android."
          ctaButton={{
            text: "Download Now",            href: "https://apps.apple.com/app/clash-of-clans"
          }}
          ctaIcon={Download}
          faqs={[
            {
              id: "1",              title: "Is Clash of Clans free to play?",              content: "Yes! Clash of Clans is completely free to download and play. While optional in-app purchases are available for players who want to progress faster, you can enjoy the full game experience without spending any money."
            },
            {
              id: "2",              title: "Can I play on multiple devices?",              content: "Absolutely! With Game Center (iOS) or Google Play Games (Android), your progress syncs across all your devices. Play on your phone, tablet, or any other device seamlessly."
            },
            {
              id: "3",              title: "What's the minimum level to join a clan?",              content: "You can join a clan once you've reached Town Hall level 1. We recommend joining a clan early to benefit from shared troops, clan war participation, and community support from experienced players."
            },
            {
              id: "4",              title: "How often does the game receive updates?",              content: "Supercell releases major updates regularly with new content, balance changes, and features. Our community feedback directly influences development, ensuring the game stays fresh and engaging for all players."
            },
            {
              id: "5",              title: "Is there a strategy guide for beginners?",              content: "Yes! Our in-game tutorial guides you through the basics, and our official website has comprehensive guides, videos, and tips. Join a beginner-friendly clan to learn from experienced players and accelerate your progress."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Clash of Clans"
          columns={[
            {
              title: "Game",              items: [
                { label: "Features", href: "#features" },
                { label: "Gameplay", href: "#gameplay" },
                { label: "Updates", href: "#mechanics" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Clans", href: "https://clashroyale.supercell.com" },
                { label: "Forums", href: "https://forum.supercell.com" },
                { label: "Events", href: "https://clashroyale.supercell.com" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "https://supercell.helpshift.com" },
                { label: "Report Issue", href: "https://supercell.helpshift.com" },
                { label: "Contact Us", href: "https://supercell.com/en/contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Supercell", href: "https://supercell.com" },
                { label: "Careers", href: "https://supercell.com/en/careers" },
                { label: "Blog", href: "https://supercell.com/en/blog" }
              ]
            }
          ]}
          copyrightText="© 2024 Supercell Oy. Clash of Clans is a trademark of Supercell Oy."
        />
      </div>
    </ThemeProvider>
  );
}