"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Scissors, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="large"
        background="none"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Servicios",          id: "services"},
        {
          name: "Sobre Nosotros",          id: "about"},
        {
          name: "Opiniones",          id: "testimonials"},
        {
          name: "FAQ",          id: "faq"},
        {
          name: "Contacto",          id: "contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p7p0kn"
      logoAlt="Sa Pelu Logo"
      brandName="Sa Pelu"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Sa Pelu"
      description="Tu oasis de belleza en Can Picafort. Expertos en coloración, estilismo y tratamientos capilares para realzar tu estilo único y personalidad."
      buttons={[
        {
          text: "Reservar Cita",          href: "#contact"},
        {
          text: "Ver Servicios",          href: "#services"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326537.jpg"
      imageAlt="Modern hair salon interior with stylish decor and hairdressing chairs"
      showBlur={true}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg",          alt: "Happy female client"},
        {
          src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-confident-standing-street_839833-16107.jpg",          alt: "Smiling young woman"},
        {
          src: "http://img.b2bpic.net/free-photo/closeup-portrait-enthusiastic-excited-surprised-hispanic-guy-hear-amazing-news-open-mouth-bea_1258-113406.jpg",          alt: "Joyful person"},
        {
          src: "http://img.b2bpic.net/free-photo/confident-pretty-girl-with-curly-hairstyle-showing-okay-gestures-smiling-approve-agree-with_1258-172776.jpg",          alt: "Content female customer"},
        {
          src: "http://img.b2bpic.net/free-photo/cute-young-woman-outdoor_624325-2565.jpg",          alt: "Positive young woman"},
      ]}
      avatarText="Más de 100 clientes confían en nosotros"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Más de 80 clientes satisfechos. Tu cabello, nuestra pasión."
      metrics={[
        {
          icon: Star,
          label: "Valoración Promedio",          value: "4.8"},
        {
          icon: Users,
          label: "Clientes Felices",          value: "80+"},
        {
          icon: Scissors,
          label: "Años de Experiencia",          value: "10+"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "coloracion",          title: "Coloración Capilar",          author: "Expertos en color",          description: "Transforma tu cabello con técnicas de coloración modernas y productos de alta calidad para un resultado vibrante y duradero.",          tags: [
            "Color",            "Mechas",            "Tinte"],
          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-home-by-beautician_23-2148817213.jpg",          imageAlt: "Hair coloring process in salon"},
        {
          id: "estilismo",          title: "Estilismo Personalizado",          author: "Estilistas Profesionales",          description: "Cortes y peinados a medida para cada ocasión, reflejando tu personalidad y las últimas tendencias de moda.",          tags: [
            "Corte",            "Peinado",            "Moda"],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-accessories-barber-shop_23-2148256980.jpg",          imageAlt: "Hair styling and haircut"},
        {
          id: "balayage",          title: "Balayage y Mechas",          author: "Técnicas Avanzadas",          description: "Ilumina tu melena con balayage, mechas o babylights, creando efectos naturales de luz y dimensión.",          tags: [
            "Balayage",            "Highlights",            "Luz"],
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668430.jpg",          imageAlt: "Balayage hair technique"},
        {
          id: "tratamientos",          title: "Tratamientos Capilares",          author: "Cuidado Experto",          description: "Revitaliza y nutre tu cabello con nuestros tratamientos especializados para fortalecerlo, repararlo y darle un brillo saludable.",          tags: [
            "Nutrición",            "Reparación",            "Brillo"],
          imageSrc: "http://img.b2bpic.net/free-photo/assortment-natural-argan-oil-dropper_23-2149016628.jpg",          imageAlt: "Hair treatment mask application"},
        {
          id: "alisado",          title: "Alisado y Abrillantamiento",          author: "Resultados Impecables",          description: "Consigue un cabello liso perfecto, sin encrespamiento, o un brillo espectacular con nuestros servicios profesionales.",          tags: [
            "Alisado",            "Queratina",            "Suavidad"],
          imageSrc: "http://img.b2bpic.net/free-photo/woman-wears-white-shirt-from-backside-showing-ideal-straight-hair_633478-2236.jpg",          imageAlt: "Hair straightening with iron"},
      ]}
      title="Nuestros Servicios Exclusivos"
      description="Desde un corte clásico hasta las últimas tendencias en color, nuestro equipo de estilistas está aquí para transformar tu look y realzar tu belleza natural."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Client Choice",        "Beauty Awards",        "Top Rated",        "Trusted Experts",        "Salon Favorite",        "Community Love",        "Style Leaders"]}
      title="Confía en los expertos en belleza"
      description="Nuestra pasión por el cabello y el compromiso con la excelencia nos convierten en la elección preferida de nuestra comunidad."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Jorge Asensio",          imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg",          imageAlt: "Jorge Asensio"
        },
        {
          id: "2",          name: "Rodrigo Piqueras García",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-barbershop-concept_23-2148506221.jpg",          imageAlt: "Rodrigo Piqueras García"
        },
        {
          id: "3",          name: "Micaela Llull",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-blonde-stylish-young-woman_23-2147910286.jpg",          imageAlt: "Micaela Llull"
        },
        {
          id: "4",          name: "Ana García",          imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",          imageAlt: "Ana García"
        },
        {
          id: "5",          name: "Carlos Ruiz",          imageSrc: "http://img.b2bpic.net/free-photo/young-lady-floral-top-showing-thumb-up-looking-confident_176474-24358.jpg",          imageAlt: "Carlos Ruiz"
        },
        {
          id: "6",          name: "Sofía Pérez",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-makeup-artist-applying-powder-model_23-2147783866.jpg",          imageAlt: "Sofía Pérez"
        }
      ]}
      cardTitle="Experiencias que hablan por sí solas"
      cardTag="Tu satisfacción, nuestra mejor carta de presentación"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "¿Necesito pedir cita previa?",          content: "Sí, para garantizar la mejor atención y evitar esperas, recomendamos encarecidamente reservar tu cita con antelación. Puedes hacerlo por teléfono o visitándonos en el salón."},
        {
          id: "q2",          title: "¿Qué tipos de pago aceptáis?",          content: "Aceptamos pagos en efectivo y con las principales tarjetas de crédito/débito. Consulta en recepción si tienes alguna duda sobre un método de pago específico."},
        {
          id: "q3",          title: "¿Utilizáis productos sin amoniaco para coloración?",          content: "Sí, ofrecemos una variedad de productos de coloración, incluyendo opciones sin amoniaco, para cuidar la salud y el bienestar de tu cabello. Consulta a tu estilista para conocer las opciones disponibles."},
        {
          id: "q4",          title: "¿Puedo cambiar o cancelar mi cita?",          content: "Sí, puedes cambiar o cancelar tu cita. Te pedimos que nos avises con al menos 24 horas de antelación para que podamos ajustar nuestra agenda y ofrecer la hora a otros clientes."},
        {
          id: "q5",          title: "¿Ofrecéis servicios para hombres y niños?",          content: "¡Claro! En Sa Pelu atendemos a toda la familia. Ofrecemos servicios especializados y cortes de pelo para hombres, mujeres y niños, adaptándonos a las necesidades de cada uno."},
      ]}
      sideTitle="¿Tienes Preguntas?"
      sideDescription="Encuentra respuestas rápidas y útiles a las consultas más comunes sobre nuestros servicios, citas y productos."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      text="Visítanos en Can Picafort o llámanos para reservar tu cita. ¡Estamos deseando darte la bienvenida a Sa Pelu y transformar tu estilo!"
      buttons={[
        {
          text: "Llamar Ahora",          href: "tel:+34971850234"},
        {
          text: "Cómo Llegar",          href: "https://www.google.com/maps/search/Sa+Pelu+Passeig+Col%C3%B3n,+40,+07458+Can+Picafort,+Illes+Balears"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Servicios",          items: [
            {
              label: "Coloración",              href: "#services"},
            {
              label: "Estilismo",              href: "#services"},
            {
              label: "Balayage",              href: "#services"},
            {
              label: "Tratamientos",              href: "#services"},
          ],
        },
        {
          title: "Contacto",          items: [
            {
              label: "Ubicación",              href: "https://www.google.com/maps/search/Sa+Pelu+Passeig+Col%C3%B3n,+40,+07458+Can+Picafort,+Illes+Balears"},
            {
              label: "Teléfono",              href: "tel:+34971850234"},
            {
              label: "Horario",              href: "#contact"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Política de Privacidad",              href: "#"},
            {
              label: "Términos de Servicio",              href: "#"},
          ],
        },
      ]}
      logoText="Sa Pelu"
      copyrightText="© 2024 Sa Pelu. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
