"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";

const navItems = [
  { name: "Início", id: "/" },
  { name: "Serviços", id: "/servicos" },
  { name: "Antes & Depois", id: "#gallery" },
  { name: "Avaliações", id: "#testimonials" },
  { name: "Localização", id: "#location" },
];

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Sapatreiro Pro"
          navItems={navItems}
          button={{ text: "Ligar Agora", href: "tel:+5511999999999" }}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <TextSplitAbout
          title="Nossa História"
          description={[
            "Sapatreiro Pro foi fundado há mais de 25 anos com uma simples missão: restaurar os sapatos que as pessoas amam. O que começou como uma pequena oficina familiar se tornou referência em conserto profissional na região.",
            "Ao longo de duas décadas e meia, acumulamos conhecimento incomparável em restauração de calçados de todos os tipos. Desde sapatos de festa até botas de trabalho, desde bolsas de designer até carteiras de couro, cada peça é tratada com o mesmo cuidado e dedicação.",
            "Hoje, somos conhecidos não apenas pela qualidade do nosso trabalho, mas pela honestidade nos preços, pelos prazos cumpridos e pelo atendimento que sempre coloca o cliente em primeiro lugar. Cada sapato que sai da nossa oficina carrega a marca da nossa paixão pelo ofício.",
          ]}
          buttons={[{ text: "Entre em Contato", href: "tel:+5511999999999" }]}
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      <div id="about-achievements" data-section="about-achievements">
        <MetricCardTwo
          title="Nossa Jornada em Números"
          description="Marcos importantes que definem a excelência da Sapatreiro Pro"
          metrics={[
            { id: "1", value: "25+", description: "Anos Restaurando Calçados" },
            { id: "2", value: "5000+", description: "Clientes Satisfeitos" },
            { id: "3", value: "15000+", description: "Peças Restauradas" },
            { id: "4", value: "4.9★", description: "Avaliação Média" },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about-values" data-section="about-values">
        <TextSplitAbout
          title="Nossos Valores"
          description={[
            "Qualidade é nossa prioridade máxima. Usamos apenas materiais de primeira qualidade e técnicas comprovadas que garantem durabilidade e beleza em cada conserto.",
            "Honestidade nos preços e transparência no processo. Você sempre sabe exatamente o que está pagando e porque. Não há surpresas, apenas trabalho justo e bem feito.",
            "Compromisso com o cliente. Cada pessoa que entra em nossa loja merece atendimento personalizado, atenção aos detalhes e respeito pelo tempo e pelos sapatos que trazem.",
          ]}
          buttons={[{ text: "Agende uma Visita", href: "tel:+5511999999999" }]}
          showBorder={true}
          useInvertedBackground={true}
        />
      </div>

      <div id="about-contact" data-section="about-contact">
        <ContactCenter
          tag="Quer Nos Conhecer?"
          title="Visite Nossa Oficina"
          description="Convidamos você a conhecer pessoalmente nosso trabalho e nossa equipe. Estamos localizados no coração de São Paulo, prontos para receber você."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Seu email"
          buttonText="Marcar Visita"
          termsText="Faremos uma visita guiada pela nossa oficina e mostraremos nosso processo de trabalho. Você compreenderá por que confiamos tanto em nossa qualidade."
        />
      </div>

      <footer id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="SAPATREIRO PRO"
          columns={[
            {
              items: [
                { label: "Início", href: "#hero" },
                { label: "Serviços", href: "#services" },
                { label: "Avaliações", href: "#testimonials" },
              ],
            },
            {
              items: [
                { label: "Localização", href: "#location" },
                { label: "Contato", href: "#contact" },
                { label: "Sobre Nós", href: "/sobre" },
              ],
            },
            {
              items: [
                { label: "Ligar", href: "tel:+5511999999999" },
                { label: "WhatsApp", href: "https://wa.me/5511999999999" },
                { label: "Email", href: "mailto:contato@sapatreiropro.com.br" },
              ],
            },
            {
              items: [
                { label: "Google Maps", href: "https://maps.google.com" },
                { label: "Política de Privacidade", href: "#" },
                { label: "Termos de Uso", href: "#" },
              ],
            },
          ]}
        />
      </footer>
    </ThemeProvider>
  );
}