"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { TrendingUp, MapPin, DollarSign, Calendar, BarChart3, Lock, Truck, Activity, Navigation, Zap, Car, Sparkles, Crown } from "lucide-react";

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroSplitKpi
          title="Smart Transportation Reporting Platform"
          description="Manage medical appointments, dialysis treatments, and on-demand rides with advanced vehicle analytics. Track mileage, fuel costs, maintenance, and expenses in real-time across daily, monthly, and quarterly reports."
          background={{ variant: "aurora" }}
          kpis={[
            { value: "99.8%", label: "Uptime Guarantee" },
            { value: "Real-Time", label: "Vehicle Tracking" },
            { value: "3x Faster", label: "Report Generation" },
          ]}
          enableKpiAnimation={true}
          tag="Enterprise Transportation"
          tagIcon={Truck}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "View Demo", href: "#features" },
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APJhSPZ1ni4Gjd8AW0gwt4s63g/a-modern-transportation-management-dashb-1772489123447-cbbe5f34.png"
          imageAlt="Transportation reporting dashboard"
          mediaAnimation="slide-up"
          imagePosition="right"
          marqueeItems={[
            { type: "text-icon", text: "Medical Appointments", icon: Calendar },
            { type: "text-icon", text: "Dialysis Treatments", icon: Activity },
            { type: "text-icon", text: "On-Demand Rides", icon: Navigation },
            { type: "text-icon", text: "Cost Analysis", icon: BarChart3 },
          ]}
          marqueeSpeed={40}
          showMarqueeCard={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureHoverPattern
          title="Comprehensive Transportation Management"
          description="All-in-one platform for managing your fleet with detailed insights and predictive analytics."
          features={[
            {
              icon: TrendingUp,
              title: "Real-Time Analytics",
              description: "Monitor vehicle performance, fuel efficiency, and operational costs with live dashboards",
            },
            {
              icon: MapPin,
              title: "GPS Tracking",
              description: "Track every vehicle in your fleet with precise location data and route optimization",
            },
            {
              icon: DollarSign,
              title: "Expense Management",
              description: "Automated tracking of fuel, maintenance, repairs, and operational expenses",
            },
            {
              icon: Calendar,
              title: "Service Scheduling",
              description: "Manage medical appointments and dialysis treatment schedules with automated reminders",
            },
            {
              icon: BarChart3,
              title: "Multi-Timeframe Reports",
              description: "Generate detailed reports for daily, monthly, and quarterly analysis cycles",
            },
            {
              icon: Lock,
              title: "Enterprise Security",
              description: "Bank-level encryption and compliance with healthcare data protection standards",
            },
          ]}
          animationType="slide-up"
          tag="Features"
          tagAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Transportation Intelligence"
          description="Data-driven insights to optimize fleet operations and reduce costs"
          metrics={[
            {
              id: "1",
              value: "45%",
              title: "Average Cost Reduction",
              items: [
                "Optimized routing saves fuel",
                "Predictive maintenance prevents breakdowns",
                "Reduced idle time",
              ],
            },
            {
              id: "2",
              value: "99.2%",
              title: "On-Time Service Rate",
              items: [
                "Real-time traffic optimization",
                "Automated scheduling system",
                "Driver performance tracking",
              ],
            },
            {
              id: "3",
              value: "156 hrs",
              title: "Monthly Time Saved",
              items: [
                "Automated report generation",
                "One-click expense tracking",
                "Integrated billing system",
              ],
            },
            {
              id: "4",
              value: "24/7",
              title: "Platform Availability",
              items: [
                "Uptime-backed SLA",
                "Redundant infrastructure",
                "Mobile app access",
              ],
            },
          ]}
          animationType="scale-rotate"
          tag="Performance"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="vehicles" data-section="vehicles">
        <ProductCardOne
          title="Vehicle Fleet Management"
          description="Track and manage all vehicle details including mileage, fuel consumption, maintenance schedules, and repair costs"
          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?_wi=1",
              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?_wi=1",
              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?_wi=1",
              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?_wi=1",
              imageAlt: "Repair expense tracking",
            },
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <section className="mx-auto px-4 md:px-6 py-20">
          <div className="w-full max-w-7xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl md:text-5xl font-bold mb-4">Flexible Pricing Plans</h2>
              <p className="text-lg text-gray-600 mb-2">Choose the perfect plan for your transportation needs and scale as you grow</p>
              <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 text-accent font-medium">
                <Zap className="w-4 h-4" />
                Pricing
              </span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="rounded-2xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-sm font-medium mb-4">
                  <Car className="w-4 h-4" />
                  For Small Fleets
                </div>
                <h3 className="text-3xl font-bold mb-2">$299</h3>
                <p className="text-gray-600 text-sm mb-6">/mo</p>
                <p className="text-gray-700 mb-6">Perfect for 1-10 vehicles</p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Up to 10 vehicles tracked
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Daily reporting
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Basic analytics dashboard
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Email support
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Mobile app access
                  </li>
                </ul>
              </div>

              <div className="rounded-2xl border-2 border-accent p-8 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-accent/5 to-transparent">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/20 text-sm font-medium mb-4">
                  <Sparkles className="w-4 h-4" />
                  Most Popular
                </div>
                <h3 className="text-3xl font-bold mb-2">$799</h3>
                <p className="text-gray-600 text-sm mb-6">/mo</p>
                <p className="text-gray-700 mb-6">Ideal for growing fleets</p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Up to 50 vehicles tracked
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Daily, monthly, quarterly reports
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Advanced analytics & predictions
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Priority support
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    API integration
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-accent" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Custom dashboards
                  </li>
                </ul>
              </div>

              <div className="rounded-2xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-sm font-medium mb-4">
                  <Crown className="w-4 h-4" />
                  For Large Operations
                </div>
                <h3 className="text-3xl font-bold mb-2">Custom</h3>
                <p className="text-gray-600 text-sm mb-6">/mo</p>
                <p className="text-gray-700 mb-6">Enterprise-grade solution</p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Unlimited vehicles
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Real-time reporting
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    AI-powered optimization
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Dedicated account manager
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Custom integrations
                  </li>
                  <li className="flex items-center gap-3">
                    <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    On-premise option
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to optimize your transportation operations? Start your free trial today and experience the difference intelligent fleet management makes."
          animationType="entrance-slide"
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "Schedule Demo", href: "#contact" },
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </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?_wi=1"
          imageAlt="Fleet operations background"
          columns={footerColumns}
          logoText="TransitFlow"
          copyrightText="© 2025 TransitFlow | Smart Transportation Reporting"
        />
      </div>
    </ThemeProvider>
  );
}