"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Bell, Clock, Mail, Mask, Play, Star, Users } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="large"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Accueil", id: "hero" },
            { name: "Missions", id: "feature" },
            { name: "Concept", id: "about" },
            { name: "Avis", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Zone Secrète"
          bottomLeftText="Luxeuil-les-Bains"
          bottomRightText="06 20 63 19 57"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Zone Secrète"
          description="Escape game à Luxeuil-les-Bains"
          tag="Osez entrer dans la zone… si vous en êtes capables."
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Voir nos missions", href: "#feature" },
            { text: "Découvrir le concept", href: "#about" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500649.jpg"
          imageAlt="Zone Secrète - Escape Game immersif"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          metrics={[
            { id: "1", icon: Star, title: "Note clients", value: "4,9/5" },
            { id: "2", icon: Clock, title: "Durée", value: "60 min" },
            { id: "3", icon: Users, title: "Joueurs", value: "2–6" },
            { id: "4", icon: Mask, title: "Missions", value: "3+" }
          ]}
          title="L'expérience en chiffres"
          description=""
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Pas un simple escape game." },
            { type: "text", content: "Une expérience totale." }
          ]}
          buttons={[
            { text: "En savoir plus", href: "#feature" }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardTwentySix
          features={[
            {
              title: "NÉCROSE",              description: "Un laboratoire abandonné. Des expériences interdites. Saurez-vous survivre ?",              imageSrc: "http://img.b2bpic.net/free-photo/person-working-nuclear-research-laboratory_23-2150805518.jpg",              imageAlt: "Mission Nécrose - Niveau Expert",              buttonIcon: Play,
              buttonHref: "#contact"
            },
            {
              title: "MISSION CLASSIFIÉE",              description: "Vos ordres sont clairs. Mais les secrets ne restent jamais enfouis longtemps.",              imageSrc: "http://img.b2bpic.net/free-photo/closed-notebook-leather-cover-sheet-white-paper-felt-brown-hat-camera-big-magnifier-isolated-black-aged-wood-table_346278-400.jpg",              imageAlt: "Mission Classifiée - Niveau Intermédiaire",              buttonIcon: Play,
              buttonHref: "#contact"
            },
            {
              title: "BIENTÔT",              description: "Une nouvelle expérience se prépare. Soyez les premiers alertés de son lancement.",              imageSrc: "http://img.b2bpic.net/free-vector/coming-soon-display-background-with-focus-light_1017-33741.jpg",              imageAlt: "Nouvelle mission à venir",              buttonIcon: Bell,
              buttonHref: "#contact"
            }
          ]}
          title="Nos missions"
          description="Trois univers immersifs, trois niveaux de difficulté. Choisissez votre défi."
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah M.",              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",              imageAlt: "Sarah M."
            },
            {
              id: "2",              name: "Thomas R.",              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg",              imageAlt: "Thomas R."
            },
            {
              id: "3",              name: "Julie & Co",              imageSrc: "http://img.b2bpic.net/free-photo/team-joyful-carefree-friends-having-fun_1262-21086.jpg",              imageAlt: "Julie & Co"
            },
            {
              id: "4",              name: "Claire D.",              imageSrc: "http://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg",              imageAlt: "Claire D."
            }
          ]}
          cardTitle="Une immersion totale. Les effets spéciaux nous ont scotchés. La salle horreur… on en parle encore 3 mois après."
          cardTag="Avis vérifiés ★★★★★"
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Créateur d'escape games pour les professionnels"
          description="Zone Secrète conçoit des escape games sur-mesure pour productions TV, événements corporate, et salles professionnelles."
          logos={[
            "http://img.b2bpic.net/free-vector/different-news-logos-collection_23-2148471425.jpg",            "http://img.b2bpic.net/free-vector/news-logo-collection_23-2148474889.jpg",            "http://img.b2bpic.net/free-vector/hand-drawn-escape-room-labels_23-2149926029.jpg",            "http://img.b2bpic.net/free-vector/business-logo_1057-769.jpg",            "http://img.b2bpic.net/free-vector/collection-gradient-logo-template_23-2148884415.jpg"
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Prenez contact"
          tagIcon={Mail}
          title="Prêt à entrer dans la Zone Secrète ?"
          description="Réservez votre expérience immersive dès maintenant. Nos équipes sont à votre service pour vous offrir une aventure inoubliable."
          buttons={[
            { text: "Réserver maintenant", href: "tel:0620631957" },
            { text: "Nous contacter", href: "mailto:contact@zonesecrète.fr" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500649.jpg"
          imageAlt="Zone Secrète Footer"
          columns={[
            {
              title: "Zone Secrète",              items: [
                { label: "À propos", href: "#about" },
                { label: "Nos missions", href: "#feature" },
                { label: "Avis clients", href: "#testimonial" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "15 Allée André Maroselli, 70300 Luxeuil-les-Bains", href: "https://maps.google.com/?q=15+Allée+André+Maroselli,+70300+Luxeuil-les-Bains" },
                { label: "06 20 63 19 57", href: "tel:0620631957" },
                { label: "Facebook", href: "https://facebook.com/zonesecrete" }
              ]
            },
            {
              title: "Légal",              items: [
                { label: "Mentions légales", href: "#" },
                { label: "Politique de confidentialité", href: "#" },
                { label: "Conditions d'utilisation", href: "#" }
              ]
            }
          ]}
          logoText="Zone Secrète"
          copyrightText="© 2025 Zone Secrète – L'imagination ne connaît pas de limite."
        />
      </div>
    </ThemeProvider>
  );
}
