"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
import FooterBase from "@/components/sections/footer/FooterBase";
import {
  ShoppingBag,
  Users,
  Truck,
  Star,
  MapPin,
  Zap,
  Mail,
} from "lucide-react";

const navItems = [
  { name: "Accueil", id: "hero" },
  { name: "Produits", id: "produits" },
  { name: "Services", id: "services" },
  { name: "Inspirations", id: "gallery" },
];

const footerColumns = [
  {
    title: "Navigation",    items: [
      { label: "Accueil", href: "/" },
      { label: "À Propos", href: "/a-propos" },
      { label: "Produits", href: "/produits" },
      { label: "Inspirations", href: "#gallery" },
    ],
  },
  {
    title: "Nos Agences",    items: [
      { label: "Rezé (44)", href: "#" },
      { label: "Niort (79)", href: "#" },
      { label: "Nous contacter", href: "/contact" },
      { label: "Horaires", href: "#" },
    ],
  },
  {
    title: "Légal",    items: [
      { label: "Politique de confidentialité", href: "#" },
      { label: "Conditions générales", href: "#" },
      { label: "Mentions légales", href: "#" },
      { label: "Sitemap", href: "#" },
    ],
  },
];

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="fluid"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ATI Négoce"
          navItems={navItems}
          button={{
            text: "Demander un devis",            href: "/contact"}}
          animateOnLoad={true}
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="ATI Négoce"
          description="Votre expert en matériaux pour vos aménagements extérieurs"
          buttons={[
            { text: "Demander un devis", href: "/contact" },
            { text: "Découvrir nos produits", href: "/produits" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/cement-crossed-by-diagonal-line-pebbles-stone_158595-6388.jpg?_wi=1"
          imageAlt="Matériaux de construction et graviers"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Qui sommes-nous"
          title="Leader régional en matériaux de qualité depuis des années"
          description="ATI Négoce est votre partenaire de confiance pour tous vos besoins en matériaux de construction et d'aménagement extérieur. Avec deux agences stratégiquement implantées à Rezé (Loire-Atlantique) et Niort (Deux-Sèvres), nous servons les particuliers, artisans, paysagistes et entreprises du bâtiment avec un engagement constant envers la qualité, le conseil personnalisé et la satisfaction client."
          metrics={[
            { value: "20+", title: "Années d'expertise" },
            { value: "10 000+", title: "Clients satisfaits" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/men-taking-break-from-work_23-2148976284.jpg?_wi=1"
          imageAlt="Équipe ATI Négoce"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      {/* Features Section */}
      <div id="services" data-section="services">
        <FeatureHoverPattern
          title="Nos Points Forts"
          description="Ce qui nous rend unique et fiables"
          features={[
            {
              icon: ShoppingBag,
              title: "Large Choix de Produits",              description:
                "Granulats variés, pierres naturelles, stabilisateurs et aménagement extérieur de qualité premium."},
            {
              icon: Users,
              title: "Conseils Personnalisés",              description:
                "Notre équipe d'experts vous guide pour choisir les matériaux adaptés à votre projet."},
            {
              icon: Truck,
              title: "Livraison Rapide",              description:
                "Service de livraison efficace et fiable pour particuliers et professionnels."},
            {
              icon: Star,
              title: "Qualité Garantie",              description:
                "Tous nos matériaux sont sélectionnés pour leur durabilité et excellence."},
            {
              icon: MapPin,
              title: "Deux Agences Proches",              description: "Rezé et Niort pour mieux vous servir partout en région."},
            {
              icon: Zap,
              title: "Service Reactif",              description:
                "Accompagnement de projet et support client réactif et professionnel."},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      {/* Products Section */}
      <div id="produits" data-section="produits">
        <ProductCardTwo
          title="Nos Produits Phares"
          description="Découvrez notre sélection de matériaux pour tous vos projets d'aménagement extérieur"
          products={[
            {
              id: "1",              brand: "ATI Négoce",              name: "Graviers Premium 10/20mm",              price: "45€ / tonne",              rating: 5,
              reviewCount: "156",              imageSrc:
                "http://img.b2bpic.net/free-photo/vertical-closeup-small-stones-sunlight-nice-picture-backgrounds-wallpapers_181624-19640.jpg?_wi=1",              imageAlt: "Graviers premium 10/20mm"},
            {
              id: "2",              brand: "ATI Négoce",              name: "Galets Polis Naturels",              price: "55€ / tonne",              rating: 5,
              reviewCount: "89",              imageSrc:
                "http://img.b2bpic.net/free-photo/white-pebbles-stone-texture-background_158595-6380.jpg?_wi=1",              imageAlt: "Galets polis naturels"},
            {
              id: "3",              brand: "ATI Négoce",              name: "Pierres Naturelles Brutes",              price: "75€ / tonne",              rating: 5,
              reviewCount: "124",              imageSrc:
                "http://img.b2bpic.net/free-photo/wooden-bow-with-stones_23-2148874518.jpg?_wi=1",              imageAlt: "Pierres naturelles brutes"},
            {
              id: "4",              brand: "ATI Négoce",              name: "Stabilisateur de Graviers",              price: "35€ / sac",              rating: 5,
              reviewCount: "78",              imageSrc:
                "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13311.jpg?_wi=1",              imageAlt: "Stabilisateur de graviers"},
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Avis de nos clients"
          description="Des milliers de clients particuliers et professionnels nous font confiance"
          testimonials={[
            {
              id: "1",              name: "Marie Dupont",              role: "Particulier",              company: "Projet Résidentiel",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiley-woman-with-curly-hair-posing-with-copy-space_23-2148728583.jpg"},
            {
              id: "2",              name: "Pierre Leclerc",              role: "Paysagiste",              company: "Leclerc Aménagement",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/vertical-portrait-young-attractive-bearded-dark-skinned-farmer-blue-t-shirt-with-garden-tools-holding-hands-crossed-looking-aside-with-confident-face-expression_176420-19901.jpg"},
            {
              id: "3",              name: "Sophie Martin",              role: "Chef de projet",              company: "Entreprise BTP Loire",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg"},
          ]}
          kpiItems={[
            { value: "4.1/5", label: "Note Google moyenne" },
            { value: "10 000+", label: "Clients satisfaits" },
            { value: "20+", label: "Années d'expérience" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      {/* Gallery/Projects Section */}
      <div id="gallery" data-section="gallery">
        <BlogCardTwo
          title="Inspirations et Réalisations"
          description="Découvrez des projets réussis et des idées d'aménagement extérieur"
          blogs={[
            {
              id: "1",              category: ["Aménagement", "Inspiration"],
              title: "Allée élégante avec graviers premium",              excerpt:
                "Transformation d'une allée avec graviers 10/20mm et bordure naturelle",              imageSrc:
                "http://img.b2bpic.net/free-photo/vertical-shot-material-pieces-wooden-boxes_181624-18062.jpg",              authorName: "ATI Négoce",              authorAvatar:
                "http://img.b2bpic.net/free-vector/flat-design-delta-logo-template_23-2149477244.jpg",              date: "15 Janvier 2025"},
            {
              id: "2",              category: ["Paysagiste", "Avant-Après"],
              title: "Jardin zen avec galets polis",              excerpt:
                "Création d'un espace zen avec galets naturels et stabiliateurs",              imageSrc:
                "http://img.b2bpic.net/free-photo/balance-stone-quiet-temple-background_1372-102.jpg",              authorName: "ATI Négoce",              authorAvatar:
                "http://img.b2bpic.net/free-vector/flat-design-delta-logo-template_23-2149477244.jpg",              date: "10 Janvier 2025"},
            {
              id: "3",              category: ["Terrasse", "Réalisation"],
              title: "Terrasse en pierres naturelles",              excerpt:
                "Pose professionnelle de pierres brutes pour une terrasse durable",              imageSrc:
                "http://img.b2bpic.net/free-photo/empty-wood-chair_1339-7085.jpg",              authorName: "ATI Négoce",              authorAvatar:
                "http://img.b2bpic.net/free-vector/flat-design-delta-logo-template_23-2149477244.jpg",              date: "5 Janvier 2025"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="ATI Négoce"
          copyrightText="© 2025 ATI Négoce. Tous droits réservés."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}
