"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Award, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Início",
          id: "hero",
        },
        {
          name: "Serviços",
          id: "servicos",
        },
        {
          name: "Diferenciais",
          id: "diferenciais",
        },
        {
          name: "Depoimentos",
          id: "depoimentos",
        },
        {
          name: "Contato",
          id: "contato",
        },
      ]}
      button={{
        text: "Agendar via WhatsApp",
        href: "https://wa.me/5583988767413",
      }}
      brandName="Kathyenne Morais"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="Realce sua beleza natural com segurança e excelência."
      description="Na Kathyenne Morais Estética Avançada, unimos tecnologia de ponta e cuidado personalizado para transformar sua autoestima em Campina Grande/PB."
      buttons={[
        {
          text: "Agendar Consulta via WhatsApp",
          href: "https://wa.me/5583988767413",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16780.jpg?_wi=1"
      imageAlt="Clínica de Estética em Campina Grande"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16786.jpg",
          alt: "Cliente feliz 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/beautician-spa-beauty-salon-applies-cream-client-s-face-girl-lies-cosmetology-table_343596-4278.jpg",
          alt: "Cliente feliz 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-getting-face-skin-treatment-spa_23-2148825379.jpg",
          alt: "Cliente feliz 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16756.jpg",
          alt: "Cliente feliz 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16783.jpg",
          alt: "Cliente feliz 5",
        },
      ]}
      avatarText="Mais de 1000 transformações realizadas"
      marqueeItems={[
        {
          type: "text",
          text: "Bioestimuladores",
        },
        {
          type: "text",
          text: "Preenchimento Labial",
        },
        {
          type: "text",
          text: "Toxina Botulínica",
        },
        {
          type: "text",
          text: "Peeling Profundo",
        },
        {
          type: "text",
          text: "Harmonização Facial",
        },
      ]}
    />
  </div>

  <div id="servicos" data-section="servicos">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Sobre a Kathyenne Morais",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/side-view-asian-doctor-with-lab-coat_23-2149870311.jpg",
          alt: "Clínica de Estética",
        },
        {
          type: "text",
          content: "Nossa missão é oferecer tratamentos de alta performance, focados na harmonia facial e corporal. Atendemos no coração de Campina Grande com a qualidade que você merece.",
        },
      ]}
    />
  </div>

  <div id="diferenciais" data-section="diferenciais">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Tecnologia de Ponta",
          description: "Tratamentos modernos com segurança máxima.",
          imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65172.jpg?_wi=1",
        },
        {
          title: "Atendimento Humanizado",
          description: "Cuidado personalizado para cada necessidade.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-going-through-microblading-treatment_23-2149102659.jpg?_wi=1",
        },
        {
          title: "Localização Privilegiada",
          description: "No bairro Estação Velha, fácil acesso.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-doctor-cosmetology-studio_1157-33838.jpg?_wi=1",
        },
      ]}
      title="Por que nos escolher?"
      description="Compromisso com resultados reais, ética e excelência clínica."
    />
  </div>

  <div id="servicos-catalog" data-section="servicos-catalog">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Preenchimento Facial",
          price: "Consulte",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage-using-oil_343596-4184.jpg",
        },
        {
          id: "p2",
          name: "Aplicação de Toxina",
          price: "Consulte",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-34029.jpg",
        },
        {
          id: "p3",
          name: "Bioestimuladores",
          price: "Consulte",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-lip-filler-procedure_23-2149315536.jpg",
        },
        {
          id: "p4",
          name: "Peeling Químico",
          price: "Consulte",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-face-treatment-her-client_23-2149037158.jpg",
        },
        {
          id: "p5",
          name: "Limpeza de Pele Profunda",
          price: "Consulte",
          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-botox-injection-female-forehead_651396-832.jpg",
        },
        {
          id: "p6",
          name: "Harmonização Corporal",
          price: "Consulte",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-lip-filler-procedure_23-2149315552.jpg",
        },
      ]}
      title="Nossos Principais Procedimentos"
      description="Soluções completas para sua saúde e beleza."
    />
  </div>

  <div id="depoimentos" data-section="depoimentos">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Ana Silva",
          date: "15/09/2023",
          title: "Excelente atendimento!",
          quote: "Melhor clínica de Campina Grande. Profissionais muito atenciosas.",
          tag: "Nota 5/5",
          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-lash-curler_23-2149453530.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16780.jpg?_wi=2",
          imageAlt: "happy woman smile after facial treatment",
        },
        {
          id: "t2",
          name: "Mariana Souza",
          date: "10/10/2023",
          title: "Resultados incríveis",
          quote: "Fiz a harmonização e amei o resultado. Muito natural.",
          tag: "Nota 5/5",
          avatarSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-holding-hands-together-joyfully-looking-camera-modern-clothes-store_574295-2021.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-asian-doctor-with-lab-coat_23-2149870311.jpg",
          imageAlt: "happy woman smile after facial treatment",
        },
        {
          id: "t3",
          name: "Camila Dias",
          date: "22/11/2023",
          title: "Confiança total",
          quote: "Clínica muito limpa e organizada. Indico muito!",
          tag: "Nota 5/5",
          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-applying-cream_23-2148389885.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65172.jpg?_wi=2",
          imageAlt: "happy woman smile after facial treatment",
        },
        {
          id: "t4",
          name: "Fernanda Lima",
          date: "05/12/2023",
          title: "Atendimento nota 10",
          quote: "A Kathyenne é uma profissional exemplar.",
          tag: "Nota 5/5",
          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-makeup-with-thick-eyebrows_23-2150512475.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-going-through-microblading-treatment_23-2149102659.jpg?_wi=2",
          imageAlt: "happy woman smile after facial treatment",
        },
        {
          id: "t5",
          name: "Juliana Reis",
          date: "12/01/2024",
          title: "Recomendo muito",
          quote: "Atendimento humanizado e resultados fantásticos.",
          tag: "Nota 5/5",
          avatarSrc: "http://img.b2bpic.net/free-photo/lovely-mixed-race-women-pout-lips-stretch-hands-as-going-embrace-someone-express-their-good-feeling-pose-together-against-white-wall-interracial-female-friends-indoor_273609-16476.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-doctor-cosmetology-studio_1157-33838.jpg?_wi=2",
          imageAlt: "happy woman smile after facial treatment",
        },
      ]}
      title="Resultados Comprovados"
      description="O que nossas clientes dizem sobre a experiência na Kathyenne Morais."
    />
  </div>

  <div id="metricas" data-section="metricas">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Star,
          title: "Nota Google",
          value: "5.0",
        },
        {
          id: "m2",
          icon: Users,
          title: "Avaliações Reais",
          value: "24+",
        },
        {
          id: "m3",
          icon: Award,
          title: "Anos de Confiança",
          value: "Referência",
        },
      ]}
      title="Nossos Números"
      description="Confiança que gera resultados."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Como agendar?",
          content: "Pelo nosso WhatsApp oficial (83) 98876-7413.",
        },
        {
          id: "f2",
          title: "Onde fica?",
          content: "R. Paulo de Frontin, 55 - Estação Velha, Campina Grande.",
        },
        {
          id: "f3",
          title: "Aceitam cartões?",
          content: "Sim, facilitamos o pagamento em diversas condições.",
        },
      ]}
      title="Perguntas Frequentes"
      description="Tire suas dúvidas antes de agendar."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contato" data-section="contato">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Entre em Contato"
      title="Pronta para transformar sua autoestima?"
      description="Fale com nossa equipe agora mesmo e agende sua consulta."
      buttonText="Falar no WhatsApp"
      onSubmit={(e) => window.open('https://wa.me/5583988767413')}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Sobre nós",
              href: "#servicos",
            },
            {
              label: "Serviços",
              href: "#servicos-catalog",
            },
          ],
        },
        {
          items: [
            {
              label: "WhatsApp",
              href: "https://wa.me/5583988767413",
            },
            {
              label: "Localização",
              href: "#contato",
            },
          ],
        },
      ]}
      logoText="Kathyenne Morais"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
