"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import Link from "next/link";
import { Award, Star } from "lucide-react";

export default function PricingPage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Solutions", id: "about" },
    { name: "Security", id: "security" },
    { name: "Team", id: "team" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Features", href: "features" },
        { label: "Security", href: "security" },
        { label: "Pricing", href: "/pricing" },
        { label: "API Docs", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About", href: "about" },
        { label: "Team", href: "team" },
        { label: "Careers", href: "#" },
        { label: "Blog", href: "#" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Security", href: "#" },
        { label: "Contact", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FinFlow"
          navItems={navItems}
          button={{ text: "Get Started", href: "/contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="pricing-metrics" data-section="pricing-metrics">
        <MetricCardSeven
          title="Transparent, Scalable Pricing"
          description="Choose the plan that fits your enterprise needs. Our pricing scales with your transaction volume, with no hidden fees."
          tag="Pricing Plans"
          tagIcon={Award}
          metrics={[
            {
              id: "1",
              value: "Starter",
              title: "For Growing Businesses",
              items: [
                "Up to $1M monthly volume",
                "Core analytics & reporting",
                "API access",
              ],
            },
            {
              id: "2",
              value: "Professional",
              title: "For Enterprise Operations",
              items: [
                "Up to $100M monthly volume",
                "Advanced automation workflows",
                "Dedicated support",
              ],
            },
            {
              id: "3",
              value: "Enterprise",
              title: "For Global Institutions",
              items: [
                "Unlimited transaction volume",
                "Custom integrations & SLAs",
                "White-glove onboarding",
              ],
            },
            {
              id: "4",
              value: "Custom",
              title: "Tailored Solutions",
              items: [
                "Multi-regional deployment",
                "Custom compliance frameworks",
                "24/7 dedicated support",
              ],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="pricing-social" data-section="pricing-social">
        <SocialProofOne
          title="Industry-Leading Value"
          description="Enterprise clients consistently report 40%+ operational cost savings and 10x faster transaction processing"
          tag="ROI Driven"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Cost Reduction",
            "Speed Improvement",
            "Automation Rate",
            "Uptime SLA",
            "Security Compliance",
            "Integration Support",
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 FinFlow | Enterprise Financial Software. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}