import Image from "next/image";
import { Globe, Users, Handshake, TrendingUp } from "lucide-react";

const stats = [
  { icon: Globe, value: "20+", label: "Countries Served" },
  { icon: Users, value: "50+", label: "Global Clients" },
  { icon: Handshake, value: "15+", label: "Years Partnership" },
  { icon: TrendingUp, value: "98%", label: "Client Retention" },
];

const regions = [
  { name: "Europe", countries: "Germany, UK, France, Netherlands, Spain, Italy, Denmark, Sweden" },
  { name: "North America", countries: "USA, Canada" },
  { name: "Asia Pacific", countries: "Australia, Japan, South Korea" },
  { name: "Middle East", countries: "UAE, Saudi Arabia" },
];

export function CustomersSection() {
  return (
    <section id="customers" className="py-20 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="relative aspect-[4/3] rounded-lg overflow-hidden group">
            <Image
              src="/images/global-partners.jpg"
              alt="BD Knit Design Ltd. Global Partners"
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-110"
            />
          </div>

          <div>
            <p className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
              Our Customers
            </p>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 text-balance">
              Trusted by Leading Global Brands
            </h2>
            <p className="text-lg text-muted-foreground leading-relaxed mb-8">
              BD Knit Design Ltd. proudly serves renowned fashion brands and retailers 
              across the globe. Our commitment to quality, competitive pricing, and 
              on-time delivery has made us a preferred manufacturing partner for 
              international buyers.
            </p>

            <div className="grid grid-cols-2 gap-6 mb-8">
              {stats.map((stat) => (
                <div key={stat.label} className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <stat.icon className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <p className="text-2xl font-bold text-foreground">{stat.value}</p>
                    <p className="text-sm text-muted-foreground">{stat.label}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-16">
          <h3 className="text-xl font-semibold text-foreground mb-6 text-center">
            Our Export Destinations
          </h3>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {regions.map((region) => (
              <div
                key={region.name}
                className="p-6 bg-card border border-border rounded-lg"
              >
                <h4 className="font-semibold text-foreground mb-2">{region.name}</h4>
                <p className="text-sm text-muted-foreground">{region.countries}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
