"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
  Zap,
  Subtitles,
  Maximize2,
  Globe,
  Share2,
  Lock,
  Sparkles,
  Film,
  Users,
  Gift,
  Heart,
  HelpCircle,
} from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "Features", id: "features" },
  { name: "Pricing", id: "pricing" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" },
];

const navLinks = [
  { name: "Home", id: "home", href: "/" },
  { name: "Features", id: "features", href: "/features" },
  { name: "Pricing", id: "pricing", href: "/pricing" },
  { name: "About", id: "about", href: "/about" },
  { name: "Contact", id: "contact", href: "/contact" },
];

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="OpusClip"
          navItems={navItems}
          button={{
            text: "Start Free",
            href: "#hero",
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="OpusClip"
          description="Transform long-form videos into viral-ready clips with AI-powered highlights, smart captions, and instant social media optimization. Post to YouTube and Instagram directly from the app—completely free, forever."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-modern-sleek-video-editing-dashboard-i-1774159923054-24485574.png?_wi=1"
          imageAlt="OpusClip AI video clipping dashboard interface"
          videoAriaLabel="OpusClip platform demonstration"
          showDimOverlay={false}
          buttonAnimation="slide-up"
          buttons={[
            {
              text: "Start Clipping Free",
              href: "/features",
            },
            {
              text: "Watch Demo",
              href: "https://example.com/demo",
            },
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureHoverPattern
          tag="Powerful Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Everything You Need to Create Professional Video Content"
          description="OpusClip combines cutting-edge AI technology with an intuitive interface to deliver professional-grade video editing capabilities without any cost or complexity."
          features={[
            {
              icon: Zap,
              title: "AI-Powered Clipping",
              description:
                "Automatically detect and extract the most engaging moments from your long-form videos using advanced machine learning algorithms.",
            },
            {
              icon: Subtitles,
              title: "Smart Captions",
              description:
                "Generate accurate, synchronized captions in multiple languages with customizable styles, fonts, and animations for maximum engagement.",
            },
            {
              icon: Maximize2,
              title: "Multi-Format Conversion",
              description:
                "Instantly resize and optimize clips for all social platforms: 16:9, 9:16, 1:1, and more with one-click formatting.",
            },
            {
              icon: Globe,
              title: "Global Reach",
              description:
                "Access the platform from anywhere in the world with no geographical restrictions and support for 50+ languages.",
            },
            {
              icon: Share2,
              title: "Direct Social Posting",
              description:
                "Publish clips directly to YouTube and Instagram with scheduling options or instant manual posting capability.",
            },
            {
              icon: Lock,
              title: "Privacy First",
              description:
                "Your content stays yours. Enterprise-grade encryption and compliance with GDPR, CCPA, and international privacy standards.",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Explore All Features",
              href: "/features",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Workflow Solutions"
          description="Choose the workflow that fits your content creation style. All tools are free and fully featured for every user."
          tag="Content Creation"
          tagIcon={Film}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "quick-clip",
              name: "Quick Clip",
              price: "Free",
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-minimalist-icon-or-illustration-repres-1774159921850-56e5f9f7.png?_wi=1",
              imageAlt: "Quick Clip workflow tool",
            },
            {
              id: "advanced-editor",
              name: "Advanced Editor",
              price: "Free",
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/an-illustration-of-an-advanced-video-edi-1774159922921-365c051c.png?_wi=1",
              imageAlt: "Advanced Editor workspace",
            },
            {
              id: "batch-processor",
              name: "Batch Processor",
              price: "Free",
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/an-illustration-showing-multiple-video-f-1774159922185-f1052ac7.png?_wi=1",
              imageAlt: "Batch Processor for multiple videos",
            },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="OpusClip by the Numbers"
          description="Join creators worldwide who are transforming their video content without breaking the bank."
          textboxLayout="centered"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            {
              id: "users",
              title: "Active Users",
              subtitle: "Worldwide",
              category: "Community",
              value: "500K+",
            },
            {
              id: "clips",
              title: "Clips Created",
              subtitle: "Daily",
              category: "Content",
              value: "2M+",
            },
            {
              id: "hours",
              title: "Video Hours",
              subtitle: "Processed",
              category: "Data",
              value: "10K+",
            },
            {
              id: "languages",
              title: "Languages",
              subtitle: "Supported",
              category: "Accessibility",
              value: "50+",
            },
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Content Creators"
          description="From independent creators to content agencies, OpusClip powers professional video workflows worldwide."
          tag="Community"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          names={[
            "YouTube Creators",
            "TikTok Influencers",
            "Instagram Content Producers",
            "Podcast Networks",
            "Marketing Agencies",
            "Educational Institutions",
            "Corporate Media Teams",
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Always Free. Forever."
          description="No hidden fees, no paywalls, no surprise charges. OpusClip is completely free for everyone, everywhere."
          tag="No Subscription"
          tagIcon={Gift}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "free",
              badge: "Forever Free",
              badgeIcon: Heart,
              price: "$0",
              subtitle: "Everything included",
              features: [
                "Unlimited video uploads",
                "AI-powered highlight detection",
                "Smart caption generation",
                "Multi-format export",
                "Direct YouTube posting",
                "Direct Instagram posting",
                "Schedule posts up to 30 days ahead",
                "50+ language support",
                "Premium customer support",
              ],
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="OpusClip saved me hours every week. The AI automatically finds the best moments, adds perfect captions, and I can post straight to Instagram and YouTube. Best part? It's completely free."
          rating={5}
          author="Sarah Chen"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-professional-headshot-photo-of-a-young-1774159921938-655ae096.png",
              alt: "Sarah Chen, content creator",
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-professional-headshot-of-a-latino-man--1774159921910-59c0005d.png",
              alt: "Marcos Rodriguez, video editor",
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-professional-headshot-of-a-woman-named-1774159922361-93f240aa.png",
              alt: "Emma Thompson, podcast producer",
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-professional-headshot-of-alex-kumar-dy-1774159922866-8c872fb7.png",
              alt: "Alex Kumar, marketing director",
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-professional-headshot-of-sophia-martin-1774159921492-7bf7f6a3.png",
              alt: "Sophia Martinez, education specialist",
            },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about OpusClip and how it can transform your video content workflow."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",
              title: "Is OpusClip really free forever?",
              content:
                "Yes, absolutely. OpusClip is 100% free with no hidden fees, paywalls, or premium tiers. We believe powerful video editing tools should be accessible to everyone, regardless of their budget. All features are available to every user at no cost.",
            },
            {
              id: "faq-2",
              title: "How accurate is the AI highlight detection?",
              content:
                "Our AI is trained on millions of hours of video content and uses advanced machine learning to identify engaging moments based on audio dynamics, visual transitions, text overlays, and viewer engagement patterns. Accuracy typically ranges from 85-95%, and you can always manually adjust clips.",
            },
            {
              id: "faq-3",
              title: "What video formats are supported?",
              content:
                "OpusClip supports all major video formats including MP4, WebM, AVI, MOV, MKV, FLV, and WMV. You can upload files up to 10GB in size, and the platform automatically converts them for optimal processing.",
            },
            {
              id: "faq-4",
              title: "Can I schedule posts to YouTube and Instagram?",
              content:
                "Yes! You can schedule posts up to 30 days in advance or post immediately. Simply connect your YouTube and Instagram accounts through OAuth authentication, customize your clip settings, add captions and metadata, and select your preferred posting time.",
            },
            {
              id: "faq-5",
              title: "How many languages does OpusClip support for captions?",
              content:
                "We support 50+ languages including English, Spanish, French, German, Mandarin, Japanese, Korean, Arabic, Portuguese, Hindi, and many more. The AI automatically detects the language in your video and generates captions accordingly.",
            },
            {
              id: "faq-6",
              title: "Is my content secure and private?",
              content:
                "Absolutely. All content is encrypted end-to-end using industry-standard protocols. We comply with GDPR, CCPA, and international privacy standards. Your videos are stored securely and you maintain complete ownership. We never sell or share user data.",
            },
          ]}
        />
      </div>

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