'use client';

import { useState } from 'react';
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default function Documents() {
  const [selectedCategory, setSelectedCategory] = useState('all');

  const categories = [
    { id: 'all', name: 'Tümü', icon: '📁' },
    { id: 'technical', name: 'Teknik Dokümanlar', icon: '📐' },
    { id: 'reports', name: 'Raporlar', icon: '📊' },
    { id: 'permissions', name: 'İzinler', icon: '✅' },
    { id: 'presentations', name: 'Sunumlar', icon: '📽️' },
  ];

  const documents = [
    {
      id: 1,
      category: 'technical',
      title: 'A2 Metro Hattı Teknik Şartnamesi',
      description: 'Proje kapsamındaki tüm teknik detaylar',
      date: '15 Ekim 2025',
      size: '12.5 MB',
      type: 'PDF',
      icon: '📐',
    },
    {
      id: 2,
      category: 'technical',
      title: 'İstasyon Mimari Projesi',
      description: 'İstasyon binalarının mimari tasarımı',
      date: '12 Ekim 2025',
      size: '25.8 MB',
      type: 'PDF',
      icon: '🏗️',
    },
    {
      id: 3,
      category: 'technical',
      title: 'Güvenlik Planı ve Prosedürleri',
      description: 'İş güvenliği planı ve acil durum prosedürleri',
      date: '10 Ekim 2025',
      size: '6.8 MB',
      type: 'PDF',
      icon: '🛡️',
    },
    {
      id: 4,
      category: 'technical',
      title: 'Malzeme Spesifikasyonları',
      description: 'İnşaatta kullanılacak malzeme detayları',
      date: '8 Ekim 2025',
      size: '9.2 MB',
      type: 'PDF',
      icon: '🔧',
    },
    {
      id: 5,
      category: 'reports',
      title: 'ÇED Raporu',
      description: 'Çevresel Etki Değerlendirme',
      date: '5 Ekim 2025',
      size: '8.3 MB',
      type: 'PDF',
      icon: '🌍',
    },
    {
      id: 6,
      category: 'reports',
      title: 'Eylül 2025 İlerleme Raporu',
      description: 'Aylık proje ilerleme durumu',
      date: '1 Ekim 2025',
      size: '3.2 MB',
      type: 'PDF',
      icon: '📈',
    },
    {
      id: 7,
      category: 'reports',
      title: 'Ağustos 2025 İlerleme Raporu',
      description: 'Aylık proje ilerleme durumu',
      date: '1 Eylül 2025',
      size: '3.1 MB',
      type: 'PDF',
      icon: '📈',
    },
    {
      id: 8,
      category: 'permissions',
      title: 'İnşaat Ruhsatı',
      description: 'Belediye onaylı inşaat ruhsatı belgesi',
      date: '5 Eylül 2025',
      size: '1.5 MB',
      type: 'PDF',
      icon: '✅',
    },
    {
      id: 9,
      category: 'permissions',
      title: 'Kamulaştırma İzin Belgeleri',
      description: 'Proje alanı kamulaştırma işlem belgeleri',
      date: '28 Ağustos 2025',
      size: '4.7 MB',
      type: 'PDF',
      icon: '📋',
    },
    {
      id: 10,
      category: 'permissions',
      title: 'Çalışma İzin Belgeleri',
      description: 'İlgili kurumlardan alınan çalışma izinleri',
      date: '15 Ağustos 2025',
      size: '2.8 MB',
      type: 'PDF',
      icon: '📄',
    },
    {
      id: 11,
      category: 'presentations',
      title: 'A2 Metro Hattı Tanıtım Sunumu',
      description: 'Genel tanıtım ve proje özeti sunumu',
      date: '20 Eylül 2025',
      size: '15.6 MB',
      type: 'PPTX',
      icon: '📽️',
    },
    {
      id: 12,
      category: 'presentations',
      title: 'Teknik Altyapı Sunumu',
      description: 'Tünel ve istasyon altyapı detayları',
      date: '15 Eylül 2025',
      size: '22.4 MB',
      type: 'PPTX',
      icon: '🎯',
    },
  ];

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

  return (
    <div className="min-h-screen bg-[#003366]">
      <Header />
      <main className="pt-24 md:pt-32 pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">Belgeler</h1>
            <p className="text-lg text-white">A2 Metro Hattı proje belgeleri</p>
          </div>
          
          <div className="flex flex-wrap justify-center gap-2 md:gap-3 mb-12">
            {categories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setSelectedCategory(cat.id)}
                className={`px-3 py-2 md:px-6 md:py-3 rounded-full font-semibold text-sm md:text-base transition-all ${
                  selectedCategory === cat.id ? 'bg-[#00B4D8] text-white shadow-lg scale-105' : 'bg-white text-[#004B87] hover:bg-gray-100'
                }`}
              >
                <span className="mr-1">{cat.icon}</span>
                <span className="hidden sm:inline">{cat.name}</span>
                <span className="sm:hidden">{cat.name.split(' ')[0]}</span>
              </button>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredDocs.map((doc) => (
              <div key={doc.id} className="bg-white rounded-2xl p-6">
                <div className="text-4xl mb-4">{doc.icon}</div>
                <h3 className="text-xl font-bold text-[#004B87] mb-2">{doc.title}</h3>
                <p className="text-gray-600 text-sm mb-4">{doc.description}</p>
                <div className="text-xs text-gray-500 mb-4">
                  <div>{doc.date}</div>
                  <div>{doc.size}</div>
                </div>
                <button className="w-full bg-[#00B4D8] text-white py-2 rounded-lg">İndir</button>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}