import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { CTASection } from "@/components/CTASection";
import { LoadMeterSection } from "@/components/LoadMeterSection";
import Image from "next/image";
import { cn } from "@/lib/utils";
import { Metadata } from "next";
import { FLEET_ITEMS } from "@/lib/data";

export const metadata: Metadata = {
  title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
  description: "300 tondan 500 tona kadar mobil vinçler, sepetli platformlar ve hiyap vinçlerden oluşan modern araç filomuzla hizmetinizdeyiz.",
};

const FLEET_CATEGORIES = ["Hepsi", "Mobil Vinç", "Sepetli Platform", "Hiyap", "Kule Vinç"];

export default function FleetPage() {
  return (
    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
      <Navbar />
      
      {/* Hero Section */}
      <header className="relative h-[70vh] flex items-end overflow-hidden bg-surface-container-lowest">
        <div className="absolute inset-0 z-0">
          <Image 
            src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
            alt="Heavy crane"
            fill
            className="object-cover grayscale opacity-60"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
        </div>
        <div className="relative z-10 w-full px-8 pb-16">
          <div className="max-w-7xl mx-auto">
            <span className="text-primary font-headline font-bold text-sm tracking-[0.3em] uppercase mb-4 block">
              PREZİSYONEL GÜÇ
            </span>
            <h1 className="text-6xl md:text-8xl font-black text-on-surface uppercase tracking-tighter leading-none mb-6">
              MAKİNE <br/><span className="text-primary">PARKURUMUZ</span>
            </h1>
            <div className="w-24 h-2 bg-primary"></div>
          </div>
        </div>
      </header>

      {/* Filter System */}
      <section className="bg-surface-container border-y border-outline-variant/10">
        <div className="max-w-7xl mx-auto px-8 py-6">
          <div className="flex flex-wrap items-center gap-4">
            <span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
            {FLEET_CATEGORIES.map((category, index) => (
              <button 
                key={index}
                className={cn(
                  "px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
                  index === 0 
                    ? "bg-primary text-on-primary" 
                    : "bg-surface-container-highest text-on-surface-variant hover:text-primary"
                )}
              >
                {category}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Fleet Grid */}
      <section className="max-w-7xl mx-auto px-8 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
          {FLEET_ITEMS.map((item, index) => (
            <div 
              key={index}
              className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
            >
              <div className="aspect-[4/3] overflow-hidden relative">
                <Image 
                  src={item.image}
                  alt={item.name}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className={cn(
                  "absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
                  item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
                )}>
                  {item.status}
                </div>
              </div>
              <div className="p-8 flex-1 flex flex-col">
                <h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
                  {item.name}
                </h3>
                <p className="text-on-surface-variant text-sm mb-6 font-light">
                  {item.description}
                </p>
                <div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
                  <div>
                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
                    <span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
                  </div>
                  <div>
                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
                    <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
                  </div>
                </div>
                <button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
                  İncele
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      <LoadMeterSection />
      <CTASection />
      <Footer />
      <FloatingWhatsApp />
    </main>
  );
}