import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { CTASection } from "@/components/CTASection";
import { Settings, ArrowUp, Truck, Compass, ArrowRight, Shield, Zap, Clock } from "lucide-react";
import Image from "next/image";
import { cn } from "@/lib/utils";
import { Metadata } from "next";
import { SERVICES } from "@/lib/data";

export const metadata: Metadata = {
  title: "Muğla Vinç Kiralama ve Ağır Nakliyat Hizmetleri",
  description: "Dalaman merkezli 500 tona kadar mobil vinç kiralama, sepetli platform, ağır nakliyat ve proje taşımacılığı. Ege Bölgesi ve Türkiye geneli profesyonel çözümler.",
  keywords: ["muğla vinç kiralama", "dalaman vinç kiralama", "sepetli platform", "ağır nakliyat muğla", "proje taşımacılığı", "fethiye vinç", "ortaca vinç"],
};

const FEATURES = [
  {
    id: "01",
    title: "Hassas Mühendislik",
    description: "Her kaldırma operasyonu için detaylı simülasyon ve planlama.",
    icon: <Shield className="w-6 h-6" />
  },
  {
    id: "02",
    title: "Sertifikalı Operatörler",
    description: "Uluslararası standartlarda eğitim almış uzman teknik ekip.",
    icon: <Zap className="w-6 h-6" />
  },
  {
    id: "03",
    title: "7/24 Teknik Destek",
    description: "Kesintisiz operasyon için anında müdahale ve destek hizmeti.",
    icon: <Clock className="w-6 h-6" />
  }
];

const STATS = [
  { label: "Max Kapasite", value: "500T", highlighted: true },
  { label: "Yıllık Deneyim", value: "15+", highlighted: false },
  { label: "İş Güvenliği", value: "100%", highlighted: false },
  { label: "Aktif Operasyon", value: "24/7", highlighted: true }
];

export default function ServicesPage() {
  return (
    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
      <Navbar />
      
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
        <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="Cranes at sunset"
            fill
            className="object-cover opacity-40 grayscale"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
        </div>
        <div className="relative z-10 max-w-4xl">
          <p className="text-primary font-headline font-bold tracking-[0.2em] uppercase mb-4 text-sm">
            Endüstriyel Güç ve Mühendislik Çözümleri
          </p>
          <h1 className="text-7xl md:text-9xl font-black font-headline tracking-tighter text-on-surface leading-[0.9] uppercase">
            Hizmetlerimiz
          </h1>
          <div className="mt-8 flex gap-4">
            <div className="h-1 w-24 bg-primary"></div>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-24 px-8 md:px-16 bg-surface">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
          {SERVICES.map((service, index) => (
            <div 
              key={index}
              className="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden"
            >
              <div className="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
                <div>
                  <div className="mb-8">
                    {index === 0 && <Settings className="w-12 h-12 text-primary" />}
                    {index === 1 && <ArrowUp className="w-12 h-12 text-primary" />}
                    {index === 2 && <Truck className="w-12 h-12 text-primary" />}
                    {index === 3 && <Compass className="w-12 h-12 text-primary" />}
                  </div>
                  <h3 className="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">
                    {service.title}
                  </h3>
                  <p className="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
                    {service.description}
                  </p>
                </div>
                <div className="mt-12">
                  <button className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all">
                    Teklif Al
                    <ArrowRight className="w-5 h-5" />
                  </button>
                </div>
              </div>
              {/* Subtle Background Image for Card */}
              <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-5 pointer-events-none grayscale group-hover:opacity-10 transition-opacity">
                <Image 
                  src={service.image}
                  alt={service.title}
                  fill
                  className="object-contain object-right-bottom"
                />
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-24 px-8 md:px-16 bg-surface-container-lowest border-y border-outline-variant/10">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
          <div>
            <h2 className="text-5xl font-headline font-black uppercase mb-8 leading-tight">
              Neden AYDOĞAN NAKLİYAT?
            </h2>
            <p className="text-on-surface-variant font-body text-xl mb-12 leading-relaxed">
              Endüstriyel operasyonlarda güvenlik bir seçenek değil, zorunluluktur. Mühendislik odaklı yaklaşımımızla riskleri minimize ediyoruz.
            </p>
            <div className="space-y-12">
              {FEATURES.map((feature) => (
                <div key={feature.id} className="flex gap-6">
                  <div className="text-primary text-5xl font-black font-headline">{feature.id}</div>
                  <div>
                    <h4 className="text-xl font-headline font-bold uppercase mb-2">{feature.title}</h4>
                    <p className="text-on-surface-variant text-sm">{feature.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            {STATS.map((stat, index) => (
              <div 
                key={index}
                className={cn(
                  "bg-surface-container-high p-8 flex flex-col justify-center transition-all hover:translate-y-[-4px]",
                  stat.highlighted && "border-l-4 border-primary"
                )}
              >
                <span className={cn(
                  "text-5xl font-black font-headline mb-2",
                  stat.highlighted ? "text-primary" : "text-on-surface"
                )}>
                  {stat.value}
                </span>
                <span className="text-xs uppercase tracking-widest font-bold opacity-60">
                  {stat.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

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