import { Badge } from "@/src/components/ui/badge";
import { Card, CardContent } from "@/src/components/ui/card";
import {
  Shield,
  Award,
  CheckCircle,
  FileCheck,
  Globe,
  Leaf,
  Users,
  Building,
} from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Export Certifications & Quality Standards - ISO, GMP, FDA Ready",
  description:
    "Our export certifications include ISO 9001:2015, GMP compliance, FDA readiness, FSSAI, IEC registration. We ensure all products meet international quality and regulatory standards.",
  keywords: [
    "export certifications India",
    "ISO certified exporter",
    "GMP compliance",
    "FDA ready products",
    "FSSAI certification",
    "quality standards",
    "international certifications",
    "export regulations",
  ],
  alternates: {
    canonical: "/certifications",
  },
  openGraph: {
    title: "Export Certifications & Quality Standards - Xpecto Global",
    description:
      "ISO 9001:2015, GMP compliance, FDA readiness. All products meet international quality standards.",
    type: "website",
  },
};

export default function Certifications() {
  const certifications = [
    {
      icon: Shield,
      title: "ISO 9001:2015",
      category: "Quality Management",
      description:
        "International standard for quality management systems ensuring consistent quality in all our operations.",
      benefits: [
        "Consistent product quality",
        "Customer satisfaction focus",
        "Continuous improvement",
        "Process efficiency",
      ],
    },
    {
      icon: FileCheck,
      title: "FSSAI License",
      category: "Food Safety",
      description:
        "Food Safety and Standards Authority of India certification for food product handling and export.",
      benefits: [
        "Food safety compliance",
        "Hygienic handling",
        "Traceability",
        "Consumer protection",
      ],
    },
    {
      icon: Globe,
      title: "APEDA Registration",
      category: "Export Authority",
      description:
        "Agricultural and Processed Food Products Export Development Authority registration for agricultural exports.",
      benefits: [
        "Agricultural export authorization",
        "Market access support",
        "Quality standards",
        "Export promotion",
      ],
    },
    {
      icon: Leaf,
      title: "Organic Certification",
      category: "Organic Products",
      description:
        "Certification for organic products meeting international organic standards for select product lines.",
      benefits: [
        "Organic integrity",
        "Chemical-free assurance",
        "Environmental sustainability",
        "Premium market access",
      ],
    },
    {
      icon: Award,
      title: "Spices Board Registration",
      category: "Spice Exports",
      description:
        "Registration with Spices Board of India for export of quality spices meeting international standards.",
      benefits: [
        "Quality assurance",
        "Export eligibility",
        "Brand certification",
        "Market credibility",
      ],
    },
    {
      icon: Building,
      title: "DGFT IEC",
      category: "Trade License",
      description:
        "Import Export Code from Directorate General of Foreign Trade enabling international trade operations.",
      benefits: [
        "Legal trade authorization",
        "Global market access",
        "Customs clearance",
        "Banking facilities",
      ],
    },
  ];

  const complianceAreas = [
    {
      title: "Product Quality",
      items: [
        "Raw material inspection",
        "In-process quality checks",
        "Final product testing",
        "Batch documentation",
      ],
    },
    {
      title: "Food Safety",
      items: [
        "HACCP principles",
        "Contamination prevention",
        "Temperature control",
        "Allergen management",
      ],
    },
    {
      title: "Traceability",
      items: [
        "Origin tracking",
        "Supply chain visibility",
        "Batch coding",
        "Recall procedures",
      ],
    },
    {
      title: "Documentation",
      items: [
        "Certificate of Analysis",
        "Test reports",
        "Compliance certificates",
        "Audit reports",
      ],
    },
  ];

  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">
            Quality Assurance
          </Badge>
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 max-w-3xl">
            Certified for{" "}
            <span className="text-[#B8860B]">Global Excellence</span>
          </h1>
          <p className="text-xl text-gray-300 max-w-2xl">
            Our certifications reflect our commitment to quality, safety, and
            compliance in international trade operations.
          </p>
        </div>
      </section>

      {/* Trust Indicators */}
      <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: Shield, label: "Certifications", value: "6+" },
              { icon: Users, label: "Audits Passed", value: "50+" },
              { icon: Globe, label: "Countries Approved", value: "30+" },
              { icon: CheckCircle, label: "Compliance Rate", value: "100%" },
            ].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>

      {/* Certifications 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 Certifications
            </Badge>
            <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">
              Internationally Recognized Standards
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              We maintain the highest standards of quality and compliance
              through rigorous certification processes.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {certifications.map((cert, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-8">
                  <div className="w-14 h-14 bg-[#0B1C2D] rounded-lg flex items-center justify-center mb-4">
                    <cert.icon className="text-[#B8860B]" size={28} />
                  </div>
                  <Badge
                    variant="outline"
                    className="mb-3 text-[#B8860B] border-[#B8860B]"
                  >
                    {cert.category}
                  </Badge>
                  <h3 className="text-xl font-bold text-[#0B1C2D] mb-2">
                    {cert.title}
                  </h3>
                  <p className="text-gray-600 mb-4 text-sm">
                    {cert.description}
                  </p>
                  <ul className="space-y-2">
                    {cert.benefits.map((benefit, idx) => (
                      <li
                        key={idx}
                        className="flex items-center gap-2 text-sm text-gray-600"
                      >
                        <CheckCircle className="text-green-500" size={14} />
                        {benefit}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Compliance Framework */}
      <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">
              Quality Framework
            </Badge>
            <h2 className="text-4xl font-bold text-white mb-4">
              Our Compliance Framework
            </h2>
            <p className="text-gray-300 max-w-2xl mx-auto">
              A comprehensive approach to quality management and regulatory
              compliance.
            </p>
          </div>
          <div className="grid md:grid-cols-4 gap-8">
            {complianceAreas.map((area, 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">
                    {area.title}
                  </h3>
                  <ul className="space-y-3">
                    {area.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-center gap-2 text-gray-300 text-sm"
                      >
                        <CheckCircle className="text-[#B8860B]" size={14} />
                        {item}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Quality Commitment */}
      <section className="py-20">
        <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">
                Our Promise
              </Badge>
              <h2 className="text-4xl font-bold text-[#0B1C2D] mb-6">
                Committed to Quality Excellence
              </h2>
              <p className="text-gray-600 mb-6">
                At Xpecto Global, quality is not just a certification—it's our
                culture. We continuously invest in improving our processes,
                training our team, and upgrading our facilities to meet evolving
                global standards.
              </p>
              <ul className="space-y-4">
                {[
                  "Regular internal and external audits",
                  "Continuous staff training programs",
                  "Investment in quality testing equipment",
                  "Partnership with accredited laboratories",
                  "Customer feedback integration",
                ].map((item, index) => (
                  <li
                    key={index}
                    className="flex items-center gap-3 text-gray-700"
                  >
                    <CheckCircle className="text-green-500" size={20} />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="bg-[#F5F7FA] p-8 rounded-lg">
              <h3 className="text-2xl font-bold text-[#0B1C2D] mb-6">
                Quality Assurance Process
              </h3>
              <div className="space-y-6">
                {[
                  {
                    step: "01",
                    title: "Supplier Verification",
                    desc: "Rigorous vetting of all suppliers and manufacturers",
                  },
                  {
                    step: "02",
                    title: "Product Testing",
                    desc: "Comprehensive testing at accredited laboratories",
                  },
                  {
                    step: "03",
                    title: "Documentation Review",
                    desc: "Thorough verification of all compliance documents",
                  },
                  {
                    step: "04",
                    title: "Pre-Shipment Inspection",
                    desc: "Final quality check before dispatch",
                  },
                ].map((item, index) => (
                  <div key={index} className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-[#B8860B] rounded-full flex items-center justify-center text-white font-bold shrink-0">
                      {item.step}
                    </div>
                    <div>
                      <h4 className="font-bold text-[#0B1C2D]">{item.title}</h4>
                      <p className="text-sm text-gray-600">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}