import Link from "next/link";
import { Badge } from "@/src/components/ui/badge";
import { Button } from "@/src/components/ui/button";
import { Card, CardContent } from "@/src/components/ui/card";
import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title:
    "Export Products from India - Agricultural, Pharmaceutical, Textile & More",
  description:
    "Browse our comprehensive range of export products from India including agricultural commodities, pharmaceutical materials, textiles, auto parts, cosmetics & industrial materials. All products meet international quality standards.",
  keywords: [
    "export products India",
    "agricultural exports",
    "pharmaceutical exports India",
    "textile exports",
    "auto parts export",
    "cosmetics export India",
    "industrial materials",
    "Indian manufacturers",
    "B2B products",
  ],
  alternates: {
    canonical: "/products",
  },
  openGraph: {
    title: "Export Products from India - Xpecto Global",
    description:
      "Browse our comprehensive range of export products from India. Agricultural, pharmaceutical, textile, auto parts & more.",
    type: "website",
  },
};

export default function Products() {
  const categories = [
    {
      title: "Agricultural Products",
      slug: "agricultural-products",
      description:
        "High-quality agricultural products sourced directly from certified Indian farms and processing units meeting international export standards.",
      products: [
        "Basmati Rice",
        "Non-Basmati Rice",
        "Pulses",
        "Wheat",
        "Maize",
        "Spices",
      ],
      image: "/images/product-1.jpg",
    },
    {
      title: "Pharmaceutical Materials",
      slug: "pharmaceutical-materials",
      description:
        "API intermediates and regulated raw materials with comprehensive GMP support and compliance documentation for global pharmaceutical industries.",
      products: [
        "API Intermediates",
        "Excipients",
        "Active Ingredients",
        "Raw Materials",
      ],
      image: "/images/product-2.jpg",
    },
    {
      title: "Textile & Yarn",
      slug: "textile-yarn",
      description:
        "Sustainable knits, woven fabrics, and specialty yarns manufactured to meet global quality standards and buyer specifications.",
      products: [
        "Cotton Yarn",
        "Synthetic Fabrics",
        "Knitted Textiles",
        "Woven Fabrics",
        "Specialty Yarns",
      ],
      image: "/images/product-3.jpg",
    },
    {
      title: "Paper & Pulp",
      slug: "paper-pulp",
      description:
        "Industrial paper, kraft, and packaging grades for commercial and industrial applications worldwide.",
      products: [
        "Kraft Paper",
        "Industrial Paper",
        "Packaging Materials",
        "Pulp Products",
      ],
      image: "/images/product-4.jpg",
    },
    {
      title: "Industrial Raw Materials",
      slug: "industrial-materials",
      description:
        "High-quality industrial materials for manufacturing and production processes across various industries.",
      products: ["Chemicals", "Polymers", "Minerals", "Industrial Supplies"],
      image: "/images/product-5.jpg",
    },
    {
      title: "Auto Parts",
      slug: "auto-parts",
      description:
        "OEM and aftermarket automotive components with full batch traceability and quality certifications.",
      products: [
        "Engine Components",
        "Body Parts",
        "Electrical Components",
        "Aftermarket Parts",
      ],
      image: "/images/product-6.jpg",
    },
    {
      title: "Cosmetics & Personal Care",
      slug: "cosmetics",
      description:
        "Finished goods and ingredients aligned with EU and FDA standards for global cosmetics markets.",
      products: [
        "Skincare Ingredients",
        "Cosmetic Raw Materials",
        "Finished Products",
        "Personal Care Items",
      ],
      image: "/images/product-7.jpg",
    },
    {
      title: "FMCG Products",
      slug: "fmcg",
      description:
        "Fast-moving consumer goods for retail and wholesale distribution across global markets.",
      products: [
        "Food Products",
        "Beverages",
        "Personal Care",
        "Household Items",
      ],
      image: "/images/product-8.jpg",
    },
  ];

  return (
    <div className="bg-[#ffffff]">
      <section className="relative h-100 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-[#ffffff]/10 text-[#ffffff] hover:bg-[#ffffff]/20">
            Our Products
          </Badge>
          <h1 className="text-5xl font-bold text-[#ffffff] mb-6">
            Export Products from India
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl">
            Explore our wide range of export products with full compliance and
            traceability. All products meet international export standards.
          </p>
        </div>
      </section>

      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="mb-12">
            <p className="text-gray-600 leading-relaxed max-w-4xl">
              {
                "We supply high-quality products with supply chain traceability, origin documentation, and global export readiness — a requirement for enterprise importers."
              }
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {categories.map((category, index) => (
              <Card
                key={index}
                className="group hover:shadow-xl transition-all duration-300 border-0 overflow-hidden"
              >
                <div className="relative h-56 overflow-hidden">
                  <Image
                    src={category.image}
                    alt={category.title}
                    width={500}
                    height={300}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-[#000000]/80 via-[#000000]/40 to-transparent pointer-events-none"></div>
                  <div className="absolute bottom-4 left-4 right-4">
                    <h3 className="text-2xl font-bold text-[#ffffff]">
                      {category.title}
                    </h3>
                  </div>
                </div>
                <CardContent className="p-6">
                  <p className="text-gray-600 mb-4 text-sm leading-relaxed">
                    {category.description}
                  </p>
                  <div className="mb-4">
                    <h4 className="text-sm font-semibold text-[#0B1C2D] mb-2">
                      Products Include:
                    </h4>
                    <div className="flex flex-wrap gap-2">
                      {category.products.slice(0, 4).map((product, idx) => (
                        <Badge
                          key={idx}
                          variant="secondary"
                          className="text-xs"
                        >
                          {product}
                        </Badge>
                      ))}
                    </div>
                  </div>
                  <Link href={`/products/${category.slug}/basmati-rice`}>
                    <Button className="w-full bg-[#B8860B] hover:bg-[#9A7209] text-[#ffffff] cursor-pointer">
                      View Products
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <Card className="bg-linear-to-r from-[#0B1C2D] to-[#1a3a52] border-0 text-[#ffffff]">
            <CardContent className="p-6 md:p-12 text-center">
              <h2 className="text-3xl font-bold mb-4">
                Need a Custom Product Quotation?
              </h2>
              <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
                Our trade team can provide detailed specifications, pricing, and
                compliance documentation for any product.
              </p>
              <Link href="/contact">
                <Button
                  size="lg"
                  className="bg-[#B8860B] hover:bg-[#9A7209] text-[#ffffff] cursor-pointer"
                >
                  Request Product Quote
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  );
}