"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Paintbrush, Scissors, Smile, Sparkles, Sun } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Início",
          id: "hero",
        },
        {
          name: "Sobre",
          id: "about",
        },
        {
          name: "Serviços",
          id: "services",
        },
        {
          name: "Contato",
          id: "contact",
        },
      ]}
      brandName="Instituto Luminosa"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Sua beleza, nossa essência."
      description="Transforme sua autoestima no Instituto Luminosa. Especialistas em realçar o que há de melhor em você com cuidado, carinho e tecnologia."
      buttons={[
        {
          text: "Agende seu horário",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94679.jpg"
      showDimOverlay={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/woman-wrapping-face-client-barbershop_23-2147736957.jpg",
          alt: "Cliente sorrindo após tratamento",
        },
        {
          src: "http://img.b2bpic.net/free-photo/hair-equipment-composition-flat-lay_23-2148352857.jpg",
          alt: "Cliente satisfeito com resultado",
        },
        {
          src: "http://img.b2bpic.net/free-photo/girl-chair-professional-hairdresser_23-2147769753.jpg",
          alt: "Profissional de beleza atencioso",
        },
        {
          src: "http://img.b2bpic.net/free-photo/hairdresser-protecting-client-with-plastic-cape_23-2147769746.jpg",
          alt: "Ambiente aconchegante do salão",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg",
          alt: "Cliente feliz no espelho",
        },
      ]}
      avatarText="Mais de 1.000 clientes satisfeitas"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Referência em beleza e bem-estar",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/blonde-young-lady-dress-gesturing-isolated_176474-44073.jpg",
          alt: "Sobre nós",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Cortes e Tratamentos",
          description: "Tendências modernas com tratamentos de hidratação profunda.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-protective-face-mask-enjoying-hair-wash-hairdresser-s_637285-9006.jpg",
          },
          items: [
            {
              icon: Scissors,
              text: "Cortes personalizados",
            },
            {
              icon: Sparkles,
              text: "Nutrição capilar",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94679.jpg",
          imageAlt: "hair styling service",
        },
        {
          title: "Manicure Especializada",
          description: "Cuidado impecável para suas mãos e pés.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/nail-art-professional-working-client-nails_23-2149265951.jpg",
          },
          items: [
            {
              icon: Paintbrush,
              text: "Nail art exclusiva",
            },
            {
              icon: Smile,
              text: "Spa das mãos",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-lady-dress-gesturing-isolated_176474-44073.jpg",
          imageAlt: "hair styling service",
        },
        {
          title: "Estética Facial",
          description: "Protocolos para uma pele radiante e saudável.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/woman-client-salon-receiving-manual-facial-massage-from-beautician_343596-4313.jpg",
          },
          items: [
            {
              icon: Sparkles,
              text: "Limpeza de pele",
            },
            {
              icon: Sun,
              text: "Rejuvenescimento",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/shampoo-bottle-brown-wavy-hair_23-2152001412.jpg",
          imageAlt: "hair styling service",
        },
      ]}
      title="Nossos Serviços"
      description="Uma experiência completa para renovar seu visual."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Shampoo Luminosa",
          price: "R$ 89,90",
          variant: "Hidratação",
          imageSrc: "http://img.b2bpic.net/free-photo/shampoo-bottle-brown-wavy-hair_23-2152001412.jpg",
        },
        {
          id: "p2",
          name: "Creme Facial Gold",
          price: "R$ 149,90",
          variant: "Anti-aging",
          imageSrc: "http://img.b2bpic.net/free-photo/composition-skin-beauty-products_23-2148761497.jpg",
        },
        {
          id: "p3",
          name: "Sérum Capilar",
          price: "R$ 120,00",
          variant: "Reparador",
          imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047718.jpg",
        },
        {
          id: "p4",
          name: "Máscara Intense",
          price: "R$ 95,00",
          variant: "Profissional",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-black-plastic-bottle-from-shampoo-with-pink-strip_140725-9056.jpg",
        },
        {
          id: "p5",
          name: "Óleo Nutritivo",
          price: "R$ 75,00",
          variant: "Finalizador",
          imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232279.jpg",
        },
        {
          id: "p6",
          name: "Spray de Brilho",
          price: "R$ 65,00",
          variant: "Fixação",
          imageSrc: "http://img.b2bpic.net/free-photo/shampoo-bottle-wrapped-pink-hair_23-2152001442.jpg",
        },
      ]}
      title="Produtos Recomendados"
      description="Leve a qualidade do salão para a sua rotina diária."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Ana Silva",
          date: "12/05/2023",
          title: "Cliente fiel",
          quote: "Melhor atendimento que já recebi na vida!",
          tag: "Cabelo",
          avatarSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94679.jpg",
          imageAlt: "happy client portrait",
        },
        {
          id: "t2",
          name: "Bia Costa",
          date: "15/06/2023",
          title: "Amou tudo",
          quote: "Minha pele nunca esteve tão bem tratada.",
          tag: "Facial",
          avatarSrc: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-lady-dress-gesturing-isolated_176474-44073.jpg",
          imageAlt: "happy client portrait",
        },
        {
          id: "t3",
          name: "Carla Dias",
          date: "20/07/2023",
          title: "Excelente",
          quote: "Profissionais de ponta e um ambiente acolhedor.",
          tag: "Unhas",
          avatarSrc: "http://img.b2bpic.net/free-photo/young-cute-woman-outdoor_624325-1068.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-protective-face-mask-enjoying-hair-wash-hairdresser-s_637285-9006.jpg",
          imageAlt: "happy client portrait",
        },
        {
          id: "t4",
          name: "Denise Lima",
          date: "05/08/2023",
          title: "Nota 10",
          quote: "Indico para todas as minhas amigas.",
          tag: "Cabelo",
          avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-mixed-race-woman-posing-selfie_1262-2966.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/nail-art-professional-working-client-nails_23-2149265951.jpg",
          imageAlt: "happy client portrait",
        },
        {
          id: "t5",
          name: "Elisa Farias",
          date: "10/09/2023",
          title: "Maravilhosa",
          quote: "Saio sempre renovada de lá.",
          tag: "Spa",
          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-smartphone_23-2149721979.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-client-salon-receiving-manual-facial-massage-from-beautician_343596-4313.jpg",
          imageAlt: "happy client portrait",
        },
      ]}
      title="O que dizem nossas clientes"
      description="A felicidade de nossas clientes é nosso maior patrimônio."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Como agendar?",
          content: "Pode agendar pelo WhatsApp ou pelo link em nosso Instagram.",
        },
        {
          id: "f2",
          title: "Aceitam cartões?",
          content: "Sim, aceitamos todas as bandeiras de cartões de débito e crédito.",
        },
        {
          id: "f3",
          title: "Onde estão localizados?",
          content: "Estamos no centro, em uma área de fácil acesso com estacionamento.",
        },
      ]}
      title="Dúvidas Frequentes"
      description="Tudo o que você precisa saber sobre nosso atendimento."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Estamos prontas para você"
      title="Agende seu horário"
      description="Entre em contato conosco hoje mesmo e garanta seu momento de autocuidado."
      buttons={[
        {
          text: "WhatsApp",
          href: "https://wa.me/55000000000",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Instituto Luminosa"
      columns={[
        {
          title: "Menu",
          items: [
            {
              label: "Início",
              href: "#hero",
            },
            {
              label: "Sobre",
              href: "#about",
            },
            {
              label: "Serviços",
              href: "#services",
            },
          ],
        },
        {
          title: "Contato",
          items: [
            {
              label: "WhatsApp",
              href: "https://wa.me/55000000000",
            },
            {
              label: "Instagram",
              href: "https://instagram.com",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacidade",
              href: "#",
            },
            {
              label: "Termos",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Instituto Luminosa. Todos os direitos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
