import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  BookOpen, 
  Calculator, 
  ChevronRight, 
  ChevronLeft,
  Play, 
  Pause, 
  Info, 
  ArrowLeft,
  ArrowUpAZ,
  ArrowDownZA,
  Moon, 
  Home as HomeIcon,
  Search,
  Bookmark,
  Coins,
  Volume2,
  X,
  Sparkles,
  Menu,
  Calendar as CalendarIcon,
  Clock,
  MapPin,
  Sunrise,
  Sun,
  Sunset,
  Globe, 
  RefreshCw, 
  TrendingUp,
  Wifi,
  HelpCircle,
  AlertCircle,
  Settings,
  FileText, 
  Share2,
  ShieldCheck,
  Crown, 
  Download, 
  History, 
  CheckCircle,
  Lock 
} from 'lucide-react';

// ==========================================
// 1. CONSTANTES & DATA
// ==========================================

const DREAMS_DATA = [
  { keyword: "Abeille", interpretation: "Symbolise la fertilité, la richesse obtenue par un effort, ou un homme utile à la communauté. Si elle pique, c'est un bienfait." },
  { keyword: "Ablutions", interpretation: "Faire ses ablutions (Woudou) complètement signifie l'exaucement d'un besoin, la protection contre les peurs et la purification des péchés." },
  { keyword: "Accouchement", interpretation: "Pour une personne en difficulté, c'est la fin des soucis. Pour une femme enceinte, c'est une bonne nouvelle. Peut aussi signifier la sortie d'une épreuve." },
  { keyword: "Adhan", interpretation: "Entendre l'appel à la prière indique le Hajj si c'est la saison, ou une nouvelle véridique. Peut aussi signifier un appel à la droiture." },
  { keyword: "Araignée", interpretation: "Représente souvent une femme malveillante, ou un homme faible et ascétique. Sa toile symbolise la fragilité." },
  { keyword: "Argent", interpretation: "L'argent en métal (pièces) représente des soucis ou des paroles futiles. Les billets peuvent signifier la richesse mais avec des responsabilités." },
  { keyword: "Arbre", interpretation: "Un arbre représente un homme. S'il est fruitier, c'est un homme profitable. S'il est sec, un homme avare ou hypocrite." },
  { keyword: "Bateau", interpretation: "Le bateau symbolise le salut, la délivrance des soucis, ou le mariage pour le célibataire." },
  { keyword: "Chat", interpretation: "Souvent interprété comme un voleur (parfois de la famille) ou un serviteur. S'il est calme, c'est une année de confort ; sauvage, une année de troubles." },
  { keyword: "Cheval", interpretation: "Symbolise la force, la puissance, l'honneur et la victoire sur les ennemis. Monter un cheval indique la dignité et le pouvoir." },
  { keyword: "Cheveux", interpretation: "Les cheveux longs sont une augmentation de biens pour la femme, mais des soucis pour l'homme (selon le contexte). Les couper peut signifier payer une dette." },
  { keyword: "Chien", interpretation: "Un ennemi faible, ou un homme avare et méprisable. L'aboiement est une parole désagréable d'une personne sans honneur." },
  { keyword: "Chute", interpretation: "Tomber d'un endroit élevé signifie passer d'une situation à une autre moins favorable, ou un péché." },
  { keyword: "Ciel", interpretation: "Regarder le ciel symbolise l'ambition ou le regard vers l'Imam/Dirigeant. S'il est pur, c'est une bonne nouvelle." },
  { keyword: "Ccimetière", interpretation: "Peut indiquer la prise de conscience, l'ascétisme, ou la visite de prisonniers. Parfois signe de frayeur." },
  { keyword: "Dents", interpretation: "Les dents représentent la famille. Celles du haut : les hommes (père, oncles). Celles du bas : les femmes. Une dent qui tombe peut signifier une longue vie (survivre à ses proches) ou une dette payée." },
  { keyword: "Eau", interpretation: "L'eau pure est signe de vie, de miséricorde et de pureté. L'eau trouble ou stagnante peut indiquer des soucis ou une maladie." },
  { keyword: "Enfer", interpretation: "Le voir est un avertissement contre le péché. Y entrer peut signifier commettre des fautes graves." },
  { keyword: "Etoiles", interpretation: "Les étoiles symbolisent les nobles, les savants ou les riches. Les voir tomber peut annoncer la mort de grands personnages." },
  { keyword: "Feu", interpretation: "Le feu peut symboliser la guerre, la tentation (fitna) ou parfois la guidance s'il éclaire sans brûler." },
  { keyword: "Kaaba", interpretation: "La voir symbolise la sécurité, la guidance, ou une rencontre avec une personne d'autorité. Y entrer peut annoncer le Hajj." },
  { keyword: "Lait", interpretation: "Le lait représente la Fitra (nature innée) et la connaissance religieuse pure. Le boire est signe de science et de richesse licite." },
  { keyword: "Larmes", interpretation: "Des larmes froides sont une joie. Des larmes chaudes sont une tristesse. Pleurer sans crier est souvent un soulagement." },
  { keyword: "Lion", interpretation: "Un ennemi puissant et redoutable, ou un dirigeant injuste. Le vaincre est une grande victoire." },
  { keyword: "Lune", interpretation: "La lune représente un dirigeant juste, un savant, un mari ou un fils vertueux." },
  { keyword: "Maison", interpretation: "La maison symbolise la sécurité, la femme, ou l'état spirituel du rêveur. Une maison neuve est un bienfait." },
  { keyword: "Mariage", interpretation: "Le mariage dans un rêve peut signifier l'honneur, la richesse, un nouveau métier, ou la providence divine." },
  { keyword: "Miel", interpretation: "L'argent licite obtenu sans effort, ou la douceur de la foi et la lecture du Coran." },
  { keyword: "Montagne", interpretation: "Symbolise un homme de haut rang, une épreuve difficile ou un objectif élevé. La gravir signifie l'ascension sociale." },
  { keyword: "Mort", interpretation: "Peut symboliser la fin d’un cycle, le repentir, la corruption religieuse ou parfois... la vie (longévité)." },
  { keyword: "Oiseau", interpretation: "Un oiseau représente la joie, les bonnes nouvelles ou les actions de l'homme." },
  { keyword: "Or", interpretation: "Pour les hommes, l'or est souvent synonyme de soucis ou de perte d'argent. Pour les femmes, c'est une parure et une joie." },
  { keyword: "Paradis", interpretation: "Bonne nouvelle, entrée dans la sécurité, fin heureuse et bonnes actions." },
  { keyword: "Pluie", interpretation: "Si elle ne cause pas de dégâts, c'est une miséricorde et un soulagement venant d'Allah. Si elle est torrentielle, c'est une épreuve." },
  { keyword: "Poisson", interpretation: "En nombre connu, ce sont des femmes. En nombre inconnu ou grand nombre, c'est de l'argent et du butin." },
  { keyword: "Prière", interpretation: "Faire la prière indique l'accomplissement des promesses, l'atteinte des objectifs et la purification des péchés." },
  { keyword: "Prophète", interpretation: "Voir le Prophète (Salla Allahou Alayhi wa Sallam) sous sa véritable apparence est une vision véridique annonçant succès et guidance." },
  { keyword: "Rire", interpretation: "Le rire bruyant (éclat de rire) peut annoncer une tristesse. Le sourire est toujours positif et prophétique." },
  { keyword: "Roi", interpretation: "Représente l'autorité, le pouvoir ou l'élévation sociale. S'il est juste, c'est un bienfait." },
  { keyword: "Sang", interpretation: "Le sang qui coule peut signifier une perte d'argent ou une parole mensongère. Boire du sang est un péché." },
  { keyword: "Serpent", interpretation: "Un ennemi caché. Sa taille et sa dangerosité dépendent de la taille du serpent. Le tuer est une victoire." },
  { keyword: "Soleil", interpretation: "Le soleil représente le dirigeant suprême ou le père. S'il est éclipsé, cela indique un événement grave touchant le chef." },
  { keyword: "Voler", interpretation: "Voler avec des ailes symbolise le voyage. Sans ailes, cela peut signifier un changement d'état ou un souhait exaucé." },
  { keyword: "Voyage", interpretation: "Indique un changement d'état, le passage d'une situation à une autre, ou la recherche de gain." }
];

