import React, { useState, useEffect, useMemo } from 'react';
import { Book, Cross, Info, Mail, Menu, Phone, X, Search, ChevronRight, Star, ChevronLeft, Loader, ShoppingCart, Trash2, Send, Facebook, MessageCircle, FileText, ShieldCheck, Heart } from 'lucide-react';

// ==============================================================================
// ⚙️ ZONE DE CONFIGURATION
// ==============================================================================

// Logo par défaut (utilisé pour le loader avant que le CMS ne charge)
const DEFAULT_LOGO = "https://i.postimg.cc/7ZryvYzZ/logo.png";

// 1. LIEN CSV "INVENTAIRE"
const LIEN_PRODUITS = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTITtf_EgK3nylvhoxpEF_jMuQU5fIaabj3t9iKb_7TTd8OyD2DOVPbQEHAXlbHfpr3ik2aa42OspPp/pub?output=csv";

// 2. LIEN CSV "CONTENU"
const LIEN_CONTENU = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTITtf_EgK3nylvhoxpEF_jMuQU5fIaabj3t9iKb_7TTd8OyD2DOVPbQEHAXlbHfpr3ik2aa42OspPp/pub?gid=1846052469&single=true&output=csv"; 

// ==============================================================================

// --- UTILITAIRES ---
const parseCSV = (str) => {
    const arr = [];
    let quote = false;
    let col = 0, row = 0;
    for (let c = 0; c < str.length; c++) {
        let cc = str[c], nc = str[c+1];
        arr[row] = arr[row] || [];
        arr[row][col] = arr[row][col] || '';
        if (cc === '"' && quote && nc === '"') { arr[row][col] += cc; ++c; continue; }
        if (cc === '"') { quote = !quote; continue; }
        if (cc === ',' && !quote) { ++col; continue; }
        if (cc === '\r' && nc === '\n' && !quote) { ++row; col = 0; ++c; continue; }
        if (cc === '\n' && !quote) { ++row; col = 0; continue; }
        if (cc === '\r' && !quote) { ++row; col = 0; continue; }
        arr[row][col] += cc;
    }
    return arr;
};

const parsePrice = (priceStr) => {
    if (!priceStr) return 0;
    const clean = priceStr.replace(/[^\d.,]/g, '').replace(',', '.');
    return parseFloat(clean) || 0;
};

// --- ICONS SVG ---
const HolyDoveIcon = ({ className }) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 5c-1.5 0-2.5 1-3 2c-1.5-3-4-4-7-4c-3.5 0-6 3-6 7c0 2 1.5 3.5 3 4.5l-2 3.5h5l2-3l1 2l1-4c1 1 2.5 1 4 1c3.5 0 6-2.5 6-5s-2-4-4-4z" /><path d="M12 12c-1 1-2 2-2 4" /><path d="M7 6c1-1 3-1 4 0" /></svg>);
const SealIcon = ({ className }) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" className={className}><circle cx="12" cy="12" r="10" /><path d="M12 6v12M6 12h12" strokeWidth="2" /><circle cx="12" cy="12" r="6" strokeDasharray="2 2" /></svg>);

// --- COMPOSANTS UI ---
const BrandLogo = ({ url, className = "w-12 h-12", circle = false }) => {
    const [imageError, setImageError] = useState(false);
    const finalUrl = url || DEFAULT_LOGO; 

    if (finalUrl && !imageError) {
        if (circle) return (<div className={`${className} rounded-full overflow-hidden bg-white border-2 border-amber-100 shadow-md flex items-center justify-center`}><img src={finalUrl} alt="La Colombe" className="w-full h-full object-cover scale-150 transform" onError={() => setImageError(true)} /></div>);
        return (<img src={finalUrl} alt="La Colombe" className={`${className} object-contain drop-shadow-sm transition-transform duration-300`} onError={() => setImageError(true)} />);
    }
    return (<div className={`${className} bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200 p-2 rounded-full text-amber-800 flex items-center justify-center shadow-sm`}><HolyDoveIcon className="w-full h-full" /></div>);
};

