"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import SplitAbout from '@/components/sections/about/SplitAbout';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Swords, Shield, Target, Zap, Crown, Fire, Wand2, Building2, TrendingUp, Trophy, Users, Gift, Flame, Wind, CloudRain, Heart, Clock, Download, Star, BookOpen, Brain, Globe, RefreshCw, Gamepad2 } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Clash of Clans"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Community", id: "testimonials" },
            { name: "Download", id: "hero" },
            { name: "FAQ", id: "faq" },
            { name: "Guide", id: "about" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="CLASH OF CLANS"
          description="Join millions of players worldwide in the ultimate strategy game. Build your village, train troops, and dominate the battlefield."
          buttons={[
            { text: "Download Now", href: "https://clasofclans.com/download" },
            { text: "Learn More", href: "about" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg",              imageAlt: "Epic Clash of Clans Gameplay"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282421.jpg",              imageAlt: "Troops Attack Enemy Base"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282422.jpg",              imageAlt: "Clan War Battle"
            }
          ]
          autoplayDelay={4000}
          showDimOverlay={true}
          ariaLabel="Clash of Clans Hero Section"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Master the Game"
          description="Discover what makes Clash of Clans the most addictive strategy game on mobile"
          tag="Core Features"
          tagIcon={Zap}
          features={[
            {
              title: "Train Powerful Troops",              description: "Recruit and upgrade diverse units with unique abilities",              bentoComponent: "orbiting-icons",              centerIcon: Swords,
              items: [
                { icon: Shield, ring: 1 },
                { icon: Target, ring: 1 },
                { icon: Zap, ring: 2 },
                { icon: Crown, ring: 2 },
                { icon: Fire, ring: 3 },
                { icon: Wand2, ring: 3 }
              ]
            },
            {
              title: "Build Your Base",              description: "Design the ultimate defensive fortress to protect your loot",              bentoComponent: "3d-stack-cards",              items: [
                {
                  icon: Building2,
                  title: "Defense",                  subtitle: "Towers & Walls",                  detail: "Strategically place defenses"
                },
                {
                  icon: TrendingUp,
                  title: "Upgrade",                  subtitle: "Level Up Buildings",                  detail: "Increase power and capabilities"
                },
                {
                  icon: Trophy,
                  title: "Protect",                  subtitle: "Claim Resources",                  detail: "Defend against enemy raids"
                }
              ]
            },
            {
              title: "Join a Clan",              description: "Cooperate with players worldwide in epic clan wars",              bentoComponent: "icon-info-cards",              items: [
                { icon: Users, label: "Clan Members", value: "Up to 50" },
                { icon: Swords, label: "War Battles", value: "Epic Clashes" },
                { icon: Gift, label: "Clan Perks", value: "Exclusive Boosts" }
              ]
            },
            {
              title: "Master Spells",              description: "Cast powerful spells to turn the tide of battle",              bentoComponent: "marquee",              centerIcon: Wand2,
              variant: "icon",              icons: [Flame, Wind, Zap, CloudRain, Heart]
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Community Impact"
          description="Join millions of players in the world's most popular strategy mobile game"
          tag="Player Stats"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "100M",              title: "Players",              description: "Active players worldwide",              icon: Users
            },
            {
              id: "2",              value: "10+",              title: "Years",              description: "Gaming excellence since launch",              icon: Clock
            },
            {
              id: "3",              value: "500M+",              title: "Downloads",              description: "Global mobile download count",              icon: Download
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Players Say"
          description="Join thousands of satisfied players sharing their Clash of Clans experience"
          tag="Player Reviews"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Alex Rodriguez",              role: "Casual Gamer",              company: "Top 100 Player",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/pro-gamer-broadcasting-gameplay-front-internet-audience_482257-77071.jpg",              imageAlt: "Alex Rodriguez"
            },
            {
              id: "2",              name: "Sarah Chen",              role: "Clan Leader",              company: "Dragon Slayers",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-shot-pro-gamer-broadcasting-game-internet-talking-with-audience_482257-99050.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "Marcus Thompson",              role: "Pro Streamer",              company: "Gaming Community",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/pro-gamer-doing-livestream-presenting-fans-his-favorite-esports-strategies_482257-104110.jpg",              imageAlt: "Marcus Thompson"
            },
            {
              id: "4",              name: "Emma Wilson",              role: "Tournament Winner",              company: "eSports Team",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-playing-entertaining-videogame-pc-computer-desk-late-night-close-up_482257-116206.jpg",              imageAlt: "Emma Wilson"
            }
          ]}
          kpiItems={[
            { value: "4.8/5", label: "Average Rating" },
            { value: "98%", label: "Player Retention" },
            { value: "24/7", label: "Support Available" }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Why Clash of Clans?"
          description="Experience the ultimate strategic gameplay that has captivated over 100 million players"
          tag="Game Guide"
          tagIcon={BookOpen}
          bulletPoints={[
            {
              title: "Strategic Depth",              description: "Complex gameplay mechanics reward careful planning and tactical decision-making in every battle",              icon: Brain
            },
            {
              title: "Global Community",              description: "Connect with players worldwide, join clans, and compete in epic clan wars across continents",              icon: Globe
            },
            {
              title: "Constant Updates",              description: "New troops, spells, buildings, and game modes added regularly to keep gameplay fresh",              icon: RefreshCw
            },
            {
              title: "Free to Play",              description: "No pay-to-win mechanics. Progress at your pace without mandatory spending",              icon: Gift
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/space-race-game_1308-32834.jpg"
          imageAlt="Clash of Clans Gameplay Screenshot"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="game-modes" data-section="game-modes">
        <BlogCardTwo
          title="Game Modes Awaiting"
          description="Explore diverse game modes tailored to every playstyle and skill level"
          tag="Gameplay"
          tagIcon={Gamepad2}
          blogs={[
            {
              id: "1",              category: ["Strategy", "Multiplayer"],
              title: "Multiplayer Raids",              excerpt: "Attack player villages to earn gold, elixir, and trophies in thrilling real-time battles",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg",              imageAlt: "Multiplayer Raid Gameplay",              authorName: "Clash Team",              date: "Always Available"
            },
            {
              id: "2",              category: ["Cooperative", "War"],
              title: "Clan Wars",              excerpt: "Lead your clan to victory in coordinated attacks against enemy clans for massive rewards",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282422.jpg",              imageAlt: "Clan War Battle",              authorName: "Clash Team",              date: "Weekly Events"
            },
            {
              id: "3",              category: ["Tournament", "Competitive"],
              title: "Clash Royale Arena",              excerpt: "Fast-paced 1v1 battles in the legendary Clash universe with unique card mechanics",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282421.jpg",              imageAlt: "Arena Battle",              authorName: "Clash Team",              date: "Daily Challenges"
            },
            {
              id: "4",              category: ["PvE", "Adventure"],
              title: "Campaign Missions",              excerpt: "Progress through story-driven single-player campaigns and unlock exclusive rewards",              imageSrc: "https://img.b2bpic.net/free-photo/view-half-rhino-with-futuristic-robotic-parts_23-2151742126.jpg",              imageAlt: "Campaign Missions",              authorName: "Clash Team",              date: "New Chapters"
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Get answers to common questions about gameplay, accounts, and more"
          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-game purchases are available, they are not required to enjoy and progress in the game. You can compete successfully without spending any money."
            },
            {
              id: "2",              title: "How do I join a clan?",              content: "Once you've progressed through the tutorial, you can open the Clan panel and browse available clans to join. Alternatively, clan leaders can invite you directly. Each clan can have up to 50 members, and joining one gives access to clan perks and war participation."
            },
            {
              id: "3",              title: "What are the minimum device requirements?",              content: "Clash of Clans requires iOS 11.0 or later for Apple devices, or Android 5.0 and above for Android devices. The game requires approximately 100-150MB of storage space. A stable internet connection is needed for multiplayer features."
            },
            {
              id: "4",              title: "Can I play on multiple devices?",              content: "Yes! By connecting your game to a Supercell ID or Google Play/Game Center account, you can access your village on multiple devices. Your progress will sync automatically across all connected devices."
            },
            {
              id: "5",              title: "How often are updates released?",              content: "Supercell releases major updates roughly every 2-3 months, introducing new troops, spells, buildings, and game features. Monthly quality-of-life updates and balance changes keep the game fresh and competitive."
            },
            {
              id: "6",              title: "What is the maximum town hall level?",              content: "Currently, the maximum Town Hall level is 16, with higher levels unlocking new buildings, troops, spells, and upgrade tiers. Reaching the highest level provides access to the most powerful units and endgame content."
            }
          ]}
          textPosition="left"
          animationType="smooth"
          useInvertedBackground="noInvert"
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Clash of Clans"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Features", href: "features" },
                { label: "Community", href: "testimonials" }
              ]
            },
            {
              items: [
                { label: "Download iOS", href: "https://apps.apple.com/app/clash-of-clans" },
                { label: "Download Android", href: "https://play.google.com/store/apps/details?id=com.supercell.clashofclans" },
                { label: "Official Website", href: "https://clasofclans.com" }
              ]
            },
            {
              items: [
                { label: "Support", href: "https://support.clasofclans.com" },
                { label: "Privacy Policy", href: "https://clasofclans.com/privacy" },
                { label: "Terms of Service", href: "https://clasofclans.com/terms" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com/ClashofClans" },
                { label: "Discord", href: "https://discord.gg/clasofclans" },
                { label: "YouTube", href: "https://youtube.com/@clasofclans" }
              ]
            }
          ]}
          ariaLabel="Clash of Clans Footer"
        />
      </div>
    </ThemeProvider>
  );
}