"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Inicio",          id: "#hero"},
        {
          name: "Nosotros",          id: "#about"},
        {
          name: "Servicios",          id: "#services"},
        {
          name: "Productos",          id: "#products"},
        {
          name: "Equipo",          id: "#team"},
        {
          name: "Testimonios",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contacto",          id: "#contact"},
      ]}
      brandName="Indira Pérez Salón & Barber Shop"
      button={{
        text: "Reservar Cita",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Transforma Tu Estilo en Indira Pérez Salón & Barber Shop"
      description="Experimenta un servicio de peluquería y barbería excepcional. Cuidado, amor y atención en cada detalle para un cabello hermoso y un look perfecto."
      tag="5 Estrellas de Excelencia"
      tagAnimation="opacity"
      buttons={[
        {
          text: "Reservar Cita",          href: "#contact"},
        {
          text: "Ver Servicios",          href: "#services"},
      ]}
      buttonAnimation="opacity"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6346.jpg",          imageAlt: "Woman getting her hair styled at Indira Pérez Salón"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-applying-cream-clients-beard_107420-94771.jpg",          imageAlt: "Barber providing a shave at Indira Pérez Barber Shop"
        }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="(10+ opiniones)"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Más que un Salón, una Experiencia de Cuidado y Belleza"
      buttons={[
        {
          text: "Conoce a Indira",          href: "#team"},
      ]}
      buttonAnimation="opacity"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "haircut",          title: "Cortes y Peinados",          subtitle: "Estilos modernos y clásicos para todas las edades.",          category: "Peluquería",          value: "Desde $25"},
        {
          id: "beard-trim",          title: "Arreglo de Barba",          subtitle: "Cuidado detallado para una barba impecable.",          category: "Barbería",          value: "Desde $15"},
        {
          id: "color",          title: "Color y Mechas",          subtitle: "Transformaciones de color vibrantes y naturales.",          category: "Peluquería",          value: "Desde $60"},
        {
          id: "manicure",          title: "Manicure y Pedicure",          subtitle: "Cuidado completo para manos y pies.",          category: "Belleza",          value: "Desde $20"},
        {
          id: "wash",          title: "Lavado y Tratamientos",          subtitle: "Terapias capilares para la salud de tu cabello.",          category: "Spa Capilar",          value: "Desde $30"},
        {
          id: "waxing",          title: "Depilación",          subtitle: "Servicios de depilación facial y corporal.",          category: "Estética",          value: "Desde $10"},
      ]}
      title="Nuestros Servicios Exclusivos"
      description="Ofrecemos una amplia gama de tratamientos y estilos para hombres y mujeres, utilizando productos de alta calidad para resultados espectaculares."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "prod-1",          name: "Shampoo Hidratante Deluxe",          price: "$29.99",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plastic-bottles-pink-background_23-2149449755.jpg",          imageAlt: "Shampoo Hidratante Deluxe bottle"},
        {
          id: "prod-2",          name: "Acondicionador Reparador",          price: "$29.99",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-dispenser-liquid-soap-female-hands-store_169016-52052.jpg",          imageAlt: "Acondicionador Reparador bottle"},
        {
          id: "prod-3",          name: "Aceite Esencial para Brillo",          price: "$34.50",          imageSrc: "http://img.b2bpic.net/free-photo/assortment-natural-argan-oil-dropper_23-2149016627.jpg",          imageAlt: "Aceite Esencial para Brillo bottle"},
        {
          id: "prod-4",          name: "Gel Fijador Extra Fuerte",          price: "$18.00",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317383.jpg",          imageAlt: "Gel Fijador Extra Fuerte jar"},
        {
          id: "prod-5",          name: "Mascarilla Nutritiva Capilar",          price: "$42.00",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-care-product_23-2151918420.jpg",          imageAlt: "Mascarilla Nutritiva Capilar tub"},
        {
          id: "prod-6",          name: "Spray Protector Térmico",          price: "$22.75",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-using-dry-shampoo_23-2150704971.jpg",          imageAlt: "Spray Protector Térmico bottle"},
      ]}
      title="Productos Recomendados para un Cuidado Duradero"
      description="Mantén tu estilo y la salud de tu cabello en casa con nuestra selección de productos profesionales."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTen
      useInvertedBackground={false}
      title="Conoce a Nuestra Experta Estilista"
      tag="Pasión y Precisión"
      membersAnimation="slide-up"
      members={[
        {
          id: "indira",          name: "Indira Pérez",          imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg",          imageAlt: "Indira Pérez, dueña y estilista principal"},
        {
          id: "stylist-1",          name: "Carlos Rodríguez",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg",          imageAlt: "Carlos Rodríguez, barbero experto"},
        {
          id: "stylist-2",          name: "Laura García",          imageSrc: "http://img.b2bpic.net/free-photo/baking-time-with-best-grandmother_329181-17830.jpg",          imageAlt: "Laura García, especialista en uñas y estética"},
      ]}
      memberVariant="card"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Wendy Perez",          date: "Hace un año",          title: "Manos Increíbles y Cuidado Excepcional",          quote: "Sin duda alguna sus manos son increíbles. Siempre deja el cabello hermoso y lo cuida súper bien. Se nota que le pone toda la atención y el amor a cada detalle de su trabajo, y el resultado siempre es perfecto. El cabello queda brillante y saludable.",          tag: "Peluquería",          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-bride-young-woman-with-wedding-hairstyle-silk-robe-drinking-looking-bridesmaids-gray-style-robes-standing-spacious-room-near-window_8353-12010.jpg",          avatarAlt: "Avatar de Wendy Perez",          imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6346.jpg",          imageAlt: "happy woman after haircut smiling"},
        {
          id: "2",          name: "Wendy Franco",          date: "Hace 11 meses",          title: "Excelente Profesional y Gran Ser Humano",          quote: "Sin duda alguna una excelente profesional y gran ser humano, tengo la dicha de ser su clienta y trabaja hermoso...",          tag: "Servicio",          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg",          avatarAlt: "Avatar de Wendy Franco",          imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-applying-cream-clients-beard_107420-94771.jpg",          imageAlt: "happy woman after haircut smiling"},
        {
          id: "3",          name: "Mari Medina",          date: "Hace un año",          title: "Experiencia Espectacular y Trabajo Pulido",          quote: "Mi experiencia en el salón de Indira fue espectacular, iniciando por la actitud a la hora de atender a los clientes; Como tal el trabajo que realiza es muy pulido y te deja con un resultado encantador!!! 100% recomendado.",          tag: "Atención",          avatarSrc: "http://img.b2bpic.net/free-photo/female-visagiste-with-client-smiling-camera_23-2148113181.jpg",          avatarAlt: "Avatar de Mari Medina",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barber-shop-concept_23-2148506323.jpg",          imageAlt: "happy woman after haircut smiling"},
        {
          id: "4",          name: "Sofía G.",          date: "Hace 8 meses",          title: "Mi Nuevo Look Favorito",          quote: "Indira realmente escucha lo que quieres y lo transforma en algo aún mejor. Amé mi corte y color. ¡Volveré seguro!",          tag: "Estilo",          avatarSrc: "http://img.b2bpic.net/free-photo/male-female-friends-getting-manicure-together_23-2150285918.jpg",          avatarAlt: "Avatar de Sofía G.",          imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-moustache-client_23-2147778841.jpg",          imageAlt: "happy woman after haircut smiling"},
        {
          id: "5",          name: "Juan M.",          date: "Hace 6 meses",          title: "La Mejor Barbería de Floridablanca",          quote: "El servicio de barbería es impecable. Un ambiente excelente y un corte de barba con mucha precisión. Muy recomendado para caballeros.",          tag: "Barbería",          avatarSrc: "http://img.b2bpic.net/free-photo/young-lady-keeping-fingers-crossed-white-bathrobe-towel-looking-thoughtful-front-view_176474-50997.jpg",          avatarAlt: "Avatar de Juan M.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167366.jpg",          imageAlt: "happy woman after haircut smiling"},
        {
          id: "6",          name: "Camila R.",          date: "Hace 4 meses",          title: "Relajación y Profesionalismo",          quote: "Cada visita es un momento de desconexión. Me encantan los tratamientos capilares y la atención tan cálida. Se nota la dedicación.",          tag: "Spa",          avatarSrc: "http://img.b2bpic.net/free-photo/mid-aged-couple-love-home_23-2147986300.jpg",          avatarAlt: "Avatar de Camila R.",          imageSrc: "http://img.b2bpic.net/free-photo/careful-female-messeur-giving-foot-massage-bright-room_176420-55238.jpg",          imageAlt: "happy woman after haircut smiling"},
      ]}
      title="Lo Que Dicen Nuestros Clientes Felices"
      description="La satisfacción de nuestros clientes es nuestra mayor motivación. Lee algunas de sus experiencias y descubre por qué nos eligen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "¿Cómo puedo reservar una cita?",          content: "Puedes reservar tu cita directamente a través de nuestro botón 'Reservar Cita' en la página web o llamándonos al 350 4579308."},
        {
          id: "q2",          title: "¿Cuáles son sus horarios de atención?",          content: "Estamos abiertos de miércoles a sábado, de 9 a.m. a 7 p.m. Te recomendamos revisar nuestra sección de contacto para horarios actualizados y días festivos."},
        {
          id: "q3",          title: "¿Ofrecen servicios para hombres y mujeres?",          content: "Sí, en Indira Pérez Salón & Barber Shop ofrecemos una gama completa de servicios tanto para hombres como para mujeres, incluyendo peluquería, barbería, manicure, pedicure y más."},
        {
          id: "q4",          title: "¿Qué tipos de productos utilizan?",          content: "Trabajamos con productos profesionales de alta calidad, seleccionados para garantizar los mejores resultados y el máximo cuidado para tu cabello y piel. También tenemos algunos disponibles para compra."},
        {
          id: "q5",          title: "¿Puedo cancelar o modificar mi cita?",          content: "Sí, puedes cancelar o modificar tu cita con al menos 24 horas de anticipación. Te pedimos que nos contactes directamente para realizar estos cambios."},
        {
          id: "q6",          title: "¿Ofrecen tratamientos capilares específicos?",          content: "Sí, contamos con una variedad de tratamientos capilares personalizados para hidratación, reparación, control de caída y brillo, adaptados a las necesidades de tu cabello."},
      ]}
      title="¿Tienes Preguntas? Resolvemos Tus Dudas"
      description="Encuentra respuestas a las preguntas más frecuentes sobre nuestros servicios, citas y más."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Visítanos Hoy"
      title="Contáctanos o Agenda Tu Cita"
      description="Estamos listos para atenderte. Escríbenos o haz tu reserva en línea para experimentar la diferencia Indira Pérez."
      inputPlaceholder="Tu Correo Electrónico"
      buttonText="Enviar Mensaje"
      termsText="Al enviar, aceptas nuestros Términos y Condiciones."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-vector/retro-labels-collection_1009-305.jpg"
      logoAlt="Indira Pérez Salón & Barber Shop Logo"
      columns={[
        {
          items: [
            {
              label: "Inicio",              href: "#hero"},
            {
              label: "Nosotros",              href: "#about"},
            {
              label: "Servicios",              href: "#services"},
          ],
        },
        {
          items: [
            {
              label: "Testimonios",              href: "#testimonials"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contacto",              href: "#contact"},
          ],
        },
        {
          items: [
            {
              label: "Política de Privacidad",              href: "#"},
            {
              label: "Términos y Condiciones",              href: "#"},
          ],
        },
      ]}
      logoText="Indira Pérez Salón & Barber Shop"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
