"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Heart, CreditCard } from "lucide-react";

export default function PricingPage() {
  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="pricing" data-section="pricing">
        <PricingCardTwo
          plans={[
            {
              id: "free",              badge: "Starter Plan",              badgeIcon: Sparkles,
              price: "Free",              subtitle: "Perfect for trying out ViralAI Studio",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "/" },
              ],
              features: [
                "3 AI-generated shorts per month",                "Basic caption generation",                "Standard animation styles",                "720p export quality",                "Single platform export"],
            },
            {
              id: "pro",              badge: "Pro Plan",              badgeIcon: Sparkles,
              price: "$29/month",              subtitle: "Ideal for active content creators",              buttons: [
                { text: "Start Pro Trial", href: "contact" },
                { text: "Chat to Sales", href: "contact" },
              ],
              features: [
                "Unlimited AI-generated shorts",                "Advanced animated captions",                "All animation styles (3D, Anime, Sketch)",                "4K export quality",                "Multi-platform simultaneous export",                "AI avatar presenter",                "Priority support"],
            },
            {
              id: "premium",              badge: "Premium Plan",              badgeIcon: Sparkles,
              price: "$99/month",              subtitle: "For professional studios and agencies",              buttons: [
                { text: "Start Premium", href: "contact" },
                { text: "Custom Quote", href: "contact" },
              ],
              features: [
                "Unlimited everything",                "Video translation to 50+ languages",                "Advanced lip-sync technology",                "8K export quality",                "API access for integrations",                "White-label options",                "Dedicated account manager",                "Custom branding templates"],
            },
          ]}
          title="Flexible Subscription Plans"
          description="Choose the perfect plan for your creative needs. Upgrade or downgrade anytime with no hidden fees."
          tag="Pricing"
          tagIcon={CreditCard}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </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"},
          ]}
          kpiItems={[
            { value: "10x", label: "Faster video editing" },
            { value: "95%", label: "Creator satisfaction" },
            { value: "50K+", label: "Active creators" },
          ]}
          animationType="slide-up"
          title="What Our Pricing Members Say"
          description="See how creators at every tier are maximizing their content potential with ViralAI Studio."
          tag="Social Proof"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing-faq" data-section="pricing-faq">
        <div className="mx-auto px-4 md:px-6 py-20">
          <h2 className="text-4xl font-light text-center mb-12">Pricing Questions?</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-xl font-light mb-3">Can I change plans anytime?</h3>
              <p className="text-gray-600">Yes! Upgrade or downgrade your plan instantly with no cancellation fees. Changes take effect immediately.</p>
            </div>
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-xl font-light mb-3">Do you offer annual discounts?</h3>
              <p className="text-gray-600">Contact our sales team for annual pricing options. We offer special rates for yearly commitments.</p>
            </div>
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-xl font-light mb-3">Is there a free trial?</h3>
              <p className="text-gray-600">Start with our Free plan for 3 AI shorts monthly, no credit card required. Try everything risk-free.</p>
            </div>
            <div className="p-8 bg-card rounded-2xl">
              <h3 className="text-xl font-light mb-3">What about refunds?</h3>
              <p className="text-gray-600">We offer a 30-day money-back guarantee for all paid plans. No questions asked.</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>
  );
}