"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="mediumSizeLargeTitles"
        background="blurBottom"
        cardStyle="gradient-bordered"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Inicio",          id: "home"},
        {
          name: "Servicios",          id: "services"},
        {
          name: "Productos",          id: "products"},
        {
          name: "Precios",          id: "pricing"},
        {
          name: "Equipo",          id: "team"},
        {
          name: "Testimonios",          id: "testimonials"},
        {
          name: "Contacto",          id: "contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e7f91g"
      logoAlt="GlamourCuts Salon logo"
      brandName="GlamourCuts Salon"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardCarousel
      background={{
        variant: "plain"}}
      title="Transforma tu Estilo en GlamourCuts"
      description="Donde la elegancia se encuentra con la modernidad. Nuestros expertos estilistas están listos para crear el look perfecto para ti."
      tag="Bienvenido"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Reserva Ahora",          href: "#contact"},
        {
          text: "Ver Servicios",          href: "#services"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/skiing-equipment-attire-lobby_482257-102282.jpg",          imageAlt: "Mujer recibiendo un corte de pelo moderno en el salón"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg",          imageAlt: "Interior de un moderno salón de belleza con sillas vacías"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/baking-time-with-best-grandmother_329181-17830.jpg",          imageAlt: "Mujer con cabello rubio brillante después de un tratamiento de color"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg",          imageAlt: "Estilista masculino cortando el cabello de un cliente"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-washed_23-2148108817.jpg",          imageAlt: "Estación de lavado de cabello de lujo en un salón"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229813.jpg",          imageAlt: "Grupo de mujeres riendo y disfrutando en el salón de belleza"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Más de 10 Años de Excelencia"
      description="En GlamourCuts, combinamos técnicas innovadoras con un toque personalizado para cada cliente. Nuestra misión es realzar tu belleza natural y ofrecer una experiencia inolvidable. Cada visita es una oportunidad para que brilles con un estilo único y moderno."
      metrics={[
        {
          value: "10+",          title: "Años de Experiencia"},
        {
          value: "500+",          title: "Clientes Felices Anuales"},
        {
          value: "98%",          title: "Satisfacción del Cliente"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/stylish-businesswoman-posing-with-cup-coffee_23-2147670333.jpg"
      imageAlt="Interior elegante del salón de belleza GlamourCuts"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "corte-y-estilo",          title: "Corte y Estilo Personalizado",          descriptions: [
            "Adaptamos cada corte a tu tipo de cabello y forma de rostro, utilizando las últimas tendencias para un look que te define."],
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg",          imageAlt: "Corte de pelo moderno y estilizado"},
        {
          id: "coloracion-experta",          title: "Coloración Experta y Mechas",          descriptions: [
            "Desde balayage y mechas hasta cambios de color completos, nuestros coloristas utilizan productos premium para resultados espectaculares y duraderos."],
          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771295.jpg",          imageAlt: "Proceso de coloración de cabello vibrante"},
        {
          id: "tratamientos-capilares",          title: "Tratamientos Capilares Premium",          descriptions: [
            "Nutre y repara tu cabello con nuestros tratamientos de hidratación profunda, queratina y cuidado intensivo, devolviéndole su fuerza y brillo natural."],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-doctor-applying-treatment_23-2149311382.jpg",          imageAlt: "Tratamiento capilar de acondicionamiento profundo"},
      ]}
      title="Nuestros Servicios Exclusivos"
      description="Descubre una gama completa de tratamientos de belleza y estilismo diseñados para mimarte y transformar tu look. Desde cortes modernos hasta colores vibrantes, tenemos algo para cada necesidad."
      tag="Servicios"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      products={[
        {
          id: "prod-shampoo",          name: "Champú Reparador",          price: "€25.00",          variant: "500ml",          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-male-beauty-products-with-display_23-2150435211.jpg",          imageAlt: "Botella de champú reparador de lujo"},
        {
          id: "prod-conditioner",          name: "Acondicionador Hidratante",          price: "€28.00",          variant: "500ml",          imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965810.jpg",          imageAlt: "Botella de acondicionador hidratante"},
        {
          id: "prod-mask",          name: "Mascarilla Revitalizante",          price: "€35.00",          variant: "250g",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-body-butter-lavender-plain-background_23-2148305537.jpg",          imageAlt: "Tarro de mascarilla capilar revitalizante"},
        {
          id: "prod-serum",          name: "Sérum Brillo Intenso",          price: "€40.00",          variant: "100ml",          imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-feminine-ginger-woman-with-long-hair-reclines-mirror-table-with-bottle-lotion_171337-949.jpg",          imageAlt: "Botella de sérum de brillo intenso para el cabello"},
        {
          id: "prod-gel",          name: "Gel Fijador Extra Fuerte",          price: "€22.00",          variant: "200ml",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-slugging-night-routine_23-2150396588.jpg",          imageAlt: "Gel fijador extra fuerte para el cabello"},
        {
          id: "prod-spray",          name: "Spray Protector Térmico",          price: "€30.00",          variant: "200ml",          imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307278.jpg",          imageAlt: "Spray protector térmico para el cabello"},
      ]}
      title="Productos Premium para tu Cabello"
      description="En GlamourCuts, seleccionamos cuidadosamente los mejores productos de cuidado y estilismo para garantizar que tu cabello luzca y se sienta increíble, tanto dentro como fuera del salón."
      tag="Productos"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basico",          tag: "Esencial",          tagIcon: Sparkles,
          price: "€45",          period: "Corte y peinado básico",          description: "Ideal para un cambio de look rápido y mantenimiento regular.",          button: {
            text: "Reservar Básico"},
          featuresTitle: "Incluye:",          features: [
            "Corte de cabello",            "Lavado y acondicionamiento",            "Secado y peinado simple"],
        },
        {
          id: "premium",          tag: "Popular",          tagIcon: Sparkles,
          price: "€85",          period: "Color y estilo completo",          description: "Para quienes buscan una transformación de color con un estilismo impecable.",          button: {
            text: "Reservar Premium"},
          featuresTitle: "Incluye:",          features: [
            "Corte de cabello",            "Coloración completa o mechas",            "Tratamiento hidratante",            "Peinado profesional"],
        },
        {
          id: "lujo",          tag: "Exclusivo",          tagIcon: Sparkles,
          price: "€150",          period: "Experiencia de transformación total",          description: "El paquete definitivo para un cambio de imagen completo y un cuidado capilar de lujo.",          button: {
            text: "Reservar Lujo"},
          featuresTitle: "Incluye:",          features: [
            "Consulta de estilo avanzada",            "Corte y color personalizado",            "Tratamiento intensivo de queratina",            "Peinado de alta costura",            "Masaje capilar relajante"],
        },
      ]}
      title="Nuestros Paquetes de Estilismo"
      description="Encuentra el servicio perfecto que se adapte a tus necesidades y presupuesto. Ofrecemos una variedad de paquetes para garantizar que siempre salgas luciendo y sintiéndote lo mejor posible."
      tag="Precios"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      groups={[
        {
          id: "estilistas-principales",          groupTitle: "Nuestros Estilistas Estrellas",          members: [
            {
              id: "estilista-ana",              title: "Ana García",              subtitle: "Directora Creativa",              detail: "Especialista en coloraciones de fantasía y cortes avant-garde. Con más de 15 años de experiencia, Ana es una visionaria en el mundo del estilismo.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-female-barber-wearing-glasses-uniform-holding-combs-looking-camera-stretching-hair-spray-out-towards-camera-isolated-olive-green-background_141793-137022.jpg",              imageAlt: "Retrato de Ana García, Directora Creativa"},
            {
              id: "estilista-marco",              title: "Marco Ruiz",              subtitle: "Experto en Estilismo Masculino",              detail: "Maestro en el arte del barbero clásico y las tendencias modernas para hombres. Marco garantiza un corte impecable y un look sofisticado.",              imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-front-his-studio_23-2149479271.jpg",              imageAlt: "Retrato de Marco Ruiz, Experto en Estilismo Masculino"},
            {
              id: "estilista-sofia",              title: "Sofía López",              subtitle: "Especialista en Tratamientos",              detail: "Conocedora de los tratamientos capilares más innovadores, Sofía restaura la salud y el brillo de tu cabello, dejándolo radiante.",              imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-playing-with-party-accesories_1187-4022.jpg",              imageAlt: "Retrato de Sofía López, Especialista en Tratamientos"},
          ],
        },
      ]}
      title="Conoce a Nuestro Equipo de Estilistas"
      description="Nuestros talentosos estilistas están dedicados a transformar tu visión en realidad. Con años de experiencia y una pasión por la belleza, cada miembro de nuestro equipo se compromete a ofrecerte un servicio excepcional."
      tag="Equipo"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t-sarah",          title: "¡Mi Cabello Nunca Lució Tan Bien!",          quote: "Estoy absolutamente encantada con mi nuevo corte y color. El equipo de GlamourCuts es increíblemente talentoso y profesional. ¡Volveré pronto!",          name: "Laura Fernández",          role: "Cliente Satisfecha",          imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-talking-by-mobile-phone-home_329181-4277.jpg",          imageAlt: "Retrato de Laura Fernández"},
        {
          id: "t-michael",          title: "El Mejor Corte Masculino de la Ciudad",          quote: "Marco siempre acierta con mi estilo. El ambiente es genial y la atención al detalle es impecable. ¡Altamente recomendado para hombres que buscan calidad!",          name: "Diego Sánchez",          role: "Cliente Habitual",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-father-posing-home-with-thumbs-up_23-2148853977.jpg",          imageAlt: "Retrato de Diego Sánchez"},
        {
          id: "t-emily",          title: "Resultados de Color que Superaron Mis Expectativas",          quote: "Ana hizo magia con mi cabello. El balayage es perfecto y el brillo es increíble. ¡Por fin encontré mi salón de confianza para el color!",          name: "Elena Torres",          role: "Apasionada del Color",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-attractive-party-girl-pink-wig-bright-makeup-looking-excited-smiling-standing_1258-18964.jpg",          imageAlt: "Retrato de Elena Torres"},
        {
          id: "t-david",          title: "Experiencia de Lujo y Cabello Saludable",          quote: "Los tratamientos de Sofía han transformado mi cabello. Se siente más fuerte y suave que nunca. La atención es de primera clase y siempre salgo relajada y feliz.",          name: "María José",          role: "Buscadora de Bienestar",          imageSrc: "http://img.b2bpic.net/free-photo/woman-talking-florist-shop_23-2147761057.jpg",          imageAlt: "Retrato de María José"},
        {
          id: "t-sophia",          title: "Un Salón con Verdaderos Profesionales",          quote: "Cada visita a GlamourCuts es un placer. La calidad del servicio, la amabilidad del personal y los resultados espectaculares me hacen una clienta leal. ¡No lo cambio por nada!",          name: "Isabel Ruiz",          role: "Clienta Fiel",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-with-glasses_23-2148415937.jpg",          imageAlt: "Retrato de Isabel Ruiz"},
      ]}
      title="Lo Que Dicen Nuestros Clientes"
      description="Las experiencias de nuestros clientes hablan por sí mismas. Descubre por qué GlamourCuts es el salón de belleza preferido para quienes buscan calidad, estilo y un servicio inigualable."
      tag="Testimonios"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Reserva Fácil"
      title="Contacta con Nosotros"
      description="Programa tu cita hoy mismo o visítanos en nuestro salón. Estamos listos para darte la bienvenida y ayudarte a encontrar el look perfecto. ¡Esperamos verte pronto!"
      tagIcon={Sparkles}
      tagAnimation="slide-up"
      inputPlaceholder="Tu correo electrónico"
      buttonText="Enviar Mensaje"
      termsText="Al hacer clic en 'Enviar Mensaje', confirmas que estás de acuerdo con nuestros Términos y Condiciones."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="GlamourCuts"
      columns={[
        {
          title: "Servicios",          items: [
            {
              label: "Cortes",              href: "#services"},
            {
              label: "Coloración",              href: "#services"},
            {
              label: "Tratamientos",              href: "#services"},
            {
              label: "Estilismo",              href: "#services"},
          ],
        },
        {
          title: "Salón",          items: [
            {
              label: "Sobre Nosotros",              href: "#about"},
            {
              label: "Nuestro Equipo",              href: "#team"},
            {
              label: "Productos",              href: "#products"},
            {
              label: "Preguntas Frecuentes",              href: "#"},
          ],
        },
        {
          title: "Contacto",          items: [
            {
              label: "Reserva tu Cita",              href: "#contact"},
            {
              label: "Ubicación",              href: "#"},
            {
              label: "Email",              href: "mailto:info@glamourcuts.com"},
            {
              label: "Teléfono",              href: "tel:+34123456789"},
          ],
        },
      ]}
      copyrightText="© 2024 GlamourCuts Salon. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
