"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import MediaAbout from "@/components/sections/about/MediaAbout";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="INT"
          navItems={[
            { name: "Skate", id: "categories" },
            { name: "Trottinette", id: "categories" },
            { name: "Streetwear", id: "categories" },
            { name: "Atelier", id: "atelier" }
          ]}
          button={{
            text: "Découvrir",            href: "#hero"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="INT SAINT PIERRE"
          description="Le shop de référence pour les rideurs à La Réunion. Skate • Trottinette • Streetwear • Atelier"
          buttons={[
            { text: "Découvrir le Shop", href: "#categories" },
            { text: "Prendre RDV Atelier", href: "#atelier" }
          ]}
          layoutOrder="default"
          background={{ variant: "radial-gradient" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q7xmfn"
          imageAlt="Skateboarder performing aerial trick"
          frameStyle="card"
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="credibility" data-section="credibility">
        <MetricCardEleven
          title="Pourquoi INT Saint Pierre"
          description="Chiffres qui comptent dans notre communauté de rideurs"
          metrics={[
            {
              id: "1",              value: "5000+",              title: "Rideurs Équipés",              description: "Passionnés satisfaits chaque année",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=slze5w&_wi=1",              imageAlt: "Community of riders"
            },
            {
              id: "2",              value: "15+",              title: "Années d'Expertise",              description: "Service atelier expert et conseils honnêtes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fv8vm3&_wi=1",              imageAlt: "Workshop service"
            },
            {
              id: "3",              value: "100%",              title: "Satisfaction Garantie",              description: "Conseils adaptés, pas de vente forcée",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=slze5w&_wi=2",              imageAlt: "Customer satisfaction"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="categories" data-section="categories">
        <ProductCardFour
          title="Nos Catégories"
          description="Tout ce dont vous avez besoin pour progresser"
          products={[
            {
              id: "1",              name: "Streetwear",              price: "À partir de 29€",              variant: "  ",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsgnkSI0Wr9b6hkExg4NynjCq2/uploaded-1773491898766-05mo0keq.jpg",              imageAlt: "Skateboard equipment"
            },
            {
              id: "2",              name: "Trottinette Freestyle",              price: "À partir de 99€",              variant: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsgnkSI0Wr9b6hkExg4NynjCq2/uploaded-1773491560752-wjjdh79y.png",              imageAlt: "Freestyle scooter"
            },
            {
              id: "3",              name: "Streetwear",              price: "À partir de 29€",              variant: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsgnkSI0Wr9b6hkExg4NynjCq2/uploaded-1773491898767-14gii0a6.jpg",              imageAlt: "Streetwear collection"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-int" data-section="why-int">
        <FeatureCardSix
          title="Pourquoi choisir INT"
          description="Les valeurs qui nous définissent"
          features={[
            {
              id: 1,
              title: "Des Passionnés Avant Tout",              description: "Notre équipe ride et teste le matériel. On partage votre passion et on comprend vos besoins.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=slze5w&_wi=3",              imageAlt: "Passionate riders team"
            },
            {
              id: 2,
              title: "Des Conseils Honnêtes",              description: "On ne vous vend que ce dont vous avez vraiment besoin. Expertise technique et transparence totale.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fv8vm3&_wi=2",              imageAlt: "Workshop expertise"
            },
            {
              id: 3,
              title: "Un Vrai Atelier",              description: "Réglage, réparation et montage custom. Votre matériel entre les mains de pros qui comprennent.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fv8vm3&_wi=3",              imageAlt: "Professional workshop"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Ce que disent nos rideurs"
          description="Les vrais avis de la communauté INT"
          testimonials={[
            {
              id: "1",              name: "Maxime D.",              handle: "@maxime.skate",              testimonial: "Des passionnés à l'écoute de nos besoins et de très bons conseils. C'est rare de trouver un shop comme ça.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vf7jgs",              imageAlt: "Maxime"
            },
            {
              id: "2",              name: "Sarah R.",              handle: "@sarah.ride",              testimonial: "Ils ont trouvé et réparé mon problème de trottinette rapidement. L'accueil est incroyable.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2yf6br",              imageAlt: "Sarah"
            },
            {
              id: "3",              name: "Hugo L.",              handle: "@hugo.freestyle",              testimonial: "Un très grand choix et une équipe qui n'essaie pas de vous vendre ce dont vous n'avez pas besoin.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uk4v6x",              imageAlt: "Hugo"
            },
            {
              id: "4",              name: "Alex T.",              handle: "@alex.pro",              testimonial: "La meilleure adresse pour l'équipement à Saint-Pierre. Magasin de référence, c'est clair.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fzckcm",              imageAlt: "Alex"
            }
          ]}
          showRating={true}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="community" data-section="community">
        <MediaAbout
          title="Plus qu'un Shop"
          description="Une communauté de rideurs passionnés qui s'entraident, partagent des tips et progressent ensemble. Chez INT, on ride avec vous."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=slze5w&_wi=4"
          imageAlt="Ride community"
          buttons={[
            { text: "Rejoindre la Communauté", href: "#atelier" }
          ]}
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="atelier" data-section="atelier">
        <ContactSplitForm
          title="Atelier INT"
          description="Diagnostic • Réparation • Montage Custom • Upgrade. Votre matériel entre les mains de passionnés."
          inputs={[
            { name: "name", type: "text", placeholder: "Votre nom", required: true },
            { name: "email", type: "email", placeholder: "Votre email", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Décrivez votre besoin (réparation, réglage, montage...)",            rows: 5,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fv8vm3&_wi=4"
          imageAlt="Workshop service"
          mediaPosition="right"
          buttonText="Prendre RDV"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="INT SAINT PIERRE"
          leftLink={{
            text: "Politique de Confidentialité",            href: "#"
          }}
          rightLink={{
            text: "Conditions d'Utilisation",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}