"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";

export default function ClientsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeMediumTitles"
        background="aurora"
        cardStyle="inset"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              {
                name: "Inicio",                id: "hero"},
              {
                name: "Nosotros",                id: "about"},
              {
                name: "Funcionalidades",                id: "features"},
              {
                name: "Métricas",                id: "metrics"},
              {
                name: "Productos",                id: "products"},
              {
                name: "Precios",                id: "pricing"},
              {
                name: "Clientes",                href: "/clientes"},
              {
                name: "Proveedores",                href: "/proveedores"},
              {
                name: "Testimonios",                id: "testimonials"},
              {
                name: "FAQ",                id: "faq"},
              {
                name: "Contacto",                id: "contact"},
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/creative-thunder-concept-logo-design-template-vector-illustration-isolated-background_384344-2117.jpg"
            logoAlt="Surtidora Ramona Logo"
            brandName="SURTIDORA RAMONA"
          />
        </div>

        <div className="container mx-auto py-20 px-4">
          <h1 className="text-4xl font-bold text-center mb-8">Gestión de Clientes</h1>
          <p className="text-lg text-center text-foreground mb-12">Aquí se implementarán las operaciones CRUD, gestión de contactos y almacenamiento de información de clientes.</p>
          <div className="mt-10 p-6 bg-card rounded-lg shadow-lg max-w-2xl mx-auto">
            <h2 className="text-2xl font-semibold mb-4 text-foreground">Módulo en Desarrollo</h2>
            <p className="text-foreground/80">Estamos trabajando para ofrecerte la mejor experiencia en la gestión de tus clientes. Próximamente disponible con todas las funcionalidades de administración y contacto.</p>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterCard
            logoSrc="http://img.b2bpic.net/free-vector/creative-thunder-concept-logo-design-template-vector-illustration-isolated-background_384344-2117.jpg"
            logoAlt="Surtidora Ramona Logo"
            logoText="SURTIDORA RAMONA"
            copyrightText="© 2024 Surtidora Ramona. Todos los derechos reservados."
            socialLinks={[
              {
                icon: Facebook,
                href: "#",                ariaLabel: "Facebook"},
              {
                icon: Twitter,
                href: "#",                ariaLabel: "Twitter"},
              {
                icon: Instagram,
                href: "#",                ariaLabel: "Instagram"},
              {
                icon: Linkedin,
                href: "#",                ariaLabel: "LinkedIn"},
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}