"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';
import { DollarSign, Target, Brain, BarChart3, Users, ArrowRight, Twitter, Linkedin, Instagram, Github, Sparkles } from 'lucide-react';

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="medium"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="PeakFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Docs", id: "docs" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your training goals. No hidden fees, cancel anytime."
          tag="Flexible Plans"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          plans={[
            {
              id: "1",
              price: "Free",
              name: "Starter",
              buttons: [
                { text: "Get Started", href: "#" }
              ],
              features: [
                "Basic workout tracking",
                "Simple calendar",
                "1 training plan",
                "Mobile app access",
                "Community forums"
              ]
            },
            {
              id: "2",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$12/mo",
              name: "Premium Athlete",
              buttons: [
                { text: "Start Trial", href: "#" }
              ],
              features: [
                "Advanced analytics",
                "AI coaching insights",
                "Unlimited training plans",
                "HRV integration",
                "Performance forecasting",
                "Coach collaboration"
              ]
            },
            {
              id: "3",
              price: "$39/mo",
              name: "Coach Pro",
              buttons: [
                { text: "Contact Sales", href: "#" }
              ],
              features: [
                "Multi-athlete management",
                "Team analytics",
                "White-label option",
                "Priority support",
                "Custom integrations",
                "Reporting tools"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="What's Included in Each Plan"
          description="Each tier provides essential tools tailored to your needs. Upgrade or downgrade anytime with no penalties."
          tag="Plan Comparison"
          tagIcon={Target}
          tagAnimation="slide-up"
          bulletPoints={[
            {
              title: "Starter - Best for Beginners",
              description: "Perfect for new athletes getting started with data-driven training. Access core features and community.",
              icon: Brain
            },
            {
              title: "Premium Athlete - Most Popular",
              description: "Recommended for serious endurance athletes. Full AI coaching, advanced analytics, and unlimited plans.",
              icon: BarChart3
            },
            {
              title: "Coach Pro - Team Management",
              description: "For coaches and teams. Manage multiple athletes, custom integrations, and white-label solutions.",
              icon: Users
            },
            {
              title: "All Plans Include",
              description: "24/7 customer support, data security, regular updates, and community access on every tier."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/comprehensive-training-platform-overview-1772483100136-8611cf9d.png?_wi=2"
          imageAlt="PeakFlow Plans Overview"
          mediaAnimation="slide-up"
          imagePosition="left"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Upgrade?"
          tagIcon={ArrowRight}
          tagAnimation="slide-up"
          title="Start Your 14-Day Free Trial Today"
          description="Try Premium Athlete features free. No credit card required. Full access to all features, anytime."
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "Talk to Sales", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="PeakFlow"
          copyrightText="© 2025 PeakFlow. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/peakflowapp", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/peakflowapp", ariaLabel: "LinkedIn" },
            { icon: Instagram, href: "https://instagram.com/peakflowapp", ariaLabel: "Instagram" },
            { icon: Github, href: "https://github.com/peakflowapp", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}