"use client"

import { Activity, Calendar, Facebook, Instagram, Sparkles, Star, Target, Trophy, Twitter } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "About", id: "about-section" },
            { name: "Feature", id: "features-section" },
            { name: "Metric", id: "metric-section" },
            { name: "Testimonial", id: "testimonials-section" },
            { name: "Contact", id: "contact-section" },
            { name: "Footer", id: "footer-section" }
          ]}
          brandName="Professional Tennis Player"
          bottomLeftText="Global Community"
          bottomRightText="hello@example.com"
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroSplitKpi
          title="Champion's Journey: From Court to Glory"
          description=""
          background={{ variant: "radial-gradient" }}
          kpis={[
            { value: "12", label: "Grand Slam Titles" },
            { value: "89%", label: "Win Rate" },
            { value: "5", label: "Years Top 10" }
          ]}
          enableKpiAnimation={true}
          tag="Professional Tennis Champion"
          tagIcon={Trophy}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Career Highlights", href: "#about-section" },
            { text: "Upcoming Tournaments", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/tennis-player-man-focused-play_1157-49796.jpg", alt: "Training partner" },
            { src: "https://img.b2bpic.net/free-photo/truly-madly-deeply-champion-is-him_329181-14472.jpg", alt: "Coach" }
          ]}
          avatarText="Trained under renowned coaches and supported by elite team"
          imageSrc="https://img.b2bpic.net/free-photo/tennis-ball-hard-court-corner-line_1150-6396.jpg"
          imageAlt="Professional tennis player in action on court"
          mediaAnimation="slide-up"
          imagePosition="right"
          marqueeItems={[
            { type: "text-icon", text: "World No. 3 Ranking", icon: Star },
            { type: "text", text: "2023 ATP Tour Winner" },
            { type: "image", src: "https://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842744.jpg", alt: "Tennis Association Logo" }
          ]}
          showMarqueeCard={true}
          marqueeSpeed={40}
        />
      </div>

      <div id="about-section" data-section="about-section">
        <TextAbout
          tag="ABOUT THE PLAYER"
          title="From Training Courts to Grand Slam Glory"
          tagAnimation="slide-up"
          buttons={[
            { text: "View Career Stats", href: "#metric-section" },
            { text: "Upcoming Tournaments", href: "#contact-section" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardSeven
          title="Training & Performance Excellence"
          description="Discover the methodologies and routines that define my professional tennis journey, from precision drills to mental conditioning."
          tag="Training Insights"
          tagIcon={Trophy}
          textboxLayout="split-description"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: 1,
              title: "Precision Serve Technique",              description: "",              imageSrc: "https://img.b2bpic.net/free-photo/full-length-portrait-fit-sportsman-stretching-hands_171337-9454.jpg",              imageAlt: "Tennis player executing a precise serve"
            },
            {
              id: 2,
              title: "Mental Resilience Training",              description: "Develop unshakeable focus and composure under pressure with specialized psychological techniques.",              imageSrc: "https://img.b2bpic.net/free-photo/young-perfect-fitting-mixed-race-woman-her-abs-routine-sunny-loft-side-view_633478-2128.jpg",              imageAlt: "Tennis player meditating during training"
            },
            {
              id: 3,
              title: "Physical Conditioning Program",              description: "Optimize strength, agility, and endurance with tailored fitness regimens designed for peak performance.",              imageSrc: "https://img.b2bpic.net/free-photo/muscular-build-man-resting-after-cross-training-with-barbell-health-club_637285-2493.jpg",              imageAlt: "Tennis player performing agility drills"
            }
          ]}
        />
      </div>

      <div id="metric-section" data-section="metric-section">
        <MetricCardOne
          title="Career Highlights & Performance Metrics"
          description="Discover key achievements and statistics that define my professional tennis journey."
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",              value: "12",              title: "Grand Slam Titles",              description: "Championships won across all major tournaments",              icon: Trophy
            },
            {
              id: "2",              value: "89%",              title: "Win Rate",              description: "Success rate in professional matches",              icon: Target
            },
            {
              id: "3",              value: "1500+",              title: "Hours Trained",              description: "Dedication to excellence on court",              icon: Activity
            },
            {
              id: "4",              value: "24",              title: "Years Pro",              description: "Decade of professional competition",              icon: Calendar
            }
          ]}
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardFifteen
          testimonial="Playing at the highest level requires not just skill, but also mental fortitude. This player's dedication and resilience have consistently impressed both fans and peers alike."
          rating={5}
          author="Tennis Enthusiast Community"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/tennis-players-finidhes-game-black-man-female-friend-giving-handshake-after-game-near-net_1157-51019.jpg", alt: "Fan testimonial from tennis community" },
            { src: "https://img.b2bpic.net/free-photo/big-congratulations-best-ones_329181-14433.jpg", alt: "Professional tennis coach" },
            { src: "https://img.b2bpic.net/free-photo/slim-young-women-sportswear-sitting-stadium-seats_169016-45109.jpg", alt: "Sports journalist" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>


      <div id="contact-section" data-section="contact-section">
        <ContactSplit
          tag="Get In Touch"
          title="Stay Connected With My Journey"
          description="Subscribe to receive exclusive updates on my upcoming tournaments, training insights, and behind-the-scenes content straight to your inbox."
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/tennis-girl-professional-tennis-court_654080-1129.jpg"
          imageAlt="Professional tennis player in action during a match"
          mediaAnimation="blur-reveal"
          mediaPosition="left"
          inputPlaceholder="Enter your professional email"
          buttonText="Join My Newsletter"
          termsText="By subscribing, you agree to receive updates and accept our Privacy Policy."
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterCard
          logoText="Tennis Pro"
          copyrightText="© 2025 | Professional Tennis Player"
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/tennispro", ariaLabel: "Follow on Twitter" },
            { icon: Instagram, href: "https://instagram.com/tennispro", ariaLabel: "Follow on Instagram" },
            { icon: Facebook, href: "https://facebook.com/tennispro", ariaLabel: "Follow on Facebook" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}