"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
  Zap,
  Subtitles,
  Maximize2,
  Globe,
  Share2,
  Lock,
  Sparkles,
  Film,
  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" },
];

export default function FeaturesPage() {
  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="features-detail" data-section="features-detail">
        <FeatureHoverPattern
          tag="Complete Feature Set"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Comprehensive Tools for Professional Video Creation"
          description="Discover every feature that makes OpusClip the leading free video clipping platform. From AI-powered detection to seamless social media integration, we've built everything creators need."
          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 that analyze audio dynamics, visual transitions, and viewer engagement patterns.",
            },
            {
              icon: Subtitles,
              title: "Smart Captions",
              description:
                "Generate accurate, synchronized captions in multiple languages with customizable styles, fonts, animations, and positioning for maximum engagement and accessibility.",
            },
            {
              icon: Maximize2,
              title: "Multi-Format Conversion",
              description:
                "Instantly resize and optimize clips for all social platforms: 16:9 for YouTube, 9:16 for TikTok/Instagram Reels, 1:1 for Instagram Feed, and more with intelligent one-click formatting.",
            },
            {
              icon: Globe,
              title: "Global Reach",
              description:
                "Access the platform from anywhere in the world with no geographical restrictions, full compliance with international regulations, and support for 50+ languages.",
            },
            {
              icon: Share2,
              title: "Direct Social Posting",
              description:
                "Publish clips directly to YouTube and Instagram with powerful scheduling options to queue posts up to 30 days ahead, or post instantly with manual control.",
            },
            {
              icon: Lock,
              title: "Privacy First",
              description:
                "Your content stays yours with enterprise-grade encryption, end-to-end protection, compliance with GDPR, CCPA, and international privacy standards, and zero data selling policies.",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Start Creating",
              href: "/",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="editor-tools" data-section="editor-tools">
        <ProductCardThree
          title="Professional Editing Suite"
          description="Three powerful editing modes to match your workflow. Whether you're a quick clipper, precision editor, or batch processor, OpusClip has the tools you need."
          tag="Editor Tools"
          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=2",
              imageAlt: "Quick Clip for fast video processing",
            },
            {
              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=2",
              imageAlt: "Advanced Editor with professional controls",
            },
            {
              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=2",
              imageAlt: "Batch Processor for multiple videos",
            },
          ]}
        />
      </div>

      <div id="features-faq" data-section="features-faq">
        <FaqDouble
          title="Feature Questions"
          description="Learn more about specific OpusClip features and how to use them to maximize your video content creation."
          tag="How-To Guide"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",
              title: "How does the AI highlight detection work?",
              content:
                "Our AI analyzes multiple factors including audio peaks and volume changes, visual scene transitions, motion intensity, text overlays, color changes, and historical engagement data to automatically identify the most compelling moments in your videos.",
            },
            {
              id: "faq-2",
              title: "Can I customize caption styling?",
              content:
                "Absolutely. OpusClip offers extensive caption customization including font selection, color schemes, background styles, positioning, timing adjustments, and animation effects. You can preview changes in real-time.",
            },
            {
              id: "faq-3",
              title: "What happens to my videos after I create clips?",
              content:
                "Your original videos remain in your account indefinitely. Clips are stored separately and can be deleted anytime. All content is encrypted and only accessible by you unless you explicitly share it.",
            },
            {
              id: "faq-4",
              title: "How long does video processing typically take?",
              content:
                "Processing speed depends on video length and quality. A 1-hour video typically processes in 2-5 minutes. Batch processing scales linearly, so multiple videos process in parallel for maximum efficiency.",
            },
            {
              id: "faq-5",
              title: "Can I export clips in different quality levels?",
              content:
                "Yes. OpusClip supports export in 1080p (Full HD), 720p (HD), and 480p (Standard Definition) to balance quality and file size. You can also adjust bitrate and codec settings for advanced users.",
            },
            {
              id: "faq-6",
              title: "Do I need to install anything to use OpusClip?",
              content:
                "No. OpusClip is entirely web-based. Simply visit our platform in any modern browser and start creating. No software downloads or installations required. Works on desktop, tablet, and mobile devices.",
            },
          ]}
        />
      </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>
  );
}