"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Hash, Image, Lightbulb, Rocket, Search } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmall"
        background="aurora"
        cardStyle="solid"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Tools",          id: "#tools"},
        {
          name: "Insights",          id: "#insights"},
        {
          name: "FAQ",          id: "#faq"},
      ]}
      brandName="YouTube SEO Suite"
      button={{
        text: "Reset / Change API Key",        href: "#"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Unlock Your YouTube Growth Potential"
      description="The ultimate AI-powered suite for content creation, SEO optimization, and channel growth strategy. Revolutionize your YouTube presence."
      tag="Next-Gen AI"
      tagAnimation="opacity"
      buttons={[
        {
          text: "Get Started Now",          href: "#"},
        {
          text: "Learn More",          href: "#features"},
      ]}
      buttonAnimation="opacity"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-132245.jpg",          imageAlt: "AI-powered content creation dashboard"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-laptop-office_53876-94923.jpg",          imageAlt: "User interacting with YouTube SEO tablet"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 10K+ Creators"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="About the YouTube SEO Suite"
      description="Our powerful suite empowers creators to streamline their workflow, discover winning topics, and optimize every video for maximum reach and engagement. Built for scale and efficiency, our AI analyzes trends and provides actionable insights."
      metrics={[
        {
          value: "1000+",          title: "Topics Generated"},
        {
          value: "5X",          title: "Engagement Boost"},
        {
          value: "200%",          title: "Growth in Subscribers"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/diverse-team-people-analyzing-data-charts-report-digital-tablet-using-online-networking-information-plan-business-project-colelagues-looking-diagrams-infographics-close-up_482257-50696.jpg"
      imageAlt="YouTube channel analytics dashboard"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="discovery" data-section="discovery">
      <FeatureHoverPattern
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Search,
          title: "Niche Analyzer",          description: "Identify profitable and underserved niches for your content."},
        {
          icon: Lightbulb,
          title: "Low Competition Topics",          description: "Discover high-demand topics with minimal competition."},
        {
          icon: Search,
          title: "Keyword Planner",          description: "Find powerful keywords that drive organic search traffic."},
      ]}
      title="Discovery & Strategy"
      description="Uncover high-potential niches and untapped topic opportunities to dominate your category and audience."
    />
  </div>

  <div id="creation-lab" data-section="creation-lab">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          name: "Retention Hook Generator",          price: "AI Tool",          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-design-gathering-data-business-concept_23-2149149294.jpg",          imageAlt: "Retention Hook Generator icon"},
        {
          id: "2",          name: "Scripting Engine",          price: "AI Tool",          imageSrc: "http://img.b2bpic.net/free-photo/website-design-content-layout-graphic_53876-13764.jpg",          imageAlt: "Scripting Engine icon"},
        {
          id: "3",          name: "Title & Description Generator",          price: "AI Tool",          imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-right-side_187299-45685.jpg",          imageAlt: "Title & Description Generator icon"},
        {
          id: "4",          name: "Video Idea Brainstormer",          price: "AI Tool",          imageSrc: "http://img.b2bpic.net/free-photo/business-branding-label-chart-graphic_53876-133806.jpg",          imageAlt: "Video Idea Brainstormer icon"},
        {
          id: "5",          name: "Content Calendar Planner",          price: "AI Tool",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aeyerk",          imageAlt: "Content Calendar Planner icon"},
        {
          id: "6",          name: "Video Editor Assistant",          price: "AI Tool",          imageSrc: "http://img.b2bpic.net/free-psd/flat-design-influencer-lifestyle-youtube-cover_23-2150124123.jpg",          imageAlt: "Video Editor Assistant icon"},
      ]}
      title="Creation Lab"
      description="Craft compelling scripts, engaging hooks, and creative content with our advanced AI-powered engine."
    />
  </div>

  <div id="metadata-visuals" data-section="metadata-visuals">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          icon: Rocket,
          title: "SEO Asset Optimizer",          value: "Boost Rankings"},
        {
          id: "2",          icon: Image,
          title: "Thumbnail Psychology Guide",          value: "Maximize CTR"},
        {
          id: "3",          icon: Hash,
          title: "Tag & Hashtag Selector",          value: "Expand Reach"},
      ]}
      title="Metadata & Visuals"
      description="Optimize every video element for maximum discoverability, click-through rates, and audience retention."
    />
  </div>

  <div id="advanced-audit" data-section="advanced-audit">
      <TestimonialCardSixteen
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Competitor Gap Finder",          role: "Strategic Tool",          company: "AI Insights",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-man-with-map_1153-414.jpg",          imageAlt: "Competitor Gap Finder visualization"},
        {
          id: "2",          name: "Upload Timing Optimization Matrix",          role: "Efficiency Tool",          company: "AI Insights",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-laptop-desk-post-its_23-2149386365.jpg",          imageAlt: "Upload Timing Optimization Matrix"},
        {
          id: "3",          name: "Audience Demographics Insights",          role: "Audience Tool",          company: "AI Insights",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/female-sitting-with-opened-laptop_23-2147934521.jpg",          imageAlt: "Audience Demographics Insights chart"},
        {
          id: "4",          name: "Channel Performance Benchmarking",          role: "Analysis Tool",          company: "AI Insights",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-blocks-laptop_23-2148950390.jpg",          imageAlt: "Channel Performance Benchmarking graph"},
        {
          id: "5",          name: "Content Strategy Report",          role: "Planning Tool",          company: "AI Insights",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-vector/marketing-content-stickers-part-3_534985-182.jpg",          imageAlt: "Content Strategy Report document"},
      ]}
      kpiItems={[
        {
          value: "60% Faster",          label: "Research"},
        {
          value: "45% Higher",          label: "CTR"},
        {
          value: "30% More",          label: "Views"},
      ]}
      title="Advanced Audit & Insights"
      description="Gain a definitive competitive edge with in-depth analysis and strategic recommendations from our AI to inform your next moves."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "YouTube Creators",        "Digital Agencies",        "Marketing Teams",        "Influencers",        "Brands",        "Educators",        "Small Businesses"]}
      title="Trusted by Top Content Creators"
      description="Join thousands of successful creators and businesses leveraging our AI to scale their YouTube presence and impact."
      tag="Our Community"
      tagAnimation="opacity"
      speed={35}
      showCard={false}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",          title: "How do I connect my YouTube channel?",          content: "Our secure integration process allows you to connect your channel in just a few clicks. We only request necessary permissions for analysis and content optimization."},
        {
          id: "2",          title: "Is the AI-generated content original?",          content: "Yes, our AI generates unique content ideas, scripts, and metadata. We prioritize originality and provide tools to ensure your content stands out."},
        {
          id: "3",          title: "What data does the suite use for analysis?",          content: "We use publicly available YouTube data, industry trends, and your channel's performance metrics (with your permission) to provide tailored insights and recommendations."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-2898.jpg"
      imageAlt="Person reading FAQ on computer"
      mediaAnimation="slide-up"
      mediaPosition="right"
      title="Frequently Asked Questions"
      description="Find quick answers to the most common questions about the YouTube SEO Suite and how it can supercharge your content strategy."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/3d-network-data-communications-background-with-plexus-design_1048-17880.jpg"
      imageAlt="Abstract tech background"
      logoText="YT SEO Suite"
      columns={[
        {
          title: "Product",          items: [
            {
              label: "Features",              href: "#features"},
            {
              label: "Pricing",              href: "#pricing"},
            {
              label: "Integrations",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Contact",              href: "#"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Blog",              href: "#blog"},
            {
              label: "Support",              href: "#"},
            {
              label: "Help Center",              href: "#faq"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2025 | YouTube SEO Suite. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