// ==========================================
// 2. SERVICES & LIB
// ==========================================

const API_BASE = "https://api.alquran.cloud/v1";

const fetchSurahs = async () => {
  const res = await fetch(`${API_BASE}/surah`);
  const data = await res.json();
  return data.data;
};

const fetchSurahDetails = async (number) => {
  const res = await fetch(`${API_BASE}/surah/${number}/editions/quran-uthmani,fr.hamidullah`);
  const data = await res.json();
  return {
    arabic: data.data[0],
    french: data.data[1]
  };
};

// ==========================================
// 3. SCHEMA.ORG GENERATORS
// ==========================================

const getBreadcrumbSchema = (items) => ({
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": items.map((item, index) => ({
    "@type": "ListItem",
    "position": index + 1,
    "name": item.name,
    "item": item.url ? `https://islam.quran${item.url}` : undefined
  }))
});

const getFaqSchema = (faqs) => ({
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": faqs.map(faq => ({
    "@type": "Question",
    "name": faq.q,
    "acceptedAnswer": {
      "@type": "Answer",
      "text": faq.a
    }
  }))
});

const getCalculatorSchema = (name, description) => ({
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": name,
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "Web",
  "description": description,
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "EUR"
  }
});

const getLocalBusinessSchema = (city, country) => ({
  "@context": "https://schema.org",
  "@type": "Place",
  "name": `Horaires de prière à ${city}`,
  "address": {
    "@type": "PostalAddress",
    "addressLocality": city,
    "addressCountry": country
  },
  "publicAccess": true,
  "geo": {
    "@type": "GeoCoordinates"
  }
});

// ==========================================
// 4. COMPOSANTS UI & SEO & ADS
// ==========================================

