gulermak_metro/components/HeroSlider.tsx

'use client';

import { useState, useEffect } from 'react';

// Hero Slider Data
const heroSlides = [
  {
    id: 1,
    title: 'Ankara Metro Altyapı Projelerinde Öncü Çözümler',
    description: 'Ankara Büyükşehir Belediyesi ile birlikte, modern teknoloji ve mühendislik uzmanlığımızla başkentin ulaşım ağını inşa ediyor, geleceğin metro sistemlerini bugünden hayata geçiriyoruz.',
    buttonText: 'Detayları Gör',
    buttonLink: '#proje-detay'
  },
  {
    id: 2,
    title: 'A2 Metro Hattı İnşaatında Son Aşamaya Gelindi',
    description: '15 istasyonlu A2 Metro Hattı projemiz %75 tamamlandı. 2026 yılında hizmete açılacak modern metro hattımız, günlük 300 bin yolcuya hizmet verecek.',
    buttonText: 'İlerlemeyi İzle',
    buttonLink: '#metro-hatti'
  },
  {
    id: 3,
    title: 'Çevre Dostu Metro Teknolojileri',
    description: 'Yenilenebilir enerji kaynakları ve sürdürülebilir inşaat teknikleri ile çevre dostu metro projelerine imza atıyoruz. Karbon emisyonunu %40 azaltan yenilikçi çözümlerimiz.',
    buttonText: 'Yeşil Projeler',
    buttonLink: '#cevre'
  },
  {
    id: 4,
    title: 'Güvenli İnşaat, Güvenli Gelecek',
    description: 'ISO 45001 sertifikalı iş güvenliği sistemlerimiz ile 2000+ çalışanımızın güvenliğini en üst düzeyde tutuyoruz. Sıfır iş kazası hedefiyle çalışıyoruz.',
    buttonText: 'Güvenlik Önlemleri',
    buttonLink: '#guvenlik'
  }
];

export default function HeroSlider() {
  const [currentSlide, setCurrentSlide] = useState(0);

  // Auto slider
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % heroSlides.length);
    }, 10000); // 10 saniyede bir değiş

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="relative w-full h-[60vh] md:h-screen pt-20">
      {/* Video Background */}
      <div className="absolute inset-0 overflow-hidden">
        <video 
          className="w-full h-full object-cover"
          autoPlay 
          loop 
          muted 
          playsInline
        >
          <source src="/assets/high-speed-metro-design-template-559897134973592cb13d708cec30ea39_screen.mp4" type="video/mp4" />
          Tarayıcınız video etiketini desteklemiyor.
        </video>
        {/* Dark Overlay */}
        <div className="absolute inset-0 bg-linear-to-b from-[#003366]/70 via-[#004B87]/50 to-[#003366]/90"></div>
      </div>

      {/* Content Overlay */}
      <div className="relative z-10 h-full flex items-center">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
          <div className="max-w-3xl">
            {/* Slider Content */}
            <div className="relative">
              {heroSlides.map((slide, index) => (
                <div
                  key={slide.id}
                  className={`transition-all duration-700 ${
                    index === currentSlide
                      ? 'opacity-100 translate-x-0'
                      : 'opacity-0 absolute inset-0 translate-x-full pointer-events-none'
                  }`}
                >
                  <h1 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white mb-4 md:mb-6 leading-tight">
                    {slide.title}
                  </h1>
                  <p className="text-base md:text-lg lg:text-xl text-[#F8F9FA] mb-6 md:mb-8 leading-relaxed">
                    {slide.description}
                  </p>
                  
                  {/* Action Buttons - Mobilde gizle */}
                  <div className="hidden md:flex flex-col sm:flex-row gap-4">
                    <button className="px-8 py-4 bg-[#00B4D8] text-white font-semibold rounded-lg hover:bg-[#48CAE4] transition-all duration-300 shadow-lg shadow-[#00B4D8]/30 flex items-center justify-center space-x-2">
                      <span>{slide.buttonText}</span>
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </button>
                    <button className="px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-[#004B87] transition-all duration-300">
                      Tüm Duyuruları Gör
                    </button>
                  </div>
                </div>
              ))}
            </div>

            {/* Pagination Dots & Navigation */}
            <div className="hidden md:flex items-center justify-between mt-12">
              {/* Dots */}
              <div className="flex space-x-3">
                {heroSlides.map((_, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentSlide(index)}
                    className={`h-3 rounded-full transition-all duration-300 ${
                      index === currentSlide
                        ? 'w-8 bg-white'
                        : 'w-3 bg-white/30 hover:bg-white/50'
                    }`}
                    aria-label={`Slide ${index + 1}`}
                  />
                ))}
              </div>

              {/* Arrow Navigation */}
              <div className="flex space-x-2">
                <button
                  onClick={() => setCurrentSlide((prev) => (prev - 1 + heroSlides.length) % heroSlides.length)}
                  className="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all backdrop-blur-sm"
                  aria-label="Previous slide"
                >
                  <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                  </svg>
                </button>
                <button
                  onClick={() => setCurrentSlide((prev) => (prev + 1) % heroSlides.length)}
                  className="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all backdrop-blur-sm"
                  aria-label="Next slide"
                >
                  <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}