"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { DollarSign, Zap, Sparkles, Crown, HelpCircle } from "lucide-react";

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="CryptoVault"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Launch App", href: "https://app.example.com" }}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your trading style. All plans include essential features."
          tag="Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          animationType="slide-up"
          plans={[
            {
              id: "basic",
              badge: "Starter",
              badgeIcon: Zap,
              price: "Free",
              subtitle: "Perfect for beginners",
              buttons: [
                { text: "Get Started", href: "https://app.example.com/signup" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Unlimited trades",
                "Real-time market data",
                "Mobile app access",
                "Email support"
              ]
            },
            {
              id: "pro",
              badge: "Pro",
              badgeIcon: Sparkles,
              price: "$9.99/mo",
              subtitle: "For active traders",
              buttons: [
                { text: "Start Free Trial", href: "https://app.example.com/signup?plan=pro" },
                { text: "Chat to Sales", href: "/contact" }
              ],
              features: [
                "Advanced charting tools",
                "Priority support",
                "API access",
                "Portfolio analytics",
                "Automated trading"
              ]
            },
            {
              id: "enterprise",
              badge: "Enterprise",
              badgeIcon: Crown,
              price: "Custom",
              subtitle: "For institutions",
              buttons: [
                { text: "Contact Sales", href: "/contact" },
                { text: "Demo", href: "#" }
              ],
              features: [
                "Dedicated account manager",
                "Custom integrations",
                "White-label solutions",
                "24/7 priority support",
                "Volume discounts"
              ]
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Pricing Questions"
          description="Common questions about our pricing plans and billing"
          tag="FAQ"
          tagIcon={HelpCircle}
          textboxLayout="default"
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="customer support help service assistance"
          mediaPosition="right"
          animationType="smooth"
          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 billing is prorated automatically."
            },
            {
              id: "2",
              title: "Is there a free trial for Pro plan?",
              content: "Yes, we offer a 14-day free trial for the Pro plan with full access to all features. No credit card required to start."
            },
            {
              id: "3",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, bank transfers, and cryptocurrency payments including Bitcoin and Ethereum."
            },
            {
              id: "4",
              title: "Do you offer volume discounts?",
              content: "Yes, Enterprise customers can negotiate custom volume pricing based on their trading requirements and monthly volume."
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoReveal
        logoText="CryptoVault"
        logoLineHeight={1.1}
      />
    </ThemeProvider>
  );
}