"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import TextAbout from '@/components/sections/about/TextAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Beef, Building, Cake, Wheat, Tractor, Users, BookOpen } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Accueil", id: "hero" },
        { name: "À Propos", id: "about" },
        { name: "Activités", id: "activities" },
        { name: "Réserver", id: "contact" },
      ]}
      brandName="Dar Nouar Kids"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardDashboard
      title="Dar Nouar Kids"
      description="Une immersion totale dans la nature pour éveiller les sens et créer des souvenirs inoubliables en famille."
      background={{ variant: "sparkles-gradient" }}
      dashboard={{
        title: "Programme Pédagogique",        logoIcon: Tractor,
        stats: [
            { title: "Activités", values: [15, 20, 25], description: "Activités ludiques disponibles" },
            { title: "Visiteurs", values: [500, 750, 1000], description: "Familles ravies cette année" },
            { title: "Jours", values: [300, 350, 365], description: "Ouverture annuelle" }
        ],
        sidebarItems: [{ icon: BookOpen, active: true }, { icon: Users }, { icon: Tractor }],
        imageSrc: "http://img.b2bpic.net/free-photo/kid-learning-garden_23-2151447746.jpg"
      }}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      title="Reconnecter avec l'essentiel"
      tag="Notre Mission"
      useInvertedBackground={true}
    />
  </div>

  <div id="social-media" data-section="social-media">
      <SocialProofOne 
        title="Rejoignez notre communauté"
        description="Partagez vos moments forts et suivez nos actualités en direct."
        names={["Instagram", "Facebook", "TikTok", "YouTube"]}
        textboxLayout="default"
        useInvertedBackground={true}
      />
  </div>

  <div id="activities" data-section="activities">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { icon: Beef, title: "Découverte des animaux", description: "Approche pédagogique et respectueuse." },
        { icon: Wheat, title: "Ateliers traditionnels", description: "Pétrissage, traite et jardinage." },
        { icon: Cake, title: "Fêtes privées", description: "Anniversaires inoubliables à la ferme." },
        { icon: Building, title: "Événements entreprise", description: "Cohésion d'équipe au grand air." },
      ]}
      title="Nos services"
      description="Des expériences riches pour tous les âges."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Houda C.", handle: "@houda", testimonial: "Le meilleur endroit pour les enfants !", rating: 5 },
        { id: "2", name: "Nesrine B.", handle: "@nesrine", testimonial: "Une organisation parfaite pour les anniversaires.", rating: 5 },
        { id: "3", name: "Client Famille", handle: "@famille", testimonial: "Un dimanche au vert indispensable.", rating: 4 },
      ]}
      showRating={true}
      title="Ils nous font confiance"
      description="Témoignages de nos familles visiteuses."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Horaires", content: "Mardi-Dimanche, 9h-18h" },
        { id: "f2", title: "Accès", content: "Route Moulay Thami, Tamaris" },
      ]}
      title="Questions fréquentes"
      description="Tout savoir sur votre visite."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      tag="Réservations"
      title="Planifiez votre visite"
      description="Réservez votre créneau dès maintenant par téléphone ou WhatsApp."
      useInvertedBackground={true}
      background={{ variant: "gradient-bars" }}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Dar Nouar Kids"
      columns={[
        { title: "Contact", items: [{ label: "06 41 70 01 51", href: "tel:0641700151" }] },
        { title: "Liens", items: [{ label: "Accueil", href: "#hero" }, { label: "Activités", href: "#activities" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}