"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import TextAbout from "@/components/sections/about/TextAbout";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import { 
    Sparkles, 
    Users, 
    Globe, 
    Zap, 
    Star, 
    Layers, 
    Twitter, 
    Instagram, 
    Linkedin, 
    Check, 
    Code, 
    Palette, 
    TrendingUp,
    LayoutDashboard, 
    BarChart2,
    ShieldAlert,
    Smartphone,
    Award,
    BookLock,
    BellRing,
    ClipboardCheck
} from "lucide-react";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";

export default function WebAgencyThemePage() {
    const navItems = [
        { name: "Accueil", id: "home" },
        { name: "Produits", id: "products" },
        { name: "À Propos", id: "about" },
        { name: "Contact", id: "contact" },
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="entrance-slide"
            borderRadius="pill"
            contentWidth="medium"
            sizing="medium"
            background="aurora"
            cardStyle="layered-gradient"
            primaryButtonStyle="gradient"
            secondaryButtonStyle="glass"
            headingFontWeight="medium"
        >
            <ReactLenis root>
                <NavbarLayoutFloatingInline
                    navItems={navItems}
                    brandName="NomaDigital"
                    button={{ text: "Contactez-nous", href: "#contact" }}
                />
                <HeroSplitKpi
                    id="home"
                    background={{ variant: "radial-gradient" }}
                    tag="QHSE Digital"
                    tagIcon={Sparkles}
                    title="L'Avenir de la Gestion QHSE : Digitalisation & Automatisation Intelligente"
                    description="Optimisez vos systèmes de management avec des outils digitaux, des tableaux de bord automatisés et des applications QHSE sur-mesure."
                    enableKpiAnimation={true}
                    kpis={[
                        { value: "+95%", label: "Conformité Améliorée" },
                        { value: "50%", label: "Coûts Réduits" },
                        { value: "3x", label: "Productivité Accrue" },
                    ]}
                    buttons={[
                        {
                            text: "Découvrir Nos Produits",                            href: "#products"}
                    ]}
                    avatars={[]}
                    avatarText=""
                    imageSrc="http://img.b2bpic.net/free-photo/letter-t-made-real-natural-flowers-leaves-transparent-background_169016-54314.jpg"
                    imageAlt="Ingénieurs QHSE interagissant avec des outils numériques sur site"
                    mediaAnimation="slide-up"
                    showMarqueeCard={false}
                    marqueeItems={[]}
                />
                <TextAbout
                    id="about"
                    title="NomaDigital : Votre Partenaire en Transformation Digitale QHSE"
                    buttons={[]}
                    useInvertedBackground={false}
                />
                <FeatureCardNineteen
                    id="products"
                    title="Nos Solutions Digitales QHSE Innovantes"
                    description="Découvrez nos outils conçus pour optimiser votre gestion de la Qualité, de l'Hygiène, de la Sécurité et de l'Environnement."
                    tag="Produits & Applications"
                    tagIcon={Layers}
                    features={[
                        {
                            tag: "Suite Complète",                            title: "01",                            subtitle: "PACK TOTAL QHSE PRO (12 Modules)",                            description: "Écosystème complet de gestion d'entreprise intégrant les normes ISO 45001, 14001 et 9001. Centralisez et harmonisez tous vos processus QHSE.",                            imageSrc: "http://img.b2bpic.net/free-photo/glowing-warning-triangle-with-digital-distortion-black-background_84443-91300.jpg",                            imageAlt: "Logiciel de gestion QHSE tout-en-un"},
                        {
                            tag: "Analyse Stratégique",                            title: "02",                            subtitle: "Tableau de Bord QHSE Automatisé (Excel/VBA)",                            description: "Suivi dynamique des KPIs, des incidents et des plans d'action avec génération automatique de graphiques. Prenez des décisions éclairées.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aum5ju",                            imageAlt: "Tableau de bord QHSE automatisé"},
                        {
                            tag: "Maîtrise des Risques",                            title: "03",                            subtitle: "Application de Gestion des Risques & Matrice 3D",                            description: "Matrice d'évaluation des risques digitaux (alignée sur l'ISO 31000) avec calcul automatique des scores et priorisation visuelle.",                            imageSrc: "http://img.b2bpic.net/free-photo/letter-h-made-green-grass-with-flowers-isolated-white_169016-57181.jpg",                            imageAlt: "Matrice d'évaluation des risques 3D"},
                        {
                            tag: "Sécurité Terrain",                            title: "04",                            subtitle: "App Mobile de Remontée des Presqu'accidents",                            description: "Template d'application mobile No-Code pour le signalement en temps réel des risques et des incidents mineurs sur le terrain, même hors ligne.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r737j3",                            imageAlt: "Application mobile de reporting d'incidents"},
                        {
                            tag: "Conformité Simplifiée",                            title: "05",                            subtitle: "Suivi Digital des Certifications & Audits",                            description: "Traqueur de conformité automatisé avec système d'alerte par e-mail/WhatsApp pour les échéances, garantissant le respect des normes.",                            imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-letter-b_53876-63682.jpg",                            imageAlt: "Interface de suivi de certifications"},
                        {
                            tag: "Documentation Centralisée",                            title: "06",                            subtitle: "Registre Unique de Sécurité Électronique",                            description: "Registre digital centralisé pour les inspections, la conformité des équipements et les mises à jour réglementaires. Accès sécurisé et instantané.",                            imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-spree_23-2151952990.jpg",                            imageAlt: "Registre de sécurité électronique sécurisé"},
                    ]}
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
                <MetricCardOne
                    title="Notre Impact sur Votre Gestion QHSE"
                    description="Des résultats concrets qui prouvent l'efficacité de nos solutions pour transformer votre approche QHSE."
                    tag="Chiffres Clés"
                    tagIcon={TrendingUp}
                    metrics={[
                        { id: "conformity", value: "+95%", title: "Taux de Conformité", description: "Amélioration moyenne de la conformité réglementaire et normative de nos clients.", icon: Check },
                        { id: "efficiency", value: "30-70%", title: "Gain de Productivité", description: "Réduction du temps passé sur les tâches administratives QHSE.", icon: Zap },
                        { id: "incidents", value: "-40%", title: "Incidents Réduits", description: "Diminution significative des presqu'accidents et incidents reportés.", icon: ShieldAlert },
                    ]}
                    gridVariant="uniform-all-items-equal"
                    animationType="depth-3d"
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
                <TestimonialCardFive
                    title="Ce Que Nos Clients Disent"
                    description="Des témoignages de professionnels qui ont transformé leur gestion QHSE grâce à NomaDigital."
                    tag="Retours d'Expérience"
                    tagIcon={Star}
                    testimonials={[
                        {
                            id: "1",                            name: "Marie Dubois",                            date: "Responsable QHSE, Industrie X",                            title: "Une transformation digitale réussie",                            quote: "NomaDigital a révolutionné notre gestion QHSE. Le Pack Total est une solution complète qui a grandement simplifié nos processus et amélioré notre conformité.",                            tag: "Pack Total QHSE",                            avatarSrc: "http://img.b2bpic.net/free-photo/letter-q-made-green-grass-with-flowers-isolated-white-font-your-design_169016-57765.jpg",                            avatarAlt: "Marie Dubois",                            imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter-o_53876-63749.jpg",                            imageAlt: "Projet QHSE Industrie X"},
                        {
                            id: "2",                            name: "Jean Dupont",                            date: "Directeur des Opérations, Logistique Y",                            title: "Visibilité et contrôle accrus",                            quote: "Le tableau de bord automatisé nous offre une vue d'ensemble instantanée de nos KPIs. C'est un outil indispensable pour la prise de décision rapide et éclairée.",                            tag: "Tableau de Bord QHSE",                            avatarSrc: "http://img.b2bpic.net/free-photo/ai-nuclear-energy-future-innovation-disruptive-technology_53876-129784.jpg",                            avatarAlt: "Jean Dupont",                            imageSrc: "http://img.b2bpic.net/free-photo/3d-letter-fire-with-flames_23-2151073733.jpg",                            imageAlt: "Projet QHSE Logistique Y"},
                        {
                            id: "3",                            name: "Fatima Zahra",                            date: "Ingénieure Sécurité, Construction Z",                            title: "Sécurité terrain renforcée",                            quote: "L'application mobile de remontée des presqu'accidents est un game-changer. Nos équipes sur le terrain peuvent signaler les risques en temps réel, améliorant drastiquement notre réactivité.",                            tag: "App Mobile Sécurité",                            avatarSrc: "http://img.b2bpic.net/free-photo/letter-t-made-real-natural-flowers-leaves-transparent-background_169016-54314.jpg",                            avatarAlt: "Fatima Zahra",                            imageSrc: "http://img.b2bpic.net/free-photo/3d-letter-fire-with-flames_23-2151073780.jpg",                            imageAlt: "Projet QHSE Construction Z"},
                        {
                            id: "4",                            name: "Ahmed Alami",                            date: "Consultant QHSE, Solutions W",                            title: "Expertise et accompagnement de qualité",                            quote: "L'équipe NomaDigital nous a offert un support exceptionnel, allant au-delà de la simple fourniture d'outils. Leur connaissance des normes QHSE est impressionnante.",                            tag: "Accompagnement QHSE",                            avatarSrc: "http://img.b2bpic.net/free-photo/letter-r-made-real-natural-flowers-leaves-white-background-isolated_169016-54270.jpg",                            avatarAlt: "Ahmed Alami",                            imageSrc: "http://img.b2bpic.net/free-photo/woman-retro-vintage-50-s-cafe-pink-color-sitting-table-drinking-milk-shake-cocktail-hipster-outfit-having-fun_285396-10336.jpg",                            imageAlt: "Projet QHSE Solutions W"},
                    ]}
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
                <FeatureCardTen
                    tag="Pourquoi NomaDigital ?"
                    tagIcon={Sparkles}
                    title="Transformez Votre QHSE avec Notre Expertise Digitale"
                    description="Notre approche combine technologie de pointe et compréhension approfondie des enjeux QHSE pour des résultats durables."
                    textboxLayout="default"
                    animationType="slide-up"
                    useInvertedBackground={false}
                    features={[
                        {
                            title: "Digitalisation Intégrée",                            description: "Centralisez et automatisez tous vos processus QHSE, de la gestion des risques aux audits, sur une plateforme unique.",                            media: { imageSrc: "http://img.b2bpic.net/free-photo/letter-e-made-green-grass-with-flowers-isolated-white_169016-57073.jpg", imageAlt: "Digitalisation des processus" },
                            reverse: false,
                            items: [
                                { icon: Code, text: "Plateformes unifiées" },
                                { icon: Layers, text: "Données centralisées" },
                                { icon: Check, text: "Workflows automatisés" },
                            ],
                        },
                        {
                            title: "Conformité Simplifiée",                            description: "Restez conforme aux normes ISO et réglementations locales grâce à des outils de suivi et d'alerte intelligents.",                            media: { imageSrc: "http://img.b2bpic.net/free-photo/alphabet-pink-neon-lights-black-background_53876-15055.jpg", imageAlt: "Gestion de la conformité" },
                            reverse: true,
                            items: [
                                { icon: Award, text: "Gestion ISO 9001, 14001, 45001" },
                                { icon: BellRing, text: "Alertes en temps réel" },
                                { icon: ClipboardCheck, text: "Suivi des obligations" },
                            ],
                        },
                        {
                            title: "Décision Stratégique",                            description: "Accédez à des tableaux de bord dynamiques et des analyses prédictives pour des décisions plus rapides et pertinentes.",                            media: { imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-letter-t_53876-63683.jpg", imageAlt: "Tableaux de bord stratégiques" },
                            reverse: false,
                            items: [
                                { icon: BarChart2, text: "KPIs personnalisables" },
                                { icon: TrendingUp, text: "Rapports automatisés" },
                                { icon: Globe, text: "Vue d'ensemble stratégique" },
                            ],
                        },
                    ]}
                />
                <ContactText
                    id="contact"
                    text="Prêt à digitaliser votre gestion QHSE ? Contactez NomaDigital dès aujourd'hui."
                    buttons={[
                        { text: "Demander une Démo", href: "mailto:nimadigital99@gmail.com" },
                        { text: "WhatsApp", href: "https://wa.me/212638673530?text=Bonjour%20NomaDigital,%20je%20suis%20intéressé%20par%20vos%20solutions%20digitales%20QHSE." }
                    ]}
                    background={{ variant: "canvas-reveal" }}
                    useInvertedBackground={false}
                />
                <FooterCard
                    logoText="NomaDigital"
                    copyrightText="© 2024 NomaDigital. Tous droits réservés."
                    socialLinks={[
                        { icon: Twitter, href: "https://twitter.com", ariaLabel: "Suivez-nous sur Twitter" },
                        { icon: Instagram, href: "https://instagram.com", ariaLabel: "Suivez-nous sur Instagram" },
                        { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connectez-vous sur LinkedIn" },
                    ]}
                />
            </ReactLenis>
        </ThemeProvider>
    );
}