"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterCard from '@/components/sections/footer/FooterCard';
import { DollarSign, HelpCircle, Twitter, Linkedin, Facebook, Instagram, Sparkles } from 'lucide-react';

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="GiGant Academy"
          button={{
            text: "Start Learning",
            href: "/courses"
          }}
        />
      </div>

      <div id="pricing-hero" data-section="pricing-hero">
        <HeroLogo
          logoText="Pricing Plans"
          description="Choose the investment in yourself that fits your budget and learning goals."
          buttons={[
            { text: "Home", href: "/" },
            { text: "Explore Courses", href: "/courses" }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/computer-with-social-profile-social-community_24877-53905.jpg"
          imageAlt="Pricing plans"
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Flexible Pricing"
          description="Choose the plan that fits your learning journey and investment goals."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          tag="Pricing"
          tagIcon={DollarSign}
          plans={[
            {
              id: "starter",
              tag: "Single Course",
              tagIcon: Sparkles,
              price: "$199",
              period: "/course",
              description: "Perfect for exploring a single investment topic in depth.",
              button: { text: "Enroll Now", href: "/courses" },
              featuresTitle: "Course Includes:",
              features: [
                "8-12 weeks of video content",
                "Downloadable course materials",
                "Certificate of completion",
                "Access to course community"
              ]
            },
            {
              id: "professional",
              tag: "All Access Annual",
              tagIcon: Sparkles,
              price: "$899",
              period: "/year",
              description: "Access all courses and get ongoing mentorship.",
              button: { text: "Start Learning", href: "/courses" },
              featuresTitle: "Includes Everything:",
              features: [
                "All courses with lifetime access",
                "Monthly live mentorship sessions",
                "Weekly market analysis calls",
                "Private investment community",
                "Exclusive trading strategies",
                "Personal portfolio review"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses and investment education."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="FAQ"
          tagIcon={HelpCircle}
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "Do I need prior investing experience to enroll?",
              content: "No! Our Beginner Investment Fundamentals course is designed for complete newcomers. We take you from zero investment knowledge to confident investor. However, if you already have experience, jump into our advanced courses."
            },
            {
              id: "2",
              title: "Are the courses self-paced or live?",
              content: "We offer both! Most courses are self-paced video content you can access anytime. However, our All Access and Elite plans include live mentorship sessions, weekly market calls, and interactive workshops."
            },
            {
              id: "3",
              title: "What if I'm not satisfied with my course?",
              content: "We offer a 30-day money-back guarantee. If you're not completely satisfied with your course within 30 days of purchase, we'll refund your full payment—no questions asked."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="GiGant Academy"
          copyrightText="© 2025 GiGant Academy. All rights reserved. | Empowering Investors Worldwide"
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/gigantacademy", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/gigant-academy", ariaLabel: "LinkedIn" },
            { icon: Facebook, href: "https://facebook.com/gigantacademy", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/gigantacademy", ariaLabel: "Instagram" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}