"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { DollarSign, TrendingDown, Calculator, Rocket } from "lucide-react";

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="noise"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="LogisticNet"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Solutions", id: "/solutions" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Request Demo", href: "/contact" }}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Transparent, Value-Based Pricing"
          description="LogisticNet's pricing structure is designed for enterprise scale with no hidden fees. Our usage-based model ensures you only pay for the logistics capacity you need, with volume discounts that grow with your business."
          tag="Pricing Model"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34YrpHTNyoPHUh85bjA10KHfDge/a-detailed-analytics-dashboard-showing-d-1771991398781-6fb5bcee.png?_wi=4"
          imageAlt="Pricing analytics and cost optimization dashboard"
          buttons={[{ text: "Get Custom Quote", href: "/contact" }]}
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Average Client Savings"
          description="LogisticNet's integrated approach consistently delivers measurable cost reductions for enterprise clients."
          tag="Cost Benefits"
          tagIcon={DollarSign}
          metrics={[
            {
              id: "logistics-savings",              value: "32",              title: "% Cost Reduction",              description: "Average logistics expense decrease",              icon: TrendingDown
            },
            {
              id: "inventory-optimization",              value: "40",              title: "% Stockout Reduction",              description: "Through predictive forecasting",              icon: Calculator
            },
            {
              id: "roi-timeline",              value: "6",              title: "Months to ROI",              description: "Average payback period",              icon: DollarSign
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Enterprise Pricing"
          title="Get Your Custom Pricing Plan"
          description="Every enterprise has unique logistics requirements. Schedule a consultation to receive a customized pricing proposal based on your volume, routes, and service level needs. We'll show ROI projections within 48 hours."
          tagIcon={Rocket}
          background={{ variant: "noise" }}
          useInvertedBackground={false}
          inputPlaceholder="your@company.com"
          buttonText="Get Custom Quote"
          termsText="No commitment required. All pricing discussions are confidential."
        />
      </div>

      <FooterBase
        logoText="LogisticNet"
        copyrightText="© 2025 LogisticNet. All rights reserved. Integrated Logistics for the Modern Enterprise."
        columns={[
          {
            title: "Solutions",            items: [
              { label: "Fleet Management", href: "/solutions" },
              { label: "Warehouse Network", href: "/about" },
              { label: "Demand Forecasting", href: "/solutions" },
              { label: "Last-Mile Delivery", href: "/solutions" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About Us", href: "/about" },
              { label: "Pricing", href: "/pricing" },
              { label: "Case Studies", href: "/solutions" },
              { label: "Blog", href: "#" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Help Center", href: "#" },
              { label: "Contact Us", href: "/contact" },
              { label: "System Status", href: "#" },
              { label: "Documentation", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}