"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";

export default function VehiclesPage() {
  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="vehicle-management" data-section="vehicle-management">
        <ProductCardOne
          title="Comprehensive Vehicle Fleet Management"
          description="Track, monitor, and optimize every vehicle in your fleet with detailed analytics and real-time performance insights"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "v1",
              name: "Daily Mileage Report",
              price: "Automated",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/daily-mileage-tracking-report-interface--1772489122356-087ce731.png",
              imageAlt: "Daily mileage tracking",
            },
            {
              id: "v2",
              name: "Fuel Consumption Analysis",
              price: "Real-Time",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/fuel-consumption-analysis-dashboard-with-1772489123250-5683ee26.png",
              imageAlt: "Fuel cost analysis",
            },
            {
              id: "v3",
              name: "Maintenance Scheduler",
              price: "Preventive",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/preventive-maintenance-scheduler-interfa-1772489122826-5b1a6cf6.png",
              imageAlt: "Maintenance tracking",
            },
            {
              id: "v4",
              name: "Repair Cost Tracking",
              price: "Detailed",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/repair-cost-tracking-dashboard-with-expe-1772489122728-d1156c99.png",
              imageAlt: "Repair expense tracking",
            },
          ]}
        />
      </div>

      <div id="vehicle-metrics" data-section="vehicle-metrics">
        <MetricCardSeven
          title="Vehicle Fleet Analytics"
          description="Deep insights into your fleet performance and operational efficiency"
          metrics={[
            {
              id: "1",
              value: "450+",
              title: "Active Vehicles Managed",
              items: [
                "Real-time GPS tracking",
                "Historical route data",
                "Driver behavior analytics",
              ],
            },
            {
              id: "2",
              value: "12M+",
              title: "Miles Tracked Monthly",
              items: [
                "Precise route logging",
                "Fuel efficiency analysis",
                "Cost per mile calculations",
              ],
            },
            {
              id: "3",
              value: "94%",
              title: "Preventive Maintenance Success",
              items: [
                "Scheduled service reminders",
                "Breakdown prevention",
                "Extended vehicle lifespan",
              ],
            },
          ]}
          animationType="scale-rotate"
          tag="Performance"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="vehicle-faq" data-section="vehicle-faq">
        <FaqSplitText
          faqs={[
            {
              id: "1",
              title: "How do I add a new vehicle to the fleet?",
              content: "Navigate to the Fleet Management section and click 'Add Vehicle'. Enter the vehicle details including VIN, license plate, vehicle type, acquisition date, and expected maintenance schedule. Upload photos and insurance documents for your records. The system will automatically begin tracking this vehicle immediately.",
            },
            {
              id: "2",
              title: "What data is tracked for each vehicle?",
              content: "We track mileage, fuel consumption, maintenance history, repair costs, GPS location, driver assignments, utilization rates, and service schedules. All data is collected in real-time and aggregated for comprehensive analytics and reporting across daily, monthly, and quarterly views.",
            },
            {
              id: "3",
              title: "Can I set maintenance alerts and reminders?",
              content: "Yes! Create maintenance schedules based on mileage, time intervals, or both. The system automatically sends email and in-app notifications to assigned managers when maintenance is due. You can customize notification frequency and assign multiple recipients for critical maintenance tasks.",
            },
            {
              id: "4",
              title: "How is vehicle depreciation and residual value calculated?",
              content: "Our system calculates depreciation using standard automotive depreciation models based on vehicle age, mileage, condition reports, and market data. Generate quarterly residual value reports for accounting and insurance purposes. Export depreciation schedules for tax planning.",
            },
          ]}
          sideTitle="Vehicle Management"
          sideDescription="Get answers about tracking and managing your fleet"
          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>
  );
}