import React from 'react';
import { Search, Library, Sparkles, BookOpen, GraduationCap } from 'lucide-react';

export const Home = ({ onStartResearch, onExploreLibrary, t }) => {
  return (
    <div className="max-w-5xl mx-auto space-y-12 py-8">
      {/* Hero Section */}
      <section className="text-center space-y-6">
        <div className="inline-block p-3 bg-emerald-100 rounded-full mb-4">
          <Sparkles className="w-8 h-8 text-emerald-700" />
        </div>
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight">
          {t.heroTitle || "المكتبة المريدية العالمية"}
        </h1>
        <p className="text-xl text-slate-600 max-w-2xl mx-auto">
          {t.heroSubtitle || "منصة رقمية متطورة للبحث في تراث الشيخ أحمدو بمبا وعلوم المريدية"}
        </p>
      </section>

      {/* Action Cards */}
      <div className="grid md:grid-cols-2 gap-8 mt-12">
        {/* Card 1: Smart Researcher */}
        <div 
          onClick={onStartResearch}
          className="group cursor-pointer bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl hover:border-emerald-500 transition-all duration-300"
        >
          <div className="w-14 h-14 bg-emerald-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <Search className="w-7 h-7 text-white" />
          </div>
          <h2 className="text-2xl font-bold text-slate-900 mb-3">{t.navSmartResearcher}</h2>
          <p className="text-slate-600 mb-6 leading-relaxed">
            استخدم الذكاء الاصطناعي لاستخراج الدرر من المتون والقصائد والحصول على إجابات موثقة.
          </p>
          <div className="flex items-center text-emerald-600 font-semibold">
            <span>{t.startResearch || "ابدأ البحث الآن"}</span>
            <span className="mx-2">←</span>
          </div>
        </div>

        {/* Card 2: Library */}
        <div 
          onClick={onExploreLibrary}
          className="group cursor-pointer bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl hover:border-blue-500 transition-all duration-300"
        >
          <div className="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <Library className="w-7 h-7 text-white" />
          </div>
          <h2 className="text-2xl font-bold text-slate-900 mb-3">{t.navLibrary}</h2>
          <p className="text-slate-600 mb-6 leading-relaxed">
            تصفح الأرشيف الكامل للمؤلفات والقصائد المصنفة حسب الموضوع والمنهج.
          </p>
          <div className="flex items-center text-blue-600 font-semibold">
            <span>{t.exploreLibrary || "تصفح المكتبة"}</span>
            <span className="mx-2">←</span>
          </div>
        </div>
      </div>

      {/* Features Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-12 border-t">
        <div className="flex gap-4 items-start">
          <BookOpen className="w-6 h-6 text-emerald-600 shrink-0" />
          <div>
            <h3 className="font-bold text-slate-900">مصادر موثوقة</h3>
            <p className="text-sm text-slate-500">متون محققة ومراجعة علمياً.</p>
          </div>
        </div>
        <div className="flex gap-4 items-start">
          <GraduationCap className="w-6 h-6 text-emerald-600 shrink-0" />
          <div>
            <h3 className="font-bold text-slate-900">منهج أكاديمي</h3>
            <p className="text-sm text-slate-500">أدوات بحث تناسب الباحثين والمريدين.</p>
          </div>
        </div>
        <div className="flex gap-4 items-start">
          <Sparkles className="w-6 h-6 text-emerald-600 shrink-0" />
          <div>
            <h3 className="font-bold text-slate-900">ذكاء اصطناعي</h3>
            <p className="text-sm text-slate-500">تحليل عرفاني وبحث ذكي متطور.</p>
          </div>
        </div>
      </div>
    </div>
  );
};