"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Dashboard",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="ClipFlow"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "plain",
      }}
      title="Automate Your YouTube Channel Workflow"
      description="Seamlessly connect your YouTube channel with ClipFlow. Authenticate securely and automate your video shorts uploads instantly."
      buttons={[
        {
          text: "Authenticate Channel",
          href: "/auth",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/website-hosting-concept-with-hands-holding-tablet_23-2149406779.jpg",
          imageAlt: "Dashboard Preview 1",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884891.jpg",
          imageAlt: "Dashboard Preview 2",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg",
          imageAlt: "Dashboard Preview 3",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-headphones-working_23-2149370618.jpg",
          imageAlt: "Dashboard Preview 4",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
          imageAlt: "Dashboard Preview 5",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-fixing-errors-affecting-servers-performance_482257-115381.jpg",
          imageAlt: "Dashboard Preview 6",
        },
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Built for Creators Who Scale"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSix
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Google OAuth",
          description: "Secure channel connection.",
          imageSrc: "http://img.b2bpic.net/free-photo/innovation-creative-design-development-ideas-concept_53876-15871.jpg",
          imageAlt: "Secure",
        },
        {
          title: "Shorts Auto-Upload",
          description: "Automated video delivery.",
          imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147869043.jpg",
          imageAlt: "Shorts",
        },
        {
          title: "Real-time Metrics",
          description: "Track your growth.",
          imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-icons-set_1284-12193.jpg",
          imageAlt: "Metrics",
        },
      ]}
      title="Powerful Features for Automation"
      description="Everything you need to grow your channel without manual overhead."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "10k+",
          description: "Videos Automated",
        },
        {
          id: "m2",
          value: "500+",
          description: "Active Channels",
        },
        {
          id: "m3",
          value: "99.9%",
          description: "Uptime",
        },
      ]}
      title="Channel Growth Data"
      description="High-level performance metrics."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah J.",
          role: "Creator",
          company: "TechVision",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/african-american-male-professional-works-desk-corporation_482257-122689.jpg",
        },
        {
          id: "2",
          name: "Mike C.",
          role: "Editor",
          company: "FlowMedia",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947441.jpg",
        },
        {
          id: "3",
          name: "Elena R.",
          role: "Strategist",
          company: "GrowthCo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg",
        },
        {
          id: "4",
          name: "David K.",
          role: "Manager",
          company: "StudioXYZ",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/busy-man-talks-phone_329181-14514.jpg",
        },
        {
          id: "5",
          name: "Lisa M.",
          role: "Producer",
          company: "VideoPros",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg",
        },
      ]}
      title="Trusted by Creators"
      description="Join our community."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Is my channel safe?",
          content: "Yes, we use secure Google OAuth.",
        },
        {
          id: "q2",
          title: "How do I upload shorts?",
          content: "Connect, and use the automated pipeline.",
        },
        {
          id: "q3",
          title: "Can I see channel stats?",
          content: "Dashboard displays real-time metrics.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Common queries about ClipFlow."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get Started"
      title="Ready to Scale?"
      description="Authenticate your Google account and unlock powerful channel automation tools."
      buttons={[
        {
          text: "Start Now",
          href: "/auth",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="ClipFlow"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
