import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import Image from "next/image";
import { MapPin, Phone, Mail, ArrowRight, Navigation } from "lucide-react";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "İletişim | Dalaman, Muğla Vinç ve Nakliyat",
  description: "Aydoğan Nakliyat operasyon merkezine ulaşın. Dalaman Sanayi Sitesi'nde 7/24 hizmet veriyoruz. Teklif almak için bizi arayın.",
};

export default function ContactPage() {
  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-[40vh] min-h-[300px] flex items-center justify-start px-12 pt-20 overflow-hidden bg-surface-container-lowest">
        <div className="absolute inset-0 opacity-40 z-0">
          <Image 
            src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop"
            alt="Industrial machinery"
            fill
            className="object-cover grayscale"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div>
        </div>
        <div className="relative z-10 max-w-4xl">
          <h1 className="text-6xl md:text-8xl font-black uppercase tracking-tighter text-on-surface mb-2">
            İletişim
          </h1>
          <div className="h-1 w-24 bg-primary"></div>
        </div>
      </section>

      {/* Main Content: Contact Details Only */}
      <div className="bg-outline-variant/5 py-24 px-8 md:px-16">
        <div className="max-w-5xl mx-auto">
          <section className="bg-surface-container p-12 lg:p-24 flex flex-col md:flex-row gap-16 items-center border border-outline-variant/10 shadow-xl">
            <div className="flex-1">
              <h2 className="text-4xl font-black tracking-tighter uppercase mb-12 text-on-surface">Operasyon Merkezi</h2>
              <div className="space-y-12">
                {/* Address */}
                <div className="flex items-start gap-6 group">
                  <div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
                    <MapPin className="w-8 h-8" />
                  </div>
                  <div>
                    <p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">Adres</p>
                    <p className="text-xl font-medium text-on-surface leading-snug">
                      Merkez Mah. Sanayi Sitesi No: 42<br/>Dalaman / Muğla
                    </p>
                  </div>
                </div>
                {/* Phone */}
                <div className="flex items-start gap-6 group">
                  <div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
                    <Phone className="w-8 h-8" />
                  </div>
                  <div>
                    <p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">Telefon</p>
                    <p className="text-3xl font-black text-on-surface tracking-tighter">
                      +90 252 692 00 00
                    </p>
                  </div>
                </div>
                {/* Email */}
                <div className="flex items-start gap-6 group">
                  <div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
                    <Mail className="w-8 h-8" />
                  </div>
                  <div>
                    <p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">E-Posta</p>
                    <p className="text-xl font-medium text-on-surface">
                      info@aydogannakliyat.com
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="w-full md:w-1/3 flex flex-col gap-4">
              <div className="p-8 bg-surface-container-lowest border border-outline-variant/15">
                <div className="flex items-center gap-3 mb-4">
                  <span className="w-3 h-3 bg-primary animate-pulse rounded-full"></span>
                  <span className="text-xs font-bold uppercase tracking-widest text-on-surface">7/24 Aktif</span>
                </div>
                <p className="text-sm text-on-surface-variant leading-relaxed">
                  Tüm Ege ve Akdeniz bölgesinde 7 gün 24 saat kesintisiz operasyon desteği sağlıyoruz.
                </p>
              </div>
              <div className="p-8 bg-surface-container-lowest border border-outline-variant/15">
                <div className="flex items-center gap-3 mb-4">
                  <span className="w-3 h-3 bg-primary rounded-full"></span>
                  <span className="text-xs font-bold uppercase tracking-widest text-on-surface">Hızlı Erişim</span>
                </div>
                <p className="text-sm text-on-surface-variant leading-relaxed">
                  Dalaman Sanayi Sitesi'ndeki stratejik konumumuzla her noktaya en hızlı şekilde ulaşıyoruz.
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>

      {/* Map Section */}
      <section className="w-full h-[500px] bg-surface-container-lowest relative overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image 
            src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=2066&auto=format&fit=crop"
            alt="Dalaman map mockup"
            fill
            className="object-cover grayscale contrast-125 brightness-50 opacity-80"
          />
        </div>
        <div className="absolute inset-0 bg-surface/20"></div>
        <div className="relative z-10 h-full flex items-center justify-center px-4">
          <div className="bg-surface p-8 border-l-4 border-primary max-w-sm shadow-2xl">
            <Navigation className="text-primary w-10 h-10 mb-4" />
            <h3 className="text-2xl font-black uppercase tracking-tighter text-on-surface mb-2">Lokasyonumuz</h3>
            <p className="text-on-surface-variant leading-relaxed mb-6 italic text-sm">
              Dalaman Sanayi Sitesi'nin kalbinde, tüm Ege ve Akdeniz bölgesine hızlı erişim noktasındayız.
            </p>
            <a 
              className="text-primary font-bold uppercase tracking-widest text-xs flex items-center gap-2 hover:gap-4 transition-all" 
              href="https://maps.google.com"
              target="_blank"
            >
              Yol Tarifi Al <ArrowRight className="w-4 h-4" />
            </a>
          </div>
        </div>
      </section>

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