"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 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 AboutPage() {
  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="À Propos de nous"
          description="Découvrez l'histoire et les valeurs d'ATI Négoce, leader régional en matériaux de qualité"
          buttons={[
            { text: "Notre histoire", href: "#about" },
            { text: "Nous contacter", href: "/contact" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/men-taking-break-from-work_23-2148976284.jpg?_wi=2"
          imageAlt="Équipe ATI Négoce"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Notre Histoire"
          title="Plus de 20 ans d'expertise au service de la région"
          description="ATI Négoce a été fondée avec une mission simple : fournir des matériaux de construction et d'aménagement extérieur de qualité supérieure à nos clients particuliers, artisans, paysagistes et entreprises du bâtiment. Grâce à notre engagement constant envers l'excellence et le conseil personnalisé, nous avons construit une réputation solide et durable."
          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=3"
          imageAlt="Équipe professionnelle ATI Négoce"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      {/* Values Section */}
      <div id="values" data-section="values">
        <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-4 text-foreground text-center">
              Nos Valeurs
            </h2>
            <p className="text-foreground/80 text-center mb-12 max-w-2xl mx-auto">
              Les principes qui guident notre entreprise et nos relations avec nos clients
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-card rounded-3xl p-8 shadow-sm">
                <h3 className="text-xl font-semibold mb-4 text-primary-cta">
                  Qualité Supérieure
                </h3>
                <p className="text-foreground/80">
                  Chaque matériau est sélectionné avec soin pour garantir la meilleure qualité, durabilité et performance. Notre engagement envers l'excellence est non-négociable.
                </p>
              </div>
              <div className="bg-card rounded-3xl p-8 shadow-sm">
                <h3 className="text-xl font-semibold mb-4 text-primary-cta">
                  Conseil Personnalisé
                </h3>
                <p className="text-foreground/80">
                  Notre équipe d'experts est toujours disponible pour vous conseiller et vous guider dans le choix des matériaux les plus adaptés à votre projet.
                </p>
              </div>
              <div className="bg-card rounded-3xl p-8 shadow-sm">
                <h3 className="text-xl font-semibold mb-4 text-primary-cta">
                  Service Client Réactif
                </h3>
                <p className="text-foreground/80">
                  Nous écoutons nos clients et répondons rapidement à leurs demandes. Votre satisfaction est notre priorité absolue.
                </p>
              </div>
              <div className="bg-card rounded-3xl p-8 shadow-sm">
                <h3 className="text-xl font-semibold mb-4 text-primary-cta">
                  Innovation Durable
                </h3>
                <p className="text-foreground/80">
                  Nous nous engageons à proposer des solutions modernes et écologiques qui répondent aux défis d'aujourd'hui et de demain.
                </p>
              </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>
  );
}