'use client';

import { motion } from "framer-motion";
import { ArrowRight, MessageCircle } from "lucide-react";
import { siteConfig } from "@/lib/data";

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

  return (
    <section className="py-24 md:py-40 bg-background relative overflow-hidden">
      {/* Background Graphic Elements */}
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-30" />
      <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
      <div className="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />

      <div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
        <div className="flex flex-col lg:flex-row items-center justify-between gap-16">
          <div className="max-w-3xl text-center lg:text-left">
            <motion.span 
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              className="font-label text-xs md:text-sm font-bold text-primary tracking-[0.5em] uppercase mb-6 block"
            >
              Projenizi Birlikte Yükseltelim
            </motion.span>
            <motion.h2 
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              className="font-headline text-5xl md:text-8xl font-black text-white uppercase leading-[0.9] tracking-tighter mb-8"
            >
              Güçlü Filo, <br/>
              <span className="text-primary">Kesintisiz</span> Operasyon
            </motion.h2>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="font-body text-lg md:text-2xl text-on-surface-variant leading-relaxed"
            >
              Her türlü ağır yük ve yüksek irtifa projeleriniz için profesyonel mühendislik çözümleri sunuyoruz. Dalaman'dan tüm Türkiye'ye 7/24 hizmetinizdeyiz.
            </motion.p>
          </div>

          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            className="flex flex-col gap-6"
          >
            <button 
              onClick={handleWhatsApp}
              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 flex items-center justify-center gap-4 group"
            >
              WHATSAPP'TAN TEKLİF ALIN
              <MessageCircle className="w-6 h-6 group-hover:rotate-12 transition-transform" />
            </button>
            <p className="text-center font-label text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">
              Ortalama yanıt süresi: 15 Dakika
            </p>
          </motion.div>
        </div>
      </div>
    </section>
  );
}