"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 FooterBase from '@/components/sections/footer/FooterBase';
import { Truck, Building2, Users, Award } from "lucide-react";

export default function AboutPage() {
  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: "Solutions", id: "/solutions" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Request Demo", href: "/contact" }}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Our Nationwide Network Infrastructure"
          description="LogisticNet has built the most comprehensive physical-digital logistics infrastructure in North America. Our 250 strategically positioned warehouses and 3,500-vehicle fleet create an integrated network that delivers unmatched operational efficiency and supply chain visibility."
          tag="Network Overview"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34YrpHTNyoPHUh85bjA10KHfDge/an-aerial-view-of-a-modern-logistics-war-1771991399017-ff423abb.png?_wi=2"
          imageAlt="Comprehensive logistics network infrastructure"
          buttons={[{ text: "View Solutions", href: "/solutions" }]}
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Network Scale & Coverage"
          description="Our extensive infrastructure delivers consistent performance across all major commercial corridors."
          tag="Infrastructure Metrics"
          tagIcon={Award}
          metrics={[
            {
              id: "warehouses",              value: "250",              title: "Warehouse Locations",              description: "Strategically positioned across North America",              icon: Building2
            },
            {
              id: "coverage",              value: "98",              title: "Coverage Percentage",              description: "Of major metropolitan areas served",              icon: Truck
            },
            {
              id: "capacity",              value: "15",              title: "Million Sq Ft",              description: "Total warehouse storage capacity",              icon: Building2
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </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>
  );
}