"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Scissors, Star, Sparkles, Palette, MessageSquare } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Studio Barber Paul"
          navItems={[
            { name: "Inicio", id: "#hero" },
            { name: "Nosotros", id: "#nosotros" },
            { name: "Servicios", id: "#servicios" },
            { name: "Paquetes", id: "#paquetes" },
            { name: "Testimonios", id: "#testimonios" },
            { name: "FAQ", id: "#faq" },
            { name: "Contacto", id: "#contacto" }
          ]}
          button={{ text: "Reservar Cita", href: "#contacto" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Studio Barber Paul"
          description="Experimente un aseo meticuloso, refrescos de cortesía y atención personalizada en nuestro cómodo estudio. Desde cortes clásicos hasta paquetes para bodas, cada detalle importa."
          buttons={[{ text: "Reservar Cita Ahora", href: "#contacto" }]}
          imageSrc="http://img.b2bpic.net/free-photo/chairs-green-male-barbershop-retro-style_627829-8284.jpg"
          imageAlt="Barbería de lujo en Guayaquil"
          showDimOverlay={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="nosotros" data-section="nosotros">
        <MetricSplitMediaAbout
          tag="Nosotros"
          title="Nuestra Experiencia y Compromiso en Estilo"
          description="En Studio Barber Paul, nos dedicamos a ofrecer un servicio superior. Con años de experiencia y un compromiso inquebrantable con la excelencia, cada visita es una promesa de calidad y satisfacción. Disfrute de un ambiente relajante y la precisión de nuestros expertos."
          metrics={[
            { value: "+10", title: "Años de Experiencia" },
            { value: "+5000", title: "Clientes Satisfechos" },
            { value: "5 Estrellas", title: "Calificación Promedio" }
          ]}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg"
          imageAlt="Barbero profesional cortando el pelo a un cliente"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      <div id="servicios" data-section="servicios">
        <FeatureBento
          tag="Servicios"
          title="Descubra Nuestros Servicios Exclusivos"
          description="Ofrecemos una gama completa de servicios de aseo personal, diseñados para el hombre moderno. Experimente la perfección en cada corte, afeitado y tratamiento, garantizando que siempre luzca su mejor versión."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            { title: "Corte Clásico y Moderno", description: "Estilos atemporales y las últimas tendencias, adaptados a su personalidad.", bentoComponent: "reveal-icon", icon: Scissors },
            { title: "Afeitado con Toalla Caliente", description: "Una experiencia de afeitado de lujo que refresca y revitaliza la piel.", bentoComponent: "reveal-icon", icon: Scissors },
            { title: "Recorte y Estilo de Barba", description: "Definición experta para una barba impecable y con carácter.", bentoComponent: "reveal-icon", icon: Star },
            { title: "Tratamientos Faciales", description: "Cuidados especializados para mantener su piel sana y radiante.", bentoComponent: "reveal-icon", icon: Sparkles },
            { title: "Paquetes para Novios", description: "Servicios de aseo coordinados para el novio y su cortejo el día especial.", bentoComponent: "reveal-icon", icon: Star },
            { title: "Coloración de Cabello y Barba", description: "Realce su estilo con un toque de color discreto y profesional.", bentoComponent: "reveal-icon", icon: Palette }
          ]}
        />
      </div>

      <div id="paquetes" data-section="paquetes">
        <ProductCardTwo
          tag="Especialidades"
          title="Paquetes y Tratamientos Premium"
          description="Explore nuestras combinaciones exclusivas de servicios para una experiencia de aseo completa y personalizada, con descuentos especiales."
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          useInvertedBackground={false}
          textboxLayout="default"
          products={[
            { id: "1", brand: "Studio Barber Paul", name: "Paquete Caballero", price: "$35", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/smiling-slavic-middle-aged-male-barber-uniform-holding-hair-clippers-showing-thumb-up-isolated-pink-wall_141793-90700.jpg", imageAlt: "Paquete Caballero" },
            { id: "2", brand: "Studio Barber Paul", name: "Afeitado de Lujo", price: "$25", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-combing-beard-watering-with-spray-bottle-isolated-purple-wall_141793-82950.jpg", imageAlt: "Afeitado de Lujo" },
            { id: "3", brand: "Studio Barber Paul", name: "Estilo Urbano", price: "$40", rating: 5, reviewCount: "98", imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-unhappy-guy-youngster-dressed-sweatshirt-holds-two-aerosol-bottles-makes-creative-graffiti-street-wall-has-dissatisfied-expression_273609-47408.jpg", imageAlt: "Estilo Urbano" },
            { id: "4", brand: "Studio Barber Paul", name: "Ritual Completo", price: "$60", rating: 5, reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-sitting-armchair-barber-shop-while-hairdresser-modeling-beard-with-scissors-comb-barbershop_613910-18515.jpg", imageAlt: "Ritual Completo" },
            { id: "5", brand: "Studio Barber Paul", name: "Pre-Boda Élite", price: "$80", rating: 5, reviewCount: "60", imageSrc: "http://img.b2bpic.net/free-photo/couple-love-drinking-tea_23-2147805619.jpg", imageAlt: "Pre-Boda Élite" },
            { id: "6", brand: "Studio Barber Paul", name: "Renovación Facial", price: "$30", rating: 5, reviewCount: "75", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-massaging-cheeks_23-2148882207.jpg", imageAlt: "Renovación Facial" }
          ]}
        />
      </div>

      <div id="precios" data-section="precios">
        <PricingCardTwo
          tag="Tarifas"
          title="Nuestros Precios Transparentes"
          description="Ofrecemos diferentes opciones para adaptarse a sus necesidades, siempre con la calidad y el servicio que nos caracterizan."
          animationType="slide-up"
          useInvertedBackground={false}
          textboxLayout="default"
          plans={[
            { id: "basic", badge: "Básico", price: "$20", subtitle: "Corte de Cabello", buttons: [{ text: "Reservar", href: "#contacto" }], features: ["Corte personalizado", "Lavado y peinado", "Consulta de estilo"] },
            { id: "premium", badge: "Popular", badgeIcon: Sparkles, price: "$35", subtitle: "Corte y Afeitado Clásico", buttons: [{ text: "Reservar", href: "#contacto" }], features: ["Corte personalizado", "Afeitado con toalla caliente", "Masaje facial", "Lavado y peinado"] },
            { id: "elite", badge: "Completo", price: "$50", subtitle: "Transformación Total", buttons: [{ text: "Reservar", href: "#contacto" }], features: ["Corte de diseño", "Afeitado de lujo", "Tratamiento facial", "Masaje capilar", "Peinado profesional"] }
          ]}
        />
      </div>

      <div id="testimonios" data-section="testimonios">
        <TestimonialCardFifteen
          testimonial="Studio Barber Paul me dio el mejor corte de mi vida. El ambiente es increíble, el personal súper amable y los refrescos son un gran toque. ¡Totalmente recomendado!"
          rating={5}
          author="Carlos M., Empresario"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-holding-hand-his-chest-looking-camera-with-smile-face-standing-white-background_141793-54049.jpg", alt: "Avatar de cliente 1" },
            { src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-hat_23-2149213174.jpg", alt: "Avatar de cliente 2" },
            { src: "http://img.b2bpic.net/free-photo/female-shine-attractive-portrait-brunette_1303-570.jpg", alt: "Avatar de cliente 3" },
            { src: "http://img.b2bpic.net/free-photo/shopping-girl-taking-selfie_23-2148023287.jpg", alt: "Avatar de cliente 4" },
            { src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-therapy_23-2148928793.jpg", alt: "Avatar de cliente 5" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          tag="Ayuda"
          title="¿Tienes Preguntas? Aquí Están Las Respuestas"
          description="Resolvemos tus dudas más comunes sobre nuestros servicios, horarios y proceso de reserva para que tu experiencia sea perfecta."
          mediaPosition="right"
          imageSrc="http://img.b2bpic.net/free-photo/close-up-student-holding-coloured-number_23-2148552315.jpg"
          imageAlt="Representación de preguntas frecuentes y servicio al cliente"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          textboxLayout="default"
          faqs={[
            { id: "q1", title: "¿Cómo puedo reservar una cita?", content: "Puedes reservar tu cita directamente en nuestro sitio web a través de nuestro formulario de contacto o llamándonos al número que figura en la sección de Contacto." },
            { id: "q2", title: "¿Cuáles son sus horarios de atención?", content: "Estamos abiertos de Martes a Sábado, de 9:00 AM a 7:00 PM. Recomendamos revisar nuestra sección de contacto para horarios específicos y festivos." },
            { id: "q3", title: "¿Ofrecen servicios para bodas y eventos especiales?", content: "Sí, tenemos paquetes de aseo personalizados para novios y grupos de boda. Por favor, contáctanos para una consulta y presupuesto." }
          ]}
        />
      </div>

      <div id="contacto" data-section="contacto">
        <ContactSplit
          tag="Contacto"
          title="Reserva Tu Cita y Visítanos"
          description="Estamos listos para transformarte. Contáctanos para cualquier consulta o reserva directamente tu experiencia premium."
          buttonText="Enviar Mensaje"
          imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg"
          imageAlt="Exterior de Studio Barber Paul en Guayaquil"
          mediaPosition="left"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          background={{ variant: "downward-rays-animated" }}
          inputPlaceholder="Tu correo electrónico"
          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">
        <FooterBase
          logoText="Studio Barber Paul"
          copyrightText="© 2024 Studio Barber Paul. Todos los derechos reservados."
          columns={[
            { title: "Servicios", items: [{ label: "Cortes", href: "#servicios" }, { label: "Afeitados", href: "#servicios" }, { label: "Tratamientos", href: "#servicios" }] },
            { title: "Compañía", items: [{ label: "Nosotros", href: "#nosotros" }, { label: "Testimonios", href: "#testimonios" }, { label: "FAQ", href: "#faq" }] },
            { title: "Legal", items: [{ label: "Política de Privacidad", href: "#" }, { label: "Términos de Servicio", href: "#" }] }
          ]}
        />
      </div>

      {/* Floating WhatsApp Button */}
      <a
        href="https://wa.me/+59354384933"
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 z-50 w-20 h-20 bg-green-500 rounded-full flex items-center justify-center shadow-lg hover:bg-green-600 transition-colors duration-300"
        aria-label="WhatsApp"
      >
        <MessageSquare className="w-10 h-10 text-white" />
      </a>
    </ThemeProvider>
  );
}
