import { Badge } from "@/src/components/ui/badge";
import { Button } from "@/src/components/ui/button";
import { Card, CardContent } from "@/src/components/ui/card";
import Link from "next/link";
import {
  Ship,
  Truck,
  Plane,
  Package,
  FileCheck,
  Globe,
  Clock,
  Shield,
  CheckCircle,
  MapPin,
  ArrowRight,
} from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Export Logistics Services - Sea, Air & Road Freight from India",
  description:
    "Comprehensive export logistics services from India. Sea freight, air cargo, multimodal transport across 35+ global ports. Customs clearance, warehousing & door-to-door delivery.",
  keywords: [
    "export logistics India",
    "sea freight India",
    "air cargo export",
    "shipping from India",
    "customs clearance",
    "freight forwarding",
    "international shipping",
    "export documentation",
  ],
  alternates: {
    canonical: "/logistics",
  },
  openGraph: {
    title: "Export Logistics Services from India - Xpecto Global",
    description:
      "Comprehensive export logistics. Sea freight, air cargo, customs clearance across 35+ global ports.",
    type: "website",
  },
};

export default function Logistics() {
  const services = [
    {
      icon: Ship,
      title: "Sea Freight",
      description:
        "Cost-effective ocean shipping for bulk cargo with FCL and LCL options.",
      features: [
        "Full Container Load (FCL)",
        "Less than Container Load (LCL)",
        "Break-bulk cargo handling",
        "Reefer containers for temperature-sensitive goods",
      ],
    },
    {
      icon: Plane,
      title: "Air Freight",
      description: "Express delivery for time-critical shipments worldwide.",
      features: [
        "Express delivery services",
        "Charter services available",
        "Temperature-controlled cargo",
        "Dangerous goods handling",
      ],
    },
    {
      icon: Truck,
      title: "Land Transport",
      description: "Comprehensive road and rail logistics across regions.",
      features: [
        "Door-to-door delivery",
        "Cross-border trucking",
        "Rail freight options",
        "Last-mile delivery",
      ],
    },
    {
      icon: Package,
      title: "Warehousing",
      description: "Secure storage solutions with inventory management.",
      features: [
        "Bonded warehouses",
        "Inventory management",
        "Pick and pack services",
        "Quality inspection facilities",
      ],
    },
  ];

  const documentServices = [
    {
      title: "Export Documentation",
      items: [
        "Commercial Invoice preparation",
        "Packing List creation",
        "Certificate of Origin",
        "Bill of Lading/Airway Bill",
      ],
    },
    {
      title: "Compliance Documents",
      items: [
        "Phytosanitary Certificates",
        "Quality Certificates (COA/COC)",
        "MSDS for chemicals",
        "Insurance certificates",
      ],
    },
    {
      title: "Customs Support",
      items: [
        "HS Code classification",
        "Customs clearance assistance",
        "Duty drawback support",
        "Import/Export license guidance",
      ],
    },
  ];

  const portLocations = [
    { name: "Nhava Sheva (JNPT)", location: "Mumbai, India", type: "Sea" },
    { name: "Mundra Port", location: "Gujarat, India", type: "Sea" },
    { name: "Chennai Port", location: "Tamil Nadu, India", type: "Sea" },
    { name: "Delhi Air Cargo", location: "New Delhi, India", type: "Air" },
    { name: "Mumbai Airport", location: "Maharashtra, India", type: "Air" },
    { name: "Kolkata Port", location: "West Bengal, India", type: "Sea" },
  ];

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-125 flex items-center bg-[#0B1C2D]">
        <div className="absolute inset-0 bg-linear-to-r from-[#0B1C2D] to-[#1a3a52] pointer-events-none"></div>
        <div className="relative z-10 max-w-360 mx-auto px-6 w-full">
          <Badge className="mb-4 bg-white/10 text-white hover:bg-white/20">
            Global Logistics Partner
          </Badge>
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 max-w-3xl">
            End-to-End{" "}
            <span className="text-[#B8860B]">Logistics Solutions</span>
          </h1>
          <p className="text-xl text-gray-300 max-w-2xl mb-8">
            Seamless shipping, documentation, and delivery services to ensure
            your goods reach anywhere in the world safely and on time.
          </p>
          <div className="flex md:flex-row flex-col gap-4">
            <Link href="/contact">
              <Button
                size="lg"
                className="bg-[#B8860B] hover:bg-[#9A7209] text-white cursor-pointer"
              >
                Get Shipping Quote
                <ArrowRight className="ml-2" size={20} />
              </Button>
            </Link>
            <Link href="/products">
              <Button
                size="lg"
                variant="outline"
                className="border-white hover:bg-[#0B1C2D] hover:text-white text-[#0B1C2D] cursor-pointer"
              >
                View Products
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Key Advantages */}
      <section className="py-16 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <div className="grid md:grid-cols-4 gap-8">
            {[
              { icon: Globe, label: "Global Network", value: "50+ Countries" },
              { icon: Clock, label: "On-Time Delivery", value: "98% Rate" },
              {
                icon: Shield,
                label: "Cargo Insurance",
                value: "Full Coverage",
              },
              {
                icon: FileCheck,
                label: "Documentation",
                value: "100% Compliant",
              },
            ].map((stat, index) => (
              <div
                key={index}
                className="flex items-center gap-4 bg-white p-6 rounded-lg shadow-sm"
              >
                <div className="w-14 h-14 bg-[#B8860B]/10 rounded-full flex items-center justify-center">
                  <stat.icon className="text-[#B8860B]" size={28} />
                </div>
                <div>
                  <div className="text-2xl font-bold text-[#0B1C2D]">
                    {stat.value}
                  </div>
                  <div className="text-gray-600">{stat.label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="text-center mb-12">
            <Badge className="mb-4 bg-[#B8860B]/10 text-[#B8860B] hover:bg-[#B8860B]/20">
              Our Services
            </Badge>
            <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
              Comprehensive Shipping Solutions
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              From sea freight to last-mile delivery, we handle every aspect of
              your logistics needs with precision and care.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            {services.map((service, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-4 md:p-8">
                  <div className="flex md:flex-row flex-col items-start gap-4">
                    <div className="w-14 h-14 bg-[#0B1C2D] rounded-lg flex items-center justify-center shrink-0">
                      <service.icon className="text-[#B8860B]" size={28} />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-[#0B1C2D] mb-2">
                        {service.title}
                      </h3>
                      <p className="text-gray-600 mb-4">
                        {service.description}
                      </p>
                      <ul className="space-y-2">
                        {service.features.map((feature, idx) => (
                          <li
                            key={idx}
                            className="flex items-center gap-2 text-sm text-gray-600"
                          >
                            <CheckCircle className="text-green-500" size={16} />
                            {feature}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Documentation Services */}
      <section className="py-20 bg-[#0B1C2D]">
        <div className="max-w-360 mx-auto px-6">
          <div className="text-center mb-12">
            <Badge className="mb-4 bg-white/10 text-white hover:bg-white/20">
              Documentation
            </Badge>
            <h2 className="text-4xl font-bold text-white mb-4">
              Complete Export Documentation Support
            </h2>
            <p className="text-gray-300 max-w-2xl mx-auto">
              We handle all the paperwork so you can focus on your business.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {documentServices.map((service, index) => (
              <Card key={index} className="bg-white/5 border-white/10">
                <CardContent className="p-8">
                  <h3 className="text-xl font-bold text-white mb-4">
                    {service.title}
                  </h3>
                  <ul className="space-y-3">
                    {service.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-center gap-2 text-gray-300"
                      >
                        <CheckCircle className="text-[#B8860B]" size={16} />
                        {item}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Port Locations */}
      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="text-center mb-12">
            <Badge className="mb-4 bg-[#B8860B]/10 text-[#B8860B] hover:bg-[#B8860B]/20">
              Our Network
            </Badge>
            <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
              Key Port Locations
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Strategic access to major ports across India for efficient global
              shipping.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {portLocations.map((port, index) => (
              <Card key={index} className="hover:shadow-md transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-start gap-3">
                    <MapPin className="text-[#B8860B] mt-1" size={20} />
                    <div>
                      <h3 className="font-bold text-[#0B1C2D]">{port.name}</h3>
                      <p className="text-sm text-gray-600">{port.location}</p>
                      <Badge variant="outline" className="mt-2 text-xs">
                        {port.type} Port
                      </Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-linear-to-r from-[#B8860B] to-[#D4A846]">
        <div className="max-w-360 mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-white mb-4">
            Ready to Ship Your Products Globally?
          </h2>
          <p className="text-white/90 mb-8 max-w-2xl mx-auto">
            Get a customized logistics solution tailored to your specific
            requirements. Our team is ready to assist you 24/7.
          </p>
          <Link href="/contact">
            <Button
              size="lg"
              className="bg-[#0B1C2D] hover:bg-[#0B1C2D]/90 text-white cursor-pointer"
            >
              Request a Quote
              <ArrowRight className="ml-2" size={20} />
            </Button>
          </Link>
        </div>
      </section>
    </div>
  );
}