"use client";

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Instagram, Facebook, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BUBBU"
          navItems={[
            { name: "Inicio", id: "#hero" },
            { name: "Sobre Nosotros", id: "#about" },
            { name: "Servicios", id: "#services" },
            { name: "Galería", id: "#gallery" },
            { name: "Testimonios", id: "#testimonials" },
            { name: "Contacto", id: "#contact" }
          ]}
          button={{
            text: "Reservar Cita",            href: "#contact"
          }}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="BUBBU"
          description="En Bubbu transformamos cada visita en una experiencia de bienestar, cuidado y cariño. Baños profesionales, cortes especializados y atención personalizada para que tu compañero salga limpio, feliz y más hermoso que nunca."
          buttons={[
            { text: "Reservar Cita", href: "#contact" },
            { text: "WhatsApp", href: "https://wa.me/###########" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/front-view-beautiful-woman-dog_23-2148777162.jpg"
          imageAlt="Perro feliz después de un tratamiento de estética en Bubbu"
          mediaAnimation="background-highlight"
          buttonAnimation="directional-hover"
          useInvertedBackground={false}
          ariaLabel="Hero section"
        />
      </div>
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Más que una peluquería canina"
          description="Sabemos que tu mascota es parte de tu familia. Por eso brindamos una experiencia segura, cómoda y llena de atención personalizada para que cada visita sea especial."
          metrics={[
            { value: "🐾", title: "Trato Cariñoso" },
            { value: "🧼", title: "Ambiente Limpio" },
            { value: "✨", title: "Productos Premium" },
            { value: "💖", title: "Profesionales Apasionados" },
            { value: "🐶", title: "Resultados que Enamoran" },
            { value: "💬", title: "Atención Personalizada" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-girl-posing-with-dog_23-2148861605.jpg"
          imageAlt="Personal de Bubbu con un perro en un ambiente acogedor"
          useInvertedBackground={true}
          mediaAnimation="background-highlight"
          metricsAnimation="background-highlight"
          ariaLabel="About section"
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardTwentySeven
          title="Todo lo que tu mascota necesita"
          description="Ofrecemos una gama completa de servicios de estética y peluquería para garantizar que tu amigo peludo se vea y se sienta lo mejor posible."
          features={[
            {
              id: "s1",              title: "Baño Premium",              descriptions: ["Limpieza profunda con productos suaves que dejan el pelaje limpio, brillante y perfumado."],
              imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48809.jpg",              imageAlt: "Perro disfrutando de un baño premium"
            },
            {
              id: "s2",              title: "Corte y Estilismo",              descriptions: ["Cortes adaptados a cada raza, personalidad y necesidad."],
              imageSrc: "http://img.b2bpic.net/free-photo/washing-process-small-dog-sits-table-dog-spaying-by-professional_1157-48817.jpg",              imageAlt: "Perro recibiendo un corte de pelo especializado"
            },
            {
              id: "s3",              title: "Cepillado Profesional",              descriptions: ["Eliminamos nudos y ayudamos a mantener un pelaje saludable y sin enredos."],
              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-cleaning-product_23-2148104525.jpg",              imageAlt: "Perro siendo cepillado profesionalmente"
            },
            {
              id: "s4",              title: "Limpieza e Higiene",              descriptions: ["Cuidado integral para orejas, ojos y dientes, para que tu mascota se sienta cómoda y feliz."],
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-cleaning-dog_23-2149652645.jpg",              imageAlt: "Groomer realizando limpieza dental a un perro"
            }
          ]}
          animationType="slide-in"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Feature section"
        />
      </div>
      <div id="experience" data-section="experience">
        <MetricCardTwo
          title="Porque ellos también merecen un día de spa"
          description="Desde el momento en que llegan, nuestros visitantes reciben atención cálida, paciencia y cuidado. Nos tomamos el tiempo para conocer a cada mascota, respetar su personalidad y brindar una experiencia libre de estrés. Nuestro objetivo no es solamente que se vean bien. Queremos que se sientan bien."
          metrics={[
            { id: "m1", value: "🧡", description: "Cuidado con Amor" },
            { id: "m2", value: "🐾", description: "Bienestar Asegurado" },
            { id: "m3", value: "✨", description: "Transformación Feliz" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-in"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Metrics section"
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Lo que dicen nuestros clientes"
          description="La satisfacción de nuestros clientes y el bienestar de sus mascotas son nuestra mayor recompensa. Lee algunas de las experiencias que nos han compartido."
          testimonials={[
            { id: "t1", name: "Sofía M.", role: "Dueña de Max", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-pet-lifestyle_23-2149180492.jpg", imageAlt: "Sofía M. con su perro Max" },
            { id: "t2", name: "Carlos P.", role: "Dueño de Bella", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-showing-his-cute-dog-pointing-finger-black-pug-smiling-standing-white-background_1258-75843.jpg", imageAlt: "Carlos P. con su perro Bella" },
            { id: "t3", name: "Ana L.", role: "Dueña de Toby", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/adorable-chihuahua-dog-with-female-owner_23-2149880067.jpg", imageAlt: "Ana L. con su perro Toby" },
            { id: "t4", name: "Diego R.", role: "Dueño de Luna", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/girls-dog-sitting-row_329181-8186.jpg", imageAlt: "Diego R. con su perro Luna" },
            { id: "t5", name: "Valeria G.", role: "Dueña de Coco", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/old-person-with-their-pet-dog_23-2149429288.jpg", imageAlt: "Valeria G. con su perro Coco" },
            { id: "t6", name: "Javier S.", role: "Dueño de Pelusa", company: "Cliente Satisfecho", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-couple-summer-forest-with-dogs_1157-22792.jpg", imageAlt: "Javier S. con su perro Pelusa" }
          ]}
          kpiItems={[
            { value: "5", label: "Estrellas" },
            { value: "+100", label: "Clientes Felices" },
            { value: "+5", label: "Años de Experiencia" }
          ]}
          animationType="slide-in"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Testimonials section"
        />
      </div>
      <div id="gallery" data-section="gallery">
        <ProductCardFour
          title="Galería de la Belleza Canina"
          description="Explora la magia de Bubbu con nuestras fotos de antes y después, y momentos felices de nuestros clientes."
          products={[
            { id: "p1", name: "Antes y Después", price: "Transformación", variant: "Corte de Razas", imageSrc: "http://img.b2bpic.net/free-photo/girl-her-dogs-high-view_23-2148797471.jpg", imageAlt: "Perro antes y después del grooming" },
            { id: "p2", name: "Clientes Felices", price: "Sonrisas Peludas", variant: "Sesiones de Juego", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-kitchen-holding-cute-white-maltese-dog_1153-9862.jpg", imageAlt: "Perro feliz después del baño" },
            { id: "p3", name: "Momentos de Spa", price: "Relajación Total", variant: "Baños Relajantes", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-her-cute-french-bulldog-warm-outfit_1303-19383.jpg", imageAlt: "Perro relajándose en el spa" },
            { id: "p4", name: "Cortes Especializados", price: "Estilo Único", variant: "Pelaje Brillante", imageSrc: "http://img.b2bpic.net/free-photo/cute-dog-sitting-bag_52683-123651.jpg", imageAlt: "Perro con un corte de pelo elegante" },
            { id: "p5", name: "Baños Premium", price: "Frescura y Limpieza", variant: "Aroma Duradero", imageSrc: "http://img.b2bpic.net/free-photo/portrait-adorable-beagle-taking-bath_23-2151793761.jpg", imageAlt: "Perro limpio y fresco después del baño" },
            { id: "p6", name: "Amigos Peludos", price: "Amor Incondicional", variant: "Momentos Bubbu", imageSrc: "http://img.b2bpic.net/free-photo/cute-teenage-girl-with-dog-pet-girl-playing-with-her-pet-dog-home_169016-68107.jpg", imageAlt: "Perro juguetón en el salón" }
          ]}
          gridVariant="bento-grid"
          animationType="slide-in"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Product section"
        />
      </div>
      <div id="why-choose-us" data-section="why-choose-us">
        <SocialProofOne
          title="Tu tranquilidad es nuestra prioridad"
          description="Sabemos que dejar a tu mascota en manos de alguien más requiere confianza. Por eso trabajamos con los más altos estándares de calidad y cariño."
          names={[
            "Atención amable y cercana",            "Espacios limpios y seguros",            "Técnicas profesionales",            "Productos seleccionados",            "Paciencia y cariño",            "Resultados garantizados"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={false}
          ariaLabel="Social proof section"
        />
      </div>
      <div id="promo" data-section="promo">
        <PricingCardNine
          title="Primera visita con regalo especial"
          description="Agenda hoy y permite que tu mascota disfrute una experiencia Bubbu. Porque cada peludito merece verse espectacular."
          plans={[
            {
              id: "promo",              title: "Paquete de Bienvenida",              price: "¡Gratis!",              period: "Con tu primer baño y corte",              features: ["Baño Premium", "Corte y Estilismo", "Cepillado Profesional", "Regalo sorpresa"],
              button: { text: "Reservar Ahora", href: "#contact" },
              imageSrc: "http://img.b2bpic.net/free-photo/handsome-fancy-man-glasses-raising-glass-champagne-giving-microphone-cute-pug-party_1258-180850.jpg",              imageAlt: "Perro feliz con un lazo de regalo"
            },
            {
              id: "premium",              title: "Paquete Completo",              price: "$50",              period: "Por servicio",              features: ["Baño Premium","Corte y Estilismo","Cepillado Profesional","Limpieza de Oídos y Dientes"],
              button: {text:"Ver Detalles",href:"#services"},
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fluffy-white-dog_23-2148777143.jpg",              imageAlt: "Perro con un pelaje brillante"
            }
          ]}
          animationType="slide-in"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Pricing section"
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactText
          text="Tu mascota merece lo mejor.\nHaz que cada baño sea una experiencia de bienestar, belleza y amor. Reserva hoy mismo y descubre por qué tantas familias confían en Bubbu."
          buttons={[
            { text: "AGENDAR CITA", href: "#" },
            { text: "ESCRIBIR POR WHATSAPP", href: "https://wa.me/###########" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          ariaLabel="Contact section"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="BUBBU"
          copyrightText="© 2024 Bubbu. Todos los derechos reservados."
          socialLinks={[
            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
            { icon: Twitter, href: "#", ariaLabel: "Twitter" }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}