const ItemVisual = ({ item }) => {
  if (item.image_url && item.image_url.trim() !== "" && item.image_url.startsWith('http')) {
    return (<div className="w-32 h-48 overflow-hidden rounded-md shadow-md mx-auto bg-white flex items-center justify-center border border-stone-200"><img src={item.image_url} alt={item.name} className="w-full h-full object-contain hover:scale-110 transition-transform duration-500" onError={(e) => {e.target.onerror = null; e.target.style.display = 'none'; e.target.parentElement.innerHTML = '<div class="text-xs text-stone-400 text-center p-2">Image non disponible</div>';}} /></div>);
  }
  if (item.type === 'book') {
      let bookColor = "text-red-800"; let accentColor = "bg-red-800";
      if (item.name.includes("Vol. 2") || item.name.includes("Bleu")) { bookColor = "text-blue-800"; accentColor = "bg-blue-800"; }
      else if (item.name.includes("Vol. 5") || item.name.includes("Or")) { bookColor = "text-yellow-700"; accentColor = "bg-yellow-600"; }
      return (<div className="w-32 h-48 bg-[#fdfbf7] shadow-lg border border-stone-200 flex flex-col items-center justify-between p-2 relative rounded-r-md mx-auto"><div className="absolute left-1 top-0 bottom-0 w-[2px] bg-stone-300"></div><div className="mt-4 text-center"><span className={`font-serif font-bold uppercase text-xs block ${bookColor} opacity-80`}>Livre de la</span><span className={`font-serif font-bold uppercase text-lg block ${bookColor}`}>Vérité</span></div><div className={`w-8 h-8 ${accentColor} rounded-full opacity-90 shadow-sm flex items-center justify-center`}><div className="w-6 h-6 border border-white rounded-full flex items-center justify-center"><Cross size={12} className="text-white" strokeWidth={3} /></div></div><div className="mb-2 text-[0.5rem] text-stone-500 text-center leading-tight uppercase font-medium tracking-wider">Second<br/>Avènement</div></div>);
  }
  if (item.type === 'cross' || item.type === 'cross_stand') return (<div className={`w-32 h-48 flex items-center justify-center bg-gradient-to-b from-stone-100 to-stone-200 rounded-lg shadow-inner mx-auto ${item.type === 'cross_stand' ? 'border-b-4 border-amber-900' : ''}`}><div className="relative flex flex-col items-center"><div className="w-24 h-36 bg-red-900/90 rounded-sm shadow-md flex items-center justify-center relative border border-red-950"><Cross className="text-stone-300 w-16 h-16 drop-shadow-md" strokeWidth={1.2} /><div className="absolute bottom-2 text-[8px] text-red-200 opacity-60 font-serif">INRI</div></div>{item.type === 'cross_stand' && <div className="w-16 h-4 bg-amber-900 mt-[-4px] rounded shadow-lg"></div>}</div></div>);
  if (item.type === 'medal_silver' || item.type === 'medal_gold') { const isGold = item.type === 'medal_gold'; return (<div className="w-32 h-48 flex items-center justify-center mx-auto"><div className={`w-20 h-20 rounded-full flex items-center justify-center shadow-xl border-2 ${isGold ? 'bg-amber-400 border-amber-600 text-amber-900' : 'bg-slate-300 border-slate-400 text-slate-700'}`}><div className={`w-16 h-16 rounded-full border border-dashed border-current opacity-60 flex items-center justify-center`}><SealIcon className="w-10 h-10" /></div></div></div>); }
  if (item.type === 'scapular') return (<div className="w-32 h-48 flex flex-col items-center justify-center relative mx-auto"><div className="absolute top-0 w-24 h-32 border-x-2 border-amber-900/40 rounded-t-full opacity-60"></div><div className="flex space-x-2 mt-12 z-10"><div className="w-12 h-14 bg-amber-900 rounded shadow-md flex flex-col items-center justify-center p-1 border border-amber-950"><div className="w-8 h-8 rounded-full bg-red-800 flex items-center justify-center text-white text-[6px]">Sceau</div></div><div className="w-12 h-14 bg-amber-800 rounded shadow-md flex flex-col items-center justify-center p-1 border border-amber-950"><Cross size={16} className="text-amber-200 opacity-50"/></div></div></div>);
  return (<div className="w-32 h-48 flex items-center justify-center mx-auto bg-stone-100 rounded border border-stone-200"><div className="text-center"><Cross className="text-stone-400 mx-auto mb-2" /><span className="text-xs text-stone-400">Article</span></div></div>);
};

