"use client";

import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
  Sparkles,
  Star,
  Crown,
  TrendingUp,
  Users,
  Building,
  Globe,
  Zap,
  Twitter,
  Linkedin,
  Github,
} from "lucide-react";

export default function PricingPage() {
  const navItems = [
    { name: "Features", id: "/services" },
    { name: "Pricing", id: "/pricing" },
    { name: "About", id: "/about" },
    { name: "Resources", id: "/resources" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CloudSync"
          navItems={navItems}
          button={{
            text: "Get Started",            href: "/pricing"}}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. No hidden fees. Scale as you grow with flexible billing options."
          tag="Flexible Plans"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Great to Start",              badgeIcon: Sparkles,
              price: "$29/mo",              subtitle: "Perfect for small teams",              features: [
                "Up to 10 team members",                "Basic automations",                "1 GB data storage",                "Email support",                "Standard integrations"],
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Star,
              price: "$99/mo",              subtitle: "For growing teams",              features: [
                "Up to 100 team members",                "Advanced automations",                "100 GB data storage",                "Priority support",                "500+ integrations",                "Custom workflows"],
            },
            {
              id: "enterprise",              badge: "Custom Solutions",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Enterprise-scale needs",              features: [
                "Unlimited team members",                "White-label options",                "Unlimited storage",                "Dedicated account manager",                "Custom integrations",                "SLA guaranteed"],
            },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Why Choose CloudSync Pricing?"
          description="Industry-leading value with transparent, no-hidden-fees billing"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: TrendingUp,
              title: "Best Value",              value: "50% Savings"},
            {
              id: "2",              icon: Users,
              title: "Team Scale",              value: "Unlimited"},
            {
              id: "3",              icon: Building,
              title: "Enterprise Ready",              value: "Always"},
            {
              id: "4",              icon: Globe,
              title: "Global Access",              value: "85+"},
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Pricing FAQs"
          sideDescription="Common questions about our pricing and billing"
          textPosition="left"
          useInvertedBackground={true}
          animationType="smooth"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What's included in the free trial?",              content:
                "Your 14-day free trial includes full access to all Pro features. No credit card required to start."},
            {
              id: "2",              title: "How is billing handled?",              content:
                "We bill monthly or annually. You can upgrade, downgrade, or cancel anytime with no long-term contracts."},
            {
              id: "3",              title: "Do you offer refunds?",              content:
                "Yes. If you're not satisfied within 30 days, we'll refund your payment in full. No questions asked."},
          ]}
        />
      </div>

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