/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Page d'Accueil Publique (Vitrine SaaS et Marketing)
 * =========================================================================
 */

const { useState, useEffect } = React;
const { 
    SiteLogo, ShieldCheck, MessageSquare, Lock, ArrowRight, 
    Leaf, ArrowDown
} = window;

window.AccueilView = ({ onLoginClick, data, showToast }) => {
    const [scrolled, setScrolled] = useState(false);
    const [legalModal, setLegalModal] = useState(null); // 'cgv' | 'rgpd'
    const [contactModal, setContactModal] = useState(false);

    useEffect(() => {
        const onScroll = () => {
            setScrolled(window.scrollY > 20);
        };
        
        window.addEventListener('scroll', onScroll);
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    const handleDiscoverClick = () => {
        window.scrollBy({ 
            top: window.innerHeight * 0.66, 
            behavior: 'smooth' 
        });
    };

    const handleLoginClick = () => {
        if (onLoginClick) {
            onLoginClick('login');
        }
    };

    const handleRegisterClick = () => {
        if (onLoginClick) {
            onLoginClick('register');
        }
    };

    // CORRECTION : Panneau de secours (Fallback) pour garantir que le mockup 
    // s'affiche toujours, même si l'administrateur a effacé la base de données.
    const fallbackDemo = {
        id: 'demo-panneau',
        name: 'Construction Résidence Les Pins',
        location: '12 Avenue de la Plage, 83600 Fréjus',
        themeColor: '#059669',
        hasNoAds: false,
        maitreOuvrage: 'Eco-Promotion Immobilière',
        permitNumber: 'PC 083 061 23 P0000',
        description: "Construction d'un immeuble de 12 logements avec parking souterrain."
    };

    const fallbackInteractions = [
        { 
            id: 'demo_msg_1', 
            panneauId: 'demo-panneau', 
            author: 'Riverain', 
            target: 'Client', 
            detail: 'Bonjour, pouvez-vous me dire combien de temps va durer la phase de terrassement ?', 
            isAlert: 0, 
            resolved: 1, 
            created_at: new Date(Date.now() - 86400000).toISOString() 
        },
        { 
            id: 'demo_msg_2', 
            panneauId: 'demo-panneau', 
            author: 'Client', 
            target: 'Riverain', 
            detail: "Bonjour, le terrassement devrait se terminer d'ici la fin de la semaine prochaine. Nous faisons le maximum pour limiter les nuisances.", 
            isAlert: 0, 
            resolved: 1, 
            created_at: new Date(Date.now() - 43200000).toISOString() 
        }
    ];

    const demoPanneau = data?.panneaux?.find(p => p.id === 'demo-panneau') || fallbackDemo;
    
    const dbInteractions = data?.interactions?.filter(i => i.panneauId === 'demo-panneau') || [];
    const demoInteractions = dbInteractions.length > 0 ? dbInteractions : fallbackInteractions;

    return (
        <div className="min-h-screen w-full bg-slate-50 font-sans text-slate-800 selection:bg-emerald-200 selection:text-emerald-900 scroll-smooth">
            
            {/* --- NAVIGATION (HEADER) EN STICKY POUR RESPECTER LE BANDEAU ADMIN --- */}
            <header className={`sticky top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/80 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5'} -mb-[80px]`}>
                <div className="max-w-6xl mx-auto px-4 sm:px-6 flex justify-between items-center">
                    <SiteLogo className="text-xl sm:text-2xl" qrSize={28} />
                    <div className="flex items-center gap-2 sm:gap-4">
                        <button 
                            onClick={handleLoginClick} 
                            className="text-sm font-bold text-slate-600 hover:text-slate-900 transition px-2 sm:px-4 py-2"
                        >
                            Connexion
                        </button>
                        <button 
                            onClick={handleRegisterClick} 
                            className="bg-slate-900 text-white px-4 sm:px-6 py-2 sm:py-2.5 rounded-xl font-bold text-xs sm:text-sm hover:bg-slate-800 transition shadow-lg flex items-center gap-2"
                        >
                            Inscription <ArrowRight size={16} className="hidden sm:block" />
                        </button>
                    </div>
                </div>
            </header>

            {/* --- HERO SECTION --- */}
            <section className="relative pt-32 pb-32 sm:pt-40 sm:pb-40 overflow-hidden min-h-[90vh] flex flex-col justify-center">
                <div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-emerald-300 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-pulse pointer-events-none"></div>
                <div className="absolute bottom-[-10%] right-[-5%] w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-pulse pointer-events-none" style={{ animationDelay: '2s' }}></div>

                <div className="max-w-6xl mx-auto px-4 sm:px-6 relative z-10 flex-1 flex flex-col justify-center">
                    <div className="text-center max-w-3xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-700">
                        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-black uppercase tracking-widest mb-6 shadow-sm border border-emerald-200">
                            <Leaf size={14} /> La solution BTP responsable
                        </div>
                        <h1 className="text-4xl sm:text-5xl md:text-6xl font-black text-slate-900 tracking-tight leading-[1.1] mb-6">
                            L'affichage légal, <span className="text-emerald-600">réinventé.</span>
                        </h1>
                        <p className="text-lg sm:text-xl text-slate-600 leading-relaxed mb-10 font-medium">
                            Remplacez vos panneaux vulnérables par un QR Code inaltérable. Sécurisez vos preuves légales, informez les riverains, et centralisez vos archives D.O.E.
                        </p>
                        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <button 
                                onClick={handleRegisterClick} 
                                className="w-full sm:w-auto bg-emerald-600 text-white px-8 py-4 rounded-xl font-black text-lg hover:bg-emerald-700 transition shadow-xl hover:-translate-y-1 flex items-center justify-center gap-2"
                            >
                                Créer mon premier panneau
                            </button>
                        </div>
                        <p className="text-xs text-slate-400 mt-4 font-medium uppercase tracking-widest">
                            Sans engagement • Activation immédiate
                        </p>
                    </div>
                </div>

                <div 
                    onClick={handleDiscoverClick} 
                    className="absolute bottom-6 inset-x-0 flex flex-col items-center justify-center text-slate-400 animate-bounce cursor-pointer hover:text-emerald-600 transition" 
                    title="Découvrir la suite"
                >
                    <span className="text-[10px] font-black uppercase tracking-widest mb-1 opacity-70 ml-[0.1em]">Découvrir</span>
                    <ArrowDown size={20} className="opacity-70" />
                </div>
            </section>

            {/* --- FEATURES SECTION --- */}
            <section className="py-20 bg-white border-y border-slate-200 relative z-20">
                <div className="max-w-6xl mx-auto px-4 sm:px-6">
                    <div className="text-center mb-16 animate-in fade-in duration-500">
                        <h2 className="text-3xl font-black text-slate-800">Pourquoi passer au digital ?</h2>
                        <p className="text-slate-500 mt-4 max-w-2xl mx-auto font-medium">
                            Conçu spécifiquement pour les promoteurs, architectes et maîtres d'œuvre, eco-panneau résout les failles de l'affichage traditionnel.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div className="bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:shadow-lg transition duration-300 group">
                            <div className="w-14 h-14 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <ShieldCheck size={28} />
                            </div>
                            <h3 className="text-xl font-black text-slate-800 mb-3">Conformité absolue</h3>
                            <p className="text-slate-600 text-sm leading-relaxed">
                                Fini les arrêtés effacés par la pluie ou arrachés. Votre permis est numérisé, horodaté et accessible 24h/24 en scannant le panneau physique.
                            </p>
                        </div>

                        <div className="bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:shadow-lg transition duration-300 group">
                            <div className="w-14 h-14 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <MessageSquare size={28} />
                            </div>
                            <h3 className="text-xl font-black text-slate-800 mb-3">Médiation riverains</h3>
                            <p className="text-slate-600 text-sm leading-relaxed">
                                Canalisez les requêtes du voisinage via une messagerie dédiée intégrée au QR Code. Protégez le numéro personnel du responsable du projet.
                            </p>
                        </div>

                        <div className="bg-slate-50 p-8 rounded-3xl border border-slate-100 hover:shadow-lg transition duration-300 group">
                            <div className="w-14 h-14 bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <Lock size={28} />
                            </div>
                            <h3 className="text-xl font-black text-slate-800 mb-3">Coffre-fort D.O.E</h3>
                            <p className="text-slate-600 text-sm leading-relaxed">
                                Stockez vos constats d'huissier en toute confidentialité. À la fin des travaux, générez votre archive numérique complète en un clic.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* --- HOW IT WORKS SECTION (WITH REAL MOCKUP) --- */}
            <section className="py-20 bg-slate-900 text-white relative z-20">
                <div className="max-w-6xl mx-auto px-4 sm:px-6">
                    <div className="flex flex-col lg:flex-row items-center gap-16">
                        <div className="lg:w-1/2 space-y-8">
                            <h2 className="text-3xl sm:text-4xl font-black leading-tight">
                                Simple, rapide et <span className="text-emerald-400">100% autonome.</span>
                            </h2>
                            <div className="space-y-6">
                                <div className="flex items-start gap-4">
                                    <div className="w-8 h-8 rounded-full bg-emerald-500 text-slate-900 font-black flex items-center justify-center shrink-0 mt-1">1</div>
                                    <div>
                                        <h4 className="text-lg font-bold">Je crée mon panneau</h4>
                                        <p className="text-slate-400 text-sm mt-1">Je téléverse mon arrêté légal (PDF) et je renseigne l'équipe depuis mon espace client.</p>
                                    </div>
                                </div>
                                <div className="flex items-start gap-4">
                                    <div className="w-8 h-8 rounded-full bg-emerald-500 text-slate-900 font-black flex items-center justify-center shrink-0 mt-1">2</div>
                                    <div>
                                        <h4 className="text-lg font-bold">J'imprime mon panneau</h4>
                                        <p className="text-slate-400 text-sm mt-1">Je télécharge instantanément mon panneau A1 haute définition contenant mon QR Code unique.</p>
                                    </div>
                                </div>
                                <div className="flex items-start gap-4">
                                    <div className="w-8 h-8 rounded-full bg-emerald-500 text-slate-900 font-black flex items-center justify-center shrink-0 mt-1">3</div>
                                    <div>
                                        <h4 className="text-lg font-bold">Je pilote en direct</h4>
                                        <p className="text-slate-400 text-sm mt-1">Je réponds aux messages des riverains et je consulte les statistiques de scan depuis mon mobile.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Mockup paramétrable en direct depuis la BDD (Format exact iPhone 17: 393x852) */}
                        <div className="lg:w-1/2 w-full flex justify-center">
                            <div className="relative w-full max-w-[393px]">
                                <div className="absolute inset-0 bg-emerald-500 rounded-[3.5rem] transform rotate-6 opacity-20"></div>
                                <div className="bg-slate-900 rounded-[3rem] p-2 shadow-2xl relative border-4 border-slate-700 aspect-[393/852] overflow-hidden flex flex-col">
                                    <div className="absolute top-0 inset-x-0 h-6 bg-slate-900 rounded-b-2xl w-40 mx-auto z-[60]"></div>
                                    <div className="w-full h-full rounded-[2.5rem] overflow-hidden relative bg-white flex flex-col">
                                        <window.RiverainView 
                                            panneau={demoPanneau} 
                                            interactions={demoInteractions} 
                                            showToast={showToast} 
                                            isPreview={true} 
                                        />
                                    </div>
                                </div>
                                <div className="absolute -bottom-6 inset-x-0 text-center">
                                    <p className="text-xs font-bold text-slate-400 bg-slate-800 inline-block px-4 py-1.5 rounded-full shadow-lg border border-slate-700">
                                        Simulation de l'affichage smartphone
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* --- CTA SECTION --- */}
            <section className="py-20 bg-emerald-600 text-center px-4 relative z-20">
                <div className="max-w-3xl mx-auto">
                    <h2 className="text-3xl sm:text-4xl font-black text-white mb-6">Prêt à digitaliser vos affichages ?</h2>
                    <p className="text-emerald-100 text-lg mb-8 font-medium">
                        Rejoignez les professionnels qui ont déjà sécurisé leurs affichages réglementaires. Inscription gratuite, paiement à l'activation du panneau.
                    </p>
                    <button 
                        onClick={handleRegisterClick} 
                        className="bg-slate-900 text-white px-10 py-5 rounded-2xl font-black text-lg uppercase tracking-widest hover:bg-slate-800 hover:-translate-y-1 transition shadow-2xl"
                    >
                        Créer mon compte
                    </button>
                </div>
            </section>

            {/* --- FOOTER ET MODALES LÉGALES --- */}
            <footer className="bg-white border-t border-slate-200 py-12 relative z-20">
                <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row justify-between items-center gap-6">
                    <div className="flex items-center gap-2 opacity-50 grayscale">
                        <SiteLogo className="text-lg" qrSize={20} />
                    </div>
                    <div className="flex gap-6 text-sm font-bold text-slate-500">
                        <button 
                            onClick={() => setLegalModal('rgpd')} 
                            className="hover:text-emerald-600 transition"
                        >
                            Mentions légales
                        </button>
                        <button 
                            onClick={() => setLegalModal('cgv')} 
                            className="hover:text-emerald-600 transition"
                        >
                            Conditions générales de vente
                        </button>
                        <button 
                            onClick={() => setContactModal(true)} 
                            className="hover:text-emerald-600 transition"
                        >
                            Nous contacter
                        </button>
                    </div>
                    <p className="text-xs text-slate-400 font-medium">
                        © {new Date().getFullYear()} eco-panneau.fr - Tous droits réservés.
                    </p>
                </div>
            </footer>

            {/* Modale de Contact Public */}
            {contactModal && (
                <window.Modal title="Service client" onClose={() => setContactModal(false)}>
                    <div className="space-y-4">
                        <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                            <p className="text-sm text-slate-600 font-medium leading-relaxed">
                                Une question sur notre plateforme ? Besoin d'assistance ? <br/>
                                Envoyez-nous un message, notre équipe support vous répondra directement par e-mail.
                            </p>
                        </div>
                        <window.PublicContactForm 
                            panneauId="CONTACT_PUBLIC" 
                            showToast={showToast} 
                            onSuccess={() => setContactModal(false)}
                            hideAlert={true} 
                            hideAttachments={true}
                        />
                    </div>
                </window.Modal>
            )}

            {/* Modale CGV / RGPD */}
            {legalModal && (
                <window.Modal 
                    title={legalModal === 'cgv' ? 'Conditions générales de vente' : 'Politique de confidentialité et mentions légales'} 
                    onClose={() => setLegalModal(null)}
                >
                    <div 
                        dangerouslySetInnerHTML={{ 
                            __html: window.DOMPurify 
                                ? window.DOMPurify.sanitize(
                                    legalModal === 'cgv' 
                                        ? (data?.settings?.cgv || "Aucune CGV définie.") 
                                        : (data?.settings?.rgpd || "Aucune mention légale définie.")
                                )
                                : (legalModal === 'cgv' 
                                        ? (data?.settings?.cgv || "Aucune CGV.") 
                                        : (data?.settings?.rgpd || "Aucune mention.")
                                  ).toString()
                                   .replace(/</g, '&lt;')
                                   .replace(/>/g, '&gt;')
                                   .replace(/"/g, '&quot;')
                                   .replace(/'/g, '&#039;')
                        }} 
                        className="text-sm text-slate-600 leading-relaxed font-medium admin-html" 
                    />
                </window.Modal>
            )}
        </div>
    );
};

/* EOF ===== [_accueil.jsx] =============== */