import Image from "next/image";
import { Factory, Users, Ruler, Clock, Package, Shirt } from "lucide-react";

const companyInfo = [
  { icon: Factory, label: "Factory Area", value: "50,000+ sq. ft." },
  { icon: Users, label: "Total Employees", value: "1,000+" },
  { icon: Ruler, label: "Production Lines", value: "25+ Lines" },
  { icon: Clock, label: "Monthly Capacity", value: "500,000 pcs" },
];

const products = [
  "T-Shirts",
  "Polo Shirts",
  "Sweatshirts",
  "Hoodies",
  "Tank Tops",
  "Joggers",
  "Shorts",
  "Kids Wear",
];

export function ProfileSection() {
  return (
    <section id="profile" className="py-20 bg-muted">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <p className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
            Our Profile
          </p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-4 text-balance">
            Company Overview
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            A comprehensive look at BD Knit Design Ltd. - our facilities, 
            capabilities, and product range.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-12 items-start">
          <div>
            <div className="relative aspect-video rounded-lg overflow-hidden mb-8 group">
              <Image
                src="/images/company-building.jpg"
                alt="BD Knit Design Ltd. Factory Building"
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-110"
              />
            </div>

            <div className="bg-card border border-border rounded-lg p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <Factory className="w-5 h-5 text-primary" />
                Company Information
              </h3>
              <div className="space-y-3">
                <div className="flex justify-between border-b border-border pb-2">
                  <span className="text-muted-foreground">Company Name</span>
                  <span className="font-medium text-foreground">BD Knit Design Ltd.</span>
                </div>
                <div className="flex justify-between border-b border-border pb-2">
                  <span className="text-muted-foreground">Parent Company</span>
                  <span className="font-medium text-foreground">Polestar Group</span>
                </div>
                <div className="flex justify-between border-b border-border pb-2">
                  <span className="text-muted-foreground">Type</span>
                  <span className="font-medium text-foreground">100% Export Oriented</span>
                </div>
                <div className="flex justify-between border-b border-border pb-2">
                  <span className="text-muted-foreground">Industry</span>
                  <span className="font-medium text-foreground">Knitwear Manufacturing</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Location</span>
                  <span className="font-medium text-foreground text-right">Gazipur, Bangladesh</span>
                </div>
              </div>
            </div>
          </div>

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

            <div className="bg-card border border-border rounded-lg p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <Shirt className="w-5 h-5 text-primary" />
                Product Range
              </h3>
              <div className="flex flex-wrap gap-2">
                {products.map((product) => (
                  <span
                    key={product}
                    className="px-4 py-2 bg-muted text-foreground text-sm rounded-full border border-border"
                  >
                    {product}
                  </span>
                ))}
              </div>
            </div>

            <div className="mt-6 bg-card border border-border rounded-lg p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <Package className="w-5 h-5 text-primary" />
                Our Capabilities
              </h3>
              <ul className="space-y-2 text-muted-foreground">
                <li className="flex items-center gap-2">
                  <span className="w-2 h-2 bg-primary rounded-full" />
                  Knitting, Dyeing & Finishing
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-2 h-2 bg-primary rounded-full" />
                  Cutting, Sewing & Quality Control
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-2 h-2 bg-primary rounded-full" />
                  Printing (Screen, Sublimation, Digital)
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-2 h-2 bg-primary rounded-full" />
                  Embroidery & Special Finishes
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-2 h-2 bg-primary rounded-full" />
                  Packaging & Shipping
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
