'use client';

import { useState } from 'react';
import Link from 'next/link';
import Header from "@/components/Header";
import MetroLine from "@/components/MetroLine";
import Footer from "@/components/Footer";

export default function Home() {
  const [showLiveStream, setShowLiveStream] = useState(false);
  const [showNews, setShowNews] = useState(false);
  const [selectedNews, setSelectedNews] = useState<number | null>(null);
  const [showDocuments, setShowDocuments] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [showMediaGallery, setShowMediaGallery] = useState(false);
  const [selectedMediaTab, setSelectedMediaTab] = useState<'all' | 'video' | 'photo'>('all');
  const [selectedMedia, setSelectedMedia] = useState<number | null>(null);
  const [showComplaintForm, setShowComplaintForm] = useState(false);
  const [complaintFormData, setComplaintFormData] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    type: 'dilek',
    message: ''
  });
  const [showContact, setShowContact] = useState(false);

  const categories = [
    { id: 'all', name: 'Tümü', icon: '📋' },
    { id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
    { id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
    { id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
    { id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
  ];

  const documents = [
    {
      id: 1,
      title: "A2 Metro Hattı İhale Şartnamesi",
      category: 'ihale',
      date: "15 Ocak 2025",
      size: "2.4 MB",
      type: "PDF",
      description: "Metro inşaatı için teknik şartname ve ihale koşulları"
    },
    {
      id: 2,
      title: "Proje Teknik Çizimleri",
      category: 'teknik',
      date: "10 Şubat 2025",
      size: "15.8 MB",
      type: "DWG",
      description: "Tüm istasyonların teknik mimari çizimleri"
    },
    {
      id: 3,
      title: "Çevresel Etki Değerlendirme Raporu",
      category: 'cevresel',
      date: "5 Mart 2025",
      size: "4.2 MB",
      type: "PDF",
      description: "Proje çevresel etki analizi ve önlemler"
    },
    {
      id: 4,
      title: "2025 Mart Ayı İlerleme Raporu",
      category: 'raporlar',
      date: "1 Nisan 2025",
      size: "1.8 MB",
      type: "PDF",
      description: "Aylık proje ilerleme ve istatistikler"
    },
    {
      id: 5,
      title: "Güvenlik Planı ve Prosedürleri",
      category: 'teknik',
      date: "20 Ocak 2025",
      size: "3.1 MB",
      type: "PDF",
      description: "İnşaat sahası güvenlik protokolleri"
    },
    {
      id: 6,
      title: "İstasyon Tasarım Detayları",
      category: 'teknik',
      date: "8 Şubat 2025",
      size: "8.5 MB",
      type: "PDF",
      description: "İstasyon iç ve dış mekan tasarım detayları"
    },
    {
      id: 7,
      title: "Finansman Planı",
      category: 'ihale',
      date: "12 Ocak 2025",
      size: "1.2 MB",
      type: "XLSX",
      description: "Proje bütçe ve finansman dağılımı"
    },
    {
      id: 8,
      title: "2025 Nisan Ayı İlerleme Raporu",
      category: 'raporlar',
      date: "1 Mayıs 2025",
      size: "2.1 MB",
      type: "PDF",
      description: "Aylık proje ilerleme ve istatistikler"
    },
    {
      id: 9,
      title: "Gürültü ve Titreşim Analizi",
      category: 'cevresel',
      date: "18 Mart 2025",
      size: "3.8 MB",
      type: "PDF",
      description: "Çevre gürültü ve titreşim ölçüm sonuçları"
    },
  ];

  const filteredDocs = selectedCategory === 'all' 
    ? documents 
    : documents.filter(doc => doc.category === selectedCategory);

  const getFileIcon = (type: string) => {
    switch (type) {
      case 'PDF': return '📕';
      case 'DWG': return '📐';
      case 'XLSX': return '📊';
      default: return '📄';
    }
  };

  const newsData = [
    {
      id: 1,
      title: "Dikimevi Metro Hattı İnşaatında Yeni Aşama",
      date: "20 Ekim 2025",
      image: "https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg",
      summary: "A2 Metro Hattı Tuzluçayır istasyonunda kazı çalışmaları tamamlandı. İnşaat ekipleri bir sonraki faza geçiş için hazırlıklara başladı.",
      content: "A2 Metro Hattı Tuzluçayır istasyonunda yapılan kazı çalışmaları başarıyla tamamlandı. İnşaat ekipleri, istasyonun temel atma ve beton dökme aşaması için hazırlıklara başladı. Proje yetkililerinin açıklamasına göre, çalışmalar planlanan takvime uygun olarak ilerliyor. İstasyonun 2026 yılı sonunda hizmete girmesi hedefleniyor. Modern teknolojilerle donatılacak istasyonda yolcu konforunu artıracak birçok yenilik bulunacak."
    },
    {
      id: 2,
      title: "Metro İstasyonlarında Modern Tasarım",
      date: "18 Ekim 2025",
      image: "https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg",
      summary: "Yeni metro istasyonları çağdaş mimari anlayışı ve yolcu konforunu ön planda tutan tasarımlarla hayata geçiriliyor.",
      content: "Ankara metro projesi kapsamında inşa edilen istasyonlar, çağdaş mimari anlayışı ile dikkat çekiyor. İstasyonlarda doğal ışık kullanımı maksimize edilirken, enerji verimliliği de göz önünde bulunduruluyor. Geniş peronlar, modern bekleme alanları ve engelli erişimine uygun tasarım, yolcu memnuniyetini artıracak önemli detaylar arasında yer alıyor."
    },
    {
      id: 3,
      title: "Çevre Dostu Metro Projesi",
      date: "15 Ekim 2025",
      image: "https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg",
      summary: "Metro inşaatında kullanılan malzemeler ve yöntemler çevre standartlarına uygun olarak seçiliyor.",
      content: "Ankara metro inşaatında çevre dostu malzemeler ve sürdürülebilir inşaat yöntemleri kullanılıyor. Kazı çalışmalarından çıkan topraklar geri dönüştürülüyor, inşaat atıkları ayrıştırılarak değerlendiriliyor. Proje, yeşil bina sertifikası almayı hedefliyor. Ayrıca, metro hatları elektrikli sistemle çalışacağı için karbon emisyonunu azaltacak."
    },
    {
      id: 4,
      title: "Metro Hattı 2026'da Hizmete Girecek",
      date: "12 Ekim 2025",
      image: "https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg",
      summary: "A2 Metro Hattı'nın ilk etabının 2026 yılı sonunda hizmete girmesi planlanıyor.",
      content: "Ankara Büyükşehir Belediyesi yetkilileri, A2 Metro Hattı'nın ilk etabının 2026 yılı sonunda hizmete açılacağını duyurdu. 8 istasyondan oluşan hat, günlük 100 bin yolcuya hizmet verecek. Modern trenler, konforlu istasyonlar ve güvenli sistem ile Ankara'nın ulaşım altyapısına önemli bir katkı sağlayacak. İlk etabın ardından hatın genişletilmesi planlanıyor."
    }
  ];

  const mediaItems = [
    {
      id: 1,
      type: 'video',
      title: 'A2 Metro Hattı Genel Tanıtım',
      thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
      videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
      date: '15 Ekim 2025',
      duration: '5:32',
      description: 'A2 Metro Hattı projesinin genel tanıtımı ve istasyonların detayları'
    },
    {
      id: 2,
      type: 'photo',
      title: 'Dikimevi İstasyonu İnşaat Çalışmaları',
      thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
      date: '12 Ekim 2025',
      description: 'Dikimevi metro istasyonunda devam eden kazı ve inşaat çalışmaları'
    },
    {
      id: 3,
      type: 'photo',
      title: 'Tuzluçayır İstasyonu Temel Atma',
      thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
      date: '10 Ekim 2025',
      description: 'Tuzluçayır istasyonunun temel atma töreni anları'
    },
    {
      id: 4,
      type: 'video',
      title: 'Metro İnşaatı İlerleme Raporu',
      thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
      videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
      date: '8 Ekim 2025',
      duration: '8:15',
      description: 'Ekim ayı metro inşaatı ilerleme raporu ve gelecek hedefler'
    },
    {
      id: 5,
      type: 'photo',
      title: 'Modern İstasyon Tasarımları',
      thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
      date: '5 Ekim 2025',
      description: 'Yeni nesil metro istasyonlarının modern iç mekan tasarımları'
    },
    {
      id: 6,
      type: 'video',
      title: 'Çevre Dostu Metro Projesi',
      thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
      videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
      date: '1 Ekim 2025',
      duration: '6:45',
      description: 'Metro projesinde kullanılan çevre dostu teknolojiler ve sürdürülebilir yaklaşımlar'
    },
    {
      id: 7,
      type: 'photo',
      title: 'İşçi Güvenliği Eğitimi',
      thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
      date: '28 Eylül 2025',
      description: 'İnşaat sahalarında iş güvenliği eğitimleri'
    },
    {
      id: 8,
      type: 'photo',
      title: 'Ray Döşeme Çalışmaları',
      thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
      date: '25 Eylül 2025',
      description: 'Metro hattında ray döşeme işlemlerinin başlaması'
    },
  ];

  const filteredMedia = selectedMediaTab === 'all' 
    ? mediaItems 
    : mediaItems.filter(item => item.type === selectedMediaTab);

  return (
    <div className="min-h-screen bg-[#003366]">
      <Header />
      
      {/* Hero Video Section */}
      <div className="relative w-full 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">
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                Ankara Metro Altyapı Projelerinde Öncü Çözümler
              </h1>
              <p className="text-lg sm:text-xl text-[#F8F9FA] mb-8 leading-relaxed">
                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.
              </p>
              
              {/* Action Buttons */}
              <div className="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>Detayları Gör</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>

              {/* Pagination Dots */}
              <div className="flex space-x-3 mt-12">
                <button className="w-3 h-3 rounded-full bg-white"></button>
                <button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
                <button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
                <button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
              </div>
            </div>
          </div>
        </div>

        {/* Alt Menü Kartları - Slide üzerine bindiriyor (yarısı üstte) */}
        <div className="absolute bottom-0 left-0 right-0 z-20 translate-y-3/4">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
              {/* Canlı Yayın */}
              <button 
                onClick={() => setShowLiveStream(!showLiveStream)}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
              >
                <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                  <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
                  </svg>
                </div>
                <span className="text-[#004B87] font-semibold text-sm">Canlı Yayın</span>
              </button>

              {/* Haberler */}
              <button 
                onClick={() => setShowNews(!showNews)}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
              >
                <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                  <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
                  </svg>
                </div>
                <span className="text-[#004B87] font-semibold text-sm">Haberler</span>
              </button>

              {/* Belgeler */}
              <button
                onClick={() => setShowDocuments(!showDocuments)}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
              >
                <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                  <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                  </svg>
                </div>
                <span className="text-[#004B87] font-semibold text-sm">Belgeler</span>
              </button>

              {/* Medya Galerisi */}
              <button
                onClick={() => setShowMediaGallery(!showMediaGallery)}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
              >
                <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                  <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
                  </svg>
                </div>
                <span className="text-[#004B87] font-semibold text-sm">Medya Galerisi</span>
              </button>

              {/* Dilek-Şikayet */}
              <button 
                onClick={() => setShowComplaintForm(!showComplaintForm)}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
              >
                <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                  <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/>
                  </svg>
                </div>
                <span className="text-[#004B87] font-semibold text-sm">Dilek-Şikayet</span>
              </button>

              {/* E-İletişim */}
              <button
                onClick={() => setShowContact(!showContact)}
                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
              >
                <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                  <svg fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                  </svg>
                </div>
                <span className="text-[#004B87] font-semibold text-sm">E-İletişim</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {/* Canlı Yayın Video Bölümü */}
      {showLiveStream && (
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-8">
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-3">
                <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                <h2 className="text-2xl font-bold text-[#004B87]">Canlı Yayın</h2>
              </div>
              <button 
                onClick={() => setShowLiveStream(false)}
                className="text-gray-500 hover:text-red-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            {/* YouTube Video Embed */}
            <div className="relative w-full" style={{paddingBottom: '56.25%'}}>
              <iframe
                className="absolute top-0 left-0 w-full h-full rounded-lg"
                src="https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1"
                title="Canlı Yayın"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              ></iframe>
            </div>
            
            <p className="mt-4 text-gray-600 text-sm">
              A2 Metro Hattı İnşaat Çalışmaları - Canlı Yayın
            </p>
          </div>
        </div>
      )}

      {/* Haberler Bölümü */}
      {showNews && (
        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-8' : 'pt-32'} pb-8`}>
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-[#004B87]">Son Haberler</h2>
              </div>
              <button 
                onClick={() => setShowNews(false)}
                className="text-gray-500 hover:text-red-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            {/* Haberler Grid veya Detay */}
            {selectedNews === null ? (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {newsData.map((news) => (
                  <div key={news.id} className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    {/* Haber Görseli */}
                    <div className="h-48 overflow-hidden">
                      <img 
                        src={news.image} 
                        alt={news.title}
                        className="w-full h-full object-cover hover:scale-110 transition-transform duration-500"
                      />
                    </div>
                    
                    {/* Haber İçeriği */}
                    <div className="p-5">
                      <div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                        </svg>
                        <span>{news.date}</span>
                      </div>
                      <h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2">
                        {news.title}
                      </h3>
                      <p className="text-gray-600 text-sm line-clamp-3 mb-4">
                        {news.summary}
                      </p>
                      <button 
                        onClick={() => setSelectedNews(news.id)}
                        className="text-[#00B4D8] hover:text-[#004B87] font-semibold text-sm flex items-center space-x-1 transition-colors"
                      >
                        <span>Devamını Oku</span>
                        <svg className="w-4 h-4" 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>
            ) : (
              /* Haber Detayı */
              <div className="animate-fadeIn">
                {newsData.filter(n => n.id === selectedNews).map((news) => (
                  <div key={news.id}>
                    {/* Geri Butonu */}
                    <button 
                      onClick={() => setSelectedNews(null)}
                      className="flex items-center space-x-2 text-[#00B4D8] hover:text-[#004B87] font-semibold mb-6 transition-colors"
                    >
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                      </svg>
                      <span>Haberlere Dön</span>
                    </button>
                    
                    {/* Detay İçerik */}
                    <div className="bg-white rounded-xl overflow-hidden">
                      {/* Büyük Görsel */}
                      <div className="h-96 overflow-hidden">
                        <img 
                          src={news.image} 
                          alt={news.title}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      
                      {/* Detay Metni */}
                      <div className="p-8">
                        <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                          </svg>
                          <span>{news.date}</span>
                        </div>
                        
                        <h1 className="text-3xl font-bold text-[#004B87] mb-6">
                          {news.title}
                        </h1>
                        
                        <div className="prose max-w-none">
                          <p className="text-gray-700 text-lg leading-relaxed mb-4">
                            {news.content}
                          </p>
                        </div>
                        
                        {/* Alt Bilgi */}
                        <div className="mt-8 pt-6 border-t border-gray-200">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-4">
                              <span className="text-sm text-gray-500">Paylaş:</span>
                              <button className="text-[#00B4D8] hover:text-[#004B87] transition-colors">
                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                                </svg>
                              </button>
                            </div>
                            <button 
                              onClick={() => setSelectedNews(null)}
                              className="px-6 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors"
                            >
                              Kapat
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {/* Belgeler Bölümü */}
      {showDocuments && (
        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews ? 'pt-8' : 'pt-32'} pb-8`}>
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-[#004B87]">Proje Belgeleri</h2>
              </div>
              <button 
                onClick={() => setShowDocuments(false)}
                className="text-gray-500 hover:text-red-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Kategori Filtreleri */}
            <div className="mb-6">
              <div className="flex flex-wrap gap-3">
                {categories.map((cat) => (
                  <button
                    key={cat.id}
                    onClick={() => setSelectedCategory(cat.id)}
                    className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-300 ${
                      selectedCategory === cat.id
                        ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    <span className="text-lg">{cat.icon}</span>
                    <span className="text-sm">{cat.name}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* Belgeler Grid - 3 sütunlu */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-h-[600px] overflow-y-auto pr-2">
              {filteredDocs.map((doc) => (
                <div
                  key={doc.id}
                  className="bg-gray-50 rounded-xl p-5 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group flex flex-col"
                >
                  {/* Dosya İkonu - Üstte ortalı */}
                  <div className="flex justify-center mb-4">
                    <div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300 shadow-lg">
                      {getFileIcon(doc.type)}
                    </div>
                  </div>

                  {/* Belge Bilgileri */}
                  <div className="flex-1">
                    <h3 className="text-base font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors line-clamp-2 text-center">
                      {doc.title}
                    </h3>
                    <p className="text-gray-600 text-sm mb-3 line-clamp-2 text-center">
                      {doc.description}
                    </p>
                    <div className="flex flex-wrap justify-center gap-2 text-xs text-gray-500 mb-4">
                      <span className="px-2 py-1 bg-white rounded-full">📅 {doc.date}</span>
                      <span className="px-2 py-1 bg-white rounded-full">📄 {doc.type}</span>
                      <span className="px-2 py-1 bg-white rounded-full">💾 {doc.size}</span>
                    </div>
                  </div>

                  {/* İndirme Butonu - Alt kısımda */}
                  <button className="w-full py-2.5 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center justify-center space-x-2 text-sm font-semibold">
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    <span>İndir</span>
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Medya Galerisi Bölümü */}
      {showMediaGallery && (
        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments ? 'pt-8' : 'pt-32'} pb-8`}>
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-[#004B87]">Medya Galerisi</h2>
              </div>
              <button 
                onClick={() => {
                  setShowMediaGallery(false);
                  setSelectedMedia(null);
                  setSelectedMediaTab('all');
                }}
                className="text-gray-500 hover:text-red-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Medya Grid veya Detay */}
            {selectedMedia === null ? (
              <>
                {/* Tab Menü */}
                <div className="flex justify-center space-x-4 mb-8">
                  <button
                    onClick={() => setSelectedMediaTab('all')}
                    className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
                      selectedMediaTab === 'all'
                        ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                        : 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
                    }`}
                  >
                    Tümü
                  </button>
                  <button
                    onClick={() => setSelectedMediaTab('video')}
                    className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
                      selectedMediaTab === 'video'
                        ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                        : 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
                    }`}
                  >
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                    </svg>
                    <span>Videolar</span>
                  </button>
                  <button
                    onClick={() => setSelectedMediaTab('photo')}
                    className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
                      selectedMediaTab === 'photo'
                        ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
                        : 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
                    }`}
                  >
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
                    </svg>
                    <span>Fotoğraflar</span>
                  </button>
                </div>

                {/* Medya Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {filteredMedia.map((item) => (
                    <div
                      key={item.id}
                      onClick={() => setSelectedMedia(item.id)}
                      className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group"
                    >
                      {/* Thumbnail */}
                      <div className="relative h-56 overflow-hidden">
                        <img
                          src={item.thumbnail}
                          alt={item.title}
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        />
                        {/* Video Badge */}
                        {item.type === 'video' && (
                          <div className="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors">
                            <div className="w-16 h-16 rounded-full bg-[#00B4D8] flex items-center justify-center group-hover:scale-110 transition-transform">
                              <svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                              </svg>
                            </div>
                          </div>
                        )}
                        {/* Duration Badge */}
                        {item.type === 'video' && 'duration' in item && (
                          <div className="absolute bottom-3 right-3 px-2 py-1 bg-black/75 text-white text-xs rounded">
                            {item.duration}
                          </div>
                        )}
                        {/* Photo Badge */}
                        {item.type === 'photo' && (
                          <div className="absolute top-3 right-3 px-3 py-1 bg-[#00B4D8] text-white text-xs rounded-full font-semibold">
                            FOTO
                          </div>
                        )}
                      </div>

                      {/* Content */}
                      <div className="p-5">
                        <div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                          </svg>
                          <span>{item.date}</span>
                        </div>
                        <h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2 group-hover:text-[#00B4D8] transition-colors">
                          {item.title}
                        </h3>
                        <p className="text-gray-600 text-sm line-clamp-2">
                          {item.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            ) : (
              /* Medya Detayı */
              <div className="animate-fadeIn">
                {mediaItems.filter(m => m.id === selectedMedia).map((item) => (
                  <div key={item.id}>
                    {/* Geri Butonu */}
                    <button
                      onClick={() => setSelectedMedia(null)}
                      className="flex items-center space-x-2 text-[#00B4D8] hover:text-[#004B87] font-semibold mb-6 transition-colors"
                    >
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                      </svg>
                      <span>Galeriye Dön</span>
                    </button>

                    {/* Video Player veya Büyük Fotoğraf */}
                    {item.type === 'video' ? (
                      <div className="relative w-full mb-6" style={{ paddingBottom: '56.25%' }}>
                        <iframe
                          className="absolute top-0 left-0 w-full h-full rounded-lg"
                          src={'videoUrl' in item ? item.videoUrl : ''}
                          title={item.title}
                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                          allowFullScreen
                        ></iframe>
                      </div>
                    ) : (
                      <div className="mb-6 rounded-lg overflow-hidden">
                        <img
                          src={item.thumbnail}
                          alt={item.title}
                          className="w-full h-auto"
                        />
                      </div>
                    )}

                    {/* Bilgiler */}
                    <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                      </svg>
                      <span>{item.date}</span>
                      {item.type === 'video' && 'duration' in item && (
                        <>
                          <span className="text-gray-300">•</span>
                          <span>{item.duration}</span>
                        </>
                      )}
                    </div>

                    <h1 className="text-3xl font-bold text-[#004B87] mb-4">
                      {item.title}
                    </h1>

                    <p className="text-gray-700 text-lg leading-relaxed">
                      {item.description}
                    </p>

                    {/* Paylaş */}
                    <div className="mt-8 pt-6 border-t border-gray-200">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4">
                          <span className="text-sm text-gray-500">Paylaş:</span>
                          <button className="text-[#00B4D8] hover:text-[#004B87] transition-colors">
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                              <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                            </svg>
                          </button>
                        </div>
                        <button 
                          onClick={() => setSelectedMedia(null)}
                          className="px-6 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors"
                        >
                          Kapat
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {/* Dilek-Şikayet Formu */}
      {showComplaintForm && (
        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery ? 'pt-8' : 'pt-32'} pb-8`}>
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/>
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-[#004B87]">Dilek ve Şikayet Formu</h2>
              </div>
              <button 
                onClick={() => {
                  setShowComplaintForm(false);
                  setComplaintFormData({
                    name: '',
                    email: '',
                    phone: '',
                    subject: '',
                    type: 'dilek',
                    message: ''
                  });
                }}
                className="text-gray-500 hover:text-red-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Bilgilendirme */}
            <div className="bg-blue-50 border-l-4 border-[#00B4D8] p-4 mb-6">
              <div className="flex items-start">
                <svg className="w-5 h-5 text-[#00B4D8] mt-0.5 mr-3 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
                <p className="text-sm text-gray-700">
                  A2 Metro Hattı projesi ile ilgili dilek, öneri ve şikayetlerinizi bu form aracılığıyla iletebilirsiniz. Başvurularınız en kısa sürede değerlendirilecektir.
                </p>
              </div>
            </div>

            {/* Form */}
            <form className="space-y-6" onSubmit={(e) => {
              e.preventDefault();
              alert('Form gönderildi! (Demo)');
              setShowComplaintForm(false);
              setComplaintFormData({
                name: '',
                email: '',
                phone: '',
                subject: '',
                type: 'dilek',
                message: ''
              });
            }}>
              {/* Başvuru Tipi */}
              <div>
                <label className="block text-sm font-semibold text-[#004B87] mb-3">
                  Başvuru Tipi <span className="text-red-500">*</span>
                </label>
                <div className="flex gap-4">
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="type"
                      value="dilek"
                      checked={complaintFormData.type === 'dilek'}
                      onChange={(e) => setComplaintFormData({...complaintFormData, type: e.target.value})}
                      className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
                    />
                    <span className="ml-2 text-gray-700">Dilek / Öneri</span>
                  </label>
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="type"
                      value="sikayet"
                      checked={complaintFormData.type === 'sikayet'}
                      onChange={(e) => setComplaintFormData({...complaintFormData, type: e.target.value})}
                      className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
                    />
                    <span className="ml-2 text-gray-700">Şikayet</span>
                  </label>
                </div>
              </div>

              {/* İki Sütunlu Alan */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Ad Soyad */}
                <div>
                  <label htmlFor="name" className="block text-sm font-semibold text-[#004B87] mb-2">
                    Ad Soyad <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    id="name"
                    required
                    value={complaintFormData.name}
                    onChange={(e) => setComplaintFormData({...complaintFormData, name: e.target.value})}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                    placeholder="Adınız ve Soyadınız"
                  />
                </div>

                {/* E-posta */}
                <div>
                  <label htmlFor="email" className="block text-sm font-semibold text-[#004B87] mb-2">
                    E-posta <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="email"
                    id="email"
                    required
                    value={complaintFormData.email}
                    onChange={(e) => setComplaintFormData({...complaintFormData, email: e.target.value})}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                    placeholder="ornek@email.com"
                  />
                </div>

                {/* Telefon */}
                <div>
                  <label htmlFor="phone" className="block text-sm font-semibold text-[#004B87] mb-2">
                    Telefon
                  </label>
                  <input
                    type="tel"
                    id="phone"
                    value={complaintFormData.phone}
                    onChange={(e) => setComplaintFormData({...complaintFormData, phone: e.target.value})}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                    placeholder="0(5__) ___ __ __"
                  />
                </div>

                {/* Konu */}
                <div>
                  <label htmlFor="subject" className="block text-sm font-semibold text-[#004B87] mb-2">
                    Konu <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    id="subject"
                    required
                    value={complaintFormData.subject}
                    onChange={(e) => setComplaintFormData({...complaintFormData, subject: e.target.value})}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
                    placeholder="Başvuru konusu"
                  />
                </div>
              </div>

              {/* Mesaj */}
              <div>
                <label htmlFor="message" className="block text-sm font-semibold text-[#004B87] mb-2">
                  Mesajınız <span className="text-red-500">*</span>
                </label>
                <textarea
                  id="message"
                  required
                  rows={6}
                  value={complaintFormData.message}
                  onChange={(e) => setComplaintFormData({...complaintFormData, message: e.target.value})}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all resize-none text-gray-900 placeholder:text-gray-500"
                  placeholder="Lütfen detaylı bilgi veriniz..."
                ></textarea>
              </div>

              {/* KVKK Onayı */}
              <div className="flex items-start">
                <input
                  type="checkbox"
                  id="kvkk"
                  required
                  className="w-4 h-4 mt-1 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
                />
                <label htmlFor="kvkk" className="ml-3 text-sm text-gray-700">
                  <span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
                  <a href="#" className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</a>'ni okudum ve kabul ediyorum.
                </label>
              </div>

              {/* Butonlar */}
              <div className="flex flex-col sm:flex-row gap-4 pt-4">
                <button
                  type="submit"
                  className="flex-1 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2"
                >
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                  <span>Gönder</span>
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setComplaintFormData({
                      name: '',
                      email: '',
                      phone: '',
                      subject: '',
                      type: 'dilek',
                      message: ''
                    });
                  }}
                  className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
                >
                  Temizle
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* E-İletişim Bölümü */}
      {showContact && (
        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm ? 'pt-8' : 'pt-32'} pb-8`}>
          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                  </svg>
                </div>
                <h2 className="text-2xl font-bold text-[#004B87]">İletişim Bilgileri</h2>
              </div>
              <button 
                onClick={() => setShowContact(false)}
                className="text-gray-500 hover:text-red-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Sol Taraf - İletişim Kartları */}
              <div className="space-y-6">
                {/* Adres Kartı */}
                <div className="bg-linear-to-br from-blue-50 to-blue-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                  <div className="flex items-start space-x-4">
                    <div className="w-16 h-16 bg-[#004B87] rounded-xl flex items-center justify-center shrink-0">
                      <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-[#004B87] mb-2">ADRES</h3>
                      <p className="text-gray-700 leading-relaxed">
                        Emniyet Mah. Hipodrom Caddesi No: 5<br />
                        Yenimahalle / Ankara
                      </p>
                    </div>
                  </div>
                </div>

                {/* KEP Adresi Kartı */}
                <div className="bg-linear-to-br from-cyan-50 to-cyan-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                  <div className="flex items-start space-x-4">
                    <div className="w-16 h-16 bg-[#00B4D8] rounded-xl flex items-center justify-center shrink-0">
                      <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-[#004B87] mb-2">KEP ADRESİ</h3>
                      <a 
                        href="mailto:ankarabuyuksehirbelediyesi@hs01.kep.tr"
                        className="text-gray-700 hover:text-[#00B4D8] transition-colors break-all"
                      >
                        ankarabuyuksehirbelediyesi@hs01.kep.tr
                      </a>
                    </div>
                  </div>
                </div>

                {/* Telefon Kartı */}
                <div className="bg-linear-to-br from-indigo-50 to-indigo-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                  <div className="flex items-start space-x-4">
                    <div className="w-16 h-16 bg-[#004B87] rounded-xl flex items-center justify-center shrink-0">
                      <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-[#004B87] mb-2">TELEFON</h3>
                      <a 
                        href="tel:+903125071000"
                        className="text-xl font-semibold text-gray-700 hover:text-[#00B4D8] transition-colors"
                      >
                        +90 (312) 507 10 00
                      </a>
                    </div>
                  </div>
                </div>

                {/* Çalışma Saatleri */}
                <div className="bg-linear-to-br from-green-50 to-green-100 rounded-xl p-6">
                  <div className="flex items-start space-x-4">
                    <div className="w-16 h-16 bg-green-600 rounded-xl flex items-center justify-center shrink-0">
                      <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-[#004B87] mb-2">ÇALIŞMA SAATLERİ</h3>
                      <p className="text-gray-700">
                        <strong>Hafta İçi:</strong> 08:30 - 17:30<br />
                        <strong>Hafta Sonu:</strong> Kapalı
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Sağ Taraf - Harita */}
              <div className="space-y-4">
                <h3 className="text-xl font-bold text-[#004B87] mb-4">Konum</h3>
                <div className="rounded-xl overflow-hidden shadow-lg h-[600px]">
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.2326827229665!2d32.8548!3d39.9458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34f190a9c6b1f%3A0x5d3f8b8a8b8a8b8a!2sEmniyet%2C%20Hipodrom%20Cd.%20No%3A5%2C%2006430%20Yenimahalle%2FAnkara!5e0!3m2!1str!2str!4v1234567890123!5m2!1str!2str"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                  ></iframe>
                </div>
                
                {/* Haritada Göster Butonu */}
                <a
                  href="https://maps.app.goo.gl/82STypmZqeSW0mQC6"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl"
                >
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                  </svg>
                  <span>Google Maps'te Aç</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Ana İçerik - Kartlar için üstten boşluk */}
      <main className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm || showContact ? 'pt-8' : 'pt-32'} pb-12`}>
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold text-white mb-4">
            Metro Hat Durumları
          </h2>
          <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto mb-8">
            Ankara Metro hatları ve durak bilgileri. Metro treni şu anda hangi durakta görebilirsiniz.
          </p>
        </div>

        {/* Metro İnşaat Projesi - Animasyonlu */}
        <MetroLine />
      </main>

      {/* Footer */}
      <Footer />
    </div>
  );
}