"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Features",          id: "features"},
        {
          name: "Showcase",          id: "metrics"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "FAQ",          id: "faq"},
      ]}
      brandName="EditFlow"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "plain"}}
      title="Edit Like A Pro, Instantly."
      description="Unleash your creativity with AI-powered video editing tools. Create, edit, and share high-quality content in seconds."
      buttons={[
        {
          text: "Start Editing",          href: "#"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038907.jpg"
      imageAlt="AI-powered video editing dashboard"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smart-watch_23-2150201853.jpg",          alt: "User 1"},
        {
          src: "http://img.b2bpic.net/free-photo/artist-using-tablet-stylus-pen_23-2152007744.jpg",          alt: "User 2"},
        {
          src: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg",          alt: "User 3"},
        {
          src: "http://img.b2bpic.net/free-photo/circle-round-badge-banner-vector_53876-120995.jpg",          alt: "User 4"},
        {
          src: "http://img.b2bpic.net/free-photo/dynamic-light-painting-background_23-2149679076.jpg",          alt: "User 5"},
      ]}
      avatarText="Join 10M+ creative professionals"
      marqueeItems={[
        {
          type: "text",          text: "Ultra-Fast Rendering"},
        {
          type: "text",          text: "AI-Powered Enhancements"},
        {
          type: "text",          text: "Cloud Sync"},
        {
          type: "text",          text: "4K Export Support"},
        {
          type: "text",          text: "Intuitive Workflow"},
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Smart AI Cutting",          tags: [
            "AI",            "Speed"],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-retouching-software-touch-screen-computer-studio-hands-photographer-editing-pictures-with-professional-technology-photography-project-retouch-media-editor_482257-34139.jpg"},
        {
          id: "f2",          title: "Cinematic Color Grade",          tags: [
            "Pro",            "Color"],
          imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-professional-photo-editing-tools-close-up-shot-pc-display_482257-82193.jpg"},
        {
          id: "f3",          title: "Multi-Layer Exports",          tags: [
            "Output",            "Quality"],
          imageSrc: "http://img.b2bpic.net/free-photo/pause-icon-multimedia-entertainment-perforated-paper_53876-31067.jpg"},
      ]}
      title="Professional Tools, Simple Interface"
      description="Everything you need to produce cinematic content without the complexity of traditional editors."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "10M+",          title: "Creators",          items: [
            "Active creators",            "Global community"],
        },
        {
          id: "m2",          value: "50M+",          title: "Projects",          items: [
            "Successfully exported",            "High-quality renders"],
        },
        {
          id: "m3",          value: "99.9%",          title: "Uptime",          items: [
            "Reliable cloud sync",            "Always available"],
        },
      ]}
      title="Global Impact"
      description="Join millions of creators transforming the media landscape."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          role: "Film Producer",          testimonial: "The best AI editor I've ever used. Incredibly fast.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-movie-producer_23-2148915842.jpg"},
        {
          id: "2",          name: "Marcus C.",          role: "YouTuber",          testimonial: "Simplified my workflow by hours every single week.",          imageSrc: "http://img.b2bpic.net/free-photo/female-editor-designer-retouches-photos-dual-monitors-desktop_482257-126858.jpg"},
        {
          id: "3",          name: "Elena R.",          role: "Creative Director",          testimonial: "Studio-quality results directly in my browser.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-with-microphone_23-2149200039.jpg"},
        {
          id: "4",          name: "David K.",          role: "Editor",          testimonial: "Intuitive, powerful, and perfectly responsive.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-pretty-woman-listening-music-chatting-by-phone_171337-7510.jpg"},
        {
          id: "5",          name: "Lila P.",          role: "Social Media Manager",          testimonial: "My content has never looked this professional.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-through-blinds-early-morning-sunlight_169016-17897.jpg"},
      ]}
      title="Trusted by Creators"
      description="See why professional editors worldwide choose our platform."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={false}
      names={[
        "Netflix",        "YouTube",        "Adobe",        "Disney",        "Amazon",        "Apple",        "Spotify"]}
      title="Used by Leading Media Houses"
      description="Industry leaders rely on our infrastructure for their creative output."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "Is it free to start?",          content: "Yes, our free tier gives you access to core editing features, 720p exports, and cloud storage for up to 3 projects, allowing you to master your workflow with no upfront cost."},
        {
          id: "q2",          title: "Do I need a powerful computer?",          content: "No, our cloud processing handles the heavy work."},
        {
          id: "q3",          title: "Can I export in 4K?",          content: "Absolutely, all tiers support 4K exports."},
      ]}
      title="Frequently Asked Questions"
      description="Get quick answers to common questions about our platform."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/filmmaker-holding-blank-white-clapper-board_114579-54032.jpg"
      imageAlt="FAQ Support"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Join Us"
      title="Start Your First Pro Project"
      description="Claim your free trial now and unlock professional-grade editing tools instantly. Sign up today—limited spots available!"
      buttonText="Get Started Now"
      mediaAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/smiling-positive-brunette-female-eyeglasses-taking-pictures-with-professional-photo-camera-isolated-grey-background_613910-7166.jpg"
      imageAlt="Contact Us"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="EditFlow"
      columns={[
        {
          title: "Product",          items: [
            {
              label: "Features",              href: "#features"},
            {
              label: "Pricing",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy",              href: "#"},
            {
              label: "Terms",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 EditFlow Inc."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}