"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Zap, TrendingUp, DollarSign, Clock, Users, Zap as ZapIcon } from "lucide-react";

export default function PricingPage() {
  const navItems = [
    { name: "Dashboard", id: "dashboard" },
    { name: "Reports", id: "reports" },
    { name: "Vehicles", id: "vehicles" },
    { name: "Pricing", id: "pricing" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Features", href: "#features" },
        { label: "Reports", href: "/reports" },
        { label: "Vehicles", href: "/vehicles" },
        { label: "Pricing", href: "#pricing" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/" },
        { label: "Blog", href: "/" },
        { label: "Careers", href: "/" },
        { label: "Contact", href: "#contact" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Security", href: "#" },
        { label: "Compliance", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TransitFlow"
          navItems={navItems}
          button={{
            text: "Get Started",
            href: "#contact",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="pricing-benefits" data-section="pricing-benefits">
        <FeatureHoverPattern
          title="Why Choose TransitFlow?"
          description="Transparent pricing with no hidden fees. Scale your fleet management as your business grows."
          features={[
            {
              icon: TrendingUp,
              title: "Scalable Plans",
              description: "Start small and upgrade anytime. Pay only for the vehicles you track with flexible billing cycles",
            },
            {
              icon: DollarSign,
              title: "Cost Savings",
              description: "Save 45% on average through optimized routing, preventive maintenance, and fuel efficiency insights",
            },
            {
              icon: Clock,
              title: "Quick ROI",
              description: "Most customers see return on investment within 3-6 months through operational cost reduction",
            },
            {
              icon: Users,
              title: "Dedicated Support",
              description: "Expert support team available 24/7 to help you maximize platform value and solve challenges",
            },
            {
              icon: ZapIcon,
              title: "No Setup Fees",
              description: "Start immediately with zero setup costs. We handle onboarding and data migration for you",
            },
            {
              icon: Zap,
              title: "Free Trial",
              description: "Try all features with 30-day free trial. No credit card required. Full access to all tools",
            },
          ]}
          animationType="slide-up"
          tag="Pricing Value"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="value-metrics" data-section="value-metrics">
        <MetricCardSeven
          title="Investment Value"
          description="Understand the financial impact of TransitFlow on your operations"
          metrics={[
            {
              id: "1",
              value: "45%",
              title: "Average Cost Reduction",
              items: [
                "Optimized fuel consumption",
                "Preventive maintenance benefits",
                "Reduced downtime",
              ],
            },
            {
              id: "2",
              value: "6 mo",
              title: "Average ROI Timeline",
              items: [
                "Operational efficiency gains",
                "Administrative time savings",
                "Maintenance cost reduction",
              ],
            },
            {
              id: "3",
              value: "$50K+",
              title: "Annual Savings per 50 Vehicles",
              items: [
                "Fuel cost optimization",
                "Repair cost reduction",
                "Administrative overhead cut",
              ],
            },
          ]}
          animationType="scale-rotate"
          tag="ROI Analysis"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing-faq" data-section="pricing-faq">
        <FaqSplitText
          faqs={[
            {
              id: "1",
              title: "Can I change plans or cancel anytime?",
              content: "Yes! You can upgrade, downgrade, or cancel your plan anytime with no penalties. Changes take effect at your next billing cycle. We believe in flexibility and never lock customers into long-term contracts they don't want.",
            },
            {
              id: "2",
              title: "What's included in the free trial?",
              content: "Our 30-day free trial includes full access to all features across all three plan tiers: unlimited vehicles (trial limit), all reporting types, advanced analytics, API integration, and priority email support. No credit card required to start.",
            },
            {
              id: "3",
              title: "Are there discounts for annual billing?",
              content: "Yes! Pay annually and receive a 15% discount on any plan. You'll also get early access to new features and priority support. Contact our sales team for enterprise volume discounts on plans with 100+ vehicles.",
            },
            {
              id: "4",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards (Visa, MasterCard, American Express), ACH bank transfers, and wire transfers. Enterprise customers can arrange custom payment terms with our billing team.",
            },
          ]}
          sideTitle="Pricing FAQs"
          sideDescription="Common questions about our pricing and billing"
          textPosition="left"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/wide-aerial-view-of-a-modern-transportat-1772489121730-52e07e45.png"
          imageAlt="Fleet operations background"
          columns={footerColumns}
          logoText="TransitFlow"
          copyrightText="© 2025 TransitFlow | Smart Transportation Reporting"
        />
      </div>
    </ThemeProvider>
  );
}