"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { CheckCircle, MapPin, Star, TrendingUp, Instagram, Twitter, Linkedin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmall"
        background="grid"
        cardStyle="outline"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Início",          id: "#hero"},
        {
          name: "O Problema",          id: "#problema"},
        {
          name: "A Solução",          id: "#solucao"},
        {
          name: "Resultados",          id: "#resultados"},
        {
          name: "Método",          id: "#metodo"},
        {
          name: "Depoimentos",          id: "#depoimentos"},
        {
          name: "Para Quem",          id: "#para-quem"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contato",          id: "#contato"},
      ]}
      button={{
        text: "Falar no WhatsApp",        href: "https://wa.me/5511912581576"}}
      brandName="Ariane Spinola"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="Ariane Spinola"
      description="Especialista em Google Meu Negócio. Coloque sua empresa no topo do Google e receba clientes todos os dias com uma estratégia profissional de posicionamento local que transforma pesquisas no Google e Google Maps em contatos e agendamentos reais."
      buttons={[
        {
          text: "Quero ser atendida agora",          href: "https://wa.me/5511912581576"},
        {
          text: "Ver como funciona",          href: "#solucao"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg"
      imageAlt="Ariane Spinola, especialista em Google Meu Negócio"
      showDimOverlay={true}
    />
  </div>

  <div id="problema" data-section="problema">
      <MediaAbout
      useInvertedBackground={true}
      title="O Problema: Sua Empresa Invisível?"
      description="Seu telefone quase não toca, você depende 100% de indicações, já gastou com agência sem retorno, seu concorrente menor aparece primeiro, tem perfil no Google mas ninguém encontra, ou sente que está 'invisível' na sua cidade? O problema raramente é o seu serviço; é que a maioria das empresas não está posicionada corretamente no Google."
      tag="Identifique-se"
      imageSrc="http://img.b2bpic.net/free-photo/image-adult-man-looking-complicated-laptop-screen-staring-puzzled-his-monitor-doing_1258-245410.jpg"
      imageAlt="Empresa invisível no Google"
    />
  </div>

  <div id="solucao" data-section="solucao">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Perfil Completo e Profissional",          description: "Otimizamos seu Google Meu Negócio com palavras-chave estratégicas e informações completas para máxima relevância.",          bentoComponent: "reveal-icon",          icon: CheckCircle
        },
        {
          title: "Aparição no Mapa Local",          description: "Sua empresa no Google Maps, visível para clientes que pesquisam na sua região, aumentando seu alcance e acessibilidade.",          bentoComponent: "reveal-icon",          icon: MapPin
        },
        {
          title: "Avaliações Trabalhadas",          description: "Gerenciamento de avaliações para construir a credibilidade da sua empresa e gerar autoridade imediata.",          bentoComponent: "reveal-icon",          icon: Star
        },
        {
          title: "Estratégia de Posicionamento",          description: "Desenvolvemos uma estratégia clara para sua empresa subir e se manter no topo dos resultados de busca local.",          bentoComponent: "reveal-icon",          icon: TrendingUp
        },
      ]}
      title="A Solução: Quem Aparece Primeiro Recebe Mais Clientes"
      description="As 3 primeiras posições do Google concentram mais de 75% dos cliques. Não basta ter perfil — sua empresa precisa estar otimizada para aparecer quando o cliente realmente está procurando."
    />
  </div>

  <div id="resultados" data-section="resultados">
      <MetricCardSeven
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "+150",          title: "Empresas Posicionadas",          items: [
            "Experiência comprovada"],
        },
        {
          id: "m2",          value: "+75%",          title: "Cliques no Top 3",          items: [
            "Visibilidade máxima"],
        },
        {
          id: "m3",          value: "4.9★",          title: "Avaliação dos Clientes",          items: [
            "Confiança imediata"],
        },
        {
          id: "m4",          value: "30",          title: "Dias para Resultados",          items: [
            "Retorno rápido"],
        },
      ]}
      title="Resultados Comprovados"
      description="Imagine seu celular tocando com clientes prontos para contratar. Veja o impacto real da otimização do Google Meu Negócio na sua empresa."
    />
  </div>

  <div id="metodo" data-section="metodo">
      <ProductCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "01. Posicionamento Estratégico",          price: "Análise Gratuita",          imageSrc: "http://img.b2bpic.net/free-photo/empty-home-setup-desk-filled-with-documents-financial-reports_482257-100068.jpg",          imageAlt: "Otimização de perfil com palavras-chave"},
        {
          id: "p2",          name: "02. Construção de Autoridade",          price: "Transformação Digital",          imageSrc: "http://img.b2bpic.net/free-photo/merchandise-business-goal-investment-plan-concept_53876-127510.jpg",          imageAlt: "Gestão de avaliações e fotos profissionais"},
        {
          id: "p3",          name: "03. Geração de Clientes",          price: "Visibilidade e Conversão",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-two-businessmen-shaking-hands-desk_23-2147839892.jpg",          imageAlt: "Transformando buscas em contatos reais"},
      ]}
      title="O Nosso Método"
      description="Um processo claro, testado e que entrega resultados reais para colocar sua empresa no topo do Google."
    />
  </div>

  <div id="depoimentos" data-section="depoimentos">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "Marcos R.",          role: "Clínica Odontológica",          company: "São Paulo",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-pretty-curly-haired-lady-showing-thumb-up-park_1262-20821.jpg",          imageAlt: "Foto de Marcos R."},
        {
          id: "t2",          name: "Patrícia L.",          role: "Estética Avançada",          company: "Guarulhos",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg",          imageAlt: "Foto de Patrícia L."},
        {
          id: "t3",          name: "Rafael M.",          role: "Advocacia",          company: "Osasco",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",          imageAlt: "Foto de Rafael M."},
        {
          id: "t4",          name: "Carla F.",          role: "Imobiliária",          company: "Belo Horizonte",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204371.jpg",          imageAlt: "Foto de Carla F."},
        {
          id: "t5",          name: "Bruno S.",          role: "Oficina Mecânica",          company: "Rio de Janeiro",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-self-care-ritual_23-2149204972.jpg",          imageAlt: "Foto de Bruno S."},
      ]}
      kpiItems={[
        {
          value: "4-6+",          label: "Novos Contatos Semanais"},
        {
          value: "+90%",          label: "Satisfação do Cliente"},
        {
          value: "<2",          label: "Meses para o Topo"},
      ]}
      title="Depoimentos"
      description="O que os clientes estão dizendo sobre a transformação de seus negócios com o Google Meu Negócio."
    />
  </div>

  <div id="para-quem" data-section="para-quem">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Dentistas",        "Médicos",        "Clínicas",        "Advogados",        "Estéticas",        "Imobiliárias",        "Concessionárias",        "Restaurantes"]}
      title="Para Quem Funciona Nosso Método"
      description="No Google, o cliente já entra procurando solução. Ele quer contratar alguém — e contrata quem aparece primeiro. Nosso método é ideal para:"
      speed={60}
      showCard={false}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",          title: "Em quanto tempo vejo resultado?",          content: "Os primeiros resultados aparecem em até 30 dias, e o posicionamento no topo se consolida nos meses seguintes com a manutenção estratégica."},
        {
          id: "faq2",          title: "Funciona pra qualquer cidade?",          content: "Sim, nosso método é aplicado com sucesso para empresas de qualquer cidade no Brasil, adaptando-se às especificidades de cada localidade."},
        {
          id: "faq3",          title: "Preciso ter site ou rede social?",          content: "Não. Nosso foco é o Google Meu Negócio, garantindo que você receba clientes sem depender de um site ou de redes sociais ativas."},
        {
          id: "faq4",          title: "Quanto custa?",          content: "O investimento varia conforme a complexidade do seu negócio e o nível de otimização necessário. Oferecemos uma análise gratuita para detalhar a proposta."},
        {
          id: "faq5",          title: "E se eu já tenho perfil no Google?",          content: "Mesmo com um perfil existente, nossa análise gratuita identificará oportunidades de otimização para elevar seu posicionamento e resultados."},
        {
          id: "faq6",          title: "Ainda tenho dúvidas — falar no WhatsApp",          content: "Seja qual for sua dúvida, estamos prontos para ajudar. Clique no botão de WhatsApp e converse diretamente com um especialista."},
      ]}
      title="Dúvidas Frequentes"
      description="Tudo o que você precisa saber sobre como posicionar sua empresa no Google Meu Negócio."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-indian-woman-customer-support-agent-headset-using-laptop-talking_23-2148106198.jpg"
      imageAlt="Atendimento ao cliente para dúvidas frequentes"
      mediaPosition="right"
    />
  </div>

  <div id="contato" data-section="contato">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Vagas Limitadas para Novembro"
      title="Análise Gratuita do Seu Negócio"
      description="Antes de qualquer proposta, eu analiso como sua empresa aparece hoje no Google e te mostro exatamente o que precisa ser melhorado. Sem compromisso, sem pegadinha. Garanta sua análise gratuita hoje!"
      buttons={[
        {
          text: "Falar no WhatsApp",          href: "https://wa.me/5511912581576"
        }
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Ariane Spinola"
      copyrightText="© 2026 Ariane Spinola — Todos os direitos reservados."
      socialLinks={[
        {
          icon: Instagram,          href: "https://instagram.com/a.arianespinola",          ariaLabel: "Instagram"
        },
        {
          icon: Twitter,          href: "#",          ariaLabel: "Twitter"
        },
        {
          icon: Linkedin,          href: "#",          ariaLabel: "LinkedIn"
        }
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/geometric-design_23-2148700201.jpg"
      logoAlt="Ariane Spinola Logo"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}