import Link from "next/link";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import {
  Award,
  CheckCircle2,
  Globe,
  ShieldCheck,
  TrendingUp,
  Users,
  FileCheck,
  Ship,
  Timer,
} from "lucide-react";
import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title: "Xpecto Global - Trusted Import Export Partner from India",
  description:
    "Leading Indian export company connecting certified manufacturers with global buyers in USA, Europe & emerging markets. ISO certified, GMP aligned, FDA ready. Agricultural products, pharmaceuticals, textiles, auto parts & more.",
  keywords: [
    "Indian export company",
    "import export India",
    "global trade partner",
    "B2B export India",
    "agricultural exports",
    "pharmaceutical exports India",
    "textile exports",
    "auto parts export",
    "ISO certified exporter",
  ],
  alternates: {
    canonical: "/",
  },
  openGraph: {
    title: "Xpecto Global - Trusted Import Export Partner from India",
    description:
      "Leading Indian export company connecting certified manufacturers with global buyers. ISO certified, GMP aligned, FDA ready export solutions.",
    type: "website",
  },
};

// Home page JSON-LD schema
const homePageSchema = {
  "@context": "https://schema.org",
  "@type": "WebPage",
  name: "Xpecto Global - Home",
  description:
    "Leading Indian export company connecting certified manufacturers with global buyers in USA, Europe & emerging markets.",
  mainEntity: {
    "@type": "Organization",
    name: "Xpecto Global",
    description: "Trusted Import Export Partner from India",
    areaServed: ["US", "EU", "AE", "GB", "AU"],
    hasOfferCatalog: {
      "@type": "OfferCatalog",
      name: "Export Products",
      itemListElement: [
        {
          "@type": "Offer",
          itemOffered: { "@type": "Product", name: "Agricultural Products" },
        },
        {
          "@type": "Offer",
          itemOffered: { "@type": "Product", name: "Pharmaceutical Materials" },
        },
        {
          "@type": "Offer",
          itemOffered: { "@type": "Product", name: "Textile & Yarn" },
        },
        {
          "@type": "Offer",
          itemOffered: { "@type": "Product", name: "Industrial Raw Materials" },
        },
        {
          "@type": "Offer",
          itemOffered: { "@type": "Product", name: "Auto Parts" },
        },
        {
          "@type": "Offer",
          itemOffered: { "@type": "Product", name: "Cosmetics" },
        },
      ],
    },
  },
};

