"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import SplitAbout from "@/components/sections/about/SplitAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { CheckCircle, BarChart3, Rocket, Eye, MapPin, AlertCircle } from "lucide-react";

export default function TrackingPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="LogisticsPro" navItems={navItems} />
      </div>

      <div id="tracking-features" data-section="tracking-features">
        <SplitAbout
          title="Real-Time Shipment Tracking"
          description="Monitor every step of your delivery journey with our advanced GPS-enabled tracking system. Get instant notifications at every milestone and maintain complete visibility over your shipments from origin to destination."
          tag="Advanced Tracking Technology"
          tagIcon={Eye}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          bulletPoints={[
            {
              title: "Live GPS Tracking",
              description: "Real-time location updates with precision accuracy within 50 meters of actual position.",
              icon: MapPin,
            },
            {
              title: "Instant Notifications",
              description: "Automated alerts for pickup, in-transit status, delays, and delivery confirmation.",
              icon: AlertCircle,
            },
            {
              title: "Historical Analytics",
              description: "Access detailed delivery history, patterns, and performance insights for optimization.",
              icon: CheckCircle,
            },
            {
              title: "Multi-Shipment Dashboard",
              description: "Monitor multiple shipments simultaneously with customizable filters and priority sorting.",
              icon: Eye,
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=2"
          imageAlt="Real-time tracking dashboard"
          mediaAnimation="slide-up"
          imagePosition="right"
          buttons={[{ text: "Start Tracking", href: "/contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="tracking-metrics" data-section="tracking-metrics">
        <MetricCardTwo
          title="Tracking System Capabilities"
          description="Our tracking infrastructure delivers industry-leading accuracy and reliability."
          tag="Technology Specs"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",
              value: "50m",
              description: "GPS Accuracy Range",
            },
            {
              id: "2",
              value: "<5sec",
              description: "Update Frequency",
            },
            {
              id: "3",
              value: "99.99%",
              description: "System Uptime",
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          buttons={[{ text: "View Documentation", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="tracking-cta" data-section="tracking-cta">
        <ContactCTA
          tag="Ready to Track Your Shipments?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Enable Real-Time Tracking Today"
          description="Integrate our tracking API into your system in minutes. Get complete visibility and control over your entire logistics operation with our enterprise-grade platform."
          buttons={[
            { text: "Start Free Trial", href: "/contact" },
            { text: "View API Docs", onClick: () => {} },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="LogisticsPro"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}