"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import Link from "next/link";
import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles, Heart, HelpCircle, CreditCard } from "lucide-react";

export default function HomePage() {
  const handleNewsletterSubmit = (email: string) => {
    console.log("Newsletter signup:", email);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      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: "products" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{
            text: "Start Free Trial",            href: "contact"}}
          brandName="ViralAI Studio"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="VIRAL AI STUDIO"
          description="Transform long-form videos into viral shorts. AI-powered editing, auto-captions, beat-sync transitions, and multi-platform export in seconds. Create TikTok, Reels, and YouTube content automatically."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "contact" },
            { text: "View Demo", href: "https://example.com/demo" },
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/a-sleek-modern-video-editing-dashboard-i-1772497231603-8bde64ed.png"
          imageAlt="ViralAI Studio Video Editing Dashboard"
          frameStyle="browser"
          mediaAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </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="products" data-section="products">
        <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",              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",              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",              imageAlt: "Animation style conversions"},
            {
              id: "4",              name: "Beat Synchronization",              price: "Auto-Aligned",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/music-beat-sync-editing-visualization-sh-1772497231286-61822367.png",              imageAlt: "Music beat sync editing"},
            {
              id: "5",              name: "Smart Thumbnails",              price: "Face Detection",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/youtube-thumbnail-generator-interface-di-1772497232751-cf1f8bb8.png",              imageAlt: "YouTube thumbnail generator"},
            {
              id: "6",              name: "Multi-Platform Export",              price: "One Click",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/social-media-export-interface-showing-si-1772497231438-df4e3d62.png",              imageAlt: "Social media export interface"},
          ]}
          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="pricing" data-section="pricing">
        <div className="mx-auto px-4 md:px-6 py-20">
          <h2 className="text-4xl font-light mb-4">Flexible Subscription Plans</h2>
          <p className="text-lg mb-12">Choose the perfect plan for your creative needs. Upgrade or downgrade anytime with no hidden fees.</p>
        </div>
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Content Creator",              company: "SarahCreates",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/professional-headshot-of-a-content-creat-1772497229916-9dd35fab.png"},
            {
              id: "2",              name: "Marcus Johnson",              role: "YouTube Producer",              company: "Epic Productions",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/young-female-video-editor-creator-in-a-c-1772497230751-a76dc93c.png"},
            {
              id: "3",              name: "Emma Rodriguez",              role: "TikTok Creator",              company: "ViralVibes",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/male-filmmaker-content-creator-in-casual-1772497230900-ce88c137.png"},
            {
              id: "4",              name: "Alex Kim",              role: "Video Director",              company: "Creative Studio Co",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/female-tiktok-social-media-creator-in-mo-1772497230988-d3cc123f.png"},
          ]}
          kpiItems={[
            { value: "10x", label: "Faster video editing" },
            { value: "95%", label: "Creator satisfaction" },
            { value: "50K+", label: "Active creators" },
          ]}
          animationType="slide-up"
          title="Loved by Creators Worldwide"
          description="Join thousands of content creators using ViralAI Studio to scale their video production. See what they have to say about their experience."
          tag="Social Proof"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <div className="mx-auto px-4 md:px-6 mb-12">
          <h2 className="text-4xl font-light mb-4">Frequently Asked Questions</h2>
          <p className="text-lg">Everything you need to know about ViralAI Studio. Can't find your answer? Contact our support team.</p>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated with ViralAI News"
          description="Get the latest features, tips, and best practices delivered to your inbox. Join our creator community and never miss an update."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/abstract-technology-background-with-warm-1772497231143-4baf05db.png"
          imageAlt="ViralAI Studio technology background"
          mediaAnimation="slide-up"
          mediaPosition="left"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
          onSubmit={handleNewsletterSubmit}
        />
      </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>
  );
}