const RecommendationsCarousel = ({ items, onSelect }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visibleItems, setVisibleItems] = useState(1);
  const carouselItems = items || [];
  const itemCount = carouselItems.length;

  // Calcul du nombre d'éléments visibles selon la taille de l'écran
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1280) setVisibleItems(4); // Large Screens
      else if (window.innerWidth >= 1024) setVisibleItems(3); // Desktop
      else if (window.innerWidth >= 768) setVisibleItems(2); // Tablet
      else setVisibleItems(1); // Mobile
    };
    
    // Initial call
    handleResize();
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // Max index possible avant de montrer du vide
  const maxIndex = Math.max(0, itemCount - visibleItems);

  // Auto-scroll
  useEffect(() => {
    if (itemCount === 0) return;
    const timer = setInterval(() => {
        setCurrentIndex((prev) => prev >= maxIndex ? 0 : prev + 1);
    }, 4000); 
    return () => clearInterval(timer);
  }, [itemCount, visibleItems, maxIndex]);

  const nextSlide = () => { setCurrentIndex((p) => p >= maxIndex ? 0 : p + 1); };
  const prevSlide = () => { setCurrentIndex((p) => p === 0 ? maxIndex : p - 1); };

  if (itemCount === 0) return null;

  return (
    <div className="relative w-full max-w-7xl mx-auto px-4 py-8">
      <h2 className="text-3xl font-serif font-bold text-center mb-8 text-stone-800 flex items-center justify-center gap-3">
        <Star className="text-amber-600 fill-amber-600" size={24}/> 
        <span className="text-amber-900">Nos Recommandations</span>
        <Star className="text-amber-600 fill-amber-600" size={24}/>
      </h2>
      
      <div className="relative flex items-center justify-center group">
        <button onClick={prevSlide} className="absolute left-0 z-20 p-3 bg-white/90 backdrop-blur rounded-full shadow-lg text-amber-700 hover:bg-amber-50 md:-left-4 border border-stone-100 transition-transform hover:scale-110 opacity-0 group-hover:opacity-100 duration-300"><ChevronLeft size={24} /></button>

        <div className="overflow-hidden w-full relative rounded-xl">
          {/* BANDE DE DÉFILEMENT RESPONSIVE */}
          <div 
            className="flex transition-transform duration-700 ease-in-out" 
            style={{ 
                // Largeur totale de la bande = (NbItems * 100) / NbVisibles %
                width: `${(itemCount * 100) / visibleItems}%`, 
                // Décalage = Index * (100 / NbTotal) % de la bande
                transform: `translateX(-${(currentIndex * 100) / itemCount}%)` 
            }}
          >
            {carouselItems.map((item) => (
              <div 
                key={item.id} 
                className="flex-shrink-0 flex justify-center py-4 px-2" 
                // Chaque item prend 1 / NbTotal de la largeur de la bande
                style={{ width: `${100 / itemCount}%` }}
              >
                 <div onClick={() => onSelect(item)} className="bg-white p-6 rounded-xl shadow-xl border border-stone-100 flex flex-col items-center cursor-pointer transform hover:scale-105 transition-all duration-300 w-full relative overflow-hidden group h-full justify-between">
                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-300 via-amber-500 to-amber-300"></div>
                    <div className="mb-4 transform scale-110 mt-4"><ItemVisual item={item} /></div>
                    <div className="text-center w-full">
                        <h3 className="text-xl font-serif font-bold text-stone-800 text-center mb-2 line-clamp-1 group-hover:text-amber-800 transition-colors">{item.name}</h3>
                        <p className="text-amber-700 font-bold mb-2 text-lg">{item.price}</p>
                        <span className="inline-block px-3 py-1 bg-amber-50 text-amber-800 text-[10px] font-bold uppercase tracking-wider rounded-full border border-amber-100">Recommandé</span>
                    </div>
                 </div>
              </div>
            ))}
          </div>
        </div>

        <button onClick={nextSlide} className="absolute right-0 z-20 p-3 bg-white/90 backdrop-blur rounded-full shadow-lg text-amber-700 hover:bg-amber-50 md:-right-4 border border-stone-100 transition-transform hover:scale-110 opacity-0 group-hover:opacity-100 duration-300"><ChevronRight size={24} /></button>
      </div>
      
      {/* Indicateurs simples */}
      <div className="flex flex-col items-center mt-6 gap-2">
         <div className="flex space-x-1">
            {/* On affiche des points pour chaque "page" possible, pas chaque item, pour éviter la surcharge */}
            {Array.from({ length: Math.ceil(itemCount / visibleItems) }).map((_, idx) => (
                <div key={idx} className={`h-1.5 rounded-full transition-all duration-500 ${Math.floor(currentIndex / visibleItems) === idx ? 'bg-amber-600 w-6' : 'bg-stone-300 w-1.5'}`} />
            ))}
         </div>
      </div>
    </div>
  );
};

