"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, Feather, Scissors, Smile, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="fluid"
        cardStyle="soft-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Gallery",
          id: "#gallery",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Barbería UNDERGROUND"
      button={{
        text: "Book Your Cut Now",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "radial-gradient",
      }}
      title="Premium Barbershop Craftsmanship in Rivera"
      description="Award-rated grooming for every style. From fade cuts to beard conditioning, we deliver precision and expertise you can trust."
      buttons={[
        {
          text: "Book Your Cut Now",
          href: "#contact",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg?_wi=1",
          imageAlt: "Barber giving a precision haircut",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/adult-barber-washing-old-man-hair-backwash_23-2148181935.jpg?_wi=1",
          imageAlt: "Barber meticulously trimming a beard",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg",
          imageAlt: "Client receiving a stylish haircut",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-hairdresser-shaving-male-customer-s-beard-with-comb-hair-clipper-barbershop_181624-40011.jpg",
          imageAlt: "Barber using clippers for a clean fade",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg",
          imageAlt: "Client enjoying a hot towel treatment",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-beard-man_23-2147778903.jpg",
          imageAlt: "Barber applying finishing products to hair",
        },
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Our Craft, Your Style: The UNDERGROUND Difference",
        },
      ]}
      buttons={[
        {
          text: "Learn More",
          href: "#services",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Cortes de Precisión",
          description: "Desde fade cuts hasta estilos clásicos, cada corte se realiza con atención meticulosa al detalle.",
          bentoComponent: "reveal-icon",
          icon: Scissors,
          imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg",
          imageAlt: "barbershop interior vintage modern",
        },
        {
          title: "Afeitado y Arreglo de Barba",
          description: "Disfrute de un afeitado clásico con navaja o un arreglo de barba que realce su estilo.",
          bentoComponent: "reveal-icon",
          icon: Feather,
          imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg?_wi=2",
          imageAlt: "barbershop interior vintage modern",
        },
        {
          title: "Tratamientos Especializados",
          description: "Revitalice su cabello y piel con nuestros tratamientos capilares, faciales y de limpieza profunda.",
          bentoComponent: "reveal-icon",
          icon: Sparkles,
          imageSrc: "http://img.b2bpic.net/free-photo/adult-barber-washing-old-man-hair-backwash_23-2148181935.jpg?_wi=2",
          imageAlt: "barbershop interior vintage modern",
        },
      ]}
      title="Nuestros Servicios Exclusivos"
      description="Diseñados para el caballero moderno, nuestros servicios combinan técnicas clásicas con las últimas tendencias."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "style-1",
          name: "Fade Clásico",
          price: "Desde $25",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-her-adorable-kitty-home_23-2149167069.jpg",
          imageAlt: "Hombre con corte de cabello fade clásico",
          onProductClick: "() => void",
        },
        {
          id: "style-2",
          name: "Barba Definida",
          price: "Desde $20",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-cool-bearded-man-background-old-city_1153-8185.jpg",
          imageAlt: "Hombre con barba bien arreglada y definida",
          onProductClick: "() => void",
        },
        {
          id: "style-3",
          name: "Cabello Texturizado",
          price: "Desde $30",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-male-looking-away_23-2148531057.jpg",
          imageAlt: "Hombre con cabello texturizado y estilizado",
          onProductClick: "() => void",
        },
        {
          id: "style-4",
          name: "Undercut Moderno",
          price: "Desde $28",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-men-with-beards-studio_23-2149615796.jpg",
          imageAlt: "Hombre con corte undercut moderno y limpio",
          onProductClick: "() => void",
        },
        {
          id: "style-5",
          name: "Estilo Medium Flow",
          price: "Desde $27",
          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg",
          imageAlt: "Hombre con estilo de cabello medium flow",
          onProductClick: "() => void",
        },
        {
          id: "style-6",
          name: "Rizos Definidos",
          price: "Desde $32",
          imageSrc: "http://img.b2bpic.net/free-photo/young-brunette-woman-with-curly-hair_273609-14377.jpg",
          imageAlt: "Hombre con rizos naturales definidos y estilizados",
          onProductClick: "() => void",
        },
      ]}
      title="Galería de Estilos: Antes y Después"
      description="Inspírese con nuestros trabajos. La precisión y el arte en cada detalle que nos distinguen."
    />
  </div>

  <div id="reputation" data-section="reputation">
      <MetricCardThree
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Star,
          title: "5 Estrellas",
          value: "Calificación Promedio",
        },
        {
          id: "m2",
          icon: Award,
          title: "Años de Experiencia",
          value: "10+",
        },
        {
          id: "m3",
          icon: Smile,
          title: "Clientes Satisfechos",
          value: "1000+",
        },
      ]}
      title="Nuestros Números Hablan por Sí Mismos"
      description="La calidad y satisfacción que nos caracterizan, reflejadas en nuestra trayectoria y dedicación."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      groups={[
        {
          id: "barbers",
          groupTitle: "Equipo Principal",
          members: [
            {
              id: "barber-1",
              title: "Juan 'El Maestro'",
              subtitle: "Barbero Principal",
              detail: "Especialista en cortes clásicos y fades, con una década de experiencia.",
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-plus-size-man-working-as-hairstylist_23-2150754691.jpg",
              imageAlt: "Juan, Barbero Principal",
            },
            {
              id: "barber-2",
              title: "Sofía 'La Estilista'",
              subtitle: "Experta en Barba y Diseño",
              detail: "Creativa y detallista, domina el arreglo de barba y los tratamientos faciales.",
              imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-with-crossed-arms-dressed-yellow-plaid-shirt_613910-1818.jpg",
              imageAlt: "Sofía, Experta en Barba y Diseño",
            },
            {
              id: "barber-3",
              title: "Mateo 'El Innovador'",
              subtitle: "Nuevas Tendencias y Color",
              detail: "Siempre a la vanguardia, especialista en las últimas tendencias y coloración capilar.",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
              imageAlt: "Mateo, Innovador en Tendencias",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg?_wi=3",
          imageAlt: "professional male barber portrait",
        },
      ]}
      title="Conozca a Nuestros Maestros Barberos"
      description="Nuestros expertos están listos para transformar su estilo con pasión, habilidad y un toque personal."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Carlos M.",
          role: "Empresario",
          company: "Rivera Motors",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",
          imageAlt: "Foto de Carlos M.",
        },
        {
          id: "t2",
          name: "Diego P.",
          role: "Estudiante Universitario",
          company: "Udelar",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-confident-bearded-man-assure-everything-good-showing-okay-gesture-winki_1258-152694.jpg",
          imageAlt: "Foto de Diego P.",
        },
        {
          id: "t3",
          name: "Martín F.",
          role: "Gerente de Eventos",
          company: "Eventos Premium",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-outside_1153-2604.jpg",
          imageAlt: "Foto de Martín F.",
        },
        {
          id: "t4",
          name: "Andrea L.",
          role: "Diseñadora Gráfica",
          company: "Creativa Studio",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-portrait-person-practicing-law-related-profession_23-2151419548.jpg",
          imageAlt: "Foto de Andrea L.",
        },
        {
          id: "t5",
          name: "Ricardo G.",
          role: "Ingeniero",
          company: "Tech Solutions",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/headshot-skeptical-guy-looking-something-unamusing-grimacing-standing-reluctant-against-bl_1258-163718.jpg",
          imageAlt: "Foto de Ricardo G.",
        },
      ]}
      kpiItems={[
        {
          value: "5 Estrellas",
          label: "Calidad Consistente",
        },
        {
          value: "100%",
          label: "Satisfacción Garantizada",
        },
        {
          value: "Profesionalismo",
          label: "En Cada Servicio",
        },
      ]}
      title="Lo Que Nuestros Clientes Dicen"
      description="Su experiencia es nuestra mejor carta de presentación. Orgullosos de nuestra reputación 5 estrellas."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "¿Cómo puedo reservar una cita?",
          content: "Puede reservar su cita fácilmente a través de nuestro sitio web haciendo clic en el botón 'Reservar Ahora' o contactándonos directamente.",
        },
        {
          id: "q2",
          title: "¿Cuáles son sus horarios de atención?",
          content: "Estamos abiertos de Martes a Sábado, de 9:00 AM a 8:00 PM. Los Domingos y Lunes, estamos cerrados.",
        },
        {
          id: "q3",
          title: "¿Ofrecen servicios para eventos o grupos?",
          content: "Sí, ofrecemos paquetes especiales para bodas, eventos y servicios grupales. Por favor, contáctenos para más detalles y personalización.",
        },
        {
          id: "q4",
          title: "¿Utilizan productos específicos?",
          content: "Solo utilizamos productos de alta calidad de marcas reconocidas para garantizar los mejores resultados y el cuidado de su cabello y piel.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/row-empty-chairs-office_23-2147899557.jpg"
      imageAlt="Empty barber chair in a modern barbershop"
      mediaAnimation="slide-up"
      mediaPosition="left"
      title="¿Preguntas Frecuentes?"
      description="Encuentre respuestas rápidas sobre nuestros servicios, horarios, reservas y más."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Reserve Su Experiencia Hoy"
      description="Estamos listos para atenderle. Contáctenos para agendar su cita o para consultas de servicios grupales. ¡Le esperamos en Rivera!"
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Su Nombre Completo",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Su Correo Electrónico",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Su Número de Teléfono",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Su Mensaje o Consulta",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
      imageAlt="Exterior de Barbería UNDERGROUND en Rivera"
      mediaAnimation="opacity"
      mediaPosition="right"
      buttonText="Enviar Consulta"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Servicios",
          items: [
            {
              label: "Cortes de Cabello",
              href: "#services",
            },
            {
              label: "Arreglo de Barba",
              href: "#services",
            },
            {
              label: "Tratamientos",
              href: "#services",
            },
          ],
        },
        {
          title: "Sobre Nosotros",
          items: [
            {
              label: "Nuestra Historia",
              href: "#about",
            },
            {
              label: "Nuestro Equipo",
              href: "#team",
            },
            {
              label: "Testimonios",
              href: "#testimonials",
            },
          ],
        },
        {
          title: "Contacto",
          items: [
            {
              label: "Reservar Cita",
              href: "#contact",
            },
            {
              label: "Preguntas Frecuentes",
              href: "#faq",
            },
            {
              label: "Ubicación",
              href: "#contact",
            },
          ],
        },
      ]}
      logoText="Barbería UNDERGROUND"
      copyrightText="© 2024 Barbería UNDERGROUND. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
