"use client";

import { motion } from "framer-motion";

export function CTASection() {
  return (
    <section className="relative py-40 px-12 overflow-hidden bg-background" id="Contact">
      {/* 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/AB6AXuBfGw5gCmOA1OaPBLY-dOl2wTGviHc5c2Xn05kgak1sHagc64z3vjbl8Ov1KBLQPkoLFdv0ktOtczfX5VEdrujgg8rgBnw40Bzc7Ai836w4QATDFGTdmpO9aHk3s7nLib4yerxLzG1woNJ2SChKlZ831GmYaHOH6NJYOf-N-zjb8Tc2086UpH97RBMUqb7yXw-kdpvj7u-er1ujBxir2hi5WVWKuX_kMdJ-aM-co4c8AfQpo_sO32TcwzB93hhlq6eGc8m23YMoJfU" 
          alt="Construction site at night"
        />
        <div className="absolute inset-0 bg-neutral-900/80 backdrop-blur-sm"></div>
      </div>

      <div className="relative z-10 text-center max-w-4xl mx-auto px-6">
        <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           whileInView={{ opacity: 1, scale: 1 }}
           viewport={{ once: true }}
           className="mb-12 inline-flex items-center gap-4 bg-primary/10 px-6 py-2 border border-primary/20"
        >
             <span className="w-2 h-2 bg-primary animate-pulse"></span>
             <span className="font-label text-[10px] uppercase tracking-widest text-primary font-black">7/24 Acil Müdahale</span>
        </motion.div>

        <motion.h2 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="font-headline text-4xl md:text-8xl font-bold text-white mb-8 leading-[0.85] tracking-tighter text-balance"
        >
          Sıradaki Büyük Projeniz İçin Hazır mısınız?
        </motion.h2>
        <motion.p 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          viewport={{ once: true }}
          className="text-lg md:text-2xl text-on-surface-variant mb-16 max-w-2xl mx-auto leading-relaxed"
        >
          Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri için hemen fiyat teklifi alın.
        </motion.p>
        
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          viewport={{ once: true }}
          className="flex flex-col md:flex-row gap-0 max-w-2xl mx-auto"
        >
          <input 
            className="bg-surface-container-lowest border-none font-headline font-bold uppercase tracking-widest px-10 py-6 text-base w-full focus:ring-0 focus:border-b-4 focus:border-primary outline-none transition-all placeholder:text-white/20" 
            placeholder="Telefon Numaranız" 
            type="text"
          />
          <button className="bg-primary text-on-primary font-headline font-black uppercase tracking-widest px-12 py-6 text-xl hover:brightness-110 active:scale-95 transition-all rounded-none shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none whitespace-nowrap">
            Sizi Arayalım
          </button>
        </motion.div>
      </div>
    </section>
  );
}