"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { CalendarDays, Users, Wine } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Inicio", id: "hero" },
        { name: "Sobre Nosotros", id: "about" },
        { name: "Nuestra Carta", id: "products" },
        { name: "Contacto", id: "contact" },
      ]}
      brandName="El Desembarco"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="El Desembarco Castelar"
      description="Una experiencia culinaria única, donde los sabores de siempre se encuentran con la vanguardia en el corazón de Castelar."
      buttons={[
        { text: "Ver nuestra carta", href: "#products" },
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/event-hall-furniture-brown-white-colors_114579-2230.jpg?_wi=1"
      imageAlt="Plato gourmet principal en El Desembarco"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={true}
      title="Nuestra Historia"
      description="Nacido de la pasión por la buena mesa, El Desembarco es el refugio ideal para quienes buscan momentos inolvidables en Castelar. Seleccionamos los mejores ingredientes locales para ofrecerte una propuesta gastronómica que respeta la tradición e innova en cada detalle."
      bulletPoints={[
        { title: "Cocina de Autor", description: "Platos únicos creados con técnica y corazón." },
        { title: "Ambiente Distinguido", description: "Un espacio diseñado para disfrutar en compañía." },
        { title: "Ingredientes Locales", description: "Apoyamos a productores de la zona garantizando frescura." },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/wedding-hall-interior-design-photo-shooting_114579-2234.jpg?_wi=1"
      imageAlt="Interior acogedor del restaurante"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { title: "Carta Estacional", description: "Platos que cambian con las estaciones.", bentoComponent: "reveal-icon", icon: CalendarDays },
        { title: "Bodega Selecta", description: "Los mejores vinos para maridar tu elección.", bentoComponent: "reveal-icon", icon: Wine },
        { title: "Eventos Privados", description: "Tu celebración especial en el mejor lugar.", bentoComponent: "reveal-icon", icon: Users },
      ]}
      title="Por qué elegirnos"
      description="Más que un restaurante, un punto de encuentro con lo mejor de nuestra ciudad."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { id: "1", name: "Ojo de Bife", price: "$18,000", imageSrc: "http://img.b2bpic.net/free-photo/beef-steak-slices-garnished-with-herbs-sauce-served-with-grilled-vegetables_140725-226.jpg?_wi=1", imageAlt: "Ojo de Bife" },
        { id: "2", name: "Risotto de Hongos", price: "$14,500", imageSrc: "http://img.b2bpic.net/free-photo/risotto-rice-with-mushrooms-white-ceramic-plate_23-2147925971.jpg?_wi=1", imageAlt: "Risotto" },
        { id: "3", name: "Pesca del Día", price: "$16,200", imageSrc: "http://img.b2bpic.net/free-photo/seafood-plate-with-fried-salmon-mussels-shrimps-calamari-lemon_140725-1613.jpg?_wi=1", imageAlt: "Pesca" },
      ]}
      title="Nuestra Selección"
      description="Platos destacados de nuestra cocina."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        { id: "1", value: "10+", description: "Años de experiencia" },
        { id: "2", value: "1000+", description: "Clientes felices mensuales" },
        { id: "3", value: "50+", description: "Platos en nuestra historia" },
      ]}
      title="Nuestra trayectoria"
      description="Números que reflejan la confianza de nuestros clientes."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      textboxLayout="default"
      useInvertedBackground={true}
      animationType="blur-reveal"
      gridVariant="three-columns-all-equal-width"
      testimonials={[
        { id: "1", name: "Juan Perez", role: "Regular", company: "Cliente", rating: 5 },
        { id: "2", name: "Ana G.", role: "Frecuente", company: "Cliente", rating: 5 },
        { id: "3", name: "Carlos L.", role: "Nueva Visita", company: "Cliente", rating: 5 },
      ]}
      title="Lo que dicen de nosotros"
      description="Historias de quienes ya nos visitaron en nuestro espacio relajado."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "radial-gradient" }}
      tag="Contacto"
      title="Reserva tu Mesa"
      description="Estamos en Castelar, listos para recibirte. Déjanos tu email para recibir novedades y reservas."
      buttonText="Enviar reserva"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="El Desembarco"
      leftLink={{ text: "Privacidad", href: "#" }}
      rightLink={{ text: "Términos", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}