import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Headphones, Tv, Radio, Gem, Shield, BookOpen, Clock, BookMarked, Compass, Book, Hash, Calculator, Map, Lightbulb } from 'lucide-react';
import Seo from '@/components/Seo';
import HeroImage from '@/components/HeroImage';
import { useLanguage } from '@/contexts/LanguageContext';
import { seoMetadata } from '@/data/seoMetadata';

const FeatureCard = ({ to, icon: Icon, title, description, delay }) => (
  <motion.div
    initial={{ opacity: 0, y: 50 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.5, delay }}
    className="w-full"
  >
    <Link to={to}>
      <div className="h-full p-6 rounded-2xl bg-gray-800/50 backdrop-blur-sm border border-purple-500/20 hover:bg-purple-900/40 hover:border-purple-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 shadow-lg hover:shadow-purple-500/20 flex flex-col items-center">
        {/* Reduced icon container size from w-16 h-16 to w-12 h-12 (~25% reduction) */}
        <div className="flex items-center justify-center mb-4 bg-purple-600/30 w-12 h-12 rounded-full">
          {/* Reduced icon size from w-8 h-8 to w-6 h-6 (~25% reduction) */}
          <Icon className="w-6 h-6 text-purple-300" />
        </div>
        <h2 className="text-2xl font-bold text-white mb-2 text-center">{title}</h2>
        <p className="text-gray-400 text-center">{description}</p>
      </div>
    </Link>
  </motion.div>
);

function HomePage() {
  const { t, isRTL } = useLanguage();

  return (
    <>
      <Seo {...seoMetadata.home} />
      <div className={`min-h-screen text-white px-4 pt-24 pb-8 ${isRTL ? 'text-right' : 'text-left'}`}>
        <div className="max-w-7xl mx-auto">
          <HeroImage />
          
          <section className="mt-16">
            <h2 className="text-3xl font-bold text-center mb-10 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
              {t('home.discoverSections')}
            </h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <FeatureCard to="/quran-browser" icon={BookOpen} title={isRTL ? 'تصفح القرآن' : 'Quran Browser'} description={isRTL ? 'اقرأ واستمع للقرآن مع التفسير' : 'Read and listen to Quran with tafsir'} delay={0.1} />
              <FeatureCard to="/quran-memorization" icon={BookOpen} title={isRTL ? 'تحفيظ القرآن' : 'Quran Memorization'} description={isRTL ? 'أداة تكرار الآيات لتسهيل الحفظ' : 'Ayah repetition tool for memorization'} delay={0.15} />
              <FeatureCard to="/live-radio" icon={Radio} title={t('home.liveRadioTitle')} description={t('home.liveRadioDesc')} delay={0.2} />
              <FeatureCard to="/quran-listeners" icon={Headphones} title={t('home.quranListenersTitle')} description={t('home.quranListenersDesc')} delay={0.25} />
              <FeatureCard to="/tafseer" icon={BookOpen} title={t('home.tafseerTitle')} description={t('home.tafseerDesc')} delay={0.3} />
              <FeatureCard to="/hadith" icon={BookMarked} title={t('home.hadithTitle')} description={t('home.hadithDesc')} delay={0.35} />
              <FeatureCard to="/prayer-times" icon={Clock} title={t('home.prayerTimesTitle')} description={t('home.prayerTimesDesc')} delay={0.4} />
              <FeatureCard to="/qibla" icon={Compass} title={t('home.qiblaTitle')} description={t('home.qiblaDesc')} delay={0.45} />
              <FeatureCard to="/tasbeeh" icon={Gem} title={t('home.tasbeehTitle')} description={t('home.tasbeehDesc')} delay={0.5} />
              <FeatureCard to="/adhkar" icon={Shield} title={t('home.adhkarTitle')} description={t('home.adhkarDesc')} delay={0.55} />
              <FeatureCard to="/live-channels" icon={Tv} title={t('home.liveChannelsTitle')} description={t('home.liveChannelsDesc')} delay={0.6} />
              <FeatureCard to="/prophet-stories" icon={Book} title={t('nav.prophetStories')} description="قصص الأنبياء بصوت الشيخ نبيل العوضي" delay={0.65} />
              <FeatureCard to="/tajweed-lessons" icon={BookOpen} title={t('nav.tajweedLessons')} description="تعلم أحكام التجويد بسهولة وتفصيل" delay={0.7} />
              <FeatureCard to="/asma-ul-husna" icon={Hash} title={t('nav.asmaUlHusna')} description="أسماء الله الحسنى ومعانيها العظيمة" delay={0.75} />
              <FeatureCard to="/zakat-calculator" icon={Calculator} title={t('nav.zakatCalculator')} description="احسب زكاتك بدقة وسهولة" delay={0.8} />
              <FeatureCard to="/hajj-umrah-guide" icon={Map} title={t('nav.hajjUmrahGuide')} description="دليل شامل لمناسك الحج والعمرة" delay={0.85} />
              <FeatureCard to="/daily-wisdom" icon={Lightbulb} title={t('nav.dailyWisdom')} description="حكمة، آية، أو حديث ليومك" delay={0.9} />
            </div>
            
            <motion.p 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1.0, duration: 0.5 }}
              className="text-center mt-16 text-lg text-purple-300 font-semibold tracking-wider font-amiri"
            >
              {t('home.prayerReminder')}
            </motion.p>
          </section>
        </div>
      </div>
    </>
  );
}

export default HomePage;