"use client"

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Trophy, BarChart3, MessageSquare, Users, Star, Award, Heart, Twitch, Youtube, Twitter, MessageCircle, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="noiseGradient"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="outline"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Smeagol"
          navItems={[
            { name: "About", id: "about" },
            { name: "Highlights", id: "highlights" },
            { name: "Community", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Vitaliy The Smeagol Gollum"
          description="Elite CS2 Professional Player. Clutch Moments. Championship Mindset. Pure Precision."
          tag="CS2 Esports"
          tagIcon={Zap}
          mediaItems={[
            {
              imageSrc: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=1200&h=800&fit=crop",
              imageAlt: "CS2 competitive gameplay moment"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1538481143235-2d51fbf51ee1?w=1200&h=800&fit=crop",
              imageAlt: "Esports tournament action"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=800&fit=crop",
              imageAlt: "Professional gaming setup"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1551431009-381d36ac3a99?w=1200&h=800&fit=crop",
              imageAlt: "Arena competitive environment"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1555092918-341aa2b93d10?w=1200&h=800&fit=crop",
              imageAlt: "Professional esports equipment"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1552820728-8ac41f1ce891?w=1200&h=800&fit=crop",
              imageAlt: "High-level gameplay skills"
            }
          ]}
          buttons={[
            { text: "Follow on Twitch", href: "https://twitch.tv" },
            { text: "Contact for Sponsorship", href: "contact" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <TextAbout
          title="From passionate gamer to professional competitor. Vitaliy Smeagol Gollum represents the pinnacle of CS2 skill, dedication, and competitive spirit in modern esports."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Full Bio", href: "https://example.com/bio" }
          ]}
        />
      </div>
      
      <div id="highlights" data-section="highlights">
        <FeatureCardTwelve
          title="Career Achievements"
          description="Competitive milestones and recognition in the CS2 esports scene"
          tag="Accomplishments"
          tagIcon={Trophy}
          features={[
            {
              id: "tournaments",
              label: "12+",
              title: "Major Tournament Victories",
              items: [
                "Championship wins in tier-1 competitions",
                "MVP awards across multiple events",
                "International recognition and respect",
                "Consistent podium finishes"
              ]
            },
            {
              id: "stats",
              label: "1.28",
              title: "Average Kill-Death Ratio",
              items: [
                "Top 5% player performance globally",
                "Consistent clutch moments",
                "High-pressure tournament success",
                "Proven reliability in crucial rounds"
              ]
            },
            {
              id: "community",
              label: "250K+",
              title: "Followers Across Platforms",
              items: [
                "Strong Twitch streaming presence",
                "Active YouTube community",
                "Engaged Discord server",
                "Growing social media influence"
              ]
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Competitive Impact"
          description="Real-time statistics showcasing performance excellence"
          tag="Stats"
          tagIcon={BarChart3}
          metrics={[
            {
              id: "headshots",
              value: "58%",
              title: "Average Headshot Percentage",
              items: [
                "Precision and accuracy mastery",
                "Technical skill refinement",
                "Tournament-level consistency"
              ]
            },
            {
              id: "rounds",
              value: "2800+",
              title: "Professional Competitive Rounds",
              items: [
                "Years of high-level competition",
                "Extensive tournament experience",
                "Proven battle-tested player"
              ]
            },
            {
              id: "titles",
              value: "15",
              title: "Tournament Titles Won",
              items: [
                "Major championship victories",
                "International recognition",
                "Career peak achievements"
              ]
            },
            {
              id: "rating",
              value: "1.05",
              title: "HLTV 2.0 Rating Average",
              items: [
                "Positive round impact metric",
                "Valuable team contribution",
                "Consistent high performance"
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Community & Team Voices"
          description="What teammates, coaches, and the community say about Vitaliy"
          tag="Testimonials"
          tagIcon={MessageSquare}
          testimonials={[
            {
              id: "1",
              name: "Alex Petrov",
              role: "Team Coach",
              testimonial: "Smeagol is the most dedicated player I've worked with. His game sense, mechanical skill, and willingness to improve set him apart as a true professional.",
              icon: Users,
              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop"
            },
            {
              id: "2",
              name: "Dmitri Sokolov",
              role: "Teammate",
              testimonial: "Playing alongside Vitaliy elevates everyone's game. His presence creates opportunities and his clutch plays have won us countless rounds we had no business winning.",
              icon: Star,
              imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=500&fit=crop"
            },
            {
              id: "3",
              name: "Marina Volkova",
              role: "Esports Organization Director",
              testimonial: "Vitaliy represents the brand perfectly. Professional, skilled, and incredibly popular. A player any organization would be honored to represent.",
              icon: Award,
              imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop"
            },
            {
              id: "4",
              name: "Igor Kozlov",
              role: "Gaming Community Manager",
              testimonial: "The CS2 community respects Smeagol. His streaming content is educational, his gameplay is entertaining, and his character is impeccable.",
              icon: Heart,
              imageSrc: "https://images.unsplash.com/photo-1496345875519-c21cdc173335?w=500&h=500&fit=crop"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactInline
          text="Join the community and stay updated on tournaments, streams, and exclusive content"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          useInvertedBackground="noInvert"
          animationType="entrance-slide"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Smeagol"
          description="Professional CS2 esports player dedicated to competitive excellence and community engagement. Follow for tournaments, streams, and behind-the-scenes content."
          copyrightText="© 2025 Vitaliy Smeagol Gollum. All rights reserved."
          columns={[
            {
              title: "Community",
              items: [
                { label: "Twitch", href: "https://twitch.tv" },
                { label: "YouTube", href: "https://youtube.com" },
                { label: "Discord", href: "https://discord.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Highlights", href: "highlights" },
                { label: "Schedule", href: "https://example.com/schedule" },
                { label: "Merch Store", href: "https://example.com/merch" }
              ]
            },
            {
              title: "Business",
              items: [
                { label: "Sponsorships", href: "contact" },
                { label: "Collaborations", href: "contact" },
                { label: "Media Kit", href: "https://example.com/mediakit" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Twitch, href: "https://twitch.tv", ariaLabel: "Twitch" },
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: MessageCircle, href: "https://discord.com", ariaLabel: "Discord" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}