const AdSenseBanner = ({ className = "" }) => {
  return (
    <div className={`my-8 mx-auto max-w-4xl px-4 print:hidden ${className}`}>
      <div className="bg-slate-50 border border-slate-100 rounded-lg p-4 text-center">
        <div className="flex items-center justify-center gap-1 text-[10px] text-slate-400 uppercase tracking-wider mb-2">
          <span>Publicité Partenaire</span>
          <ShieldCheck className="w-3 h-3 text-emerald-500" title="Contenu filtré Halal" />
        </div>
        <div className="h-24 bg-slate-100/50 rounded border border-dashed border-slate-300 flex flex-col items-center justify-center text-slate-400 text-sm gap-1">
          <span>Espace Publicitaire (Filtrage Catégories Sensibles)</span>
        </div>
      </div>
    </div>
  );
};

const SeoHead = ({ title, description, schema }) => {
  useEffect(() => {
    document.title = `${title} | islam.quran`;
    const metaDesc = document.querySelector('meta[name="description"]');
    if (metaDesc) metaDesc.setAttribute('content', description);
  }, [title, description]);

  const jsonLd = schema ? (Array.isArray(schema) || schema['@graph'] ? schema : { ...schema }) : null;

  return (
    <div className="hidden">
      {jsonLd && (
        <script type="application/ld+json">
          {JSON.stringify(jsonLd)}
        </script>
      )}
    </div>
  );
};

const Button = ({ children, onClick, variant = 'primary', className = "", disabled = false, ...props }) => {
  const variants = {
    primary: "bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800 shadow-sm",
    secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200 active:bg-slate-300",
    outline: "border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-50",
    premium: "bg-amber-400 text-amber-950 hover:bg-amber-500 shadow-sm font-bold"
  };
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      className={`px-4 py-3 md:py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 justify-center touch-manipulation ${variants[variant]} ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      {...props}
    >
      {children}
    </button>
  );
};

const Header = ({ setPage, activePage, isPremium }) => (
  <header className="bg-white border-b border-slate-100 sticky top-0 z-50 backdrop-blur-md bg-white/90">
    <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
      <div 
        className="flex items-center gap-2 font-bold text-xl text-slate-800 cursor-pointer select-none tracking-tight"
        onClick={() => setPage('home')}
        role="button"
        tabIndex={0}
      >
        <div className="w-8 h-8 bg-emerald-600 text-white rounded-lg flex items-center justify-center font-serif shadow-sm">
          <Moon className="w-4 h-4 fill-current" />
        </div>
        <span className="hidden sm:inline">
          islam<span className="text-emerald-600">.quran</span>
        </span>
      </div>
      
      <div className="flex items-center gap-2">
        <nav className="flex gap-1 overflow-x-auto no-scrollbar py-2 mr-2">
          {[
            { id: 'coran', label: 'Coran', icon: BookOpen },
            { id: 'prayers', label: 'Prières', icon: Clock },
            { id: 'zakat', label: 'Zakat', icon: Coins },
            { id: 'dreams', label: 'Rêves', icon: Moon },
            { id: 'seo_hub', label: 'Ressources', icon: FileText }
          ].map((item) => (
            <button 
              key={item.id}
              onClick={() => setPage(item.id)}
              className={`p-2 rounded-lg transition-colors ${activePage === item.id ? 'bg-emerald-50 text-emerald-700' : 'text-slate-500 hover:bg-slate-50 hover:text-emerald-600'}`}
              title={item.label}
            >
              <item.icon className="w-5 h-5" />
            </button>
          ))}
        </nav>
        
        <div className="h-6 w-px bg-slate-200 mx-1 hidden sm:block"></div>
        
        <button 
          onClick={() => setPage('premium')}
          className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold transition-all ${isPremium ? 'bg-amber-100 text-amber-800 border border-amber-200' : 'bg-slate-900 text-white hover:bg-slate-800'}`}
        >
          <Crown className={`w-3 h-3 ${isPremium ? 'fill-amber-600' : ''}`} />
          {isPremium ? 'Premium' : 'Go Premium'}
        </button>
      </div>
    </div>
  </header>
);

const AudioPlayer = ({ currentSurah, isPlaying, togglePlay, progress, onClose }) => {
  if (!currentSurah) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 p-4 shadow-2xl z-50 animate-in slide-in-from-bottom-full">
      <div className="max-w-4xl mx-auto flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 flex-1 min-w-0">
          <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center text-emerald-700 font-bold shrink-0">
            {currentSurah.number}
          </div>
          <div className="truncate">
            <h4 className="font-bold text-slate-800 text-sm truncate">{currentSurah.englishName}</h4>
            <p className="text-xs text-slate-500 truncate">{currentSurah.englishNameTranslation}</p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          <button 
            onClick={togglePlay}
            className="w-12 h-12 bg-emerald-600 text-white rounded-full flex items-center justify-center hover:bg-emerald-700 shadow-lg active:scale-95 transition-transform"
            aria-label={isPlaying ? "Pause" : "Lecture"}
          >
            {isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-1" />}
          </button>
          <button onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600 md:hidden">
            <X className="w-5 h-5" />
          </button>
        </div>
      </div>
      <div className="absolute top-0 left-0 h-1 bg-emerald-100 w-full">
        <div className="h-full bg-emerald-500 transition-all duration-1000" style={{ width: `${progress}%` }} />
      </div>
    </div>
  );
};

// ==========================================
// 5. PAGES
// ==========================================

