"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Star } from "lucide-react";

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="CryptoVault"
          bottomLeftText="Decentralized Finance"
          bottomRightText="hello@cryptovault.io"
        />
      </div>

      <div id="pricing-plans" data-section="pricing-plans" className="pt-20">
        <PricingCardEight
          plans={[
            {
              id: "starter",
              badge: "Popular",
              badgeIcon: Star,
              price: "$0",
              subtitle: "Perfect for beginners",
              buttons: [{ text: "Start Free", href: "https://app.example.com/signup" }],
              features: [
                "Unlimited trades per month",
                "Basic charting tools",
                "Email support",
                "Mobile app access",
                "Community forum access",
                "Standard trading fees (0.1%/0.2%)"
              ]
            },
            {
              id: "pro",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$19/mo",
              subtitle: "Best for active traders",
              buttons: [{ text: "Upgrade Now", href: "https://app.example.com/pro" }],
              features: [
                "All Starter features",
                "Advanced analytics & AI signals",
                "Priority support 24/7",
                "API access with rate limits",
                "Custom alerts and notifications",
                "Lower trading fees (0.05%/0.1%)",
                "Advanced order types",
                "Portfolio management tools"
              ]
            },
            {
              id: "elite",
              badge: "Premium",
              price: "$99/mo",
              subtitle: "For professional traders",
              buttons: [{ text: "Go Elite", href: "https://app.example.com/elite" }],
              features: [
                "All Pro features",
                "Dedicated account manager",
                "White-label solutions",
                "Margin trading access",
                "Premium liquidity pools",
                "Custom fee structure",
                "Institutional-grade security",
                "Priority order execution",
                "Advanced risk management"
              ]
            }
          ]}
          title="Choose Your Trading Plan"
          description="Transparent pricing for traders at every level. Start free and upgrade as you grow your portfolio."
          tag="Flexible Plans"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing-faq" data-section="pricing-faq">
        <FaqSplitText
          faqs={[
            {
              id: "1",
              title: "Can I change my plan anytime?",
              content: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately and we'll prorate any billing differences."
            },
            {
              id: "2",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, bank transfers, and cryptocurrency payments including Bitcoin, Ethereum, and USDC."
            },
            {
              id: "3",
              title: "Is there a free trial for paid plans?",
              content: "Yes! Pro and Elite plans come with a 14-day free trial. No credit card required to start your trial period."
            },
            {
              id: "4",
              title: "What happens to my data if I downgrade?",
              content: "Your trading history and portfolio data are always preserved. Some advanced features may be limited based on your plan."
            },
            {
              id: "5",
              title: "Do you offer volume discounts?",
              content: "Yes! High-volume traders and institutions can contact our sales team for custom pricing and enterprise features."
            }
          ]}
          sideTitle="Pricing Questions"
          sideDescription="Everything you need to know about our plans and billing"
          textPosition="left"
          animationType="smooth"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing-testimonial" data-section="pricing-testimonial">
        <TestimonialCardFifteen
          testimonial="The Pro plan has paid for itself many times over. The advanced analytics and priority support have made a huge difference in my trading success rate."
          rating={5}
          author="David Park, Day Trader"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg", alt: "Professional trader" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Satisfied user" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg", alt: "Happy trader" },
            { src: "https://img.b2bpic.net/free-photo/side-view-business-man-city_23-2148479568.jpg", alt: "Verified user" },
            { src: "https://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg", alt: "Success story" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Community member" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",
            items: [
              { label: "Features", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "Security", href: "https://cryptovault.io/security" },
              { label: "API Docs", href: "https://docs.cryptovault.io" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.io" },
              { label: "Careers", href: "https://careers.cryptovault.io" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy Policy", href: "https://cryptovault.io/privacy" },
              { label: "Terms of Service", href: "https://cryptovault.io/terms" },
              { label: "Cookie Policy", href: "https://cryptovault.io/cookies" },
              { label: "Compliance", href: "https://cryptovault.io/compliance" }
            ]
          }
        ]}
        copyrightText="© 2025 CryptoVault. All rights reserved. Secure your future in crypto."
      />
    </ThemeProvider>
  );
}