"use client";

import { motion } from "framer-motion";

export function Hero() {
  return (
    <section className="relative h-screen w-full flex items-center overflow-hidden bg-background">
      {/* Background Image & Overlay */}
      <div className="absolute inset-0 z-0">
        <img 
          className="w-full h-full object-cover" 
          src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4" 
          alt="Heavy duty crane in Dalaman"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
      </div>

      <div className="relative z-10 px-6 md:px-12 max-w-6xl">
        <motion.div 
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6 }}
          className="mb-8 flex items-center gap-4"
        >
          <span className="h-[2px] w-8 md:w-12 bg-primary"></span>
          <span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold">Dalaman / Muğla</span>
        </motion.div>

        <motion.h1 
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="font-headline text-[clamp(2.5rem,8vw,5.5rem)] font-bold leading-[0.9] tracking-tighter text-white mb-8 text-balance"
        >
          Dalaman’ın Güçlü <br />
          Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
        </motion.h1>

        <motion.ul 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1, delay: 0.5 }}
          className="space-y-4 mb-16"
        >
          {["Ağır Nakliyat", "Sepetli Platform", "Mobil Vinç Kiralama"].map((item, idx) => (
            <li key={item} className="flex items-center gap-4 group">
              <span className="w-2 h-2 bg-primary"></span>
              <span className="font-headline text-lg md:text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors cursor-default">
                {item}
              </span>
            </li>
          ))}
        </motion.ul>

        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.8 }}
          className="flex flex-col sm:flex-row gap-4"
        >
          <button 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]">
            Hizmet Alın
          </button>
          <button 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">
            Filomuz
          </button>
        </motion.div>
      </div>

      {/* Bottom Gradient Texture */}
      <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
    </section>
  );
}