// ------------------------------------------
// PAGE: DISCLAIMER
// ------------------------------------------
const DisclaimerPage = () => (
  <div className="max-w-3xl mx-auto p-6 pb-24 animate-in fade-in">
    <SeoHead title="Avertissement Légal & Religieux" description="Conditions d'utilisation et avertissements religieux." />
    
    <div className="text-center mb-10">
      <div className="inline-flex items-center justify-center w-16 h-16 bg-amber-50 rounded-full mb-4">
        <AlertCircle className="w-8 h-8 text-amber-600" />
      </div>
      <h1 className="text-3xl font-bold font-serif text-slate-900 mb-2">Avertissement Important</h1>
      <p className="text-slate-500">Veuillez lire attentivement avant d'utiliser nos outils.</p>
    </div>

    <div className="space-y-6">
      <section className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
        <h2 className="text-lg font-bold text-slate-800 mb-3 flex items-center gap-2">
          <Info className="w-5 h-5 text-sky-500" /> 1. Nature Informatif
        </h2>
        <p className="text-slate-600 leading-relaxed text-sm">
          Les outils disponibles sur <strong>islam.quran</strong> sont conçus à des fins <strong>éducatives et informatives</strong> uniquement. Bien que nous nous efforcions d'assurer l'exactitude des algorithmes, des erreurs peuvent exister.
        </p>
      </section>

      <section className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
        <h2 className="text-lg font-bold text-slate-800 mb-3 flex items-center gap-2">
          <ShieldCheck className="w-5 h-5 text-emerald-500" /> 2. Consultation Professionnelle
        </h2>
        <p className="text-slate-600 leading-relaxed text-sm">
          Ces outils numériques <strong>ne remplacent pas</strong> la consultation d'experts qualifiés :
        </p>
        <ul className="list-disc list-inside mt-2 text-sm text-slate-600 space-y-1 ml-2">
          <li><strong>Zakat & Héritage :</strong> Consultez un savant (Mufti) ou un notaire.</li>
          <li><strong>Rêves :</strong> Les interprétations ne sont que des indications basées sur des textes anciens.</li>
          <li><strong>Prières :</strong> Vérifiez les horaires avec votre mosquée locale.</li>
        </ul>
      </section>

      <section className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
        <h2 className="text-lg font-bold text-slate-800 mb-3 flex items-center gap-2">
          <AlertCircle className="w-5 h-5 text-red-500" /> 3. Responsabilité
        </h2>
        <p className="text-slate-600 leading-relaxed text-sm">
          L'utilisateur reste <strong>seul responsable</strong> de ses décisions et de ses actes basés sur les informations fournies par ce site.
        </p>
      </section>

      <div className="text-center text-xs text-slate-400 mt-8 italic">
        "Allah est le plus Savant." (Allahu A'lam)
      </div>
    </div>
  </div>
);

// ------------------------------------------
// PAGE: PREMIUM
// ------------------------------------------
const PremiumPage = ({ isPremium, onTogglePremium }) => (
  <div className="max-w-3xl mx-auto p-6 pb-24">
    <SeoHead title="Espace Premium" description="Accédez aux fonctionnalités avancées." />
    
    <div className="text-center mb-10">
      <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-amber-400 to-amber-600 rounded-3xl shadow-lg mb-6 rotate-3">
        <Crown className="w-10 h-10 text-white" />
      </div>
      <h1 className="text-3xl font-bold text-slate-900 mb-4 font-serif">
        Espace <span className="text-amber-600">Premium</span>
      </h1>
      <p className="text-slate-600 max-w-lg mx-auto">
        Soutenez la plateforme et accédez à des outils pratiques pour faciliter votre quotidien.
      </p>
    </div>

    <div className="grid md:grid-cols-2 gap-6 mb-12">
      <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
        <h3 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
          <BookOpen className="w-5 h-5 text-emerald-600" /> Gratuit
        </h3>
        <ul className="space-y-3 mb-8">
          <li className="flex items-center gap-2 text-sm text-slate-600"><CheckCircle className="w-4 h-4 text-emerald-500" /> Coran Complet</li>
          <li className="flex items-center gap-2 text-sm text-slate-600"><CheckCircle className="w-4 h-4 text-emerald-500" /> Horaires de Prière</li>
          <li className="flex items-center gap-2 text-sm text-slate-600"><CheckCircle className="w-4 h-4 text-emerald-500" /> Calculateur Zakat Basique</li>
          <li className="flex items-center gap-2 text-sm text-slate-600"><CheckCircle className="w-4 h-4 text-emerald-500" /> Dictionnaire des Rêves</li>
        </ul>
        <div className="text-center text-sm font-bold text-slate-400">Inclus</div>
      </div>

      <div className="bg-slate-900 text-white p-6 rounded-2xl shadow-xl relative overflow-hidden">
        <div className="absolute top-0 right-0 p-8 opacity-10"><Crown className="w-32 h-32" /></div>
        <h3 className="font-bold text-amber-400 mb-4 flex items-center gap-2">
          <Crown className="w-5 h-5" /> Premium
        </h3>
        <ul className="space-y-3 mb-8">
          <li className="flex items-center gap-2 text-sm text-slate-300"><CheckCircle className="w-4 h-4 text-amber-500" /> Tout le contenu Gratuit</li>
          <li className="flex items-center gap-2 text-sm text-slate-300"><CheckCircle className="w-4 h-4 text-amber-500" /> Sauvegarde de l'historique</li>
          <li className="flex items-center gap-2 text-sm text-slate-300"><CheckCircle className="w-4 h-4 text-amber-500" /> Export PDF des calculs</li>
          <li className="flex items-center gap-2 text-sm text-slate-300"><CheckCircle className="w-4 h-4 text-amber-500" /> Zéro Publicité</li>
        </ul>
        <button 
          onClick={onTogglePremium}
          className={`w-full py-3 rounded-xl font-bold transition-all transform active:scale-95 ${isPremium ? 'bg-slate-700 text-slate-400' : 'bg-gradient-to-r from-amber-400 to-amber-600 text-white hover:shadow-lg shadow-amber-900/20'}`}
        >
          {isPremium ? 'Abonnement Actif' : 'Activer Premium (Simulation)'}
        </button>
      </div>
    </div>
  </div>
);

// ------------------------------------------
// PAGE: SEO PAGE GENERATOR
// ------------------------------------------
const SeoPageGenerator = ({ type, param, onBack }) => {
  let content = {};
  let schemaGraph = [];

  const breadcrumb = getBreadcrumbSchema([
    { name: 'Accueil', url: '/' },
    { name: 'Ressources', url: '/ressources' },
    { name: param, url: null }
  ]);
  
  switch(type) {
    case 'dream':
      const dream = DREAMS_DATA.find(d => d.keyword === param) || { keyword: param, interpretation: "Interprétation non disponible." };
      content = {
        title: `Rêver de ${dream.keyword}`,
        description: `Signification du rêve de ${dream.keyword} selon Ibn Sirine.`,
        intro: "Interprétation basée sur les textes classiques.",
        body: (
          <div className="space-y-4">
            <div className="p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r-lg">
              <p className="text-slate-700 italic">"{dream.interpretation}"</p>
            </div>
            <p className="text-slate-600">Voir "{dream.keyword}" peut avoir des significations variées selon le contexte.</p>
          </div>
        ),
        faq: [{ q: "Est-ce fiable ?", a: "C'est une indication, pas une certitude." }]
      };
      schemaGraph = [breadcrumb, getFaqSchema(content.faq)];
      break;

    case 'zakat':
      content = {
        title: `Zakat en ${param}`,
        description: `Guide Zakat pour ${param}.`,
        intro: "Obligation pour tout musulman éligible.",
        body: <p className="text-slate-600">Le calcul se base sur le Nisab local en <strong>{param}</strong>.</p>,
        faq: [{ q: "Quel taux ?", a: "2.5% du patrimoine." }]
      };
      schemaGraph = [breadcrumb, getFaqSchema(content.faq)];
      break;

    case 'prayer':
      content = {
        title: `Prières à ${param}`,
        description: `Horaires pour ${param}.`,
        intro: "La prière est le pilier de la religion.",
        body: <p className="text-slate-600">Horaires calculés pour <strong>{param}</strong>. Vérifiez avec votre mosquée.</p>,
        faq: [{ q: "Quelle méthode ?", a: "Dépend de la région." }]
      };
      schemaGraph = [breadcrumb, getLocalBusinessSchema(param, ""), getFaqSchema(content.faq)];
      break;

    case 'calendar':
      content = {
        title: `Calendrier ${param}`,
        description: `Dates clés pour ${param}.`,
        intro: "Basé sur le cycle lunaire.",
        body: <p className="text-slate-600">Dates estimées pour <strong>{param}</strong> (Ramadan, Aïd).</p>,
        faq: [{ q: "Début Ramadan ?", a: "Dépend de la lune." }]
      };
      schemaGraph = [breadcrumb, getFaqSchema(content.faq)];
      break;

    default: return null;
  }

  const schema = { "@context": "https://schema.org", "@graph": schemaGraph };

  return (
    <div className="max-w-3xl mx-auto p-4 md:p-6 pb-24 animate-in fade-in">
      <SeoHead title={content.title} description={content.description} schema={schema} />
      <button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-emerald-600 mb-6"><ArrowLeft className="w-4 h-4" /> Retour</button>
      <article className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="bg-slate-50 p-8 border-b border-slate-100">
          <h1 className="text-2xl font-bold font-serif text-slate-900 mb-2">{content.title}</h1>
          <p className="text-slate-600">{content.intro}</p>
        </div>
        <div className="p-8">
          {content.body}
          <div className="mt-8 pt-8 border-t border-slate-100">
            <h2 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2"><HelpCircle className="w-5 h-5 text-emerald-500" /> FAQ</h2>
            <div className="space-y-4">{content.faq.map((item, idx) => (<div key={idx} className="bg-slate-50 rounded-xl p-4"><h3 className="font-bold text-slate-800 text-sm mb-1">{item.q}</h3><p className="text-slate-600 text-sm">{item.a}</p></div>))}</div>
          </div>
        </div>
      </article>
    </div>
  );
};

// ------------------------------------------
// PAGE: HUB SEO / RESSOURCES
// ------------------------------------------
const SeoResourcesPage = () => {
  const [selectedPage, setSelectedPage] = useState(null);

  if (selectedPage) return <SeoPageGenerator type={selectedPage.type} param={selectedPage.param} onBack={() => setSelectedPage(null)} />;

  const sections = [
    { title: "Rêves", icon: Moon, color: "bg-indigo-50 text-indigo-600", links: [{ label: "Rêver de Serpent", type: 'dream', param: 'Serpent' }, { label: "Rêver d'Eau", type: 'dream', param: 'Eau' }] },
    { title: "Zakat", icon: Coins, color: "bg-amber-50 text-amber-600", links: [{ label: "Zakat France", type: 'zakat', param: 'France' }, { label: "Zakat Maroc", type: 'zakat', param: 'Maroc' }] },
    { title: "Prières", icon: Clock, color: "bg-sky-50 text-sky-600", links: [{ label: "Paris", type: 'prayer', param: 'Paris' }, { label: "Lyon", type: 'prayer', param: 'Lyon' }] },
    { title: "Calendrier", icon: CalendarIcon, color: "bg-teal-50 text-teal-600", links: [{ label: "Ramadan 2025", type: 'calendar', param: '2025' }] }
  ];

  return (
    <div className="max-w-4xl mx-auto p-4 md:p-6 pb-24">
      <SeoHead title="Ressources" description="Guides et outils islamiques." />
      <div className="text-center mb-10"><h1 className="text-3xl font-bold font-serif text-slate-800 mb-3">Ressources</h1><p className="text-slate-500">Guides détaillés et réponses à vos questions.</p></div>
      <AdSenseBanner />
      <div className="grid md:grid-cols-2 gap-6 mt-8">
        {sections.map((section, idx) => (
          <div key={idx} className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
            <div className="flex items-center gap-3 mb-4"><div className={`p-3 rounded-xl ${section.color}`}><section.icon className="w-6 h-6" /></div><h2 className="font-bold text-lg text-slate-800">{section.title}</h2></div>
            <ul className="space-y-2">{section.links.map((link, i) => (<li key={i}><button onClick={() => setSelectedPage(link)} className="w-full text-left flex justify-between p-2 hover:bg-slate-50 rounded text-slate-600 text-sm font-medium"><span>{link.label}</span><ChevronRight className="w-4 h-4 text-slate-300" /></button></li>))}</ul>
          </div>
        ))}
      </div>
    </div>
  );
};

// ------------------------------------------
// PAGE: ZAKAT
// ------------------------------------------
const ZakatPage = ({ isPremium }) => {
  const [assets, setAssets] = useState({ cash: 0, gold: 0, silver: 0, actions: 0, debts: 0 });
  const [result, setResult] = useState(null);
  
  const calculateZakat = () => {
    const total = assets.cash + assets.actions; 
    setResult({ total, due: total * 0.025, eligible: true });
  };

  return (
    <div className="max-w-3xl mx-auto p-4 md:p-6 pb-24">
      <SeoHead title="Calculateur Zakat" description="Calculateur Zakat" />
      <div className="text-center mb-8"><h1 className="text-2xl font-bold font-serif mb-2">Calculateur Zakat</h1>{isPremium && <span className="bg-amber-100 text-amber-800 text-[10px] font-bold px-2 py-1 rounded-full uppercase">Premium</span>}</div>
      <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-6">
        <label className="block text-sm font-medium mb-2">Argent liquide (€)</label>
        <input type="number" className="w-full p-3 border rounded-xl mb-4" placeholder="0" onChange={(e) => setAssets({...assets, cash: parseFloat(e.target.value) || 0})} />
        <Button onClick={calculateZakat} className="w-full">Calculer</Button>
      </div>
      {result && (
        <div className="animate-in fade-in slide-in-from-bottom-4">
          <div className="bg-emerald-600 text-white p-8 rounded-3xl shadow-xl text-center mb-6">
            <p className="text-emerald-100 text-xs font-bold uppercase mb-2">Montant Zakat</p>
            <p className="text-4xl font-bold font-mono">{result.due} €</p>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <button onClick={() => isPremium ? alert("PDF généré") : null} className={`p-4 rounded-xl border flex flex-col items-center gap-2 ${isPremium ? 'bg-white hover:border-emerald-500' : 'bg-slate-50 text-slate-400 cursor-not-allowed'}`}>{isPremium ? <Download className="w-6 h-6" /> : <Lock className="w-6 h-6" />}<span className="text-xs font-bold">PDF</span></button>
            <button onClick={() => isPremium ? alert("Sauvegardé") : null} className={`p-4 rounded-xl border flex flex-col items-center gap-2 ${isPremium ? 'bg-white hover:border-emerald-500' : 'bg-slate-50 text-slate-400 cursor-not-allowed'}`}>{isPremium ? <History className="w-6 h-6" /> : <Lock className="w-6 h-6" />}<span className="text-xs font-bold">Sauvegarder</span></button>
          </div>
        </div>
      )}
    </div>
  );
};

// ------------------------------------------
// PAGE: HEURES DE PRIÈRE
// ------------------------------------------
const PrayerTimesPage = ({ isPremium }) => {
  const [times, setTimes] = useState(null);
  const [locationName, setLocationName] = useState("Localisation...");
  const [locationDetails, setLocationDetails] = useState({ city: null, country: null });
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    if (!navigator.geolocation) { setLoading(false); return; }
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const { latitude, longitude } = position.coords;
        const date = Math.floor(Date.now() / 1000); 
        const res = await fetch(`https://api.aladhan.com/v1/timings/${date}?latitude=${latitude}&longitude=${longitude}&method=3`);
        const data = await res.json();
        setTimes(data.data.timings);
        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}`).then(r=>r.json()).then(d => {
             setLocationName(d.address.city || "Ville détectée");
             setLocationDetails({ city: d.address.city, country: d.address.country });
        });
        setLoading(false);
      },
      () => setLoading(false)
    );
  }, []);

  const prayers = times ? [{n:'Fajr',t:times.Fajr,i:Sunrise},{n:'Dhuhr',t:times.Dhuhr,i:Sun},{n:'Asr',t:times.Asr,i:Sun},{n:'Maghrib',t:times.Maghrib,i:Sunset},{n:'Isha',t:times.Isha,i:Moon}] : [];

  return (
    <div className="max-w-4xl mx-auto p-4 md:p-6 pb-24">
      <SeoHead title={`Prières à ${locationName}`} description="Horaires de prière." />
      <div className="text-center mb-6"><h1 className="text-2xl font-bold text-slate-800 font-serif flex items-center justify-center gap-2"><Clock className="w-6 h-6 text-sky-500" /> {locationName}</h1></div>
      {loading ? <div className="text-center py-10">Chargement...</div> : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4">
          {prayers.map((p,i)=>(<div key={i} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm text-center"><p className="font-bold text-slate-700">{p.n}</p><p className="text-xl font-bold text-sky-600">{p.t}</p></div>))}
        </div>
      )}
      {!isPremium && <AdSenseBanner className="mt-8" />}
      {locationDetails.city && (
        <div className="mt-12 text-sm text-slate-600 space-y-4">
          <h2 className="font-bold text-slate-800">Prières à {locationDetails.city}</h2>
          <p>Retrouvez les horaires exacts pour {locationDetails.city}, {locationDetails.country}. Ces horaires sont calculés selon la méthode de la Ligue Islamique Mondiale.</p>
        </div>
      )}
    </div>
  );
};

// ------------------------------------------
// PAGE: CALENDRIER
// ------------------------------------------
const CalendarPage = ({ isPremium }) => {
  return (
    <div className="max-w-4xl mx-auto p-4 md:p-6 pb-24">
      <SeoHead title="Calendrier Hijri" description="Calendrier." />
      <div className="text-center mb-8"><h1 className="text-2xl font-bold text-slate-800 font-serif mb-2"><CalendarIcon className="w-6 h-6 inline mr-2 text-emerald-500" /> Calendrier Hijri</h1></div>
      <div className="bg-emerald-600 text-white p-8 rounded-3xl text-center shadow-lg mb-8">
        <p className="text-emerald-100 uppercase text-xs font-bold tracking-widest">Aujourd'hui</p>
        <h2 className="text-4xl font-bold font-serif my-2">1445 H</h2>
        <p className="text-sm opacity-80">Date basée sur le calcul Umm al-Qura</p>
      </div>
      {!isPremium && <AdSenseBanner />}
    </div>
  );
};

// ------------------------------------------
// PAGE: RÊVES
// ------------------------------------------
const DreamsPage = ({ isPremium }) => {
  const [search, setSearch] = useState("");
  const [history, setHistory] = useState([]);

  const handleSearch = (term) => {
    setSearch(term);
    if(isPremium && term) setHistory(prev => [term, ...prev.filter(t=>t!==term)].slice(0,5));
  };

  const processedData = useMemo(() => DREAMS_DATA.filter(d => d.keyword.toLowerCase().includes(search.toLowerCase())), [search]);

  return (
    <div className="max-w-4xl mx-auto p-4 md:p-6 pb-24">
      <SeoHead title="Rêves" description="Interprétation." />
      <div className="text-center mb-6"><h1 className="text-2xl font-bold text-slate-800 font-serif mb-2"><Moon className="w-6 h-6 inline mr-2 text-indigo-500" /> Tafsir Al-Ahlam</h1></div>
      
      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6 text-sm text-amber-900">
        <Info className="w-4 h-4 inline mr-2" /> 
        <strong>Important :</strong> Les rêves ne sont pas une source de législation. Seuls les rêves véridiques viennent d'Allah.
      </div>

      <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200 mb-6">
        <input type="text" placeholder="Rechercher un rêve..." className="w-full p-2 outline-none" onChange={e=>handleSearch(e.target.value)} />
      </div>

      {isPremium && history.length > 0 && (
        <div className="mb-6 flex gap-2 overflow-x-auto pb-2">
          {history.map((h,i)=><span key={i} className="bg-slate-100 text-xs px-2 py-1 rounded-full cursor-pointer" onClick={()=>setSearch(h)}>{h}</span>)}
        </div>
      )}

      <div className="grid md:grid-cols-2 gap-4">
        {processedData.map((d,i)=>(
          <div key={i} className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm">
            <h3 className="font-bold text-slate-800">{d.keyword}</h3>
            <p className="text-sm text-slate-600 mt-1">{d.interpretation}</p>
          </div>
        ))}
      </div>
      {/* Pas de publicité sur cette page sensible */}
    </div>
  );
};

// ------------------------------------------
// PAGE: CORAN
// ------------------------------------------
const CoranPage = () => (
  <div className="max-w-4xl mx-auto p-4 md:p-6 pb-24">
    <SeoHead title="Coran" description="Lecture du Coran." />
    <div className="text-center mb-8"><h1 className="text-2xl font-bold text-slate-800 font-serif"><BookOpen className="w-6 h-6 inline mr-2 text-emerald-500" /> Le Saint Coran</h1></div>
    <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 text-center text-slate-500">
      <p>Liste des sourates (Chargement...)</p>
    </div>
    <AdSenseBanner className="mt-8" />
  </div>
);

// ------------------------------------------
// PAGE: HERITAGE
// ------------------------------------------
const HeritagePage = () => (
  <div className="max-w-4xl mx-auto p-4 md:p-6 pb-24">
    <SeoHead title="Héritage" description="Calculateur d'héritage." />
    <div className="text-center mb-8"><h1 className="text-2xl font-bold text-slate-800 font-serif"><Calculator className="w-6 h-6 inline mr-2 text-slate-500" /> Héritage (Farâïd)</h1></div>
    <div className="bg-amber-50 border border-amber-200 p-4 rounded-xl mb-6 text-sm text-amber-900">
      <AlertCircle className="w-4 h-4 inline mr-2" /> Outil éducatif uniquement. Consultez un savant.
    </div>
    <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 text-center text-slate-500">
      <p>Formulaire de calcul (En construction)</p>
    </div>
  </div>
);

// ------------------------------------------
// PAGE: ACCUEIL
// ------------------------------------------
const HomePage = ({ setPage, isPremium }) => (
  <div className="flex flex-col items-center justify-center min-h-[80vh] px-4 text-center">
    <SeoHead title="Accueil" description="Portail islamique." />
    <div className="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-3xl flex items-center justify-center mb-8 shadow-sm">
      <Moon className="w-10 h-10" />
    </div>
    <h1 className="text-4xl font-bold font-serif text-slate-900 mb-4">islam.quran</h1>
    <p className="text-slate-500 mb-10 max-w-md">Votre compagnon quotidien pour la pratique et le savoir.</p>
    
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-4xl">
      {[
        { id: 'coran', label: 'Coran', icon: BookOpen, col: 'bg-emerald-50 text-emerald-600' },
        { id: 'prayers', label: 'Prières', icon: Clock, col: 'bg-sky-50 text-sky-600' },
        { id: 'zakat', label: 'Zakat', icon: Coins, col: 'bg-amber-50 text-amber-600' },
        { id: 'dreams', label: 'Rêves', icon: Moon, col: 'bg-indigo-50 text-indigo-600' }
      ].map(i => (
        <button key={i.id} onClick={() => setPage(i.id)} className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all flex flex-col items-center">
          <div className={`p-3 rounded-xl ${i.col} mb-3`}><i.icon className="w-6 h-6" /></div>
          <span className="font-bold text-slate-700">{i.label}</span>
        </button>
      ))}
    </div>
    {!isPremium && <AdSenseBanner className="mt-12" />}
  </div>
);

// ------------------------------------------
// ROOT COMPONENT
// ------------------------------------------
export default function App() {
  const [activePage, setActivePage] = useState('home');
  const [isPremium, setIsPremium] = useState(false);

  useEffect(() => { window.scrollTo(0, 0); }, [activePage]);

  const renderPage = () => {
    switch (activePage) {
      case 'home': return <HomePage setPage={setActivePage} isPremium={isPremium} />;
      case 'coran': return <CoranPage />;
      case 'heritage': return <HeritagePage />;
      case 'zakat': return <ZakatPage isPremium={isPremium} />; 
      case 'dreams': return <DreamsPage isPremium={isPremium} />; 
      case 'calendar': return <CalendarPage isPremium={isPremium} />;
      case 'prayers': return <PrayerTimesPage isPremium={isPremium} />;
      case 'premium': return <PremiumPage isPremium={isPremium} onTogglePremium={() => setIsPremium(!isPremium)} />; 
      case 'disclaimer': return <DisclaimerPage />;
      case 'seo_hub': return <SeoResourcesPage />;
      default: return <HomePage setPage={setActivePage} isPremium={isPremium} />;
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-emerald-100">
      <Header setPage={setActivePage} activePage={activePage} isPremium={isPremium} />
      <main className="animate-in fade-in duration-300">{renderPage()}</main>
      <footer className="border-t border-slate-200 py-12 mt-auto bg-white">
        <div className="max-w-4xl mx-auto px-4 text-center text-slate-400 text-sm">
          <p className="mb-2">© {new Date().getFullYear()} - islam.quran</p>
          <button onClick={() => setActivePage('disclaimer')} className="text-slate-400 hover:text-emerald-600 underline decoration-slate-300 underline-offset-4 transition-colors">Mentions Légales & Avertissements</button>
        </div>
      </footer>
    </div>
  );
}