"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="circleGradient"
        cardStyle="inset"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Catálogo",          id: "/"},
        {
          name: "Acerca de",          id: "/#about"},
        {
          name: "Productos",          id: "/#products"},
        {
          name: "Administración",          id: "/admin"},
      ]}
      brandName="Guayabal Liquor Store"
      button={{
        text: "Comprar Ahora",        href: "/#products"}}
      animateOnLoad={true}
    />
  </div>

  <div id="admin-login" data-section="admin-login">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Acceso Privado"
      title="Panel de Administración"
      description="Por favor, introduce tu contraseña para acceder al panel de administración y gestionar el catálogo de productos."
      inputPlaceholder="Introduce tu contraseña"
      buttonText="Acceder"
      termsText="Este panel es solo para uso exclusivo del dueño. No compartas tu contraseña."
    />
  </div>

  <div id="admin-features" data-section="admin-features">
      <MediaAbout
      useInvertedBackground={false}
      title="Gestiona Tu Catálogo con Facilidad"
      description="Desde este panel, puedes mantener tu inventario al día. Agrega nuevos productos, edita detalles como precios y descripciones, o marca artículos como disponibles/no disponibles. También tienes control total sobre las categorías."
      tag="Control Total"
      imageSrc="http://img.b2bpic.net/free-photo/close-up-admin-office-sing-tablet-design-machine-learning-algorithms_482257-112941.jpg"
      imageAlt="Interfaz de gestión de productos en un panel de administración"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ey1cTIpOJwngMIJrv61tdUv8u5/uploaded-1781137167192-44er2uhj.png"
      logoAlt="Guayabal Liquor Store Logo"
      logoText="Guayabal Liquor Store"
      leftLink={{
        text: "Términos y Condiciones",        href: "#"}}
      rightLink={{
        text: "Política de Privacidad",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}