"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="large"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Inicio",
          id: "#inicio",
        },
        {
          name: "Nosotros",
          id: "#nosotros",
        },
        {
          name: "Servicios",
          id: "#servicios",
        },
        {
          name: "Galería",
          id: "#galeria",
        },
        {
          name: "Contacto",
          id: "#contacto",
        },
      ]}
      brandName="Quirozbarbershop 2"
    />
  </div>

  <div id="inicio" data-section="inicio">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static-grid",
      }}
      title="Estilo y Precisión en Cada Corte"
      description="Transformamos tu imagen, realzamos tu esencia. Descubre la experiencia Quirozbarbershop 2, tu santuario de estilo en Santo Domingo."
      buttons={[
        {
          text: "Agendar Cita en Instagram",
          href: "https://www.instagram.com/quirozbarbershop_2",
        },
        {
          text: "Ver Ubicación",
          href: "#contacto",
        },
      ]}
      buttonAnimation="slide-up"
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg",
          imageAlt: "Barber cutting textured hair",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-towels-looking-up_23-2148541337.jpg",
          imageAlt: "Luxury barbershop interior",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-shaving-beard-barbershop_1303-26260.jpg",
          imageAlt: "Client getting a modern haircut",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg",
          imageAlt: "Clean and stylish barber station",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-groomed_23-2150668472.jpg",
          imageAlt: "Barber detailing a beard",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg",
          imageAlt: "Happy client after a haircut",
        },
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="nosotros" data-section="nosotros">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Tu Espacio, Tu Estilo. La Experiencia Quirozbarbershop 2.",
        },
      ]}
    />
  </div>

  <div id="servicios" data-section="servicios">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-items-per-row"
      useInvertedBackground={false}
      features={[
        {
          title: "Cortes Clásicos y Modernos",
          description: "Desde el degradado más nítido hasta el corte más atemporal, nuestros barberos dominan cada técnica para realzar tu estilo personal.",
          imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg",
          imageAlt: "Scissors and comb",
        },
        {
          title: "Diseño de Barba y Afeitado Profesional",
          description: "Perfila, define y embellece tu barba con nuestros expertos, utilizando productos de alta calidad para un acabado impecable.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-naked-man-expertising-his-face-before-shaving_171337-17246.jpg",
          imageAlt: "Man with styled beard",
        },
        {
          title: "Rituales de Toallas Calientes",
          description: "Una experiencia de relajación profunda. Disfruta de la sensación revitalizante de nuestras toallas calientes, preparando tu piel para un afeitado perfecto o simplemente para desestresarte.",
          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-near-blurred-stylist_23-2147778876.jpg",
          imageAlt: "Hot towel on man's face",
        },
        {
          title: "Pigmentación y Airbrush Capilar",
          description: "Realza la densidad de tu cabello o barba y define tus líneas con nuestra técnica de pigmentación y airbrush, logrando un look más joven y vibrante.",
          imageSrc: "http://img.b2bpic.net/free-photo/hair-stylist-making-styling-beard-client-salon_23-2148181978.jpg",
          imageAlt: "Airbrush on hair",
        },
        {
          title: "Combos Exclusivos de Lavado y Cuidado",
          description: "Revitaliza tu cabello con nuestros tratamientos de lavado profundo y acondicionamiento. Diseñados para nutrir, fortalecer y darle brillo a tu melena.",
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205879.jpg",
          imageAlt: "Hair wash in barbershop",
        },
      ]}
      title="Nuestros Servicios Premium"
      description="Expertos en el arte de la barbería, te ofrecemos una gama completa de servicios para un look impecable y una experiencia inigualable."
    />
  </div>

  <div id="horarios" data-section="horarios">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "horarios-extendidos",
          value: "Horarios Extendidos",
          title: "Siempre a tu Disposición",
          items: [
            "Lunes a Viernes: 9 AM - 9 PM",
            "Sábados y Domingos: 7:30 AM - 10 PM",
          ],
        },
        {
          id: "metodos-pago",
          value: "Pagos Flexibles",
          title: "Comodidad en Cada Transacción",
          items: [
            "Aceptamos todas las tarjetas de crédito y débito",
            "Pagos sin contacto vía NFC",
          ],
        },
        {
          id: "ambiente-exclusivo",
          value: "Ambiente Premium",
          title: "Un Espacio para Disfrutar",
          items: [
            "Música selecta y ambiente relajado",
            "WiFi de alta velocidad",
            "Bebidas refrescantes de cortesía",
          ],
        },
      ]}
      title="Flexibilidad y Confort"
      description="Tu tiempo es valioso, y tu comodidad nuestra prioridad. Disfruta de horarios extendidos y opciones de pago modernas en un ambiente inigualable."
    />
  </div>

  <div id="galeria" data-section="galeria">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "cut-1",
          brand: "QUIROZBARBERSHOP 2",
          name: "Fade Texturizado",
          price: "Desde $600 DOP",
          rating: 5,
          reviewCount: "200+",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-man_23-2148323636.jpg",
          imageAlt: "Textured fade haircut",
        },
        {
          id: "cut-2",
          brand: "QUIROZBARBERSHOP 2",
          name: "Barba Esculpida",
          price: "Desde $400 DOP",
          rating: 5,
          reviewCount: "150+",
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-showing-his-glowing-skin_23-2149396131.jpg",
          imageAlt: "Sculpted beard design",
        },
        {
          id: "cut-3",
          brand: "QUIROZBARBERSHOP 2",
          name: "Clásico con Raya",
          price: "Desde $500 DOP",
          rating: 4,
          reviewCount: "120+",
          imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-talking-phone-city_1153-8202.jpg",
          imageAlt: "Classic parted haircut",
        },
        {
          id: "cut-4",
          brand: "QUIROZBARBERSHOP 2",
          name: "Barba Minimalista",
          price: "Desde $350 DOP",
          rating: 5,
          reviewCount: "90+",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shirtless-stubble-man-against-white-background_23-2148213286.jpg",
          imageAlt: "Minimalist beard style",
        },
        {
          id: "cut-5",
          brand: "QUIROZBARBERSHOP 2",
          name: "Afro Moderno",
          price: "Desde $700 DOP",
          rating: 5,
          reviewCount: "70+",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-holding-hair_1301-2027.jpg",
          imageAlt: "Modern afro haircut",
        },
        {
          id: "cut-6",
          brand: "QUIROZBARBERSHOP 2",
          name: "Diseño Geométrico",
          price: "Desde $800 DOP",
          rating: 5,
          reviewCount: "110+",
          imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-his-beard-pop-art-style_53876-126862.jpg",
          imageAlt: "Geometric hair design",
        },
      ]}
      title="Nuestra Galería: Estilo en Acción"
      description="Explora la maestría de nuestros barberos. Cada corte, un testimonio de precisión y tendencia. Síguenos en Instagram @quirozbarbershop_2 para más inspiración y transformaciones."
    />
  </div>

  <div id="testimonios" data-section="testimonios">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      testimonials={[
        {
          id: "1",
          name: "Carlos M.",
          role: "Empresario",
          company: "Santo Domingo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg",
          imageAlt: "Carlos M. - Cliente satisfecho",
        },
        {
          id: "2",
          name: "Javier R.",
          role: "Marketing Digital",
          company: "Santo Domingo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60317.jpg",
          imageAlt: "Javier R. - Cliente satisfecho",
        },
        {
          id: "3",
          name: "Luis P.",
          role: "Estudiante",
          company: "Santo Domingo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-yellow-scene_23-2148184564.jpg",
          imageAlt: "Luis P. - Cliente satisfecho",
        },
        {
          id: "4",
          name: "Ricardo S.",
          role: "Abogado",
          company: "Santo Domingo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg",
          imageAlt: "Ricardo S. - Cliente satisfecho",
        },
        {
          id: "5",
          name: "Miguel A.",
          role: "Diseñador Gráfico",
          company: "Santo Domingo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-bearded-man-sunglasses-dark-background_613910-12554.jpg",
          imageAlt: "Miguel A. - Cliente satisfecho",
        },
      ]}
      title="Lo Que Dicen Nuestros Clientes"
      description="La satisfacción es nuestra mejor carta de presentación. Escucha las experiencias de quienes ya confían en Quirozbarbershop 2 para mantener su estilo impecable."
    />
  </div>

  <div id="contacto" data-section="contacto">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contacto"
      title="Visítanos o Contáctanos"
      description="Estamos listos para transformar tu estilo. Encuéntranos fácilmente en Santo Domingo o llámanos para agendar tu cita."
      buttons={[
        {
          text: "Llamar Ahora",
          href: "tel:+18097162090",
        },
        {
          text: "Ver en Google Maps",
          href: "https://maps.app.goo.gl/YourGoogleMapsLinkHere",
        },
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Quirozbarbershop 2"
      copyrightText="© 2024 Quirozbarbershop 2. Todos los derechos reservados."
      socialLinks={[
        {
          icon: Instagram,
          href: "https://www.instagram.com/quirozbarbershop_2",
          ariaLabel: "Instagram de Quirozbarbershop 2",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
