'use client';

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Phone, MessageCircle } from "lucide-react";
import { siteConfig } from "@/lib/data";

export function Hero() {
  const handleWhatsApp = () => {
    const message = encodeURIComponent("Merhaba, vinç kiralama ve nakliyat hizmetleriniz hakkında bilgi almak istiyorum.");
    window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
  };

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
      {/* Background with Grid and Noise */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-background/40 backdrop-blur-sm z-10" />
        <Image 
          src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
          alt="Industrial crane"
          fill
          priority
          sizes="100vw"
          className="object-cover grayscale brightness-50"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/20 z-20" />
        <div className="grid-pattern absolute inset-0 opacity-20 z-30" />
      </div>

      <div className="relative z-40 max-w-7xl mx-auto px-6 md:px-12 w-full text-center md:text-left">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="max-w-4xl"
        >
          <span className="inline-block font-label text-xs md:text-sm font-bold text-primary tracking-[0.4em] uppercase mb-6 bg-primary/10 px-4 py-2 border-l-2 border-primary">
            Endüstriyel Güç & Mühendislik
          </span>
          <h1 className="font-headline text-6xl md:text-9xl font-black text-white uppercase leading-[0.85] tracking-tighter mb-8">
            AYDOĞAN <br/>
            <span className="text-stroke text-transparent">NAKLİYAT</span> <br/>
            <span className="text-primary">VİNÇ</span>
          </h1>
          <p className="font-body text-lg md:text-2xl text-on-surface-variant max-w-2xl mb-12 leading-relaxed">
            Muğla Dalaman merkezli, 500 tona kadar kaldırma kapasitesi ve uzman mühendislik kadrosuyla ağır nakliyat ve vinç çözümleri.
          </p>

          <div className="flex flex-col sm:flex-row gap-6">
            <Link 
              href="/hizmetler"
              className="bg-primary text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:brightness-110 transition-all rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px] flex items-center justify-center gap-3 group"
            >
              Hizmetlerimiz
              <ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
            </Link>
            <button 
              onClick={handleWhatsApp}
              className="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-white hover:text-black transition-all rounded-none border-b-2 border-primary/50 flex items-center justify-center gap-3"
            >
              <MessageCircle className="w-6 h-6" />
              Teklif Alın
            </button>
          </div>
        </motion.div>
      </div>

      {/* Side Status Indicators */}
      <div className="absolute right-12 bottom-12 hidden xl:flex flex-col gap-8 z-40">
        <div className="flex flex-col items-end">
          <span className="font-headline text-5xl font-black text-white leading-none">500T</span>
          <span className="font-label text-[10px] uppercase tracking-widest text-primary font-bold">Max Kapasite</span>
        </div>
        <div className="flex flex-col items-end">
          <span className="font-headline text-5xl font-black text-white leading-none">24/7</span>
          <span className="font-label text-[10px] uppercase tracking-widest text-primary font-bold">Aktif Operasyon</span>
        </div>
      </div>
    </section>
  );
}