"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 ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterBase from "@/components/sections/footer/FooterBase";
import { 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 ContactPage() {
  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="Nous Contacter"
          description="Avez des questions ? Notre équipe d'experts est disponible pour vous aider avec vos projets"
          buttons={[
            { text: "Demander un devis", href: "#contact" },
            { text: "Retour à l'accueil", href: "/" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/cement-crossed-by-diagonal-line-pebbles-stone_158595-6388.jpg?_wi=3"
          imageAlt="Contact ATI Négoce"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Contact & FAQ Section */}
      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Demander votre devis gratuit"
          ctaDescription="Contactez nos experts pour un devis adapté à votre projet. Réponse rapide garantie."
          ctaButton={{
            text: "Demander un devis",            href: "#"}}
          ctaIcon={Mail}
          faqs={[
            {
              id: "1",              title: "Quels sont vos horaires d'ouverture ?",              content:
                "<p><strong>Rezé (Loire-Atlantique)</strong></p><p>Lundi-Samedi : 8h-18h</p><p>Dimanche : 9h-12h</p><p><strong>Niort (Deux-Sèvres)</strong></p><p>Lundi-Samedi : 8h-18h</p><p>Dimanche : 9h-12h</p>"},
            {
              id: "2",              title: "Proposez-vous la livraison ?",              content:
                "Oui, nous livrons particuliers et professionnels partout en région. Livraison gratuite à partir de 500€ d'achat. Pour les commandes inférieures ou les zones éloignées, consultez nos tarifs de livraison spécifiques."},
            {
              id: "3",              title: "Comment obtenir un devis ?",              content:
                "Vous pouvez nous contacter par téléphone, email ou en remplissant le formulaire de devis en ligne. Notre équipe vous répondra sous 24h avec un devis détaillé et personnalisé pour votre projet."},
            {
              id: "4",              title: "Quels moyens de paiement acceptez-vous ?",              content:
                "Nous acceptons tous les moyens de paiement courants : carte bancaire, chèque, virement bancaire et espèces en agence. Nous proposons également des facilités de paiement pour les gros achats professionnels."},
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </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>
  );
}