"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, CheckCircle, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Services",          id: "services"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Rucer Nails"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Eleva tu Estilo en Rucer Nails"
      description="Expertos en manicure y diseño de uñas. Creamos arte en tus manos con productos de la mejor calidad."
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-reading-tarot-with-laptop_23-2150276130.jpg"
      imageAlt="elegant manicure desk lighting"
      buttons={[
        {
          text: "Reservar mi Cita",          href: "#contact"},
        {
          text: "Ver Servicios",          href: "#services"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/nail-care-still-life-with-plate_23-2149046533.jpg",          alt: "Nail care still life with plate"},
        {
          src: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-beauty-products-grey-background_23-2148299589.jpg",          alt: "Top view arrangement with beauty products on grey background"},
        {
          src: "http://img.b2bpic.net/free-photo/nails-care-elements-arrangement-with-copy-space_23-2148697089.jpg",          alt: "Nails care elements arrangement with copy space"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-making-beauty-vlog-with-her-smartphone_23-2149039648.jpg",          alt: "Woman making a beauty vlog with her smartphone"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-black-woman-carrying-laptop-walking-into-room-ready-begin-remote-work-african_482257-135038.jpg",          alt: "Close up of black woman carrying laptop and walking into room ready to begin remote work african"},
      ]}
      avatarText="Más de 10,000 clientes felices"
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          value: "10k+",          title: "Manicures",          description: "Clientes satisfechas",          icon: CheckCircle,
        },
        {
          id: "2",          value: "500+",          title: "Diseños",          description: "Arte creativo único",          icon: Sparkles,
        },
        {
          id: "3",          value: "5",          title: "Años",          description: "Experticia profesional",          icon: Award,
        },
      ]}
      title="Resultados Impecables"
      description="Lo que nos diferencia en el sector."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Arte Personalizado",          description: "Diseños exclusivos para resaltar tu personalidad.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-with-beautiful-manicure_23-2149311579.jpg"},
        {
          title: "Cuidado Premium",          description: "Tratamientos que nutren y protegen tus uñas naturales.",          imageSrc: "http://img.b2bpic.net/free-photo/female-hands-bowl-spa-water-with-flowers-close-up-hands-spa_1150-37712.jpg"},
        {
          title: "Productos de Alta Gama",          description: "Esmaltes duraderos y fórmulas seguras.",          imageSrc: "http://img.b2bpic.net/free-photo/set-black-makeup-brushes-isolated-white_1385-2784.jpg"},
      ]}
      title="Calidad en cada Detalle"
      description="Nuestros estándares aseguran que cada visita sea una experiencia de lujo y cuidado personal."
    />
  </div>

  <div id="services" data-section="services">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "Gel Manicure",          price: "$30",          imageSrc: "http://img.b2bpic.net/free-photo/yellow-nail-design-manicured-female-hand-with-glitter-manicure_127675-2382.jpg"},
        {
          id: "2",          name: "Acrylic Set",          price: "$50",          imageSrc: "http://img.b2bpic.net/free-photo/party-space-ready-online-celebration_23-2149347235.jpg"},
        {
          id: "3",          name: "Bridal Special",          price: "$70",          imageSrc: "http://img.b2bpic.net/free-photo/hands-detail-flamenco-dancer-beautiful-dress-black-back_1301-4253.jpg"},
        {
          id: "4",          name: "Classic French",          price: "$35",          imageSrc: "http://img.b2bpic.net/free-photo/girls-showing-her-stylish-manicure-holding-thair-fingers-black-handbag_132075-12048.jpg"},
        {
          id: "5",          name: "Art & Design",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-heart-indoor-isolated_624325-4310.jpg"},
        {
          id: "6",          name: "Matte Finish",          price: "$40",          imageSrc: "http://img.b2bpic.net/free-photo/focused-talented-manicurist-is-working-her-own-workplace-busy-beauty-salon-she-is-wearing-protective-mask_613910-21457.jpg"},
      ]}
      title="Nuestros Servicios"
      description="Elige el diseño perfecto para cada ocasión."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Ana G.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-curly-hair-applying-cream-her-face-against-white-background_23-2147901110.jpg"},
        {
          id: "2",          name: "Sofia R.",          imageSrc: "http://img.b2bpic.net/free-photo/male-female-friends-getting-manicure-together_23-2150285898.jpg"},
        {
          id: "3",          name: "Lucia M.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-manicurist-customer-hands_23-2148859709.jpg"},
        {
          id: "4",          name: "Elena P.",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-holding-hair-color-book_107420-12150.jpg"},
        {
          id: "5",          name: "Clara S.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-protective-medical-mask-beauty-salon-hold-palette-select-color-manicure-procedure-nail-care-grand-opening-quarantine-is-small-businessess-are-open-again_343596-2403.jpg"},
      ]}
      cardTitle="Lo que dicen nuestras clientas"
      cardTag="Opiniones"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "¿Qué tipos de esmaltes usan?",          content: "Usamos esmaltes veganos y libres de tóxicos."},
        {
          id: "2",          title: "¿Cuánto dura la aplicación?",          content: "Depende del tratamiento, desde 45 min hasta 90 min."},
        {
          id: "3",          title: "¿Debo agendar cita?",          content: "Sí, recomendamos agendar con anticipación."},
      ]}
      sideTitle="Preguntas Frecuentes"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Contacto"
      title="Agenda tu cita hoy"
      description="Estamos listas para consentirte. Reserva tu espacio y disfruta de una experiencia de uñas única."
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-young-women-working-together_23-2148461456.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Servicios",              href: "#services"},
            {
              label: "Citas",              href: "#contact"},
          ],
        },
        {
          items: [
            {
              label: "Privacidad",              href: "#"},
            {
              label: "Términos",              href: "#"},
          ],
        },
      ]}
      logoText="RUCER NAILS"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}