"use client";

import Link from "next/link"

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { CheckCircle } from "lucide-react";

const features = [
  "100% Export Oriented Manufacturing",
  "State-of-the-Art Production Facilities",
  "Experienced & Skilled Workforce",
  "Quality Control at Every Stage",
  "On-Time Delivery Commitment",
  "Sustainable Manufacturing Practices",
];

export function AboutSection() {
  return (
    <section id="about" 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>
            <p className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
              About Us
            </p>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 text-balance">
              A Legacy of Excellence in Knitwear Manufacturing
            </h2>
            <p className="text-lg text-muted-foreground leading-relaxed mb-6">
              BD Knit Design Ltd. is a proud sister concern of Polestar Group, 
              established with a vision to become a leading name in the global 
              knitwear industry. Located in Sharifpur, Gazipur, Bangladesh, we 
              operate a 100% export-oriented facility equipped with modern 
              machinery and technology.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed mb-8">
              Our commitment to quality, timely delivery, and customer satisfaction 
              has earned us the trust of renowned international brands. We specialize 
              in producing high-quality knitwear including T-shirts, Polo shirts, 
              Sweatshirts, Hoodies, and various other knitted garments.
            </p>
            
            <ul className="grid sm:grid-cols-2 gap-3 mb-8">
              {features.map((feature) => (
                <li key={feature} className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                  <span className="text-foreground text-sm">{feature}</span>
                </li>
              ))}
            </ul>

            <Button 
              variant="outline" 
              size="lg" 
              onClick={() => {
                const element = document.getElementById("profile");
                if (element) {
                  const headerOffset = 80;
                  const elementPosition = element.getBoundingClientRect().top;
                  const offsetPosition = elementPosition + window.scrollY - headerOffset;
                  window.scrollTo({ top: offsetPosition, behavior: "smooth" });
                }
              }}
            >
              View Our Profile
            </Button>
          </div>

          <div className="grid gap-4">
            <div className="relative aspect-[4/3] rounded-lg overflow-hidden group">
              <Image
                src="/images/about-team.jpg"
                alt="BD Knit Design Ltd. Team"
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-110"
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="relative aspect-square rounded-lg overflow-hidden group">
                <Image
                  src="/images/production.jpg"
                  alt="Production Line"
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
              </div>
              <div className="relative aspect-square rounded-lg overflow-hidden group">
                <Image
                  src="/images/quality-control.jpg"
                  alt="Quality Control"
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
