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 { Metadata } from "next";
import { FLEET_ITEMS } from "@/lib/data";
import { FleetList } from "@/components/FleetList";

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-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
            alt="Heavy crane"
            fill
            sizes="100vw"
            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>

      <FleetList items={FLEET_ITEMS} categories={FLEET_CATEGORIES} />

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