"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Download, Music, Users, Video, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="large"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "FAQ",
          id: "faq",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="TubeFast"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      title="Download YouTube Videos in Seconds, Any Format"
      description="Paste a link, choose your resolution—360p to 4K—or extract audio as MP3. No signup required, no limits."
      testimonials={[
        {
          name: "Sarah J.",
          handle: "@sarah_creator",
          testimonial: "The fastest downloader I've ever used. Completely changed my workflow.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-radio_23-2148802310.jpg",
        },
        {
          name: "Mark D.",
          handle: "@tech_student",
          testimonial: "Perfect for grabbing audio lectures. Simple and clean.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096441.jpg",
        },
        {
          name: "Elena P.",
          handle: "@marketing_guru",
          testimonial: "Professional grade quality, zero ads. My go-to tool.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-feminine-tender-young-woman-curlyhaired-chubby-smiling-silly-look-camera-blue-eyes-girlfriend-attend-first-date-liking-spend-time-together-boyfriend-have-fun-look-happy-white-background_176420-50549.jpg",
        },
        {
          name: "David W.",
          handle: "@vid_director",
          testimonial: "Unbelievably smooth and reliable. Great UI design.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-latino-female-model-warm-bright-blue-sweater_633478-2074.jpg",
        },
        {
          name: "Lucy K.",
          handle: "@dev_enthusiast",
          testimonial: "Fast, secure, and intuitive. Highly recommended.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/public-speaker-reading-from-clipboard-files-studio-background_482257-82734.jpg",
        },
      ]}
      buttons={[
        {
          text: "Analyze & Download",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-fashion-portrait-handsome-guy-wearing-bright-blue-shirt-hipster-glasses-big-white-headphones_291049-2119.jpg",
          alt: "User 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-teenager-isolated_23-2149158194.jpg",
          alt: "User 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-male-teenager-looking-away-wondering_23-2148205460.jpg",
          alt: "User 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/brunette-female-traveler-with-backpack-holds-compact-photo-camera_613910-1402.jpg",
          alt: "User 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/people-traveling-subway-winter-time_23-2149217904.jpg",
          alt: "User 5",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "4K Quality",
        },
        {
          type: "text",
          text: "High Speed",
        },
        {
          type: "text",
          text: "MP3 Conversion",
        },
        {
          type: "text",
          text: "No Ads",
        },
        {
          type: "text",
          text: "Free Forever",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Built for Creators, Researchers, and Tech Enthusiasts"
      buttons={[
        {
          text: "Learn More",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Instant Downloads",
          description: "Download in under two seconds.",
          bentoComponent: "reveal-icon",
          icon: Zap,
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-background-with-purple-lines-generative-ai_169016-30674.jpg",
          imageAlt: "Abstract dark background with purple lines generative AI",
        },
        {
          title: "Format Variety",
          description: "Supports 360p up to 4K resolution.",
          bentoComponent: "reveal-icon",
          icon: Video,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg",
          imageAlt: "Abstract dark background with purple lines generative AI",
        },
        {
          title: "Audio Extraction",
          description: "Convert directly to MP3 effortlessly.",
          bentoComponent: "reveal-icon",
          icon: Music,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-smartwatch-hologram-presentation-wearable-gadget_53876-97061.jpg",
          imageAlt: "Abstract dark background with purple lines generative AI",
        },
      ]}
      title="Why Choose TubeFast?"
      description="High-performance tools for your digital needs."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Download,
          title: "Videos Downloaded",
          value: "1.2M+",
        },
        {
          id: "m2",
          icon: Users,
          title: "Active Users",
          value: "500K",
        },
        {
          id: "m3",
          icon: Zap,
          title: "Average Speed",
          value: "1.5s",
        },
      ]}
      title="Platform Impact"
      description="Numbers that speak for our service quality."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah J.",
          role: "CEO",
          company: "TechCorp",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-man-listening-music-headphone_23-2147892842.jpg",
        },
        {
          id: "t2",
          name: "Michael Chen",
          role: "CTO",
          company: "InnovateLab",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/sudio-shot-surprised-handsome-male-student-with-mustache-wears-round-glasses-formal-clothes_273609-8675.jpg",
        },
        {
          id: "t3",
          name: "Emily Rodriguez",
          role: "Director",
          company: "GrowthCo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cute-smiling-curly-woman-lean-wall_176420-16738.jpg",
        },
        {
          id: "t4",
          name: "David Kim",
          role: "Manager",
          company: "StartupXYZ",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/female-model-studio-posing_93675-133808.jpg",
        },
        {
          id: "t5",
          name: "Anna Lee",
          role: "Lead",
          company: "DesignCo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-long-hair-dressed-yellow-jacket-red-shirt_613910-10364.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "98%",
          label: "Retention",
        },
        {
          value: "4.9/5",
          label: "Satisfaction",
        },
        {
          value: "100+",
          label: "Countries",
        },
      ]}
      title="What People Are Saying"
      description="Join thousands of satisfied users worldwide."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Is it free?",
          content: "Yes, completely free forever.",
        },
        {
          id: "f2",
          title: "Are there limits?",
          content: "No, download as many as you want.",
        },
        {
          id: "f3",
          title: "Is it safe?",
          content: "Privacy-first with zero tracking.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Have questions? We have answers."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      title="Tips & Insights"
      description="Stay updated with our latest news."
      blogs={[
        {
          id: "b1",
          category: "Tips",
          title: "Optimizing Video Quality",
          excerpt: "How to choose the best format.",
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-smartwatch-hologram-presentation-wearable-gadget_53876-97061.jpg",
          authorName: "Admin",
          authorAvatar: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
          date: "Jan 2025",
        },
        {
          id: "b2",
          category: "Guide",
          title: "Speed Up Workflow",
          excerpt: "Efficiency in digital marketing.",
          imageSrc: "http://img.b2bpic.net/free-vector/music-gadgets-design_1172-6.jpg",
          authorName: "Admin",
          authorAvatar: "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-9479.jpg",
          date: "Feb 2025",
        },
        {
          id: "b3",
          category: "Update",
          title: "New Features Added",
          excerpt: "What is coming in next update.",
          imageSrc: "http://img.b2bpic.net/free-photo/floating-screen-clay-phone-16-pro-max_187299-46642.jpg",
          authorName: "Admin",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-woman-smiling_176474-95672.jpg",
          date: "Mar 2025",
        },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      text="Need professional support? Contact us today."
      buttons={[
        {
          text: "Get In Touch",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="TubeFast"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Blog",
              href: "#blog",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