export default function Home() {
  const productCategories = [
    {
      title: "Agro Commodities",
      description:
        "Grains, pulses, spices & processed agro products with full traceability",
      image: "/images/home-product-1.jpg",
      link: "/products/agricultural-products",
    },
    {
      title: "Pharmaceutical Materials",
      description:
        "API intermediates & regulated raw materials with GMP support",
      image: "/images/home-product-2.jpg",
      link: "/products/pharmaceutical-materials",
    },
    {
      title: "Textile & Yarn",
      description:
        "Sustainable knits, woven fabrics & specialty yarns for global markets",
      image: "/images/home-product-3.jpg",
      link: "/products/textile-yarn",
    },
    {
      title: "Industrial Raw Materials",
      description:
        "High-quality industrial materials for manufacturing & production",
      image: "/images/home-product-4.jpg",
      link: "/products/industrial-materials",
    },
    {
      title: "Auto Parts",
      description: "OEM & aftermarket components with full batch traceability",
      image: "/images/home-product-5.jpg",
      link: "/products/auto-parts",
    },
    {
      title: "Cosmetics",
      description: "Finished goods & ingredients aligned with EU/FDA standards",
      image: "/images/home-product-6.jpg",
      link: "/products/cosmetics",
    },
  ];

  const whyChooseUs = [
    {
      icon: Users,
      title: "Verified Suppliers",
      description: "Strict supplier due diligence & certification verification",
    },
    {
      icon: FileCheck,
      title: "Compliance Documentation",
      description: "COA, MSDS, GMP & FDA-ready documentation support",
    },
    {
      icon: Ship,
      title: "Global Logistics Network",
      description: "35+ ports with integrated freight & customs handling",
    },
    {
      icon: TrendingUp,
      title: "Transparent Pricing",
      description: "Competitive rates with no hidden costs",
    },
    {
      icon: ShieldCheck,
      title: "ISO & GMP Standards",
      description: "ISO-aligned quality & regulatory checks",
    },
    {
      icon: Timer,
      title: "On-Time Delivery",
      description: "98% OTIF delivery performance record",
    },
  ];

  const exportProcess = [
    { step: "01", title: "Inquiry", description: "Submit your requirements" },
    { step: "02", title: "Quote", description: "Receive detailed quotation" },
    { step: "03", title: "Sampling", description: "Product samples & testing" },
    {
      step: "04",
      title: "Production",
      description: "Quality-controlled manufacturing",
    },
    {
      step: "05",
      title: "Documentation",
      description: "Complete export paperwork",
    },
    { step: "06", title: "Shipping", description: "Delivery to your location" },
  ];

  const certifications = [
    { name: "ISO Certified", icon: Award },
    { name: "GMP Aligned", icon: ShieldCheck },
    { name: "FDA Ready", icon: FileCheck },
    { name: "CE Compliance", icon: CheckCircle2 },
  ];

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(homePageSchema) }}
      />
      <div className="bg-[#ffffff]">
        {/* Hero Section */}
        <section className="relative h-200 md:h-150 flex items-center">
          <div className="absolute inset-0 pointer-events-none">
            <Image
              src="/images/hero.jpg"
              alt="Sample Image"
              width={500}
              height={300}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-linear-to-r from-[#0B1C2D]/95 to-[#0B1C2D]/70"></div>
          </div>
          <div className="relative z-10 max-w-360 mx-auto px-6 w-full">
            <div className="max-w-3xl">
              <h1 className="text-4xl md:text-6xl font-bold text-[#ffffff] mb-6">
                Global Import & Export Solutions
              </h1>
              <p className="text-xl text-gray-200 mb-8">
                Connecting certified Indian manufacturers with buyers in USA,
                Europe & emerging markets. Data-driven sourcing with
                compliance-first export logistics.
              </p>
              <div className="flex flex-wrap gap-4 mb-12">
                <Link href="/contact">
                  <Button
                    size="lg"
                    className="bg-[#B8860B] hover:bg-[#9A7209] text-[#ffffff] cursor-pointer"
                  >
                    Request a Quote
                  </Button>
                </Link>
                <Link href="/products">
                  <Button
                    size="lg"
                    variant="outline"
                    className="bg-[#ffffff]/10 border-[#ffffff] text-[#ffffff] hover:bg-[#ffffff] hover:text-[#0B1C2D] cursor-pointer"
                  >
                    Explore Products
                  </Button>
                </Link>
              </div>
              <div className="flex flex-wrap gap-8">
                <div className="text-[#ffffff]">
                  <div className="text-3xl font-bold">10+</div>
                  <div className="text-sm text-gray-300">Years Experience</div>
                </div>
                <div className="text-[#ffffff]">
                  <div className="text-3xl font-bold">35+</div>
                  <div className="text-sm text-gray-300">Global Ports</div>
                </div>
                <div className="text-[#ffffff]">
                  <div className="text-3xl font-bold">98%</div>
                  <div className="text-sm text-gray-300">On-Time Delivery</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* About Snapshot */}
        <section className="py-20 bg-[#ffffff]">
          <div className="max-w-360 mx-auto px-6">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <Badge className="mb-4 bg-[#B8860B]/10 text-[#B8860B] hover:bg-[#B8860B]/20">
                  Xpecto Global
                </Badge>
                <h2 className="text-4xl font-bold text-[#0B1C2D] mb-6">
                  Trusted Global Trade Partner from India
                </h2>
                <p className="text-gray-600 mb-6 leading-relaxed">
                  Xpecto Global brings over a decade of expertise in global
                  import-export, combining data-driven sourcing, compliance-led
                  documentation frameworks, and a verified manufacturing
                  network.
                </p>
                <p className="text-gray-600 mb-8 leading-relaxed">
                  We provide enterprise buyers with audited supply options and
                  fully documented export solutions aligned with USA and
                  European trade standards.
                </p>
                <Link href="/about-us">
                  <Button
                    variant="outline"
                    className="border-[#0B1C2D] text-[#0B1C2D] hover:bg-[#0B1C2D] hover:text-[#ffffff] cursor-pointer"
                  >
                    Learn More About Us
                  </Button>
                </Link>
              </div>
              <div className="relative h-100 rounded-lg overflow-hidden shadow-lg">
                <Image
                  src="/images/home-about-left-1.jpg"
                  alt="Sample Image"
                  width={500}
                  height={300}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Product Categories */}
        <section className="py-20 bg-[#F5F7FA]">
          <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 Products
              </Badge>
              <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
                Diversified Export Product Segments
              </h2>
              <p className="text-gray-600 max-w-2xl mx-auto">
                Trade-ready goods with origin traceability, compliance reports
                such as COA, MSDS and regulatory alignment for global markets.
              </p>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {productCategories.map((category, index) => (
                <Card
                  key={index}
                  className="group hover:shadow-xl transition-all duration-300 border-0 overflow-hidden"
                >
                  <div className="relative h-48 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]/60 to-transparent pointer-events-none"></div>
                  </div>
                  <CardContent className="p-6">
                    <h3 className="text-xl font-bold text-[#0B1C2D] mb-2">
                      {category.title}
                    </h3>
                    <p className="text-gray-600 mb-4 text-sm leading-relaxed">
                      {category.description}
                    </p>
                    <Link href={category.link}>
                      <Button
                        variant="ghost"
                        className="text-[#B8860B] hover:text-[#9A7209] hover:bg-[#B8860B]/10 px-2 cursor-pointer"
                      >
                        {"View Products →"}
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Why Choose Us */}
        <section className="py-20 bg-[#ffffff]">
          <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">
                Why Choose Us
              </Badge>
              <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
                Your Compliance-First Global Trade Partner
              </h2>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {whyChooseUs.map((item, index) => {
                const Icon = item.icon;
                return (
                  <div key={index} className="flex gap-4">
                    <div className="shrink-0 w-12 h-12 bg-[#B8860B]/10 rounded-lg flex items-center justify-center">
                      <Icon className="text-[#B8860B]" size={24} />
                    </div>
                    <div>
                      <h3 className="font-bold text-[#0B1C2D] mb-2">
                        {item.title}
                      </h3>
                      <p className="text-gray-600 text-sm">
                        {item.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Export Process */}
        <section className="py-20 bg-[#F5F7FA]">
          <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 Process
              </Badge>
              <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
                6-Step Export Process
              </h2>
            </div>
            <div className="grid md:grid-cols-3 lg:grid-cols-6 gap-6">
              {exportProcess.map((step, index) => (
                <Card
                  key={index}
                  className="text-center border-0 shadow-md hover:shadow-lg transition-shadow"
                >
                  <CardContent className="p-6">
                    <div className="w-12 h-12 bg-[#B8860B] text-[#ffffff] rounded-full flex items-center justify-center font-bold text-lg mx-auto mb-3">
                      {step.step}
                    </div>
                    <h3 className="font-bold text-[#0B1C2D] mb-2">
                      {step.title}
                    </h3>
                    <p className="text-gray-600 text-sm">{step.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Certifications */}
        <section className="py-20 bg-[#ffffff]">
          <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">
                Certifications
              </Badge>
              <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
                Export Certifications & Global Standards
              </h2>
              <p className="text-gray-600 max-w-2xl mx-auto">
                We comply with Indian and international export regulations
                including IEC registration, GST, FSSAI, and international
                quality standards.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              {certifications.map((cert, index) => {
                const Icon = cert.icon;
                return (
                  <Card
                    key={index}
                    className="border-2 border-gray-200 hover:border-[#B8860B] transition-colors"
                  >
                    <CardContent className="p-6 text-center">
                      <Icon className="text-[#B8860B] mx-auto mb-3" size={32} />
                      <h3 className="font-bold text-[#0B1C2D]">{cert.name}</h3>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
            <div className="text-center mt-8">
              <Link href="/certifications">
                <Button
                  variant="outline"
                  className="border-[#0B1C2D] text-[#0B1C2D] duration-300 ease-linear hover:bg-[#0B1C2D] hover:text-[#ffffff] cursor-pointer"
                >
                  View All Certifications
                </Button>
              </Link>
            </div>
          </div>
        </section>

        {/* Global Presence */}
        <section className="py-20 bg-[#0B1C2D] text-[#ffffff]">
          <div className="max-w-360 mx-auto px-6">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <Badge className="mb-4 bg-[#ffffff]/10 text-[#ffffff] hover:bg-[#ffffff]/20">
                  Global Reach
                </Badge>
                <h2 className="text-4xl font-bold mb-6">
                  Active Trade Lanes Across Major Markets
                </h2>
                <p className="text-gray-300 mb-6 leading-relaxed">
                  We support buyers with localized compliance guidance and
                  logistics support for each region.
                </p>
                <div className="grid grid-cols-2 gap-4 mb-8">
                  <div className="flex items-center gap-2">
                    <Globe className="text-[#B8860B]" size={20} />
                    <span>USA</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Globe className="text-[#B8860B]" size={20} />
                    <span>Europe</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Globe className="text-[#B8860B]" size={20} />
                    <span>Middle East</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Globe className="text-[#B8860B]" size={20} />
                    <span>Asia</span>
                  </div>
                </div>
              </div>
              <div className="relative h-100 rounded-lg overflow-hidden">
                <Image
                  src="/images/footer-above.jpg"
                  alt="Sample Image"
                  width={500}
                  height={300}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 bg-[#F5F7FA]">
          <div className="max-w-360 mx-auto md: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-4xl font-bold mb-4">
                  Ready to Secure Verified Global Supply?
                </h2>
                <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
                  Share your sourcing requirements and compliance targets — our
                  trade desk provides a qualified proposal within 24-48 hours.
                </p>
                <div className="flex flex-wrap gap-4 justify-center">
                  <Link href="/contact">
                    <Button
                      size="lg"
                      className="bg-[#B8860B] hover:bg-[#9A7209] text-[#ffffff] cursor-pointer"
                    >
                      Request a Trade Proposal
                    </Button>
                  </Link>
                  <Link href="/for-buyers">
                    <Button
                      size="lg"
                      variant="outline"
                      className="bg-[#ffffff]/10 border-[#ffffff] text-[#ffffff] hover:bg-[#ffffff] hover:text-[#0B1C2D] cursor-pointer"
                    >
                      Buyer Information Guide
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>
      </div>
    </>
  );
}