"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Leaf, Users, Utensils, Wine } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumSizeLargeTitles"
        background="grid"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Inicio", id: "hero" },
        { name: "Sobre Nosotros", id: "about" },
        { name: "Menú", id: "menu" },
        { name: "Contacto", id: "contact" },
      ]}
      brandName="El Péndulo"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{ variant: "radial-gradient" }}
      title="El Péndulo: Excelencia Culinaria"
      description="Viva un viaje gastronómico inolvidable donde la pasión por la comida se encuentra con la elegancia."
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/smiling-woman-red-hat-talking-with-man_171337-16410.jpg", alt: "diner" },
        { src: "http://img.b2bpic.net/free-photo/people-cheering-with-wine-glasses-luxurious-restaurant_23-2150517447.jpg", alt: "diner" },
        { src: "http://img.b2bpic.net/free-photo/couples-celebrating-birthday_23-2149891062.jpg", alt: "diner" },
        { src: "http://img.b2bpic.net/free-photo/medium-shot-man-luxury-restaurant_23-2150598415.jpg", alt: "diner" },
        { src: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517423.jpg", alt: "diner" },
      ]}
      buttons={[{ text: "Reservar Mesa", href: "#contact" }]}
      marqueeItems={[
        { type: "text-icon", text: "Recomendado por Michelin", icon: Award },
        { type: "text-icon", text: "Ingredientes de Temporada", icon: Leaf },
        { type: "text-icon", text: "Sumilleres Expertos", icon: Wine },
        { type: "text-icon", text: "Eventos Privados", icon: Users },
        { type: "text-icon", text: "Alta Cocina", icon: Utensils },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="Nuestra Historia"
      title="Creado con Pasión"
      description="El Péndulo se dedica al arte de la alta cocina, trayendo inspiraciones globales a su mesa."
      subdescription="Cada ingrediente se selecciona con cuidado para garantizar la máxima calidad culinaria."
      icon={Award}
      imageSrc="http://img.b2bpic.net/free-photo/focused-male-cook-garnishing-dish-with-freshly-cut-vegetables-stove_482257-127704.jpg"
      mediaAnimation="blur-reveal"
      imageAlt="chef profesional cocinando"
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: "Entrante de Autor", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/caesar-salad-with-fresh-vegetable-chicken-salad-white-plate-wood-table-delicious-salad_114579-113.jpg" },
        { id: "p2", name: "Pasta Artesanal", price: "$24", imageSrc: "http://img.b2bpic.net/free-photo/salad-with-red-caviar-salmon-avocado_140725-6797.jpg" },
        { id: "p3", name: "Steak de Primera", price: "$42", imageSrc: "http://img.b2bpic.net/free-photo/gourmet-seared-duck-breast-with-roasted-vegetables-rich-sauce_84443-72273.jpg" },
        { id: "p4", name: "Postre Decadente", price: "$14", imageSrc: "http://img.b2bpic.net/free-photo/elegant-gourmet-dessert-with-flowers-white-plate_23-2151973732.jpg" },
        { id: "p5", name: "Ensalada Fresca", price: "$16", imageSrc: "http://img.b2bpic.net/free-photo/vegetable-salad-with-tomato-cucumber-bell-peppers-red-onion-grated-parmesan-parsley_140725-8477.jpg" },
        { id: "p6", name: "Plato de Marisco", price: "$38", imageSrc: "http://img.b2bpic.net/free-photo/mussels-cream-sauce-served-with-green-salad_140725-5873.jpg" },
      ]}
      title="Nuestras Creaciones"
      description="Explore nuestros platos estrella creados por nuestros expertos chefs."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { title: "Chefs Expertos", description: "Artistas culinarios formados internacionalmente.", imageSrc: "http://img.b2bpic.net/free-photo/professional-chef-prepares-shrimps-ai-generated-image_511042-1788.jpg" },
        { title: "Del Campo a la Mesa", description: "Ingredientes frescos, locales y sostenibles.", imageSrc: "http://img.b2bpic.net/free-photo/traditional-waldorf-salad-wooden-background-top-view_127032-3264.jpg" },
        { title: "Ambiente Acogedor", description: "Iluminación perfecta para reuniones íntimas.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-reception-hall-with-decorated-luxury-table-setting_181624-13771.jpg" },
      ]}
      title="¿Por qué elegirnos?"
      description="El Péndulo ofrece una mezcla única de atmósfera y sabor."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", value: "10k+", title: "Clientes Felices", items: ["Local", "Internacional"] },
        { id: "m2", value: "50+", title: "Variedades de Menú", items: ["Autor", "Estacional"] },
        { id: "m3", value: "5*", title: "Calificación", items: ["Calidad", "Servicio"] },
      ]}
      title="Excelencia en Servicio"
      description="Nuestros números hablan de la experiencia."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Alice M.", handle: "@alicem", testimonial: "Sabores increíbles, la mejor alta cocina de la ciudad.", imageSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663852.jpg" },
        { id: "t2", name: "Bob R.", handle: "@bobr", testimonial: "Excelente maridaje de vinos y servicio.", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-having-fun-while-eating-dessert-taking-selfie-cafe_637285-9092.jpg" },
        { id: "t3", name: "Charlie D.", handle: "@charlied", testimonial: "La atmósfera no tiene igual.", imageSrc: "http://img.b2bpic.net/free-photo/couple-together-valentines-day-restaurant_1303-20372.jpg" },
        { id: "t4", name: "Diana K.", handle: "@dianak", testimonial: "Cada plato era una obra de arte.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-elder-woman-having-dessert-while-working_23-2148661257.jpg" },
        { id: "t5", name: "Evan L.", handle: "@evanl", testimonial: "Simplemente una experiencia espectacular.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-eating-donut-talking-her-boyfriend-cafe_637285-9080.jpg" },
      ]}
      title="Reseñas"
      description="Lo que nuestros comensales dicen de El Péndulo."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Reserve Su Mesa"
      description="Esperamos darle la bienvenida pronto."
      inputs={[
        { name: "name", type: "text", placeholder: "Nombre", required: true },
        { name: "email", type: "email", placeholder: "Correo", required: true },
      ]}
      textarea={{ name: "message", placeholder: "¿Alguna petición especial?", required: false }}
      imageSrc="http://img.b2bpic.net/free-photo/full-shot-smiley-man-wearing-apron_23-2149434487.jpg"
      imageAlt="restaurante exterior"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "El Péndulo",          items: [
            { label: "Sobre Nosotros", href: "#about" },
            { label: "Menú", href: "#menu" },
          ],
        },
        {
          title: "Contacto",          items: [
            { label: "Reservar", href: "#contact" },
            { label: "Carreras", href: "#" },
          ],
        },
        {
            title: "Social",            items: [
                { label: "Instagram", href: "#" },
                { label: "Facebook", href: "#" },
            ]
        }
      ]}
      bottomLeftText="© 2024 El Péndulo"
      bottomRightText="Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}