"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, CalendarDays, Crown, Film, Globe, LineChart, Sparkles, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumSizeLargeTitles"
        background="fluid"
        cardStyle="gradient-mesh"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="SportStream"
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="SportStream"
      description="Experience the thrill of live sports like never before. High-definition streams, real-time stats, and exclusive content."
      buttons={[
        {
          text: "Start Free Trial",
          href: "#pricing",
        },
        {
          text: "View Sports",
          href: "#features",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/empty-soccer-stadium-with-dreamy-fantasy-view-sky_23-2151563099.jpg",
          imageAlt: "Football stadium during a night game",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-women-competing-olympic-games_23-2151450193.jpg",
          imageAlt: "Basketball player mid-dunk",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/fit-squash-player-posing-with-her-racket_23-2147601800.jpg",
          imageAlt: "Tennis player serving",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-riding-bicycle_23-2150040518.jpg",
          imageAlt: "Racing car speeding on a track",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-bearded-hockey-player-wearing-full-sports-equipment-with-hockey-stick_613910-21626.jpg",
          imageAlt: "Ice hockey players in a face-off",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-playing-golf-nature_23-2150977985.jpg",
          imageAlt: "Golfer taking a swing",
        },
      ]}
      autoplayDelay={4000}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      title="Your Ultimate Sports Hub"
      description="SportStream brings you closer to the action with a comprehensive platform designed for every fan, offering unparalleled access to live events, in-depth analysis, and personalized viewing experiences."
      bulletPoints={[
        {
          title: "Seamless Streaming",
          description: "Enjoy interruption-free live streams in stunning HD quality across all your devices.",
          icon: Film,
        },
        {
          title: "Real-Time Stats",
          description: "Stay ahead of the game with instant access to scores, player statistics, and match analytics.",
          icon: LineChart,
        },
        {
          title: "Exclusive Content",
          description: "Unlock behind-the-scenes footage, expert commentary, and original documentaries.",
          icon: Award,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/esports-presentation-background-3d-illustration_1419-2783.jpg"
      imageAlt="Abstract digital screens showing live sports data flow"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Unrivaled Streaming Features"
      description="Enjoy crystal-clear live streams with interactive features that put you in control, giving you an edge over traditional broadcasts."
      accordionItems={[
        {
          id: "feature-1",
          title: "Multi-Camera Views",
          content: "Switch between various camera angles to catch every angle of the action, giving you a director's perspective of the game.",
        },
        {
          id: "feature-2",
          title: "Interactive Player Stats",
          content: "Dive deep into player performance with on-screen, real-time statistics and historical data, enhancing your analysis.",
        },
        {
          id: "feature-3",
          title: "Instant Replays & Highlights",
          content: "Never miss a crucial moment with instant replays and automatically generated highlights available during live games.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-vector/game-live-video-stream-interface-elements_107791-14021.jpg"
      imageAlt="Live sports streaming interface with multi-camera views"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",
          badge: "Starter",
          badgeIcon: Sparkles,
          price: "$9.99/month",
          subtitle: "Essential Live Sports",
          buttons: [
            {
              text: "Choose Basic",
              href: "#",
            },
          ],
          features: [
            "HD Streaming",
            "Access to core leagues",
            "Limited concurrent streams",
          ],
        },
        {
          id: "pro",
          badge: "Popular",
          badgeIcon: Star,
          price: "$19.99/month",
          subtitle: "Enhanced Viewing Experience",
          buttons: [
            {
              text: "Choose Pro",
              href: "#",
            },
          ],
          features: [
            "Full HD & 4K Streaming",
            "All leagues & events",
            "Multi-camera views",
            "Real-time stats",
            "More concurrent streams",
          ],
        },
        {
          id: "ultimate",
          badge: "Premium",
          badgeIcon: Crown,
          price: "$29.99/month",
          subtitle: "Unrestricted Access",
          buttons: [
            {
              text: "Choose Ultimate",
              href: "#",
            },
          ],
          features: [
            "All Pro features",
            "Exclusive documentaries",
            "Offline downloads",
            "Dedicated support",
            "Maximum concurrent streams",
          ],
        },
      ]}
      title="Flexible Plans for Every Fan"
      description="Get unlimited access to your favorite sports with a plan that suits your viewing habits and budget, starting today."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Users,
          title: "Active Users",
          value: "2.5M+",
        },
        {
          id: "m2",
          icon: CalendarDays,
          title: "Events Streamed",
          value: "15,000+",
        },
        {
          id: "m3",
          icon: Globe,
          title: "Countries Covered",
          value: "150+",
        },
      ]}
      title="Numbers That Speak Volumes"
      description="Join millions of passionate fans who trust SportStream for their live sports entertainment and never miss a beat."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          role: "Die-Hard Fan",
          company: "Football Enthusiast",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-with-facial-hair_181624-21795.jpg",
          imageAlt: "Sarah Johnson",
        },
        {
          id: "2",
          name: "Michael Chen",
          role: "Basketball Analyst",
          company: "Sports Blogger",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-tablet_23-2149442310.jpg",
          imageAlt: "Michael Chen",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          role: "Tennis Lover",
          company: "Casual Viewer",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-bearded-mature-male-talking-phone_23-2148673435.jpg",
          imageAlt: "Emily Rodriguez",
        },
        {
          id: "4",
          name: "David Kim",
          role: "Racing Fanatic",
          company: "Motorsports Club",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-woman-dressed-jacket-glasses-poses-pink-with-serious-emotions-clasped-hands_291650-1132.jpg",
          imageAlt: "David Kim",
        },
        {
          id: "5",
          name: "Jessica Lee",
          role: "Hockey Mom",
          company: "Family Fan",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-businesswoman-holding-coffee-cup_23-2148187126.jpg",
          imageAlt: "Jessica Lee",
        },
      ]}
      title="What Our Fans Say"
      description="Hear from satisfied users who are experiencing sports in a whole new way with SportStream, delivering thrilling moments directly to their screens."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Global Football League",
        "International Basketball Association",
        "Grand Slam Tennis Federation",
        "World Motorsports Championship",
        "Elite Esports League",
        "Martial Arts Masters",
        "Pro Cycling Tour",
      ]}
      title="Trusted by Major Leagues & Broadcasters"
      description="We partner with the biggest names in sports to bring you an unparalleled streaming experience, ensuring you always get top-tier content."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",
          title: "How do I subscribe to SportStream?",
          content: "You can subscribe directly through our website by choosing one of our flexible plans from the pricing section. Simply select your preferred plan and follow the on-screen instructions to complete your registration.",
        },
        {
          id: "faq-2",
          title: "What devices are supported?",
          content: "SportStream is available on a wide range of devices including smart TVs, smartphones, tablets, and web browsers. A complete list of compatible devices can be found in our help center.",
        },
        {
          id: "faq-3",
          title: "Can I watch multiple streams at once?",
          content: "Yes, depending on your subscription plan, you can enjoy multiple concurrent streams. Check the details of your chosen plan in the pricing section for specific limitations.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to common questions about SportStream, subscriptions, and technical support. Your query might already be resolved here."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      text="Ready to elevate your sports viewing? Get in touch with us today and let us help you experience every thrilling moment!"
      buttons={[
        {
          text: "Contact Support",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="SportStream"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
            {
              label: "Live Events",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Testimonials",
              href: "#testimonials",
            },
            {
              label: "Partners",
              href: "#social-proof",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Help Center",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 SportStream. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
