"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit'; 
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA'; 
import { Leaf, MapPin, MessageSquare, ShieldCheck, Sparkles, UserCheck } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="blurBottom"
        cardStyle="inset"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Inicio",          id: "#hero"},
        {
          name: "Reservas",          id: "#booking"},
        {
          name: "Servicios",          id: "#services"},
        {
          name: "Resultados",          id: "#results"},
        {
          name: "Confianza",          id: "#confidence"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contacto",          id: "#contact"}
      ]}
      brandName="Hair Solución StudioUy"
      button={{
        text: "Reservar Turno",        href: "#booking"}}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "plain"}}
      title="Recuperá tu imagen con prótesis capilares premium"
      description="Resultados naturales, personalizados y con atención privada en Paso Molino."
      buttons={[
        {
          text: "Reservar diagnóstico",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20reservar%20un%20diagnóstico%20en%20Hair%20Solución%20StudioUy."},
        {
          text: "Consultar por WhatsApp",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20consultar%20más%20información%20sobre%20prótesis%20capilares%20en%20Hair%20Solución%20StudioUy."}
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-with-blonde-trendy-hairstyle-accessories-white-stylish-shirt-laughing-looking-into-camera-park_197531-28448.jpg",          imageAlt: "Woman with natural looking hair prosthesis"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg",          imageAlt: "Man with natural looking hair prosthesis"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/winter-sports-gear-accessories_482257-76733.jpg",          imageAlt: "Luxurious hair salon interior"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-done-hairdresser_23-2150771238.jpg",          imageAlt: "Hair stylist working on a client's hair"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/emotions-girl_1157-9008.jpg",          imageAlt: "Smiling woman with restored hair confidence"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7273.jpg",          imageAlt: "Before and after hair transformation result"}
      ]}
      mediaAnimation="opacity"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Diagnóstico personalizado",          description: "Evaluación privada para encontrar la mejor solución según cada caso.",          imageSrc: "http://img.b2bpic.net/free-photo/stylist-applying-makeup-faceless-model_23-2147783871.jpg",          imageAlt: "Personalized hair consultation"},
        {
          title: "Prótesis capilares premium",          description: "Sistemas capilares naturales, cómodos y personalizados.",          imageSrc: "http://img.b2bpic.net/free-photo/hair-serum-bottle-brown-wavy-hair_23-2152001430.jpg",          imageAlt: "Premium hair prosthesis"},
        {
          title: "Colocación y mantenimiento",          description: "Servicio profesional para mantener un resultado prolijo y seguro.",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-with-woman-client_657883-572.jpg",          imageAlt: "Hair prosthesis placement and maintenance"},
        {
          title: "Renovación de imagen",          description: "Transformaciones pensadas para recuperar confianza y estilo.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-pretty-woman-with-arms-her-head_23-2147611463.jpg",          imageAlt: "Image renewal hair transformation"},
        {
          title: "Servicios para damas y caballeros",          description: "Atención personalizada según necesidad, estilo y tipo de cabello.",          imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575477.jpg",          imageAlt: "Hair solutions for ladies and gentlemen"}
      ]}
      title="Descubrí nuestros servicios premium"
      description="Soluciones capilares personalizadas para recuperar tu confianza y estilo."
      buttons={[
        {
          text: "Reservar este servicio",          href: "#booking"}
      ]}
    />
  </div>

  <div id="results" data-section="results">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "result-1",          name: "Transformación Femenina",          price: "Naturalidad",          imageSrc: "http://img.b2bpic.net/free-photo/unique-beautiful-women-portrait_23-2149012589.jpg",          imageAlt: "Before and after woman hair prosthesis"},
        {
          id: "result-2",          name: "Restauración Masculina",          price: "Discreción",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-with-beard-looks-himself-mirror_169016-27267.jpg",          imageAlt: "Before and after man hair prosthesis"},
        {
          id: "result-3",          name: "Volumen y Estilo",          price: "Elegancia",          imageSrc: "http://img.b2bpic.net/free-photo/collage-blonde-with-hair-after-before-beauty-salon_132075-11810.jpg",          imageAlt: "Before and after woman hair volume"},
        {
          id: "result-4",          name: "Cobertura Perfecta",          price: "Confianza",          imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11758.jpg",          imageAlt: "Before and after man bald spot coverage"},
        {
          id: "result-5",          name: "Belleza Renovada",          price: "Armonía",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-leaning-hand_1262-3272.jpg",          imageAlt: "Before and after woman short hair"},
        {
          id: "result-6",          name: "Cabello Indetectable",          price: "Realismo",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-wavy-blonde-hair_23-2152001459.jpg",          imageAlt: "Before and after natural dark hair"}
      ]}
      title="Resultados que se ven naturales"
      description="Cada trabajo es personalizado para lograr un resultado cómodo, seguro y lo más natural posible."
      buttons={[
        {
          text: "Quiero mi diagnóstico",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20estoy%20interesado%20en%20un%20diagnóstico%20tras%20ver%20sus%20resultados%20en%20la%20web."}
      ]}
    />
  </div>

  <div id="confidence" data-section="confidence">
      <AboutMetric
      useInvertedBackground={false}
      title="Tu cambio empieza con una consulta privada"
      metrics={[
        {
          icon: ShieldCheck,
          label: "Atención privada y personalizada",          value: "Discreción"},
        {
          icon: Leaf,
          label: "Resultados naturales",          value: "Autenticidad"},
        {
          icon: Sparkles,
          label: "Prótesis capilares premium",          value: "Calidad"},
        {
          icon: UserCheck,
          label: "Asesoramiento profesional",          value: "Experiencia"},
        {
          icon: MapPin,
          label: "Ubicación en Paso Molino",          value: "Accesible"},
        {
          icon: MessageSquare,
          label: "Reserva rápida por WhatsApp",          value: "Facilidad"}
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "¿La prótesis capilar se nota?",          content: "No. El objetivo es lograr un resultado natural, adaptado a tu estilo y tipo de cabello. Trabajamos con los mejores sistemas capilares para una integración indetectable."},
        {
          id: "faq-2",          title: "¿Tengo que reservar diagnóstico antes?",          content: "Sí. El diagnóstico permite evaluar tu caso de forma privada, entender tus necesidades y recomendar la mejor solución personalizada para vos."},
        {
          id: "faq-3",          title: "¿Atienden hombres y mujeres?",          content: "Sí, trabajamos con soluciones capilares personalizadas tanto para damas como para caballeros, adaptándonos a cada estilo y necesidad."},
        {
          id: "faq-4",          title: "¿Dónde están ubicados?",          content: "Nuestro estudio se encuentra en Paso Molino, Montevideo, ofreciendo un espacio privado y cómodo para tu atención."},
        {
          id: "faq-5",          title: "¿Puedo consultar por WhatsApp?",          content: "Sí, podés escribirnos directamente al 098 631 321 para cualquier consulta o para iniciar tu proceso de reserva. Estamos para ayudarte."}
      ]}
      title="Preguntas frecuentes"
      description="Respuestas a tus dudas más comunes sobre prótesis capilares y nuestros servicios."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="booking" data-section="booking">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Agenda tu cita"
      title="Reserva tu cita online"
      description="Selecciona el servicio, fecha y hora que mejor se adapte a ti. Nuestro equipo confirmará tu turno a la brevedad."
      buttons={[
        {
          text: "Agendar por WhatsApp ahora",          href: "https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20reservar%20un%20turno%20en%20Hair%20Solución%20StudioUy.%0ANombre%3A%20%5Bnombre%5D%0AServicio%3A%20%5Bservicio%5D%0ADía%20preferido%3A%20%5Bdía%5D%0AHorario%20preferido%3A%20%5Bhorario%5D%0AComentario%3A%20%5Bcomentario%5D"}
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Estamos aquí para ti"
      title="Contacta con Hair Solución StudioUy"
      description={(
        <>
          Para consultas o reservas, completa el formulario de contacto o escríbenos directamente por{' '}
          <a href="https://wa.me/59898631321?text=Hola%20Mariana%2C%20quiero%20consultar%20por%20un%20turno%20en%20Hair%20Solución%20StudioUy." target="_blank" rel="noopener noreferrer" className="underline hover:text-primary-cta">
            WhatsApp al +598 98 631 321
          </a>
          . También puedes seguirnos en{' '}
          <a href="https://instagram.com/hair_solucion_studiouy" target="_blank" rel="noopener noreferrer" className="underline hover:text-primary-cta">
            Instagram
          </a>
          . Te esperamos en Paso Molino.
        </>
      )}
      mediaPosition="right"
      imageSrc="http://img.b2bpic.net/free-photo/side-view-hairdresser-combing-hair-young-woman_23-2147783935.jpg"
      imageAlt="Hairdresser styling client's hair"
      inputPlaceholder="Tu email"
      buttonText="Enviar mensaje"
      onSubmit={(email) => console.log('Contact form submitted with email:', email)}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Navegación",          items: [
            {
              label: "Inicio",              href: "#hero"},
            {
              label: "Servicios",              href: "#services"},
            {
              label: "Resultados",              href: "#results"},
            {
              label: "FAQ",              href: "#faq"}
          ]
        },
        {
          title: "Información",          items: [
            {
              label: "Paso Molino, Montevideo",              href: "#contact"},
            {
              label: "WhatsApp: +598 98 631 321",              href: "https://wa.me/59898631321"},
            {
              label: "Instagram: @hair_solucion_studiouy",              href: "https://instagram.com/hair_solucion_studiouy"}
          ]
        },
        {
          title: "Legal",          items: [
            {
              label: "Política de Privacidad",              href: "#"},
            {
              label: "Términos y Condiciones",              href: "#"}
          ]
        }
      ]}
      logoText="Hair Solución StudioUy"
      copyrightText="© 2025 Hair Solución StudioUy. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}