"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles } from "lucide-react";

export default function FeaturesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{
            text: "Start Free Trial",
            href: "/contact",
          }}
          brandName="ViralAI Studio"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          features={[
            {
              icon: Zap,
              title: "Long Video to Viral Shorts",
              description: "Upload MP4/MOV files and automatically detect highlights. AI generates optimized 9:16, 16:9, and 1:1 formats with auto-zoom and transitions.",
            },
            {
              icon: Type,
              title: "AI Auto Caption Generator",
              description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles.",
            },
            {
              icon: Globe,
              title: "Video Translation & Dubbing",
              description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly.",
            },
            {
              icon: Palette,
              title: "Cartoon & Animation Generator",
              description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content.",
            },
            {
              icon: Music,
              title: "Beat Sync Editing",
              description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo.",
            },
            {
              icon: ImageIcon,
              title: "Auto Thumbnail Generator",
              description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates.",
            },
          ]}
          title="Powerful AI-Driven Features"
          description="Everything creators need to produce viral content at scale. From intelligent video analysis to automated editing, ViralAI Studio handles the heavy lifting."
          tag="Core Capabilities"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <ProductCardOne
          products={[
            {
              id: "1",
              name: "Smart Highlight Detection",
              price: "AI-Powered",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/visual-representation-of-video-conversio-1772497231109-892372a4.png?_wi=2",
              imageAlt: "Video conversion to shorts",
            },
            {
              id: "2",
              name: "Animated Captions",
              price: "Multi-Language",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/modern-video-frame-showing-ai-generated--1772497231199-6a63da07.png?_wi=2",
              imageAlt: "AI-generated animated captions",
            },
            {
              id: "3",
              name: "Animation Styles",
              price: "Multiple Formats",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/showcase-multiple-animation-style-conver-1772497231229-b973d03e.png?_wi=2",
              imageAlt: "Animation style conversions",
            },
          ]}
          title="Key Video Processing Features"
          description="Comprehensive toolkit for modern content creators. Each feature is optimized for viral content generation and multi-platform publishing."
          tag="Processing Tools"
          tagIcon={Sparkles}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="feature-deep-dive" data-section="feature-deep-dive">
        <div className="mx-auto px-4 md:px-6 py-20 text-center">
          <h2 className="text-4xl font-light mb-6">Advanced Feature Set</h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto mb-12">
            Explore the complete suite of AI-powered video editing capabilities designed to streamline your creative workflow and maximize content performance across all platforms.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-2xl font-light mb-3">Intelligent Analysis</h3>
              <p className="text-gray-600">Our advanced AI algorithms analyze your videos in real-time, identifying the most engaging moments and automatically creating optimized cuts.</p>
            </div>
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-2xl font-light mb-3">Multi-Format Export</h3>
              <p className="text-gray-600">Export to every major platform simultaneously with platform-specific optimizations ensuring your content looks perfect everywhere.</p>
            </div>
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-2xl font-light mb-3">Custom Branding</h3>
              <p className="text-gray-600">Add logos, watermarks, and branded elements to your videos with our intuitive overlay system and brand template library.</p>
            </div>
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-2xl font-light mb-3">Collaboration Tools</h3>
              <p className="text-gray-600">Work seamlessly with team members through cloud-based project sharing, comments, and real-time editing capabilities.</p>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "/features" },
                { label: "Pricing", href: "/pricing" },
                { label: "API Docs", href: "https://docs.viralaistudio.com" },
                { label: "Roadmap", href: "#" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "https://blog.viralaistudio.com" },
                { label: "Careers", href: "#" },
                { label: "Press Kit", href: "#" },
              ],
            },
            {
              title: "Support",
              items: [
                { label: "Help Center", href: "#faq" },
                { label: "Contact", href: "/contact" },
                { label: "Community", href: "#" },
                { label: "Status Page", href: "#" },
              ],
            },
          ]}
          logoText="ViralAI Studio"
          copyrightText="© 2025 ViralAI Studio. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}