"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, Heart, Lightbulb } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
        background="circleGradient"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Accueil",
          id: "hero",
        },
        {
          name: "À propos",
          id: "about",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Témoignages",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Utopie en Réalité"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "gradient-bars",
      }}
      title="Transformez votre potentiel en réalité"
      description="Coaching premium en neuroscience appliquée, développement personnel et transformation comportementale. Accompagnement stratégique haut de gamme."
      buttons={[
        {
          text: "Réserver une séance",
          href: "https://wa.me/24162781010",
        },
        {
          text: "Découvrir l'accompagnement",
          href: "#services",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/pencil-with-blueberries-plant-top-view-white-background-space-text_176474-5031.jpg",
          imageAlt: "Abstract design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/dried-lily-leaf-textured-background-design_53876-143099.jpg",
          imageAlt: "Abstract design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-with-office-supplies_23-2148110231.jpg",
          imageAlt: "Abstract design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desktop-with-notepad-glasses_23-2148430802.jpg",
          imageAlt: "Abstract design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/dried-palm-leaves-pink-background_53876-160520.jpg",
          imageAlt: "Abstract design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/brown-brush-stroke-textured-background_53876-165328.jpg",
          imageAlt: "Abstract design",
        },
      ]}
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Une expertise internationale"
      tag="Statistiques"
      metrics={[
        {
          id: "m1",
          value: "10+",
          description: "Pays accompagnés",
        },
        {
          id: "m2",
          value: "100%",
          description: "Personnalisation",
        },
        {
          id: "m3",
          value: "Scientifique",
          description: "Approche moderne",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="L'excellence humaine"
      metrics={[
        {
          icon: Award,
          label: "Vision",
          value: "Transformation",
        },
        {
          icon: Lightbulb,
          label: "Approche",
          value: "Neuroscience",
        },
        {
          icon: Heart,
          label: "Philosophie",
          value: "Accompagnement",
        },
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="approach" data-section="approach">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Neuroscience appliquée",
          author: "REAL Method",
          description: "Compréhension profonde des mécanismes cognitifs.",
          tags: [
            "Science",
            "Évolution",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/desk-office-with-objects_23-2147982285.jpg",
          imageAlt: "Brain study",
        },
        {
          id: "f2",
          title: "Intelligence comportementale",
          author: "REAL Method",
          description: "Analyse avancée des comportements humains.",
          tags: [
            "Comportement",
            "Stratégie",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-workplace-with-notepad-pen-plant-vase_23-2148225527.jpg",
          imageAlt: "Strategy",
        },
        {
          id: "f3",
          title: "Sensorialité",
          author: "REAL Method",
          description: "Intégration du ressenti et de l'intelligence sensible.",
          tags: [
            "Sens",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/adolescent-undergoing-behavioral-therapy-address-anxiety-social-issues_482257-124729.jpg",
          imageAlt: "Senses",
        },
      ]}
      title="Méthode scientifique"
      description="Nous intégrons la neuroscience et la compréhension émotionnelle pour une transformation durable."
    />
  </div>

  <div id="services" data-section="services">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Développement personnel",
          price: "Premium",
          imageSrc: "http://img.b2bpic.net/free-photo/yoga-still-life_23-2148119617.jpg",
        },
        {
          id: "p2",
          name: "Coaching comportemental",
          price: "Premium",
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-black-pink-background-with-transparent-bubble_23-2148290073.jpg",
        },
        {
          id: "p3",
          name: "Neuroscience appliquée",
          price: "Premium",
          imageSrc: "http://img.b2bpic.net/free-photo/realistic-texture-with-peach-fuzz-shade_23-2151485183.jpg",
        },
        {
          id: "p4",
          name: "Sensorialité",
          price: "Premium",
          imageSrc: "http://img.b2bpic.net/free-photo/computer-mouse-surrounded-by-office-stuff_23-2148225483.jpg",
        },
        {
          id: "p5",
          name: "Coaching transformationnel",
          price: "Premium",
          imageSrc: "http://img.b2bpic.net/free-photo/circle-golden-lights-new-year-party_23-2148339535.jpg",
        },
        {
          id: "p6",
          name: "Accompagnement individuel",
          price: "Premium",
          imageSrc: "http://img.b2bpic.net/free-photo/earth-tone-paint-with-leaf-shadow-background-design_53876-97497.jpg",
        },
      ]}
      title="Nos accompagnements"
      description="Des solutions sur-mesure pour votre transformation personnelle et professionnelle."
    />
  </div>

  <div id="profile-real" data-section="profile-real">
      <FeatureCardTwentyFour
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "r1",
          title: "Analyse comportementale",
          author: "REAL",
          description: "Outil unique de compréhension profonde.",
          tags: [
            "Audit",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-high-angle_23-2149073071.jpg",
          imageAlt: "Graph",
        },
      ]}
      title="Profil REAL"
      description="Testez votre capacité comportementale avec notre outil d'analyse avancée."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah D.",
          role: "Entrepreneure",
          company: "Tech",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021828.jpg",
        },
        {
          id: "2",
          name: "Marc L.",
          role: "Cadre",
          company: "Finance",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-man-walking-european-city-street_158595-4722.jpg",
        },
        {
          id: "3",
          name: "Julie M.",
          role: "Étudiante",
          company: "Gestion",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/long-haired-woman-with-copyspace_1398-1356.jpg",
        },
        {
          id: "4",
          name: "Paul B.",
          role: "Professionnel",
          company: "Leadership",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/picture-cheerful-caucasian-man-studio_176420-7231.jpg",
        },
        {
          id: "5",
          name: "Claire T.",
          role: "Transition",
          company: "Personal",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/office-workers-working-together-as-team_23-2149310937.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "100%",
          label: "Satisfaction",
        },
        {
          value: "10",
          label: "Pays",
        },
        {
          value: "Expert",
          label: "Coach",
        },
      ]}
      title="Expériences de transformation"
      description="Ils ont fait confiance à l'approche de Utopie en Réalité."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Comment se déroule une séance ?",
          content: "Nos séances sont structurées pour une transformation optimale.",
        },
        {
          id: "q2",
          title: "Les séances sont-elles en ligne ?",
          content: "Oui, nous accompagnons à distance dans plus de 10 pays.",
        },
        {
          id: "q3",
          title: "Qu'est-ce que le Profil REAL ?",
          content: "Un test de capacité comportementale exclusif.",
        },
        {
          id: "q4",
          title: "Comment réserver ?",
          content: "Via le bouton WhatsApp en bas de page.",
        },
      ]}
      sideTitle="Questions fréquentes"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Contact"
      title="Réserver une séance"
      description="Prêt pour votre transformation ? Contactez-nous sur WhatsApp."
      imageSrc="http://img.b2bpic.net/free-photo/management-verifying-task-progress_482257-80309.jpg"
      mediaAnimation="opacity"
      buttonText="Réserver sur WhatsApp"
      onSubmit={() => window.location.href = 'https://wa.me/24162781010'}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "Accueil",
              href: "#hero",
            },
            {
              label: "Services",
              href: "#services",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Social",
          items: [
            {
              label: "Instagram",
              href: "https://www.instagram.com/utopiesenrealites",
            },
            {
              label: "WhatsApp",
              href: "https://wa.me/24162781010",
            },
          ],
        },
      ]}
      logoText="Utopie en Réalité"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