// --- APP PRINCIPALE ---
export default function App() {
  const [currentPage, setCurrentPage] = useState("home");
  const [selectedItem, setSelectedItem] = useState(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [showOrderSuccess, setShowOrderSuccess] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  
  const [inventory, setInventory] = useState([]);
  const [content, setContent] = useState({});
  const [loading, setLoading] = useState(true);
  
  const [cart, setCart] = useState([]);

  // Default content
  const defaultContent = {
      brand_logo: DEFAULT_LOGO,
      hero_title: "Vérité & Rédemption",
      hero_badge: "Sceau du Dieu Vivant",
      hero_subtitle: "Priez pour le Sceau du Dieu Vivant et gardez-le près de vous.",
      hero_citation: "- Message du Livre de la Vérité",
      contact_email: "contact@lacolombe.com",
      cart_payment_info: "Le paiement se fera par virement ou chèque après validation.",
      about_title: "Notre Mission",
      about_text: "Diffusion des messages sacrés.",
      legal_mentions: "Association La Colombe.",
      privacy_policy: "Données confidentielles.",
      btn_books: "Livres",
      btn_objects: "Objets"
  };

  useEffect(() => {
    // 1. TITRES DYNAMIQUES
    const pageTitle = currentPage === "home" ? "Accueil" : 
                      currentPage === "books" ? "Livres" :
                      currentPage === "objects" ? "Objets" : 
                      currentPage === "about" ? "À Propos" : "Contact";
    document.title = `La Colombe - ${pageTitle}`;

    const params = new URLSearchParams(window.location.search);
    if (params.get('success') === 'true') {
        setShowOrderSuccess(true);
        setCart([]); 
        window.history.replaceState({}, document.title, "/");
    }

    if (LIEN_PRODUITS.includes("xxxxxxxxxxxx")) {
        setLoading(false);
        setContent(defaultContent);
        return;
    }

    const fetchAllData = async () => {
        try {
            const prodRes = await fetch(LIEN_PRODUITS);
            if (!prodRes.ok) throw new Error("Erreur produits");
            const prodRaw = parseCSV(await prodRes.text());
            const headers = prodRaw[0].map(h => h.trim());
            const cleanInventory = prodRaw.slice(1)
                .filter(row => row.length === headers.length && row[1])
                .map(row => {
                    let obj = {};
                    headers.forEach((h, i) => { obj[h] = row[i] ? row[i].trim() : ""; });
                    return {
                        ...obj,
                        id: obj.id || Math.random().toString(36).substr(2, 9),
                        isRecommended: obj.recommanded && (obj.recommanded.toUpperCase() === 'TRUE' || obj.recommanded.toUpperCase() === 'VRAI' || obj.recommanded === '1'),
                        stock: obj.stock !== undefined && obj.stock !== "" ? parseInt(obj.stock) : 1
                    };
                });
            setInventory(cleanInventory);

            let loadedContent = { ...defaultContent };
            if (LIEN_CONTENU && !LIEN_CONTENU.includes("xxxxxxxxxxxx")) {
                try {
                    const contRes = await fetch(LIEN_CONTENU);
                    if (contRes.ok) {
                        const contRaw = parseCSV(await contRes.text());
                        contRaw.slice(1).forEach(row => {
                            if (row[0] && row[1]) {
                                loadedContent[row[0].trim()] = row[1].trim();
                            }
                        });
                    }
                } catch (e) {
                    console.warn("Content load failed");
                }
            }
            setContent(loadedContent);
            setLoading(false);
        } catch (err) {
            console.error(err);
            setLoading(false);
            setContent(defaultContent);
        }
    };
    fetchAllData();
  }, [currentPage]);

  const addToCart = (item) => {
      setCart([...cart, item]);
      setSelectedItem(null);
      setIsCartOpen(true);
  };

  const removeFromCart = (index) => {
      setCart(cart.filter((_, i) => i !== index));
  };

  const cartTotal = useMemo(() => cart.reduce((total, item) => total + parsePrice(item.price), 0).toFixed(2), [cart]);
  const orderDetails = cart.map(item => `- ${item.name} (${item.price})`).join('\n');
  const fullOrderMessage = `COMMANDE :\n${orderDetails}\n\nTOTAL ESTIMÉ : ${cartTotal}€`;

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  
  const getFilteredItems = () => {
    let items = [];
    if (currentPage === "books") items = inventory.filter(i => i.category === "Livres");
    if (currentPage === "objects") items = inventory.filter(i => i.category === "Objets");
    if (searchQuery.trim() !== "") {
        items = items.filter(i => i.name.toLowerCase().includes(searchQuery.toLowerCase()));
    }
    return items;
  };

  const recommendedItems = inventory.filter(item => item.isRecommended);

  if (loading) return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-stone-50 text-amber-800">
          <BrandLogo url={DEFAULT_LOGO} className="w-24 h-24 mb-6 animate-pulse" circle={true} />
          <p className="font-serif text-xl animate-pulse tracking-widest">LA COLOMBE</p>
          <p className="text-xs text-amber-600/60 mt-2">Chargement de la collection...</p>
      </div>
  );

  return (
    <div className="min-h-screen bg-stone-50 text-stone-800 font-sans selection:bg-amber-200 flex flex-col">
      
      {/* NAVBAR */}
      <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm shadow-md border-b border-amber-100 transition-all">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <div className="flex items-center space-x-3 cursor-pointer group" onClick={() => setCurrentPage("home")}>
               <BrandLogo url={content.brand_logo || DEFAULT_LOGO} className="w-12 h-12 group-hover:scale-105" circle={true} />
               <div className="flex flex-col leading-none">
                 <span className="text-xl font-serif font-bold text-stone-900 tracking-wide group-hover:text-amber-800 transition-colors">La Colombe</span>
                 <span className="text-xs uppercase tracking-widest text-amber-700 font-semibold">Articles Religieux</span>
               </div>
            </div>
            
            <div className="hidden md:flex space-x-8 items-center">
              {["home", "books", "objects", "about"].map((page) => (
                  <button key={page} onClick={() => setCurrentPage(page)} className={`font-medium transition-all duration-300 relative py-2 ${currentPage===page ? "text-amber-800 font-bold" : "text-stone-600 hover:text-amber-700"}`}>
                    {page === "home" ? "Accueil" : page === "books" ? "Livres" : page === "objects" ? "Objets" : "À propos"}
                    {currentPage === page && <span className="absolute bottom-0 left-0 w-full h-0.5 bg-amber-600 rounded-full"></span>}
                  </button>
              ))}
              <button onClick={() => setIsCartOpen(true)} className="relative p-2 text-stone-600 hover:text-amber-700 transition-colors">
                  <ShoppingCart size={24} />
                  {cart.length > 0 && <span className="absolute top-0 right-0 bg-red-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">{cart.length}</span>}
              </button>
              <button onClick={() => setCurrentPage("contact")} className="px-5 py-2 bg-gradient-to-r from-amber-700 to-amber-800 text-white rounded shadow hover:shadow-lg transition-all transform hover:-translate-y-0.5 font-medium border border-amber-900">Contact</button>
            </div>
            <div className="md:hidden flex items-center gap-4">
                <button onClick={() => setIsCartOpen(true)} className="relative p-2 text-stone-600">
                  <ShoppingCart size={24} />
                  {cart.length > 0 && <span className="absolute top-0 right-0 bg-red-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">{cart.length}</span>}
                </button>
                <button onClick={toggleMenu} className="text-stone-700"><Menu size={28}/></button>
            </div>
          </div>
        </div>
        {isMenuOpen && (
            <div className="md:hidden bg-white border-t p-4 flex flex-col gap-4 shadow-lg absolute w-full z-40 animate-in slide-in-from-top-2">
                <button onClick={()=>{setCurrentPage("home");setIsMenuOpen(false)}} className="text-left font-medium p-2 hover:bg-stone-50 rounded">Accueil</button>
                <button onClick={()=>{setCurrentPage("books");setIsMenuOpen(false)}} className="text-left font-medium p-2 hover:bg-stone-50 rounded">Livres</button>
                <button onClick={()=>{setCurrentPage("objects");setIsMenuOpen(false)}} className="text-left font-medium p-2 hover:bg-stone-50 rounded">Objets</button>
                <button onClick={()=>{setCurrentPage("about");setIsMenuOpen(false)}} className="text-left font-medium p-2 hover:bg-stone-50 rounded">À propos</button>
                <button onClick={()=>{setCurrentPage("contact");setIsMenuOpen(false)}} className="text-left font-bold text-amber-700 p-2 hover:bg-amber-50 rounded">Contact</button>
            </div>
        )}
      </nav>

      {/* CONTENU */}
      <div className="flex-grow">
        {/* === HOME === */}
        {currentPage === "home" && (
          <>
            <header className="relative bg-gradient-to-r from-stone-900 via-stone-800 to-amber-950 text-white py-24 overflow-hidden text-center border-b-4 border-amber-700">
              <div className="absolute inset-0 z-0"><img src={content.brand_logo || DEFAULT_LOGO} alt="Fond" className="w-full h-full object-cover opacity-10 blur-[2px]" onError={(e) => e.target.style.display='none'} /></div>
              <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none z-0"><SealIcon className="absolute -left-20 bottom-0 w-80 h-80 text-amber-500 opacity-20" /></div>
              <div className="relative z-10 max-w-4xl mx-auto px-4 animate-in fade-in zoom-in duration-700">
                <div className="inline-block px-4 py-1.5 border border-amber-500/50 rounded-full bg-amber-900/60 text-amber-200 text-xs font-bold tracking-[0.2em] uppercase mb-6 backdrop-blur-sm shadow-lg">{content.hero_badge}</div>
                <h1 className="text-5xl md:text-7xl font-serif font-bold mb-6 leading-tight drop-shadow-xl">{content.hero_title}</h1>
                <p className="text-xl text-stone-200 mb-10 font-light max-w-2xl mx-auto leading-relaxed drop-shadow-md">{content.hero_subtitle}<br/><span className="text-sm text-stone-400 italic mt-2 block">{content.hero_citation}</span></p>
                <div className="flex flex-col sm:flex-row justify-center gap-4">
                    <button onClick={() => setCurrentPage("books")} className="px-8 py-4 bg-amber-700 rounded text-white font-bold hover:bg-amber-600 shadow-xl hover:shadow-amber-900/50 transition-all flex items-center justify-center gap-2 border border-amber-600"><Book size={18}/> {content.btn_books}</button>
                    <button onClick={() => setCurrentPage("objects")} className="px-8 py-4 bg-stone-800/70 border border-stone-600 rounded text-stone-200 hover:bg-stone-800 hover:border-amber-500 backdrop-blur-sm transition-all flex items-center justify-center gap-2"><Cross size={18}/> {content.btn_objects}</button>
                </div>
              </div>
            </header>
            
            {/* SECTION RECOMMANDATIONS (DÉPLACÉE AU-DESSUS DES TÉMOIGNAGES) */}
            <section className="bg-stone-50 py-16 relative">
               {inventory.length === 0 && <div className="text-center p-8"><p className="text-stone-500 italic">Connexion à la base de données...</p></div>}
               {recommendedItems.length > 0 && <RecommendationsCarousel items={recommendedItems} onSelect={setSelectedItem} />}
            </section>

            {/* SECTION TÉMOIGNAGES (DÉPLACÉE EN-DESSOUS) */}
            {content.testi_1_text && (
                <section className="py-12 bg-white text-center px-4 border-t border-stone-100">
                    <h3 className="text-2xl font-serif font-bold text-stone-800 mb-8">Témoignages</h3>
                    <div className="flex flex-col md:flex-row justify-center gap-8 max-w-5xl mx-auto">
                        <div className="bg-stone-50 p-6 rounded-xl shadow-sm border border-stone-100 flex-1 relative">
                            <div className="absolute top-4 left-4 text-4xl text-amber-200 font-serif">"</div>
                            <p className="text-stone-600 italic mb-4 relative z-10 pt-4">{content.testi_1_text}</p>
                            <p className="font-bold text-amber-800">- {content.testi_1_author}</p>
                        </div>
                        {content.testi_2_text && (
                            <div className="bg-stone-50 p-6 rounded-xl shadow-sm border border-stone-100 flex-1 relative">
                                <div className="absolute top-4 left-4 text-4xl text-amber-200 font-serif">"</div>
                                <p className="text-stone-600 italic mb-4 relative z-10 pt-4">{content.testi_2_text}</p>
                                <p className="font-bold text-amber-800">- {content.testi_2_author}</p>
                            </div>
                        )}
                    </div>
                </section>
            )}
          </>
        )}

        {/* ... (Reste du code inchangé pour les autres pages) ... */}
        {/* === CATALOGUE === */}
        {(currentPage === "books" || currentPage === "objects") && (
          <main className="max-w-7xl mx-auto px-4 py-16 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-10 border-b-2 border-amber-100 pb-6">
                <div className="flex items-center gap-4">
                    <div className="p-4 bg-amber-50 text-amber-800 rounded-full border border-amber-200 shadow-sm">{currentPage === "books" ? <Book size={32} strokeWidth={1.5} /> : <Cross size={32} strokeWidth={1.5} />}</div>
                    <div>
                        <h2 className="text-4xl font-serif font-bold text-stone-800">{currentPage === "books" ? "La Librairie" : "Objets de Piété"}</h2>
                        <p className="text-stone-500 font-medium text-sm mt-1 flex items-center gap-2"><Star size={12} className="text-amber-500 fill-amber-500"/> Collection Officielle</p>
                    </div>
                </div>
                <div className="relative w-full md:w-64">
                    <input 
                        type="text" 
                        placeholder="Rechercher..." 
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full pl-10 pr-4 py-2 border border-stone-300 rounded-full focus:ring-2 focus:ring-amber-500 focus:outline-none"
                    />
                    <Search className="absolute left-3 top-2.5 text-stone-400" size={18} />
                </div>
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {getFilteredItems().map((item) => (
                <div key={item.id} onClick={() => setSelectedItem(item)} className={`group bg-white rounded-xl shadow-sm hover:shadow-2xl border border-stone-100 cursor-pointer overflow-hidden flex flex-col transition-all duration-500 hover:-translate-y-2 ${item.stock === 0 ? 'opacity-70 grayscale' : ''}`}>
                  <div className="h-64 bg-stone-50 flex items-center justify-center p-6 group-hover:bg-amber-50/50 transition-colors relative">
                    <div className="transform group-hover:scale-105 transition-transform duration-500"><ItemVisual item={item} /></div>
                    {item.isRecommended && (<div className="absolute top-3 left-3 bg-gradient-to-r from-amber-600 to-amber-700 text-white text-[10px] font-bold px-3 py-1 rounded-full shadow-md flex items-center gap-1 border border-amber-500"><Star size={10} fill="white" /> POPULAIRE</div>)}
                    {item.stock === 0 && <div className="absolute inset-0 flex items-center justify-center bg-stone-900/10 backdrop-blur-[1px]"><span className="bg-stone-800 text-white px-3 py-1 text-sm font-bold uppercase tracking-widest rounded shadow-lg">Épuisé</span></div>}
                  </div>
                  <div className="p-5 flex-1 flex flex-col border-t border-stone-100 bg-white relative z-10">
                    <div className="text-xs font-bold text-amber-700 uppercase mb-2 flex items-center gap-1 opacity-80"><SealIcon className="w-3 h-3" /> {item.category}</div>
                    <h3 className="text-lg font-serif font-bold text-stone-800 mb-3 leading-tight group-hover:text-amber-800 transition-colors">{item.name}</h3>
                    <div className="mt-auto flex justify-between items-center pt-3 border-t border-stone-50"><span className="text-xl font-bold text-stone-900 font-serif">{item.price}</span><span className="text-xs font-bold text-amber-700 uppercase tracking-wider group-hover:underline underline-offset-4 decoration-amber-400">Voir Détail</span></div>
                  </div>
                </div>
              ))}
            </div>
            {getFilteredItems().length === 0 && <p className="text-center text-stone-500 py-12">Aucun article trouvé.</p>}
          </main>
        )}

        {/* === ABOUT, LEGAL, PRIVACY PAGES === */}
        {(currentPage === "about" || currentPage === "legal" || currentPage === "privacy") && (
            <div className="max-w-4xl mx-auto px-4 py-16 animate-in fade-in">
                <div className="bg-white p-8 md:p-12 rounded-2xl shadow-lg border border-stone-100">
                    <h2 className="text-3xl font-serif font-bold mb-6 text-stone-800">
                        {currentPage === "about" ? content.about_title : currentPage === "legal" ? "Mentions Légales" : "Politique de Confidentialité"}
                    </h2>
                    <div className="prose prose-stone max-w-none text-stone-600 leading-relaxed whitespace-pre-wrap">
                        {currentPage === "about" ? content.about_text : currentPage === "legal" ? content.legal_mentions : content.privacy_policy}
                    </div>
                </div>
            </div>
        )}

        {/* === CONTACT FORM === */}
        {currentPage === "contact" && (
            <div className="max-w-3xl mx-auto px-4 py-16 animate-in zoom-in-95 duration-500">
                <div className="bg-white p-8 md:p-12 rounded-2xl shadow-2xl border border-stone-100 relative overflow-hidden">
                    <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-amber-400 via-amber-600 to-amber-400"></div>
                    <div className="relative z-10">
                        <h2 className="text-3xl font-serif font-bold mb-6 text-stone-800 text-center">Formulaire de Contact</h2>
                        <form action={`https://formsubmit.co/${content.contact_email}`} method="POST" className="space-y-4">
                            <input type="hidden" name="_subject" value="Nouveau Message - La Colombe" />
                            <input type="hidden" name="_next" value={`${window.location.href}?success=true`} />
                            <input type="hidden" name="_captcha" value="false" />
                            <input type="text" name="name" placeholder="Nom / Prénom" required className="w-full p-3 border border-stone-300 rounded focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none" />
                            <input type="tel" name="phone" placeholder="Numéro de téléphone (Obligatoire)" required className="w-full p-3 border border-stone-300 rounded focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none" />
                            <input type="email" name="email" placeholder="Adresse mail (Recommandé)" className="w-full p-3 border border-stone-300 rounded focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none" />
                            <textarea name="message" placeholder="Votre message..." rows="4" required className="w-full p-3 border border-stone-300 rounded focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none"></textarea>
                            <button type="submit" className="w-full py-4 bg-amber-700 text-white font-bold rounded hover:bg-amber-800 transition flex items-center justify-center gap-2"><Send size={18} /> Envoyer le message</button>
                        </form>
                    </div>
                </div>
            </div>
        )}
      </div>

      {/* --- MODAL DÉTAIL ARTICLE --- */}
      {selectedItem && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-stone-900/90 backdrop-blur-sm animate-in fade-in duration-300" onClick={() => setSelectedItem(null)}>
          <div className="bg-white w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row relative animate-in zoom-in-95 duration-300" onClick={(e) => e.stopPropagation()}>
            <button onClick={() => setSelectedItem(null)} className="absolute top-4 right-4 z-10 p-2 bg-white/80 rounded-full hover:bg-red-50 hover:text-red-600 transition-colors shadow-sm"><X size={20} /></button>
            <div className="w-full md:w-1/2 bg-stone-100 p-8 flex items-center justify-center relative overflow-hidden border-r border-stone-200">
                <SealIcon className="absolute -left-10 -bottom-10 w-60 h-60 text-stone-200/60 rotate-12" />
                <div className="transform scale-125 relative z-10"><ItemVisual item={selectedItem} /></div>
            </div>
            <div className="w-full md:w-1/2 p-10 flex flex-col justify-center bg-white">
                <span className="text-amber-700 font-bold text-xs uppercase mb-3 flex items-center gap-2 tracking-widest border-b border-amber-100 pb-2"><HolyDoveIcon className="w-4 h-4" /> {selectedItem.category}</span>
                <h2 className="text-3xl font-serif font-bold text-stone-900 mb-2 leading-tight">{selectedItem.name}</h2>
                <div className="text-3xl font-bold text-amber-700 mb-6 font-serif">{selectedItem.price}</div>
                <div className="prose prose-sm text-stone-600 mb-8 leading-relaxed"><p>{selectedItem.description}</p></div>
                
                {selectedItem.stock > 0 ? (
                    <button onClick={() => addToCart(selectedItem)} className="w-full py-4 bg-stone-900 text-white rounded hover:bg-stone-800 font-bold transition-all shadow-lg flex justify-center items-center gap-2 uppercase tracking-wide text-sm">
                        <ShoppingCart size={16} /> Ajouter au panier
                    </button>
                ) : (
                    <button disabled className="w-full py-4 bg-stone-200 text-stone-500 rounded font-bold cursor-not-allowed uppercase tracking-wide text-sm">
                        Rupture de stock
                    </button>
                )}
            </div>
          </div>
        </div>
      )}

      {/* --- MODAL PANIER --- */}
      {isCartOpen && (
        <div className="fixed inset-0 z-[70] flex justify-end bg-stone-900/80 backdrop-blur-sm transition-opacity" onClick={() => setIsCartOpen(false)}>
            <div className="w-full max-w-md bg-white h-full shadow-2xl p-6 flex flex-col overflow-y-auto animate-in slide-in-from-right duration-300" onClick={(e) => e.stopPropagation()}>
                <div className="flex justify-between items-center mb-6 border-b border-stone-100 pb-4">
                    <h2 className="text-2xl font-serif font-bold text-stone-800 flex items-center gap-2"><ShoppingCart className="text-amber-700"/> Mon Panier</h2>
                    <button onClick={() => setIsCartOpen(false)} className="p-2 hover:bg-stone-100 rounded-full"><X size={24}/></button>
                </div>

                {cart.length === 0 ? (
                    <div className="flex-1 flex flex-col items-center justify-center text-stone-400">
                        <ShoppingCart size={48} className="mb-4 opacity-50" />
                        <p>Votre panier est vide.</p>
                        <button onClick={() => setIsCartOpen(false)} className="mt-4 text-amber-700 font-bold hover:underline">Retourner à la boutique</button>
                    </div>
                ) : (
                    <>
                        <div className="flex-1 overflow-y-auto mb-6">
                            {cart.map((item, idx) => (
                                <div key={idx} className="flex justify-between items-center py-4 border-b border-stone-100">
                                    <div><div className="font-bold text-stone-800">{item.name}</div><div className="text-sm text-amber-700">{item.price}</div></div>
                                    <button onClick={() => removeFromCart(idx)} className="text-stone-400 hover:text-red-500"><Trash2 size={18}/></button>
                                </div>
                            ))}
                            <div className="mt-4 flex justify-between items-center text-xl font-bold text-stone-900 pt-4 border-t-2 border-stone-100"><span>Total estimé</span><span>{cartTotal} €</span></div>
                        </div>
                        <div className="bg-stone-50 p-6 rounded-xl border border-stone-200">
                            <h3 className="font-serif font-bold text-lg mb-4 text-stone-800">Finaliser la commande</h3>
                            <form action={`https://formsubmit.co/${content.contact_email}`} method="POST" className="space-y-3">
                                <input type="hidden" name="_subject" value={`Nouvelle Commande - ${cart.length} articles`} />
                                <input type="hidden" name="_captcha" value="false" />
                                <input type="hidden" name="message" value={fullOrderMessage} />
                                <input type="hidden" name="_next" value={`${window.location.href}?success=true`} />

                                <input type="text" name="name" placeholder="Nom / Prénom" required className="w-full p-3 bg-white border border-stone-300 rounded focus:ring-1 focus:ring-amber-500 outline-none" />
                                <input type="tel" name="phone" placeholder="Téléphone (Obligatoire)" required className="w-full p-3 bg-white border border-stone-300 rounded focus:ring-1 focus:ring-amber-500 outline-none" />
                                <input type="email" name="email" placeholder="Email (Recommandé)" className="w-full p-3 bg-white border border-stone-300 rounded focus:ring-1 focus:ring-amber-500 outline-none" />
                                
                                <button type="submit" className="w-full py-4 bg-amber-700 text-white font-bold rounded hover:bg-amber-800 transition shadow-lg mt-2 flex items-center justify-center gap-2"><Send size={18} /> Envoyer ma commande</button>
                                <p className="text-xs text-stone-500 text-center mt-2">{content.cart_payment_info}</p>
                            </form>
                        </div>
                    </>
                )}
            </div>
        </div>
      )}

      {/* --- MODAL SUCCÈS COMMANDE --- */}
      {showOrderSuccess && (
          <div className="fixed inset-0 z-[80] flex items-center justify-center p-4 bg-stone-900/90 backdrop-blur-sm" onClick={() => setShowOrderSuccess(false)}>
              <div className="bg-white p-8 rounded-2xl max-w-sm text-center shadow-2xl animate-in zoom-in-95" onClick={e => e.stopPropagation()}>
                  <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4"><ShieldCheck size={32}/></div>
                  <h3 className="text-2xl font-serif font-bold text-stone-800 mb-2">Merci !</h3>
                  <p className="text-stone-600 mb-6">Votre demande a bien été envoyée. Nous vous recontacterons très vite pour le paiement.</p>
                  <button onClick={() => setShowOrderSuccess(false)} className="bg-amber-700 text-white px-6 py-2 rounded font-bold hover:bg-amber-800">Fermer</button>
              </div>
          </div>
      )}

      {/* FOOTER */}
      <footer className="bg-stone-950 text-stone-500 py-16 border-t border-amber-900/30 mt-auto relative overflow-hidden">
        <SealIcon className="absolute top-0 right-0 w-96 h-96 text-white opacity-5 -translate-y-1/2 translate-x-1/2" />
        <div className="max-w-7xl mx-auto px-4 text-center relative z-10">
           <div className="flex items-center justify-center gap-3 mb-6 text-amber-500 opacity-90"><BrandLogo url={content.brand_logo || DEFAULT_LOGO} className="w-12 h-12" circle={true} /><span className="font-serif font-bold text-2xl tracking-wide text-stone-200">La Colombe</span></div>
           <p className="text-sm max-w-md mx-auto leading-relaxed mb-8 font-serif italic text-stone-400">{content.footer_quote}</p>
           
           <div className="flex justify-center gap-6 mb-8">
               {content.social_facebook && <a href={content.social_facebook} target="_blank" rel="noreferrer" className="text-stone-400 hover:text-white transition-colors"><Facebook /></a>}
               {content.social_whatsapp && <a href={content.social_whatsapp} target="_blank" rel="noreferrer" className="text-stone-400 hover:text-white transition-colors"><MessageCircle /></a>}
           </div>

           <div className="flex flex-wrap justify-center gap-4 text-xs uppercase tracking-widest text-stone-600 mb-4">
               <button onClick={() => setCurrentPage("legal")} className="hover:text-amber-600">Mentions Légales</button>
               <button onClick={() => setCurrentPage("privacy")} className="hover:text-amber-600">Confidentialité</button>
               <button onClick={() => setCurrentPage("about")} className="hover:text-amber-600">Qui sommes-nous</button>
           </div>
           <p className="text-xs opacity-40">{content.footer_copyright} - {new Date().getFullYear()}</p>
        </div>
      </footer>
    </div>
  );
}