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 */}
      <main className="grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[600px] bg-outline-variant/5">
        {/* Left Column: Contact Details */}
        <section className="bg-surface-container p-12 lg:p-24 flex flex-col justify-center">
          <h2 className="text-3xl font-bold 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>
          
          {/* Social/Status Indicators */}
          <div className="mt-20 flex flex-wrap gap-4">
            <div className="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
              <span className="w-2 h-2 bg-primary animate-pulse"></span> 
              7/24 Aktif Operasyon
            </div>
            <div className="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
              <span className="w-2 h-2 bg-primary"></span> 
              Muğla & Çevresi
            </div>
          </div>
        </section>

        {/* Right Column: Contact Form */}
        <section className="bg-surface-container-low p-12 lg:p-24 flex flex-col justify-center border-l border-outline-variant/10">
          <h2 className="text-3xl font-bold tracking-tighter uppercase mb-8 text-on-surface">Teklif Talebi & Mesaj</h2>
          <form action="#" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Adınız Soyadınız</label>
                <input 
                  className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
                  placeholder="Ahmet Yılmaz" 
                  type="text"
                />
              </div>
              <div className="space-y-2">
                <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">E-Posta</label>
                <input 
                  className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
                  placeholder="ahmet@example.com" 
                  type="email"
                />
              </div>
            </div>
            <div className="space-y-2">
              <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Telefon Numarası</label>
              <input 
                className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
                placeholder="+90 5xx xxx xx xx" 
                type="tel"
              />
            </div>
            <div className="space-y-2">
              <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Mesajınız / İş Detayları</label>
              <textarea 
                className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
                placeholder="Taşıma yükü, mesafe ve tarih bilgisi belirtiniz..." 
                rows={4}
              ></textarea>
            </div>
            <button 
              className="w-full bg-primary text-on-primary py-5 text-xl font-black uppercase tracking-widest hover:brightness-110 transition-all active:scale-[0.98]" 
              type="submit"
            >
              Gönder
            </button>
          </form>
        </section>
      </main>

      {/* 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>
  );
}