import React, { useEffect } 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';
import { useMinimize } from '@/components/MinimizeToggle';

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-card border border-border hover:bg-accent transition-all duration-300 ease-in-out transform hover:-translate-y-1 shadow-lg flex flex-col items-center">
        <div className="flex items-center justify-center mb-4 bg-primary/10 w-12 h-12 rounded-full border border-primary/20">
          <Icon className="w-6 h-6 text-primary" />
        </div>
        <h2 className="text-xl md:text-2xl font-bold text-card-foreground mb-2 text-center">{title}</h2>
        <p className="text-muted-foreground text-center font-medium opacity-90">{description}</p>
      </div>
    </Link>
  </motion.div>
);

function HomePage() {
  const { t, isRTL } = useLanguage();
  const [, , setMinimized] = useMinimize('bgAudioMinimized', true);

  useEffect(() => {
    setMinimized(true);
    // Ensure all audio players are paused upon entering the homepage to prevent auto-play
    document.querySelectorAll('audio').forEach(audio => {
      if (!audio.paused) {
        audio.pause();
      }
    });
  }, [setMinimized]);

  return (
    <>
      <Seo {...seoMetadata.home} />
      <div className={`min-h-screen px-4 pt-24 pb-32 bg-background text-foreground ${isRTL ? 'text-right' : 'text-left'}`}>
        <div className="max-w-7xl mx-auto">
          <HeroImage />
          
          <section className="mt-20">
            <div className="flex flex-col items-center justify-center mb-12">
              <motion.div 
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                className="flex items-center justify-center gap-4 bg-primary/10 px-8 py-4 rounded-full border border-primary/20 shadow-sm"
              >
                <Compass className="w-8 h-8 md:w-10 md:h-10 text-primary" />
                <h2 className="text-3xl md:text-4xl font-extrabold text-primary" style={{ fontFamily: 'Cairo, sans-serif' }}>
                  {t('home.discoverSections') || 'استكشاف الموقع'}
                </h2>
              </motion.div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
              <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>
            
            <div className="flex justify-center mt-16">
              <motion.p 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 1.0, duration: 0.5 }}
                className="text-center text-lg md:text-xl text-primary-foreground font-bold tracking-wider bg-primary px-6 py-2 rounded-full border border-primary/20 shadow-md inline-block"
              >
                {t('home.prayerReminder')}
              </motion.p>
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

export default HomePage;