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

const { useState, useRef } = 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);
    const scrollRef = useRef(null);

    const handleScroll = (e) => {
        setScrolled(e.target.scrollTop > 20);
    };

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

    // Récupération du panneau de démonstration (éditable par l'admin)
    const fallbackDemo = { id: 'demo-chantier', name: "Panneau de démonstration", location: "Paris 75001", themeColor: "#059669", hasNoAds: false };
    const demoChantier = data?.chantiers?.find(c => c.id === 'demo-chantier') || fallbackDemo;

    return (
        <div ref={scrollRef} onScroll={handleScroll} className="h-full w-full overflow-y-auto overflow-x-hidden bg-slate-50 font-sans text-slate-800 selection:bg-emerald-200 selection:text-emerald-900 custom-scrollbar relative scroll-smooth">
            
            {/* --- NAVIGATION (HEADER) --- */}
            <header className={`fixed 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'}`}>
                <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={() => onLoginClick && onLoginClick('login')} className="text-sm font-bold text-slate-600 hover:text-slate-900 transition px-2 sm:px-4 py-2">
                            Connexion
                        </button>
                        <button onClick={() => onLoginClick && onLoginClick('register')} 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 de chantier, <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 de chantier 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={() => onLoginClick && onLoginClick('register')} 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>

                {/* Indicateur de défilement (Scroll Down) parfaitement centré */}
                <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 chef de chantier.
                            </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 du chantier, 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">J'uploade 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>

                        {/* Le vrai mockup paramétrable en direct depuis la BDD */}
                        <div className="lg:w-1/2 w-full flex justify-center">
                            <div className="relative w-full max-w-sm">
                                <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-[9/16] overflow-hidden">
                                    {/* Encoche (Notch) iPhone */}
                                    <div className="absolute top-0 inset-x-0 h-6 bg-slate-900 rounded-b-2xl w-40 mx-auto z-[60]"></div>
                                    
                                    {/* Vraie vue Riverain injectée dynamiquement - Ajout de isPreview */}
                                    <div className="w-full h-full rounded-[2.5rem] overflow-hidden relative bg-white">
                                        <window.RiverainView chantier={demoChantier} interactions={[]} 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 chantiers ?</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={() => onLoginClick && onLoginClick('register')} 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">Contact public</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 
                            chantierId="CONTACT_PUBLIC" 
                            showToast={showToast} 
                            onSuccess={() => setContactModal(false)}
                            hideAlert={true} 
                        />
                    </div>
                </window.Modal>
            )}

            {/* Modales CGV / RGPD dynamiques (tirées des settings Admin) */}
            {legalModal && (
                <window.Modal title={legalModal === 'cgv' ? 'Conditions générales de vente' : 'Politique de confidentialité et mentions légales'} onClose={() => setLegalModal(null)}>
                    <div className="whitespace-pre-wrap text-sm text-slate-600 leading-relaxed font-medium">
                        {legalModal === 'cgv' ? (data?.settings?.cgv || "Aucune CGV définie.") : (data?.settings?.rgpd || "Aucune mention légale définie.")}
                    </div>
                </window.Modal>
            )}
        </div>
    );
};

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