import React, { useState } from 'react';
import { Search, Book, Heart, Users, Moon, MessageCircle, TrendingUp, ChevronRight } from 'lucide-react';

export default function SorularlaIslam() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('Tümü');

  const categories = [
    { name: 'Tümü', icon: MessageCircle, color: 'bg-gray-100 text-gray-700' },
    { name: 'İbadet', icon: Moon, color: 'bg-emerald-100 text-emerald-700' },
    { name: 'Aile', icon: Heart, color: 'bg-rose-100 text-rose-700' },
    { name: 'Toplum', icon: Users, color: 'bg-blue-100 text-blue-700' },
    { name: 'Kur\'an', icon: Book, color: 'bg-amber-100 text-amber-700' },
  ];

  const questions = [
    {
      id: 1,
      category: 'İbadet',
      question: 'Namaz kılarken düşünceler dağılırsa ne yapmalıyız?',
      answer: 'Namazda huşu çok önemlidir. Düşünceler dağıldığında tekrar Allah\'a yönelmeye çalışmalı, namazda okuduklarımızın anlamını düşünmeliyiz. Şeytan insanın namazdaki konsantrasyonunu bozmaya çalışır...',
      views: 1240,
      date: '2 gün önce',
      featured: true
    },
    {
      id: 2,
      category: 'Aile',
      question: 'Anne babaya karşı görevlerimiz nelerdir?',
      answer: 'İslam\'da anne babaya iyilik ve saygı büyük bir önem taşır. Kur\'an-ı Kerim\'de Allah\'tan sonra en çok vurgulanan konulardan biridir. Onlara "öf" bile dememek gerekir...',
      views: 2150,
      date: '1 hafta önce'
    },
    {
      id: 3,
      category: 'Kur\'an',
      question: 'Kur\'an\'ı anlamadan okumak sevap mıdır?',
      answer: 'Kur\'an\'ı meal olmadan okumak da sevaptır, ancak anlamını bilmek ve üzerinde düşünmek daha fazla fayda sağlar. Her harf için on sevap vardır...',
      views: 3420,
      date: '3 gün önce'
    },
    {
      id: 4,
      category: 'İbadet',
      question: 'Cuma namazı kaç rekattır ve nasıl kılınır?',
      answer: 'Cuma namazı farz kısmı 2 rekattır. Bunun yanında sünnet namazları da vardır. İlk sünneti 4 rekat, son sünneti ise 4 rekattır. Hutbe dinlemek farzdır...',
      views: 890,
      date: '5 gün önce'
    },
    {
      id: 5,
      category: 'Toplum',
      question: 'Komşu hakları nelerdir?',
      answer: 'Hz. Peygamber komşuya iyi davranmayı çok vurgulamıştır. Komşunun açlığını, sıkıntısını öğrenmeli ve yardım etmeliyiz. Komşusu açken tok yatan bizden değildir...',
      views: 1560,
      date: '4 gün önce'
    },
    {
      id: 6,
      category: 'Aile',
      question: 'Evlilik öncesi dikkat edilmesi gerekenler nelerdir?',
      answer: 'İslam\'da evlilik kutsal bir bağdır. Eş seçiminde dindarlık, ahlak ve uyum önemlidir. Ailelerin tanışması da önerilir. İstişare yapılmalıdır...',
      views: 2890,
      date: '1 gün önce'
    },
    {
      id: 7,
      category: 'İbadet',
      question: 'Abdest alırken dikkat edilecek hususlar',
      answer: 'Abdest İslam\'ın temizlik anlayışının temelidir. Üç kez yıkamak sünnettir. Misvak kullanmak da sünnettir. Abdestli gezmek sevaptır...',
      views: 1120,
      date: '6 gün önce'
    },
    {
      id: 8,
      category: 'Kur\'an',
      question: 'Hangi sureleri ezberlemeliyiz?',
      answer: 'Namaz için kısa sureler ezberlemek gerekir. Fatiha suresi farzdır. Bunun yanında İhlas, Felak, Nas gibi sureleri ezberlemek önerilir...',
      views: 2340,
      date: '2 gün önce'
    }
  ];

  const featuredQuestion = questions.find(q => q.featured);
  const regularQuestions = questions.filter(q => !q.featured);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Üst Bar */}
      <header className="bg-white shadow-md sticky top-0 z-50 border-b-2 border-emerald-500">
        <div className="max-w-7xl mx-auto px-4 py-5">
          <div className="flex items-center justify-between flex-wrap gap-4">
            <div className="flex items-center gap-3">
              <div className="bg-emerald-600 p-2 rounded-lg">
                <MessageCircle className="w-7 h-7 text-white" />
              </div>
              <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-emerald-800 bg-clip-text text-transparent">
                Sorularla İslam
              </h1>
            </div>
            
            <div className="flex-1 max-w-xl">
              <div className="relative">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                <input
                  type="text"
                  placeholder="Soru ara..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-12 pr-4 py-3 rounded-xl border-2 border-gray-200 text-gray-900 focus:outline-none focus:border-emerald-500 transition-colors"
                />
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Kategoriler */}
      <div className="bg-white/80 backdrop-blur-sm border-b">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex gap-3 overflow-x-auto pb-2">
            {categories.map((cat) => (
              <button
                key={cat.name}
                onClick={() => setSelectedCategory(cat.name)}
                className={`flex items-center gap-2 px-5 py-2.5 rounded-full whitespace-nowrap font-semibold transition-all ${
                  selectedCategory === cat.name 
                    ? 'bg-emerald-600 text-white shadow-lg scale-105' 
                    : `${cat.color} hover:shadow-md`
                }`}
              >
                <cat.icon className="w-4 h-4" />
                {cat.name}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Ana İçerik */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        {/* Öne Çıkan Soru */}
        {featuredQuestion && (
          <div className="mb-10">
            <div className="flex items-center gap-2 mb-4">
              <TrendingUp className="w-6 h-6 text-emerald-600" />
              <h2 className="text-2xl font-bold text-gray-800">Öne Çıkan Soru</h2>
            </div>
            <div className="bg-gradient-to-br from-emerald-50 to-white rounded-2xl shadow-xl p-8 border-2 border-emerald-200 hover:shadow-2xl transition-shadow">
              <div className="flex items-start justify-between mb-3">
                <span className="px-4 py-1.5 bg-emerald-600 text-white rounded-full text-sm font-bold">
                  {featuredQuestion.category}
                </span>
                <span className="text-sm text-gray-500">{featuredQuestion.date}</span>
              </div>
              <h3 className="text-3xl font-bold text-gray-900 mb-4">
                {featuredQuestion.question}
              </h3>
              <p className="text-gray-700 mb-5 text-lg leading-relaxed">
                {featuredQuestion.answer}
              </p>
              <div className="flex items-center justify-between pt-4 border-t border-emerald-200">
                <span className="text-sm text-gray-600 font-medium">
                  👁️ {featuredQuestion.views.toLocaleString()} görüntülenme
                </span>
                <button className="flex items-center gap-2 text-emerald-600 font-semibold hover:gap-3 transition-all">
                  Devamını Oku
                  <ChevronRight className="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Soru Listesi */}
        <div className="mb-6">
          <h2 className="text-2xl font-bold text-gray-800 mb-6">Son Sorular</h2>
        </div>
        <div className="grid md:grid-cols-2 gap-6">
          {regularQuestions.map((q) => (
            <article 
              key={q.id}
              className="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-all cursor-pointer border border-gray-100 hover:border-emerald-200"
            >
              <div className="flex items-start justify-between mb-3">
                <span className={`px-3 py-1 rounded-full text-xs font-bold ${
                  q.category === 'İbadet' ? 'bg-emerald-100 text-emerald-700' :
                  q.category === 'Aile' ? 'bg-rose-100 text-rose-700' :
                  q.category === 'Toplum' ? 'bg-blue-100 text-blue-700' :
                  'bg-amber-100 text-amber-700'
                }`}>
                  {q.category}
                </span>
                <span className="text-xs text-gray-500">{q.date}</span>
              </div>
              <h3 className="font-bold text-gray-900 mb-3 text-xl leading-snug">
                {q.question}
              </h3>
              <p className="text-gray-600 mb-4 leading-relaxed">
                {q.answer}
              </p>
              <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                <span className="text-xs text-gray-500">
                  👁️ {q.views.toLocaleString()} görüntülenme
                </span>
                <button className="flex items-center gap-1 text-emerald-600 font-semibold text-sm hover:gap-2 transition-all">
                  Oku
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </article>
          ))}
        </div>

        {/* Daha Fazla Yükle */}
        <div className="text-center mt-10">
          <button className="px-8 py-4 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 transition-colors shadow-lg hover:shadow-xl">
            Daha Fazla Soru Yükle
          </button>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 text-white mt-20 py-8">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <p className="text-gray-400">© 2024 Sorularla İslam - Tüm hakları saklıdır.</p>
        </div>
      </footer>
    </div>
  );
}