'use client';
export const dynamic = 'force-dynamic';


import React, { useContext, useEffect, useRef } from 'react';
import { Ripple } from 'primereact/ripple';
import { InputText } from 'primereact/inputtext';
import { StyleClass } from 'primereact/styleclass';
import { useRouter } from 'next/navigation';
import { Button } from 'primereact/button';
import { LayoutContext } from '../layout/context/layoutcontext';
import { PrimeReactContext } from 'primereact/api';
import type { ColorScheme } from '@/types';
import { redirectToLogin } from '@/lib/auth';

const LandingPage = () => {
    const router = useRouter();
    const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
    const { changeTheme } = useContext(PrimeReactContext);

    const homeRef = useRef(null);
    const timesRef = useRef(null);
    const menuRef = useRef(null);
    const menuButtonRef = useRef(null);
    const meetRef = useRef(null);
    const featuresRef = useRef(null);
    const pricingRef = useRef(null);

    const goHome = () => {
        router.push('/');
    };

    const scrollToElement = (el: React.RefObject<HTMLElement>) => {
        if (el.current) {
            el.current?.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
                inline: 'nearest'
            });
        }
    };

    const changeColorScheme = (colorScheme: ColorScheme) => {
        changeTheme?.(layoutConfig.colorScheme, colorScheme, 'theme-link', () => {
            setLayoutConfig((prevState) => ({
                ...prevState,
                colorScheme,
                menuTheme: layoutConfig.colorScheme === 'dark' ? 'dark' : 'light'
            }));
        });
    };

    useEffect(() => {
        changeColorScheme('light');
        setLayoutConfig((prevState) => ({
            ...prevState,
            menuTheme: 'light'
        }));
    }, []);

    return (
        <div ref={homeRef} className="landing-container" style={{ background: '#100e23' }}>
            <div id="header" className="landing-header flex flex-column w-full p-6" style={{ minHeight: '1000px', background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)' }}>
                <div className="header-menu-container flex align-items-center justify-content-between">
                    <div className="header-left-elements flex align-items-center justify-content-between">
                        <div className="cursor-pointer layout-topbar-logo flex align-items-center" onClick={goHome}>
                            <i className="pi pi-building text-orange-600 text-3xl mr-3"></i>
                            <span className="text-2xl font-bold text-gray-800">BTP Xpress</span>
                        </div>

                        <StyleClass nodeRef={menuButtonRef} selector="@next" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
                            <a ref={menuButtonRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800" style={{ fontSize: '2rem' }}>
                                <i className="pi pi-bars"></i>
                                <Ripple />
                            </a>
                        </StyleClass>
                        <ul
                            ref={menuRef}
                            id="menu"
                            style={{ top: '0px', right: '0%' }}
                            className="list-none  lg:flex lg:flex-row flex-column align-items-start bg-white absolute lg:relative h-screen lg:h-auto lg:surface-ground m-0 z-5 w-full sm:w-6 lg:w-full py-6 lg:py-0"
                        >
                            <StyleClass nodeRef={timesRef} selector="@parent" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
                                <a ref={timesRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800 absolute" style={{ top: '3rem', right: '2rem' }}>
                                    <i className="pi pi-times text-4xl"></i>
                                    <Ripple />
                                </a>
                            </StyleClass>
                            <li>
                                <a onClick={() => scrollToElement(homeRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Accueil</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => scrollToElement(meetRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Découvrir</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => scrollToElement(featuresRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Fonctionnalités</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => scrollToElement(pricingRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Tarifs</span>
                                    <Ripple />
                                </a>
                            </li>
                            <li>
                                <a onClick={() => redirectToLogin()} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                    <span>Connexion</span>
                                    <Ripple />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div className="header-right-elements flex align-items-center">
                        <a onClick={() => {
                            const keycloakUrl = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
                            const realm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
                            const clientId = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
                            const redirectUri = encodeURIComponent(window.location.origin + '/dashboard');
                            window.location.href = `${keycloakUrl}/realms/${realm}/protocol/openid_connect/registrations?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}`;
                        }} className="p-button p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-white bg-orange-500 border-orange-500 cursor-pointer mr-3" style={{ padding: '0.714rem 1.5rem' }}>
                            <span aria-hidden="true" className="p-button-label">
                                Démarrer maintenant
                            </span>
                        </a>
                        <a href="/pages/contact">
                            <Button className="contact-button mr-3 p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-gray-700" style={{ background: 'rgba(68, 72, 109, 0.05)' }}>
                                <span aria-hidden="true" className="p-button-label">
                                    Contact
                                </span>
                            </Button>
                        </a>
                    </div>
                </div>

                <div className="header-text" style={{ padding: '100px 60px' }}>
                    <div className="flex align-items-center mb-4">
                        <i className="pi pi-building text-orange-600 text-4xl mr-3"></i>
                        <span className="text-3xl font-bold text-gray-800">BTP Xpress</span>
                    </div>
                    <h1 className="mb-0 text-gray-800" style={{ fontSize: '80px', lineHeight: '95px' }}>
                        Construisez l&apos;avenir
                    </h1>
                    <h2 className="mt-0 font-medium text-4xl text-gray-700">avec BTP Xpress, la suite logicielle qui transforme le BTP</h2>
                    <p className="text-xl text-gray-600 mb-5 line-height-3" style={{ maxWidth: '650px' }}>
                        <strong>Fini les chantiers qui dérapent, les budgets qui explosent et les équipes désorganisées.</strong>
                        BTP Xpress centralise tout : de la première estimation au dernier m² livré,
                        pilotez vos projets avec la précision d&apos;un architecte et l&apos;efficacité d&apos;un chef de chantier expérimenté.
                    </p>

                    <div className="flex flex-wrap gap-3 mb-6">
                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
                            <span className="font-semibold text-gray-800">Gestion complète de projets</span>
                        </div>
                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
                            <span className="font-semibold text-gray-800">Suivi temps réel</span>
                        </div>
                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
                            <span className="font-semibold text-gray-800">Facturation automatisée</span>
                        </div>
                    </div>
                    <a onClick={() => redirectToLogin()} className="p-button text-white bg-orange-500 border-orange-500 font-bold border-round cursor-pointer mr-3 shadow-3" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
                        <i className="pi pi-play mr-2"></i>
                        Démarrer maintenant
                    </a>
                    <a href="#features" className="p-button p-button-outlined text-orange-600 border-orange-300 font-bold border-round cursor-pointer" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
                        <i className="pi pi-eye mr-2"></i>
                        Voir les fonctionnalités
                    </a>
                </div>

                <div ref={featuresRef} className="header-features" style={{ padding: '100px 60px' }}>
                    <div className="text-center mb-6">
                        <h2 className="text-4xl font-bold text-gray-800 mb-4">Spécialisé pour tous les métiers du BTP</h2>
                        <p className="text-xl text-gray-600">Une solution adaptée à chaque corps de métier</p>
                    </div>
                    <div className="grid">
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-home text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Gros Œuvre &amp; Structure</span>
                                <span className="content">Béton, maçonnerie, charpente : gérez vos approvisionnements, planifiez vos coulages, suivez vos cadences et optimisez vos rotations d&apos;équipes.</span>
                            </div>
                        </div>
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-wrench text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Second Œuvre &amp; Finitions</span>
                                <span className="content">Électricité, plomberie, peinture, carrelage : coordonnez vos interventions, gérez vos stocks et respectez les délais de livraison.</span>
                            </div>
                        </div>
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-car text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Travaux Publics &amp; VRD</span>
                                <span className="content">Terrassement, voirie, réseaux : planifiez vos chantiers, gérez votre matériel et optimisez vos déplacements d&apos;équipes.</span>
                            </div>
                        </div>
                        <div className="col-12 md:col-6 lg:col-3 mb-4">
                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
                                <i className="pi pi-briefcase text-4xl mb-3 block"></i>
                                <span className="title mb-3 block text-2xl font-semibold">Maîtrise d&apos;Œuvre &amp; AMO</span>
                                <span className="content">Pilotage de projets, coordination, suivi budgétaire : centralisez tous vos dossiers et collaborez efficacement avec tous les intervenants.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div ref={meetRef} id="meet-btpxpress" className="flex justify-content-center w-full relative text-center py-8" style={{ minHeight: '400px', background: 'linear-gradient(135deg, #f97316 0%, #fb923c 30%, #fed7aa 100%)', boxShadow: '0 10px 25px rgba(249, 115, 22, 0.15)', zIndex: 100, position: 'relative' }}>
                <div className="flex flex-column align-items-center justify-content-center px-6">
                    <h2 className="text-4xl font-bold text-gray-800 mb-4">
                        BTP Xpress en action
                    </h2>
                    <p className="text-xl text-gray-700 mb-6 line-height-3" style={{ maxWidth: '600px' }}>
                        Découvrez comment nos clients transforment leur activité BTP avec des outils pensés pour leur réussite
                    </p>
                    <div className="grid w-full" style={{ maxWidth: '900px' }}>
                        <div className="col-12 md:col-4 text-center mb-4">
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <i className="pi pi-clock text-orange-600 text-4xl mb-3"></i>
                                <div className="text-3xl font-bold text-green-600 mb-2">-50%</div>
                                <div className="text-lg font-semibold text-gray-800">Temps administratif</div>
                                <div className="text-sm text-gray-600">Automatisation des tâches répétitives</div>
                            </div>
                        </div>
                        <div className="col-12 md:col-4 text-center mb-4">
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <i className="pi pi-chart-bar text-green-600 text-4xl mb-3"></i>
                                <div className="text-3xl font-bold text-green-600 mb-2">+35%</div>
                                <div className="text-lg font-semibold text-gray-800">Rentabilité</div>
                                <div className="text-sm text-gray-600">Optimisation des coûts et marges</div>
                            </div>
                        </div>
                        <div className="col-12 md:col-4 text-center mb-4">
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <i className="pi pi-users text-blue-600 text-4xl mb-3"></i>
                                <div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
                                <div className="text-lg font-semibold text-gray-800">Satisfaction client</div>
                                <div className="text-sm text-gray-600">Respect des délais et qualité</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="w-full py-6" style={{ background: 'linear-gradient(180deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%)' }}>
                <div id="features" className="px-4 lg:px-8 features">
                    <h2 className="font-medium text-3xl text-center text-gray-800 mb-6">La différence BTP Xpress : des résultats concrets</h2>

                    <div className="grid feature-boxes feature-boxes-1" style={{ marginBottom: '80px' }}>
                        <div className="col-12 lg:col-5">
                            <h3 className="font-medium text-2xl mb-4 text-gray-800">🎯 Performance Opérationnelle</h3>
                            <p className="text-lg line-height-3 mb-4">
                                <strong>Réduisez vos délais de 25% en moyenne</strong> grâce à une planification intelligente,
                                une coordination automatisée des équipes et un suivi temps réel des avancements.
                                Vos chantiers respectent enfin les délais annoncés.
                            </p>
                        </div>
                        <div className="col-12 lg:col-7">
                            <div className="grid">
                                <div className="col-12 md:col-4">
                                    <div className="bg-white border-round p-3 shadow-2 text-center" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-clock text-orange-600 text-3xl mb-2"></i>
                                        <div className="text-2xl font-bold text-green-600 mb-1">-25%</div>
                                        <div className="text-sm text-gray-600 font-medium">Délais</div>
                                    </div>
                                </div>
                                <div className="col-12 md:col-4">
                                    <div className="bg-white border-round p-3 shadow-2 text-center" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-euro text-green-600 text-3xl mb-2"></i>
                                        <div className="text-2xl font-bold text-green-600 mb-1">+35%</div>
                                        <div className="text-sm text-gray-600 font-medium">Rentabilité</div>
                                    </div>
                                </div>
                                <div className="col-12 md:col-4">
                                    <div className="bg-white border-round p-3 shadow-2 text-center" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-file text-blue-600 text-3xl mb-2"></i>
                                        <div className="text-2xl font-bold text-orange-600 mb-1">-50%</div>
                                        <div className="text-sm text-gray-600 font-medium">Admin</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="grid feature-boxes feature-boxes-2" style={{ marginBottom: '60px' }}>
                        <div className="col-12 lg:col-5">
                            <h3 className="text-2xl font-medium mb-4 text-gray-800">💰 Rentabilité Maximisée</h3>
                            <p className="text-lg line-height-3">
                                <strong>Augmentez vos marges de 15% en moyenne</strong> grâce à un contrôle précis des coûts,
                                une optimisation automatique des approvisionnements et une facturation sans erreur.
                                Chaque euro compte, BTP Xpress vous aide à les préserver et les multiplier.
                            </p>
                        </div>
                        <div className="col-12 lg:col-7">
                            <div className="grid">
                                <div className="col-6 lg:col-3">
                                    <div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-building text-orange-600 text-2xl mb-2"></i>
                                        <h5 className="font-medium text-sm mb-1">Maçonnerie Dubois</h5>
                                        <div className="text-xs text-green-600 font-semibold">+45% rentabilité</div>
                                    </div>
                                </div>
                                <div className="col-6 lg:col-3">
                                    <div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-wrench text-blue-600 text-2xl mb-2"></i>
                                        <h5 className="font-medium text-sm mb-1">Électricité Martin</h5>
                                        <div className="text-xs text-orange-600 font-semibold">-60% admin</div>
                                    </div>
                                </div>
                                <div className="col-6 lg:col-3">
                                    <div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-car text-green-600 text-2xl mb-2"></i>
                                        <h5 className="font-medium text-sm mb-1">TP Rousseau</h5>
                                        <div className="text-xs text-green-600 font-semibold">+30% projets</div>
                                    </div>
                                </div>
                                <div className="col-6 lg:col-3">
                                    <div className="bg-white text-center border-round p-3 shadow-2 mb-3" style={{ border: '1px solid #e5e7eb' }}>
                                        <i className="pi pi-home text-purple-600 text-2xl mb-2"></i>
                                        <h5 className="font-medium text-sm mb-1">Rénovation Pro</h5>
                                        <div className="text-xs text-blue-600 font-semibold">+25% délais</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="grid feature-boxes feature-boxes-3" style={{ marginBottom: '60px' }}>
                        <div className="col-12 lg:col-6">
                            <h3 className="text-2xl font-medium mb-4 text-gray-800">🚀 Innovation Technologique</h3>
                            <div className="grid">
                                <div className="col-12 md:col-6 mb-3">
                                    <div className="flex align-items-center">
                                        <span className="text-2xl mr-2">🤖</span>
                                        <div>
                                            <strong className="text-base">IA prédictive</strong>
                                            <div className="text-sm text-gray-600">Anticipez les risques</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-12 md:col-6 mb-3">
                                    <div className="flex align-items-center">
                                        <span className="text-2xl mr-2">📱</span>
                                        <div>
                                            <strong className="text-base">Mobilité totale</strong>
                                            <div className="text-sm text-gray-600">Chantier ou bureau</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-12 md:col-6 mb-3">
                                    <div className="flex align-items-center">
                                        <span className="text-2xl mr-2">☁️</span>
                                        <div>
                                            <strong className="text-base">Cloud sécurisé</strong>
                                            <div className="text-sm text-gray-600">Données protégées</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-12 md:col-6 mb-3">
                                    <div className="flex align-items-center">
                                        <span className="text-2xl mr-2">⚡</span>
                                        <div>
                                            <strong className="text-base">Automatisation</strong>
                                            <div className="text-sm text-gray-600">Tâches répétitives</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-12 lg:col-6">
                            <div className="bg-white border-round p-4 shadow-2 mb-4" style={{ border: '1px solid #e5e7eb' }}>
                                <h4 className="text-base font-semibold mb-3 text-gray-800">
                                    <i className="pi pi-chart-line text-blue-600 mr-2"></i>
                                    Tableau de Bord Temps Réel
                                </h4>
                                <div className="grid">
                                    <div className="col-6 text-center">
                                        <div className="text-xl font-bold text-green-600">€127K</div>
                                        <div className="text-xs text-gray-600">CA en cours</div>
                                    </div>
                                    <div className="col-6 text-center">
                                        <div className="text-xl font-bold text-orange-600">15</div>
                                        <div className="text-xs text-gray-600">Chantiers actifs</div>
                                    </div>
                                </div>
                            </div>
                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
                                <h4 className="text-base font-semibold mb-3 text-gray-800">
                                    <i className="pi pi-clock text-orange-600 mr-2"></i>
                                    Avancement Projets
                                </h4>
                                <div className="mb-2">
                                    <div className="flex justify-content-between mb-1">
                                        <span className="text-xs">Villa Moderne</span>
                                        <span className="text-xs font-semibold">85%</span>
                                    </div>
                                    <div className="bg-gray-200 border-round" style={{ height: '6px' }}>
                                        <div className="bg-green-600 border-round" style={{ width: '85%', height: '100%' }}></div>
                                    </div>
                                </div>
                                <div>
                                    <div className="flex justify-content-between mb-1">
                                        <span className="text-xs">Rénovation Bureau</span>
                                        <span className="text-xs font-semibold">62%</span>
                                    </div>
                                    <div className="bg-gray-200 border-round" style={{ height: '6px' }}>
                                        <div className="bg-orange-600 border-round" style={{ width: '62%', height: '100%' }}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Section Pricing */}
            <div ref={pricingRef} id="pricing" className="w-full py-8" style={{ background: 'linear-gradient(180deg, #f3f4f6 0%, #ffffff 50%, #f9fafb 100%)' }}>
                <div className="px-4 lg:px-8">
                    <div className="text-center mb-8">
                        <h2 className="text-4xl font-bold text-gray-800 mb-4">Investissez dans votre avenir</h2>
                        <p className="text-xl text-gray-600 mb-6" style={{ maxWidth: '650px', margin: '0 auto' }}>
                            <strong>BTP Xpress se rembourse en moins de 6 mois</strong> grâce aux gains de productivité et d&apos;efficacité.
                            Choisissez la formule qui correspond à votre ambition et commencez à transformer votre entreprise dès aujourd&apos;hui.
                        </p>
                    </div>

                    <div className="grid">
                        {/* Plan Artisan Expert */}
                        <div className="col-12 lg:col-4 mb-4">
                            <div className="bg-white border-round p-6 shadow-3 h-full" style={{ border: '1px solid #e5e7eb' }}>
                                <div className="text-center mb-6">
                                    <h3 className="text-2xl font-bold text-orange-600 mb-2">Artisan Expert</h3>
                                    <div className="text-5xl font-bold text-gray-800 mb-2">129€</div>
                                    <div className="text-gray-600 mb-1">par mois</div>
                                    <div className="text-sm text-gray-500 mb-2">jusqu&apos;à 5 utilisateurs</div>
                                    <div className="text-xs text-green-600 font-semibold bg-green-50 px-3 py-1 border-round">ROI garanti en 4 mois</div>
                                </div>
                                <ul className="list-none p-0 mb-6">
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🏗️ Chantiers &amp; phases illimités</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>💰 Devis intelligents &amp; facturation auto</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>📊 Tableaux de bord temps réel</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>📱 Application mobile incluse</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🔧 Support technique prioritaire</span>
                                    </li>
                                </ul>
                                <Button
                                    onClick={() => redirectToLogin()}
                                    className="w-full p-button-outlined border-orange-300 text-orange-600 font-semibold py-3"
                                >
                                    Commencer l&apos;essai gratuit
                                </Button>
                            </div>
                        </div>

                        {/* Plan Entreprise Pro - POPULAIRE */}
                        <div className="col-12 lg:col-4 mb-4">
                            <div className="bg-white border-round p-6 shadow-3 h-full relative" style={{ border: '3px solid #06b6d4' }}>
                                <div className="absolute top-0 left-0 right-0 bg-cyan-500 text-white text-center py-2 font-semibold text-sm" style={{ borderRadius: '8px 8px 0 0' }}>
                                    ⭐ PLUS POPULAIRE
                                </div>
                                <div className="text-center mb-6 mt-4">
                                    <h3 className="text-2xl font-bold text-cyan-600 mb-2">Entreprise Pro</h3>
                                    <div className="text-5xl font-bold text-gray-800 mb-2">249€</div>
                                    <div className="text-gray-600 mb-1">par mois</div>
                                    <div className="text-sm text-gray-500 mb-2">jusqu&apos;à 15 utilisateurs</div>
                                    <div className="text-xs text-blue-600 font-semibold bg-blue-50 px-3 py-1 border-round">ROI garanti en 3 mois</div>
                                </div>
                                <ul className="list-none p-0 mb-6">
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>✨ Tout du plan Artisan Expert</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🤖 IA prédictive avancée</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>📈 Analytics &amp; rapports avancés</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🔗 Intégrations comptables</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>👥 Gestion multi-équipes</span>
                                    </li>
                                </ul>
                                <Button
                                    onClick={() => redirectToLogin()}
                                    className="w-full bg-cyan-500 border-cyan-500 text-white font-semibold py-3"
                                >
                                    Démarrer maintenant
                                </Button>
                            </div>
                        </div>

                        {/* Plan Groupe Enterprise */}
                        <div className="col-12 lg:col-4 mb-4">
                            <div className="bg-white border-round p-6 shadow-3 h-full" style={{ border: '1px solid #e5e7eb' }}>
                                <div className="text-center mb-6">
                                    <h3 className="text-2xl font-bold text-purple-600 mb-2">Groupe Enterprise</h3>
                                    <div className="text-3xl font-bold text-gray-800 mb-2">Sur mesure</div>
                                    <div className="text-gray-600 mb-1">selon vos besoins</div>
                                    <div className="text-sm text-gray-500 mb-2">utilisateurs illimités</div>
                                    <div className="text-xs text-purple-600 font-semibold bg-purple-50 px-3 py-1 border-round">ROI garanti en 2 mois</div>
                                </div>
                                <ul className="list-none p-0 mb-6">
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🏢 Tout du plan Entreprise Pro</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🎯 Développements sur mesure</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🔐 Sécurité enterprise</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>📞 Support dédié 24/7</span>
                                    </li>
                                    <li className="flex align-items-center mb-3">
                                        <i className="pi pi-check text-green-600 mr-2"></i>
                                        <span>🎓 Formation équipes incluse</span>
                                    </li>
                                </ul>
                                <Button
                                    onClick={() => redirectToLogin()}
                                    className="w-full p-button-outlined border-purple-300 text-purple-600 font-semibold py-3"
                                >
                                    Nous contacter
                                </Button>
                            </div>
                        </div>
                    </div>

                    {/* Section Call-to-Action Final */}
                    <div className="text-center py-8 mt-8 border-round-lg" style={{
                        background: 'linear-gradient(135deg, #f97316 0%, #06b6d4 100%)',
                        color: 'white'
                    }}>
                        <div className="px-6">
                            <h3 className="text-3xl font-bold mb-4 text-white">Rejoignez la révolution digitale du BTP</h3>
                            <p className="text-xl mb-6 line-height-3 text-white" style={{ maxWidth: '700px', margin: '0 auto' }}>
                                <strong>Plus de 3 200 professionnels du BTP</strong> nous font déjà confiance pour piloter leurs projets.
                                Rejoignez la révolution digitale du secteur et prenez une longueur d&apos;avance sur vos concurrents.
                            </p>
                            <div className="flex flex-wrap justify-content-center gap-3">
                                <Button
                                    onClick={() => redirectToLogin()}
                                    style={{
                                        backgroundColor: 'white',
                                        color: '#f97316',
                                        border: '2px solid white',
                                        fontWeight: 'bold',
                                        padding: '12px 24px',
                                        borderRadius: '8px'
                                    }}
                                    className="hover:bg-gray-100"
                                >
                                    <i className="pi pi-play mr-2" style={{ color: '#f97316' }}></i>
                                    Essai gratuit 30 jours
                                </Button>
                                <Button
                                    onClick={() => redirectToLogin()}
                                    style={{
                                        backgroundColor: 'transparent',
                                        color: 'white',
                                        border: '2px solid white',
                                        fontWeight: 'bold',
                                        padding: '12px 24px',
                                        borderRadius: '8px'
                                    }}
                                    className="hover:bg-white hover:text-orange-600"
                                >
                                    <i className="pi pi-phone mr-2" style={{ color: 'white' }}></i>
                                    Demander une démo
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Footer */}
            <div className="w-full bg-gray-900 text-white py-8">
                <div className="px-4 lg:px-8">
                    <div className="grid">
                        <div className="col-12 lg:col-4 mb-6">
                            <div className="flex align-items-center mb-4">
                                <i className="pi pi-building text-orange-500 text-3xl mr-3"></i>
                                <span className="text-2xl font-bold">BTP Xpress</span>
                            </div>
                            <p className="text-gray-300 mb-4 line-height-3">
                                La suite logicielle qui transforme le BTP. Gérez vos chantiers, optimisez vos ressources
                                et maximisez votre rentabilité avec les outils les plus avancés du marché.
                            </p>
                            <div className="text-sm text-gray-400">
                                © 2024 BTP Xpress - Tous droits réservés
                            </div>
                        </div>

                        <div className="col-12 lg:col-8">
                            <div className="grid">
                                <div className="col-6 md:col-3 mb-4">
                                    <h4 className="text-lg font-semibold mb-3 text-orange-500">Produit</h4>
                                    <ul className="list-none p-0">
                                        <li className="mb-2"><a href="#features" className="text-gray-300 hover:text-white">Fonctionnalités</a></li>
                                        <li className="mb-2"><a href="#pricing" className="text-gray-300 hover:text-white">Tarifs</a></li>
                                        <li className="mb-2"><a onClick={() => redirectToLogin()} className="text-gray-300 hover:text-white">Démo</a></li>
                                        <li className="mb-2"><a onClick={() => redirectToLogin()} className="text-gray-300 hover:text-white">Essai gratuit</a></li>
                                    </ul>
                                </div>
                                <div className="col-6 md:col-3 mb-4">
                                    <h4 className="text-lg font-semibold mb-3 text-orange-500">Solutions</h4>
                                    <ul className="list-none p-0">
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Gros œuvre</a></li>
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Second œuvre</a></li>
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Travaux publics</a></li>
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Maîtrise d&apos;œuvre</a></li>
                                    </ul>
                                </div>
                                <div className="col-6 md:col-3 mb-4">
                                    <h4 className="text-lg font-semibold mb-3 text-orange-500">Support</h4>
                                    <ul className="list-none p-0">
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Documentation</a></li>
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Formation</a></li>
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Support technique</a></li>
                                        <li className="mb-2"><a href="#" className="text-gray-300 hover:text-white">Contact</a></li>
                                    </ul>
                                </div>
                                <div className="col-6 md:col-3 mb-4">
                                    <h4 className="text-lg font-semibold mb-3 text-orange-500">Newsletter</h4>
                                    <p className="text-gray-300 text-sm mb-3">
                                        Recevez nos actualités et conseils BTP
                                    </p>
                                    <div className="flex">
                                        <InputText
                                            type="email"
                                            placeholder="Votre email professionnel"
                                            className="flex-1 mr-2 p-2 text-sm"
                                        />
                                        <Button
                                            className="bg-orange-500 border-orange-500 px-3"
                                        >
                                            <i className="pi pi-send"></i>
                                        </Button>
                                    </div>
                                    <div className="text-xs text-gray-400 mt-2">
                                        En vous abonnant, vous acceptez de recevoir nos communications.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default LandingPage;