"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Bell, Eye, Globe, Lightbulb, Search, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="layered-gradient"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Impact",          id: "#metrics"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Yt Mugi"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardScroll
      background={{
        variant: "sparkles-gradient"}}
      title="AIPowered YouTube Strategy Engine"
      description="Discover untapped niches, optimize retention hooks, and dominate search rankings with real-time competitor intelligence and AI-generated SEO assets."
      buttons={[
        {
          text: "Start for Free",          href: "#features"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-uses-ai-chatbot-system-computer-guide-her-through-tasks_482257-118915.jpg"
      imageAlt="AI-powered YouTube optimization dashboard"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Empower Your Channel's Growth with Yt Mugi"
      metrics={[
        {
          icon: Search,
          label: "Niche Discovery",          value: "AI-Driven"},
        {
          icon: Users,
          label: "Audience Retention",          value: "Optimized"},
        {
          icon: TrendingUp,
          label: "SEO Performance",          value: "Boosted"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      textboxLayout="default"
      useInvertedBackground={false}
      animationType="slide-up"
      features={[
        {
          title: "AI Niche & Trend Discovery",          description: "Identify lucrative content gaps and emerging trends before your competitors. Our AI analyzes millions of data points to pinpoint your next viral idea.",          icon: Lightbulb,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-vector/small-business-background-flat-design_53876-117382.jpg",              imageAlt: "AI Niche and Trend Discovery Interface"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/bowl-milk-wooden-letters-spelled-as-milk_114579-38522.jpg",              imageAlt: "Audience Retention Optimization Interface"},
          ]
        },
        {
          title: "Audience Retention Optimization",          description: "Pinpoint exact moments viewers drop off and get AI-powered recommendations to craft irresistible hooks and sustain engagement throughout your videos.",          icon: Eye,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/technology-hologram-illustrated_23-2151877724.jpg",              imageAlt: "AI-generated SEO titles and descriptions"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/admins-data-center-using-mockup-tablet-reviewing-infrastructure-health_482257-117902.jpg",              imageAlt: "Real-time competitor analysis graph"},
          ]
        },
        {
          title: "AI-Powered SEO & Competitor Insights",          description: "Generate optimized titles, descriptions, and tags with AI. Track competitor performance in real-time to always stay one step ahead in search rankings.",          icon: Bell,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/3d-youtube-logo-silver-stand-with-dark-logos-background_134542-607.jpg",              imageAlt: "AI Niche and Trend Discovery Interface"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884889.jpg",              imageAlt: "Audience Retention Optimization Interface"},
          ]
        }
      ]}
      title="Unlock Your Channel's Full Potential"
      description="Yt Mugi provides a comprehensive suite of tools designed to streamline your content strategy, enhance viewer engagement, and amplify your presence on YouTube."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",          icon: Zap,
          title: "View Velocity Boost",          value: "40%+"},
        {
          id: "2",          icon: Users,
          title: "Subscriber Growth",          value: "25%+"},
        {
          id: "3",          icon: Globe,
          title: "Algorithmic Reach",          value: "3x Increase"},
      ]}
      title="Transform Your YouTube Performance"
      description="See the tangible impact Yt Mugi has on content creators, driving significant improvements across critical metrics."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "Niche Navigator",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2149416733.jpg",          imageAlt: "Niche Navigator Module Interface"},
        {
          id: "2",          name: "Retention Optimizer",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-like-button_23-2148586293.jpg",          imageAlt: "Retention Optimizer Module Interface"},
        {
          id: "3",          name: "SEO Master Suite",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-play-button-laptop_53876-65380.jpg",          imageAlt: "SEO Master Suite Module Interface"},
        {
          id: "4",          name: "Thumbnail Analyst",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/back-shot-young-man-playing-competitive-shooter-games-computer-with-two-streaming-chats-open_482257-29572.jpg",          imageAlt: "Thumbnail Analyst Module Interface"},
        {
          id: "5",          name: "Upload Scheduler",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/hand-with-player_1134-101.jpg",          imageAlt: "Upload Scheduler Module Interface"},
        {
          id: "6",          name: "Content Idea Generator",          price: "Free",          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-busy-woman-working-laptop-busy-paper-stickers-consentration-student-class-room-top-view-table-with-stationery-disturb_285396-110.jpg",          imageAlt: "Content Idea Generator Module Interface"},
      ]}
      title="Explore Yt Mugi's Core Modules - All Free!"
      description="Each module is meticulously crafted to address a specific challenge faced by YouTube creators, providing actionable insights and AI-powered solutions."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          date: "May 2024",          title: "Skyrocketed My Views!",          quote: "Yt Mugi's Niche Navigator helped me discover a content gap I never knew existed. My last three videos have outperformed my channel average by 200%! Absolutely game-changing for my growth.",          tag: "Gaming Channel",          avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947439.jpg",          avatarAlt: "Sarah Johnson avatar",          imageSrc: "http://img.b2bpic.net/free-photo/metal-mesh-texture_23-2148121725.jpg",          imageAlt: "Abstract digital patterns background"},
        {
          id: "2",          name: "Michael Chen",          date: "April 2024",          title: "Retention is a Beast No More",          quote: "The Retention Optimizer is a lifesaver. I used to struggle with viewer drop-offs, but Yt Mugi identified key moments and suggested hooks that kept people watching. My average watch time is up by 30%!",          tag: "Educational Content",          avatarSrc: "http://img.b2bpic.net/free-photo/handsome-guy-study-library_1157-22204.jpg",          avatarAlt: "Michael Chen avatar",          imageSrc: "http://img.b2bpic.net/free-photo/awesome-free-passion-soulful-inspire-graphics_53876-64918.jpg",          imageAlt: "Dynamic light trails background"},
        {
          id: "3",          name: "Emily Rodriguez",          date: "May 2024",          title: "SEO Mastered with AI",          quote: "I'm not an SEO expert, but Yt Mugi made it feel like I am. The AI-generated titles and descriptions are phenomenal, and I've seen a noticeable jump in search visibility for my tutorials. Highly recommend!",          tag: "Tech Tutorials",          avatarSrc: "http://img.b2bpic.net/free-photo/aspirated-confident-businesswoman-looking-forward_1262-4679.jpg",          avatarAlt: "Emily Rodriguez avatar",          imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-walls-patterned-background_53876-123094.jpg",          imageAlt: "Minimalist digital grid background"},
        {
          id: "4",          name: "David Kim",          date: "March 2024",          title: "Competitor Edge Unlocked",          quote: "Real-time competitor intelligence is a game-changer. I can see what's working for others and adapt my strategy instantly. Yt Mugi gives me a powerful edge in a crowded niche.",          tag: "Business Vlogs",          avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-headphones_23-2149386585.jpg",          avatarAlt: "David Kim avatar",          imageSrc: "http://img.b2bpic.net/free-vector/abstract-background-with-modern-shapes_52683-2.jpg",          imageAlt: "Abstract light particles background"},
        {
          id: "5",          name: "Sophia Lee",          date: "April 2024",          title: "Effortless Content Strategy",          quote: "From idea generation to optimal upload times, Yt Mugi covers it all. It's like having a dedicated content strategist in my pocket. My workflow is so much smoother now!",          tag: "Lifestyle Channel",          avatarSrc: "http://img.b2bpic.net/free-photo/image-young-blond-woman-girl-records-video-about-makeup-shows-skin-tone-beauty-products-sits_1258-281729.jpg",          avatarAlt: "Sophia Lee avatar",          imageSrc: "http://img.b2bpic.net/free-photo/vivid-blurred-colorful-wallpaper-background_58702-2790.jpg",          imageAlt: "Soft blurred background"},
        {
          id: "6",          name: "Chris Adams",          date: "March 2024",          title: "Unparalleled Growth",          quote: "I've been using Yt Mugi for three months, and my channel has never grown this fast. The AI insights are accurate, actionable, and truly make a difference in hitting my growth targets.",          tag: "Travel Vlogger",          avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-writing-notebook_23-2148845381.jpg",          avatarAlt: "Chris Adams avatar",          imageSrc: "http://img.b2bpic.net/free-photo/view-crystal-clear-water_23-2150787363.jpg",          imageAlt: "Futuristic geometric background"},
      ]}
      title="What Creators Are Saying About Yt Mugi"
      description="Hear directly from YouTube creators who have transformed their channels and achieved remarkable growth with our AI-powered insights."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "CodeStream Pro",        "PixelPulse Marketing",        "EpicLoot Gaming",        "LearnFlow Academy",        "Urban Bloom",        "Market Insight Pro",        "Gadget Guru Reviews"]}
      title="Trusted by Leading YouTube Channels"
      description="Join thousands of creators who are elevating their content strategy with Yt Mugi's powerful AI."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",          title: "What is Yt Mugi?",          content: "Yt Mugi is an AI-powered YouTube optimization dashboard designed to help content creators, strategists, and marketing teams discover untapped niches, optimize audience retention, and dominate search rankings through real-time competitor intelligence and AI-generated SEO assets."},n        {
          id: "2",          title: "How does Yt Mugi use AI?",          content: "Our AI analyzes vast amounts of YouTube data to identify emerging trends, predict viewer behavior, suggest optimal content hooks, generate SEO-friendly titles and descriptions, and provide actionable insights for channel growth. It streamlines tasks that would otherwise require extensive manual research."},n        {
          id: "3",          title: "Is Yt Mugi suitable for new creators?",          content: "Absolutely! Yt Mugi is designed for creators at all stages. New creators can leverage its niche discovery and SEO tools to kickstart their channel with a solid strategy, while established creators can fine-tune their approach for exponential growth."},n        {
          id: "4",          title: "Can I integrate Yt Mugi with my YouTube channel?",          content: "Yes, Yt Mugi offers secure integration with your YouTube channel to provide personalized analytics and implement optimizations directly. Our dashboard ensures your data remains private and secure."},n        {
          id: "5",          title: "What kind of support does Yt Mugi offer?",          content: "We offer comprehensive support including an extensive knowledge base, video tutorials, and direct email support. Premium plan users also get access to priority support and dedicated success managers."},n        {
          id: "6",          title: "Is Yt Mugi Completely Free?",          content: "Yes, Yt Mugi is now completely free to use! We've made our powerful AI-powered YouTube optimization suite accessible to all creators without any cost. Enjoy full access to all features and unleash your channel's potential."},n      ]}
      title="Frequently Asked Questions"
      description="Find answers to common questions about Yt Mugi, how it works, and how it can help your YouTube channel grow."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Ready to Grow?"
      title="Unleash Your YouTube Potential Today"
      description="Join the growing community of successful creators using Yt Mugi to discover, optimize, and dominate their niche."
      buttons={[
        {
          text: "Get Started Free",          href: "#features"},
        {
          text: "Book a Demo",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-vector/blue-neural-texture-abstract-set-vector_53876-85208.jpg"
      imageAlt="Abstract digital network background"
      logoText="Yt Mugi"
      columns={[
        {
          title: "Product",          items: [
            {
              label: "Niche Navigator",              href: "#products"},
            {
              label: "Retention Optimizer",              href: "#products"},
            {
              label: "SEO Master",              href: "#products"},
            {
              label: "All Features",              href: "#features"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Blog",              href: "#"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Support",              href: "#"},
            {
              label: "Documentation",              href: "#"},
            {
              label: "API",              href: "#"},
            {
              label: "FAQs",              href: "#faq"},
          ],
        },
      ]}
      copyrightText="© 2024 Yt Mugi. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}