import React from 'react';
import Link from 'next/link';
import { mdiArrowRight, mdiWhatsapp } from '@mdi/js';
import BaseIcon from '../BaseIcon';

const Hero = () => {
  return (
    <section className="relative h-screen flex items-center bg-gray-900 overflow-hidden pt-20">
      {/* Background with Animation */}
      <div className="absolute inset-0 opacity-40 scale-110 animate-[pulse_10s_infinite]">
        <img 
          src="https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
          alt="Beka Kaplama Hero"
          className="w-full h-full object-cover transition-transform duration-[10000ms] hover:scale-105"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/60 to-transparent"></div>
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full z-10">
        <div className="max-w-2xl">
          {/* Badge with Animation */}
          <div className="inline-flex items-center space-x-2 px-3 py-1 bg-amber-600/20 border border-amber-600/30 rounded-full mb-6 animate-fade-in-left">
            <span className="w-2 h-2 bg-amber-600 rounded-full animate-pulse"></span>
            <span className="text-xs font-bold text-amber-500 uppercase tracking-widest font-sans">Modern Kaplama Sistemleri</span>
          </div>
          
          {/* Headline with Animation */}
          <h1 className="text-5xl md:text-7xl font-black text-white leading-tight mb-8 animate-fade-in-up [animation-delay:200ms] font-sans">
            Mekanlarınıza <br />
            <span className="font-serif italic text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-amber-600 underline decoration-amber-600/30">Estetik ve Güç</span> <br />
            Katıyoruz.
          </h1>
          
          {/* Subtext with Animation */}
          <p className="text-xl text-gray-300 mb-10 leading-relaxed max-w-xl animate-fade-in-up [animation-delay:400ms] font-body">
            Akustik panelden PVC mermer plakaya, 3D uygulamalardan PU cephe lambri sistemlerine kadar geniş ürün yelpazemizle hayalinizdeki mekanları gerçeğe dönüştürüyoruz.
          </p>

          {/* Buttons with Animation */}
          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6 animate-fade-in-up [animation-delay:600ms]">
            <Link 
              href="/iletisim"
              className="px-8 py-4 bg-amber-600 text-white rounded-xl font-black hover:bg-amber-700 transition-all flex items-center justify-center space-x-2 shadow-xl shadow-amber-900/20 group hover:-translate-y-1 active:scale-95 font-sans"
            >
              <span>Ücretsiz Teklif Al</span>
              <BaseIcon path={mdiArrowRight} size={20} className="group-hover:translate-x-1 transition-transform" />
            </Link>
            
            <a 
              href="https://wa.me/905000000000" 
              target="_blank"
              rel="noreferrer"
              className="px-8 py-4 bg-white/10 backdrop-blur-md text-white border border-white/20 rounded-xl font-black hover:bg-white/20 transition-all flex items-center justify-center space-x-2 hover:-translate-y-1 active:scale-95 font-sans"
            >
              <BaseIcon path={mdiWhatsapp} size={24} className="text-green-400" />
              <span>WhatsApp Destek</span>
            </a>
          </div>

          {/* Stats with Animation */}
          <div className="mt-16 flex items-center space-x-12 opacity-70 border-t border-white/10 pt-10 animate-fade-in [animation-delay:800ms]">
            <div className="hover:opacity-100 transition-opacity cursor-default group">
              <div className="text-3xl font-black text-white group-hover:text-amber-500 transition-colors font-sans">100+</div>
              <div className="text-xs text-gray-400 uppercase tracking-widest mt-1 font-body">Tamamlanan Proje</div>
            </div>
            <div className="hover:opacity-100 transition-opacity cursor-default group">
              <div className="text-3xl font-black text-white group-hover:text-amber-500 transition-colors font-sans">15+</div>
              <div className="text-xs text-gray-400 uppercase tracking-widest mt-1 font-body">Yıllık Tecrübe</div>
            </div>
            <div className="hover:opacity-100 transition-opacity cursor-default group">
              <div className="text-3xl font-black text-white group-hover:text-amber-500 transition-colors font-sans">%100</div>
              <div className="text-xs text-gray-400 uppercase tracking-widest mt-1 font-body">Müşteri Memnuniyeti</div>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll Down Indicator */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce-soft hidden md:block">
        <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
          <div className="w-1 h-2 bg-white/60 rounded-full"></div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
