"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, Baby, Bell, Clapperboard, Film, Football, Gamepad, Music, Newspaper, PlayCircle, Sparkles, Star, Tv, User, Wifi } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Packages",          id: "#packages"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="StreamFLIX"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogo
      logoText="StreamFLIX"
      description="Your ultimate destination for live TV, movies, and series on demand. Experience crystal-clear quality and endless entertainment."
      buttons={[
        {
          text: "Start Free Trial",          href: "#pricing"},
        {
          text: "View Packages",          href: "#packages"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/investors-reading-solar-panels-factory-paperwork-online-videocall_482257-125985.jpg"
      imageAlt="Futuristic IPTV streaming interface"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="About Us"
      title="Experience the Future of Television"
      description="StreamFLIX brings you an unparalleled entertainment experience with a vast library of channels, on-demand content, and premium features."
      subdescription="Enjoy seamless streaming across all your devices, anytime, anywhere. No contracts, no hidden fees, just pure entertainment."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/happy-man-holding-remote-control-chatting-smartphone_482257-126615.jpg"
      imageAlt="Family watching IPTV in modern living room"
      mediaAnimation="opacity"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Live TV & On-Demand",          description: "Access thousands of live channels and a massive library of movies and series.",          bentoComponent: "reveal-icon",          icon: Tv
        },
        {
          title: "24/7 Support",          description: "Our AI-powered chatbot and human agents are ready to assist you anytime.",          bentoComponent: "chat",          aiIcon: Star,
          userIcon: User,
          exchanges: [
            {
              userMessage: "My stream is buffering.",              aiResponse: "Please check your internet connection. We can also suggest optimizing stream quality settings."},
            {
              userMessage: "How do I add a new device?",              aiResponse: "You can add new devices from your account settings under 'Manage Devices'."},
          ],
          placeholder: "Ask us anything..."
        },
        {
          title: "Multi-Device Streaming",          description: "Watch on your phone, tablet, smart TV, or computer with seamless synchronization.",          bentoComponent: "phone",          statusIcon: Wifi,
          alertIcon: Bell,
          alertTitle: "New Show Alert!",          alertMessage: "Start watching 'The Digital Frontier' now.",          apps: [
            {
              name: "StreamFLIX",              icon: PlayCircle,
            },
            {
              name: "Sports",              icon: Football,
            },
            {
              name: "News",              icon: Newspaper,
            },
            {
              name: "Kids",              icon: Baby,
            },
            {
              name: "Movies",              icon: Film,
            },
            {
              name: "Series",              icon: Clapperboard,
            },
            {
              name: "Music",              icon: Music,
            },
            {
              name: "Gaming",              icon: Gamepad,
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-holding-remote-control-chatting-smartphone_482257-126615.jpg",          imageAlt: "modern TV icon blue screen"
        },
      ]}
      title="Unlock Limitless Entertainment"
      description="Discover what makes StreamFLIX the best choice for your digital entertainment needs. From diverse content to superior quality."
      tag="Key Features"
    />
  </div>

  <div id="packages" data-section="packages">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "essential-package",          name: "Essential Stream",          price: "$15.99/month",          imageSrc: "http://img.b2bpic.net/free-photo/nervous-players-couple-losing-online-videogames-competition-using-powerful-computer-screaming-each-other-streamer-gamer-playing-video-games-with-rgb-keyboard-performing-gaming-turnament_482257-12623.jpg",          imageAlt: "Essential Stream IPTV package with diverse content"},
        {
          id: "family-package",          name: "Family Fun",          price: "$24.99/month",          imageSrc: "http://img.b2bpic.net/free-photo/mom-watching-television-with-her-children_23-2149364011.jpg",          imageAlt: "Family Fun IPTV package with kids shows and parental control"},
        {
          id: "sports-package",          name: "Sports Fanatic",          price: "$29.99/month",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-watching-match-waiting-goal_329181-16805.jpg",          imageAlt: "Sports Fanatic IPTV package with live sports action"},
        {
          id: "movie-package",          name: "Movie Buff",          price: "$27.99/month",          imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-vr-glasses-outside_23-2147768015.jpg",          imageAlt: "Movie Buff IPTV package with cinematic scenes"},
        {
          id: "international-package",          name: "Global Viewer",          price: "$34.99/month",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-watching-sports-together_23-2150251739.jpg",          imageAlt: "Global Viewer IPTV package with international channels"},
        {
          id: "ultimate-package",          name: "Ultimate Stream",          price: "$49.99/month",          imageSrc: "http://img.b2bpic.net/free-photo/traveler-uses-virtual-reality-technology_482257-76701.jpg",          imageAlt: "Ultimate Stream IPTV package with comprehensive content and 4K quality"},
      ]}
      title="Tailored Entertainment Bundles"
      description="Choose from our expertly curated packages designed to fit every viewer's preference. Get access to exclusive content and premium channels."
      tag="Our Packages"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic-plan",          name: "Basic",          price: "$15.99",          badge: "Popular",          badgeIcon: Star,
          buttons: [
            {
              text: "Get Started"},
          ],
          features: [
            "200+ Live Channels",            "HD Quality Streaming",            "On-Demand Movies",            "Standard Support"],
        },
        {
          id: "premium-plan",          name: "Premium",          price: "$29.99",          badge: "Best Value",          badgeIcon: Award,
          buttons: [
            {
              text: "Choose Premium"},
          ],
          features: [
            "500+ Live Channels",            "Full HD & 4K Streaming",            "Extensive VOD Library",            "Priority Support",            "Multi-Device Access"],
        },
        {
          id: "ultimate-plan",          name: "Ultimate",          price: "$49.99",          buttons: [
            {
              text: "Go Ultimate"},
          ],
          features: [
            "1000+ Live Channels",            "Ultimate HD & 4K Streaming",            "All VOD Content Unlocked",            "24/7 Dedicated Support",            "Up to 5 Devices Simultaneously",            "Premium Sports & Movies"],
        },
      ]}
      title="Simple Plans, Great Value"
      description="Find the perfect plan for your entertainment needs. No long-term commitments, cancel anytime."
      tag="Flexible Pricing"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "metric-1",          value: "1000+",          title: "Channels",          description: "A diverse selection of live TV channels from around the globe.",          imageSrc: "http://img.b2bpic.net/free-photo/book-icon-left-side_187299-39432.jpg",          imageAlt: "Icon representing numerous TV channels"},
        {
          id: "metric-2",          value: "200K+",          title: "Happy Users",          description: "Thousands of satisfied customers enjoying reliable, high-quality streaming.",          imageSrc: "http://img.b2bpic.net/free-vector/social-media-background-with-flat-design_23-2147834375.jpg",          imageAlt: "Icon representing a large user base"},
        {
          id: "metric-3",          value: "99.9%",          title: "Uptime",          description: "Consistent, uninterrupted streaming service with minimal downtime.",          imageSrc: "http://img.b2bpic.net/free-photo/vimeo-icon-line-connection-circuit-board_1379-895.jpg",          imageAlt: "Icon representing high server uptime"},
      ]}
      title="Delivering Excellence Worldwide"
      description="Join thousands of satisfied customers enjoying a seamless and high-quality streaming experience every day."
      tag="Our Impact"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-posing-outdoors_23-2148618856.jpg",          imageAlt: "Sarah Johnson, satisfied customer"},
        {
          id: "2",          name: "Michael Chen",          imageSrc: "http://img.b2bpic.net/free-photo/two-white-cups-with-inscription_169016-3272.jpg",          imageAlt: "Michael Chen, satisfied customer"},
        {
          id: "3",          name: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/feedback-comment-survey-support-response-bar-word_53876-133786.jpg",          imageAlt: "Emily Rodriguez, satisfied customer"},
        {
          id: "4",          name: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-fastening-jacket-beige-wall_176420-143.jpg",          imageAlt: "David Kim, satisfied customer"},
        {
          id: "5",          name: "Jessica Lee",          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-bun-wearing-black-blazer_114579-17047.jpg",          imageAlt: "Jessica Lee, satisfied customer"},
      ]}
      cardTitle="What Our Customers Say"
      cardTag="Trusted Reviews"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "What devices can I use to watch StreamFLIX?",          content: "StreamFLIX is compatible with a wide range of devices including Smart TVs, smartphones, tablets, computers, and streaming boxes like Android TV, Amazon Fire Stick, and Apple TV."},
        {
          id: "faq-2",          title: "Is a free trial available?",          content: "Yes, we offer a 7-day free trial for new users. You can sign up without any upfront payment and enjoy all the features of our Premium plan."},
        {
          id: "faq-3",          title: "How do I cancel my subscription?",          content: "You can easily cancel your subscription at any time through your account settings on our website. There are no hidden fees or cancellation charges."},
      ]}
      sideTitle="Your Questions, Answered"
      sideDescription="Browse through our frequently asked questions to quickly find solutions and understand our service better."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Get in Touch"
      title="Ready to Start Streaming?"
      description="Sign up for our newsletter to get the latest updates, special offers, and new content alerts directly to your inbox."
      inputPlaceholder="Enter your email"
      buttonText="Subscribe"
      termsText="By clicking Subscribe you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Features",              href: "#features"},
            {
              label: "Packages",              href: "#packages"},
          ],
        },
        {
          items: [
            {
              label: "Pricing",              href: "#pricing"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          items: [
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      logoText="StreamFLIX"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
