import Link from "next/link";

import { Card, CardContent } from "@/src/components/ui/card";
import { Button } from "@/src/components/ui/button";
import { Badge } from "@/src/components/ui/badge";
import { Target, Eye, Building2, Globe, Award, Leaf } from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About Us - Trusted Indian Export Company",
  description:
    "Learn Xpecto Global - a leading Indian export company with 10+ years of experience connecting certified manufacturers with global buyers. ISO certified, GMP aligned operations.",
  keywords: [
    "Xpecto Global",
    "Indian export company",
    "trusted exporter India",
    "B2B export partner",
    "manufacturing network India",
    "verified suppliers",
  ],
  alternates: {
    canonical: "/about-us",
  },
  openGraph: {
    title: "Xpecto Global - Trusted Indian Export Company",
    description:
      "Leading Indian export company with 10+ years of expertise connecting certified manufacturers with global buyers.",
    type: "website",
  },
};

export default function About() {
  const values = [
    {
      icon: Target,
      title: "Our Mission",
      description: "To deliver quality products, build long-term trade relationships, ensure transparent pricing, and maintain global compliance standards.",
    },
    {
      icon: Eye,
      title: "Our Vision",
      description: "To become a globally trusted export partner from India, recognized for excellence in compliance, quality, and customer service.",
    },
  ];

  const infrastructure = [
    { icon: Building2, title: "Supplier Network", description: "Pan-India network of verified manufacturers and suppliers across multiple industries" },
    { icon: Award, title: "Quality Inspection", description: "Third-party inspection partners ensuring product quality and compliance" },
    { icon: Globe, title: "Export Documentation", description: "Dedicated team managing all export paperwork and regulatory requirements" },
    { icon: Leaf, title: "Sustainability", description: "Commitment to ethical sourcing and environmentally responsible practices" },
  ];

  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">About Us</Badge>
          <h1 className="text-5xl font-bold text-[#ffffff] mb-6">Xpecto Global</h1>
          <p className="text-xl text-gray-300 max-w-3xl">
            A trusted Indian export company connecting manufacturers to global buyers with quality assurance and compliance standards
          </p>
        </div>
      </section>

      <section className="py-20">
        <div className="w-full mx-auto px-6">
          <div className="w-full">
            <h2 className="text-3xl font-bold text-[#0B1C2D] mb-6">Company Overview</h2>
            <div className="space-y-4 text-gray-600 leading-relaxed w-full md:w-4xl">
              <p>Xpecto Global was established to simplify international sourcing from India. With strong supplier networks and export expertise, we deliver consistent quality and reliable logistics worldwide.</p>
              <p>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>We provide enterprise buyers with audited supply options and fully documented export solutions aligned with USA and European trade standards. Our compliance-first approach ensures that every shipment meets regulatory requirements and quality benchmarks.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 bg-[#F5F7FA]">
        <div className="w-full mx-auto px-6">
          <div className="grid md:grid-cols-2 gap-8">
            {values.map((value, index) => {
              const Icon = value.icon;
              return (
                <Card key={index} className="border-0 shadow-lg">
                  <CardContent className="p-8">
                    <div className="w-16 h-16 bg-[#B8860B]/10 rounded-lg flex items-center justify-center mb-6">
                      <Icon className="text-[#B8860B]" size={32} />
                    </div>
                    <h3 className="text-2xl font-bold text-[#0B1C2D] mb-4">{value.title}</h3>
                    <p className="text-gray-600 leading-relaxed">{value.description}</p>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold text-[#0B1C2D] mb-4">{"Infrastructure & Capabilities"}</h2>
            <p className="text-gray-600 max-w-2xl mx-auto md:text-center text-left">Our robust infrastructure and partnerships enable seamless global trade operations</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {infrastructure.map((item, index) => {
              const Icon = item.icon;
              return (
                <div key={index} className="flex flex-col items-start md:items-center">
                  <div className="w-16 h-16 bg-[#B8860B]/10 rounded-lg flex items-center justify-center mb-4 mx-auto">
                    <Icon className="text-[#B8860B]" size={32} />
                  </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>
      </section>

      <section className="py-20 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <div className="max-w-4xl mx-auto text-center">
            <div className="w-16 h-16 bg-[#B8860B]/10 rounded-lg flex items-center justify-center mb-6 mx-auto">
              <Leaf className="text-[#B8860B]" size={32} />
            </div>
            <h2 className="text-3xl font-bold text-[#0B1C2D] mb-6">Sustainability Commitment</h2>
            <p className="text-gray-600 leading-relaxed mb-8">
              We promote ethical sourcing, fair labor practices, and environmentally responsible packaging. Our commitment to sustainability extends across our entire supply chain, ensuring that our trade practices contribute positively to both communities and the environment.
            </p>
            <div className="grid md:grid-cols-3 gap-6 text-left">
              <Card className="border-0">
                <CardContent className="p-6">
                  <h3 className="font-bold text-[#0B1C2D] mb-2">Ethical Sourcing</h3>
                  <p className="text-gray-600 text-sm">Verified manufacturers with fair labor practices</p>
                </CardContent>
              </Card>
              <Card className="border-0">
                <CardContent className="p-6">
                  <h3 className="font-bold text-[#0B1C2D] mb-2">Eco-Friendly Packaging</h3>
                  <p className="text-gray-600 text-sm">Sustainable packaging solutions for all shipments</p>
                </CardContent>
              </Card>
              <Card className="border-0">
                <CardContent className="p-6">
                  <h3 className="font-bold text-[#0B1C2D] mb-2">Carbon Footprint</h3>
                  <p className="text-gray-600 text-sm">Initiatives to reduce environmental impact</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 bg-[#0B1C2D] text-[#ffffff]">
        <div className="max-w-360 mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold mb-4">Partner With a Trusted Export Company</h2>
          <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
            {"Whether you're looking to import quality products or expand your manufacturing reach globally, we're here to help."}
          </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">Contact Our Team</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">View Products</Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}