"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLarge"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Accueil", id: "hero" },
        { name: "À propos", id: "about" },
        { name: "Produits", id: "products" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Magasins du Monde"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{ variant: "glowing-orb" }}
      title="Engagement et Équité à Porrentruy"
      description="Découvrez une sélection de produits biologiques, cadeaux éthiques et objets issus du commerce équitable au cœur de notre magasin. Notre globe interactif illustre notre impact mondial."
      imageSrc="https://img.b2bpic.net/free-photo/planet-earth-globe-space_1232-2374.jpg"
      imageAlt="Animated spinning world globe highlighting global community impact"
      imagePosition="right"
      buttons={[{ text: "Explorer la boutique", href: "#products" }]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Plus qu'un magasin"
      description="Magasins du Monde s'engage à promouvoir un commerce équitable. Venez découvrir notre lieu chaleureux où chaque objet raconte une histoire de respect et de durabilité."
      imageSrc="http://img.b2bpic.net/free-photo/interior-flower-shop_181624-58301.jpg?_wi=1"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "Café Éthique", price: "12,00 CHF", variant: "Bio", imageSrc: "http://img.b2bpic.net/free-photo/two-brutal-tattooed-roaster-hands-hold-sealed-package-bag-with-tea-coffee-ready-delivery-sale_346278-558.jpg?_wi=1" },
        { id: "2", name: "Thé de montagne", price: "8,50 CHF", variant: "Bio", imageSrc: "http://img.b2bpic.net/free-photo/dried-herb-tea-spilled-from-tea-strainer-blue-backdrop_23-2147975437.jpg?_wi=1" },
        { id: "3", name: "Écharpe artisanale", price: "35,00 CHF", variant: "Équitable", imageSrc: "http://img.b2bpic.net/free-photo/birthday-background_23-2148030994.jpg?_wi=1" },
        { id: "4", name: "Bijoux en perles", price: "22,00 CHF", variant: "Artisanat", imageSrc: "http://img.b2bpic.net/free-photo/top-view-paper-straws-cup-with-copy-space_23-2148289759.jpg" },
      ]}
      title="Nos sélections"
      description="Une gamme variée de produits bio et cadeaux originaux."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Chiffres marquants"
      tag="Impact"
      metrics={[
        { id: "1", value: "4,8", description: "Note moyenne avis" },
        { id: "2", value: "6", description: "Avis vérifiés" },
        { id: "3", value: "100%", description: "Engagement équitable" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Isabelle Mioche Henry", date: "il y a 7 ans", title: "Très agréable", quote: "Un magasin très agréable, coloré avec de nombreux objets du commerce équitable.", tag: "Top", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-florist-speaking-phone_23-2147760930.jpg" },
        { id: "2", name: "Cyriaque", date: "il y a 7 ans", title: "Superbe", quote: "Un lieu superbe, très bien servi, bénévoles chaleureuses et serviable.", tag: "Avis", avatarSrc: "http://img.b2bpic.net/free-photo/small-business-manager-her-workshop_23-2149094639.jpg" },
      ]}
      title="Ce que vous dites"
      description="Retours de nos précieux clients à Porrentruy."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "1", title: "Horaires", content: "Ouvert du mardi au samedi dès 09h30." },
        { id: "2", title: "Localisation", content: "Rue des Malvoisins 14, 2900 Porrentruy." },
      ]}
      title="Questions fréquentes"
      description="En savoir plus sur nos activités."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      tag="Contact"
      title="Restons en contact"
      description="Venez nous rendre visite Rue des Malvoisins 14 ou contactez-nous par téléphone au 079 582 06 75."
      buttons={[{ text: "Nous appeler", href: "tel:0795820675" }, { text: "Envoyer un mail", href: "mailto:info@magasinsdumonde.ch" }]}
      background={{ variant: "plain" }}
      useInvertedBackground={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Magasins du Monde"
      columns={[
        { title: "Informations", items: [{ label: "Localisation", href: "#faq" }, { label: "Horaires", href: "#faq" }] },
        { title: "Légal", items: [{ label: "Politique de confidentialité", href: "#" }] }
      ]}
      copyrightText="© 2024 Magasins du Monde | Porrentruy"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}