import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { CTASection } from "@/components/CTASection";
import Image from "next/image";
import { Shield, Zap, Target, Users, Rocket, Eye } from "lucide-react";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Hakkımızda | Aydoğan Nakliyat Vinç Kurumsal",
  description: "20 yılı aşkın tecrübemizle Dalaman ve Muğla bölgesinin lider vinç ve nakliyat firmasıyız. Vizyonumuz, misyonumuz ve profesyonel ekibimiz hakkında bilgi alın.",
};

const VALUES = [
  {
    title: "Güvenlik",
    description: "Sıfır kaza politikasıyla, tüm operasyonlarımızda uluslararası güvenlik standartlarını uyguluyoruz.",
    icon: <Shield className="w-10 h-10 text-primary" />
  },
  {
    title: "Hız",
    description: "Zamanın değerini biliyoruz. En karmaşık projeleri bile belirlenen takvim dahilinde tamamlıyoruz.",
    icon: <Zap className="w-10 h-10 text-primary" />
  },
  {
    title: "Hassasiyet",
    description: "Milimetrik hesaplamalarla, en değerli yüklerinizi en ufak bir zarar görmeden taşıyoruz.",
    icon: <Target className="w-10 h-10 text-primary" />
  },
  {
    title: "Müşteri Odaklılık",
    description: "Her projenin kendine has ihtiyaçları vardır. Size özel esnek ve akılcı çözümler üretiyoruz.",
    icon: <Users className="w-10 h-10 text-primary" />
  }
];

const STATS = [
  { label: "Yıllık Tecrübe", value: "20+" },
  { label: "Tamamlanan Proje", value: "1500+" },
  { label: "Modern Araç Filosu", value: "25+" },
  { label: "Maksimum Kapasite", value: "500t" }
];

export default function AboutPage() {
  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-center overflow-hidden">
        <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="Crane at sunset"
            fill
            sizes="100vw"
            className="object-cover grayscale opacity-60"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-surface/40 to-surface/90"></div>
        </div>
        <div className="relative z-10 text-center px-4">
          <h1 className="text-primary text-6xl md:text-8xl font-headline font-black tracking-tighter uppercase">
            Hakkımızda
          </h1>
          <div className="h-1 w-24 bg-primary mx-auto mt-4 mb-6"></div>
          <p className="text-on-surface text-lg md:text-xl max-w-2xl mx-auto font-light tracking-wide uppercase">
            Dalaman'ın güvenilir çözüm ortağı: Tecrübe, güç ve hassasiyetle yükseliyoruz.
          </p>
        </div>
      </section>

      {/* Our Story */}
      <section className="py-24 px-8 md:px-16 bg-surface">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="relative">
            <div className="absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-primary"></div>
            <div className="relative aspect-[4/3] w-full overflow-hidden">
              <Image 
                src="https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
                alt="Crane operation"
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
              />
            </div>
            <div className="absolute -bottom-8 -right-8 bg-primary p-8 hidden md:block">
              <p className="text-on-primary font-headline font-black text-4xl">20+</p>
              <p className="text-on-primary text-xs uppercase font-bold tracking-widest">Yıllık Tecrübe</p>
            </div>
          </div>
          <div className="flex flex-col gap-6">
            <span className="text-primary font-headline text-sm uppercase tracking-[0.3em]">Kurumsal Kimliğimiz</span>
            <h2 className="text-4xl md:text-5xl font-headline font-bold text-on-surface leading-none uppercase">
              Dalaman'ın Gücü, Sizin Güveniniz.
            </h2>
            <p className="text-on-surface-variant text-lg leading-relaxed">
              Aydoğan Nakliyat Vinç olarak, Dalaman ve çevresinde uzun yıllardır güvenilirlik ve tecrübeyle hizmet vermekteyiz. Sektördeki köklü geçmişimizle, her projede en yüksek standartları hedefliyoruz.
            </p>
            <p className="text-on-surface-variant text-lg leading-relaxed">
              Ağır yük nakliyatından hassas vinç operasyonlarına kadar, modern filomuz ve uzman kadromuzla projelerinizin her aşamasında yanınızdayız. Mühendislik odaklı yaklaşımımızla, en zorlu coğrafi koşullarda bile kusursuz hizmet sağlıyoruz.
            </p>
          </div>
        </div>
      </section>

      {/* Core Values */}
      <section className="py-24 bg-surface-container-low border-y border-outline-variant/10">
        <div className="max-w-7xl mx-auto px-8 md:px-16">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-headline font-bold text-white uppercase tracking-wider">Temel Değerlerimiz</h2>
            <div className="w-16 h-1 bg-primary mx-auto mt-4"></div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-outline-variant/20">
            {VALUES.map((value, index) => (
              <div 
                key={index}
                className="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary transition-all group"
              >
                <div className="mb-6 transition-transform group-hover:scale-110 duration-300">
                  {value.icon}
                </div>
                <h3 className="text-xl font-headline font-bold text-white mb-3 uppercase tracking-tight">
                  {value.title}
                </h3>
                <p className="text-on-surface-variant text-sm leading-relaxed">
                  {value.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-24 px-8 md:px-16 bg-surface">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20 border border-outline-variant/20">
          <div className="bg-surface-container-high p-12 lg:p-20">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-12 h-12 bg-primary flex items-center justify-center">
                <Rocket className="w-6 h-6 text-on-primary" />
              </div>
              <h2 className="text-3xl font-headline font-bold text-white uppercase tracking-tight">Misyonumuz</h2>
            </div>
            <p className="text-on-surface-variant text-lg leading-relaxed italic">
              "Modern teknolojiyi geleneksel iş ahlakıyla birleştirerek, Dalaman bölgesindeki altyapı ve inşaat projelerine en güvenilir, en hızlı ve en profesyonel lojistik ve vinç desteğini sağlamak."
            </p>
          </div>
          <div className="bg-surface-container-lowest p-12 lg:p-20">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-12 h-12 bg-primary flex items-center justify-center">
                <Eye className="w-6 h-6 text-on-primary" />
              </div>
              <h2 className="text-3xl font-headline font-bold text-white uppercase tracking-tight">Vizyonumuz</h2>
            </div>
            <p className="text-on-surface-variant text-lg leading-relaxed">
              "Sektörde yenilikçi çözümlerimiz ve sarsılmaz güvenilirliğimizle, sadece Dalaman'da değil, tüm Ege ve Akdeniz bölgesinde ağır nakliyat ve vinç hizmetlerinde lider marka olmak."
            </p>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-20 bg-primary">
        <div className="max-w-7xl mx-auto px-8 md:px-16 flex flex-wrap justify-between gap-12 text-on-primary">
          {STATS.map((stat, index) => (
            <div key={index} className="flex flex-col items-center md:items-start">
              <span className="text-5xl font-headline font-black">{stat.value}</span>
              <span className="text-xs font-bold uppercase tracking-widest opacity-80">{stat.label}</span>
            </div>
          ))}
        </div>
      </section>

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