"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 ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FooterBase from "@/components/sections/footer/FooterBase";

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 ProductsPage() {
  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="Nos Produits"
          description="Une sélection complète de matériaux premium pour tous vos projets d'aménagement extérieur"
          buttons={[
            { text: "Voir le catalogue", href: "#products" },
            { text: "Demander un devis", href: "/contact" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/cement-crossed-by-diagonal-line-pebbles-stone_158595-6388.jpg?_wi=2"
          imageAlt="Catalogue de produits ATI Négoce"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

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

      {/* Product Details Section */}
      <div id="product-details" data-section="product-details">
        <div className="mx-auto px-4 md:px-6 py-16 md:py-24">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-semibold mb-8 text-foreground">
              Détails de nos produits
            </h2>
            <div className="grid gap-8">
              <div className="bg-card rounded-3xl p-8">
                <h3 className="text-xl font-semibold mb-4 text-foreground">
                  Graviers Premium 10/20mm
                </h3>
                <p className="text-foreground/80 mb-4">
                  Nos graviers premium offrent une excellente drainage et une durabilité optimale. Parfaits pour les allées, les jardins et les aménagements paysagers. Sélectionnés pour leur qualité supérieure et leur apparence naturelle.
                </p>
                <ul className="space-y-2 text-foreground/80">
                  <li>✓ Qualité premium garantie</li>
                  <li>✓ Drainage excellent</li>
                  <li>✓ Durabilité long terme</li>
                  <li>✓ Livraison rapide</li>
                </ul>
              </div>
              <div className="bg-card rounded-3xl p-8">
                <h3 className="text-xl font-semibold mb-4 text-foreground">
                  Galets Polis Naturels
                </h3>
                <p className="text-foreground/80 mb-4">
                  Galets naturellement polis pour un rendu esthétique incomparable. Idéals pour créer des zones décoratives, des jardins zen ou des terrasses élégantes. Entièrement naturels et écologiques.
                </p>
                <ul className="space-y-2 text-foreground/80">
                  <li>✓ Finition lisse et élégante</li>
                  <li>✓ 100% naturel et écologique</li>
                  <li>✓ Parfait pour zones décoratives</li>
                  <li>✓ Résistant au temps</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </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>
  );
}