"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
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 ContactPage() {
  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="contact-info" data-section="contact-info">
        <TextSplitAbout
          title="Entre em Contato"
          description={[
            "Estamos localizados no coração de São Paulo, facilmente acessível por transporte público e com estacionamento disponível nas proximidades.",
            "Segunda a Sexta: 9h às 18h | Sábado: 9h às 13h. Domingo e feriados: Fechado. Para um melhor atendimento, recomendamos agendar com antecedência.",
            "Você pode entrar em contato por telefone, WhatsApp, email ou visitando nossa loja pessoalmente. Qualquer dúvida sobre seus sapatos, nos envie uma foto e responderemos em breve.",
          ]}
          buttons={[{ text: "Enviar WhatsApp", href: "https://wa.me/5511999999999" }]}
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCenter
          tag="Fale Conosco"
          title="Solicite Um Orçamento Gratuito"
          description="Preencha o formulário abaixo com seus dados e uma breve descrição do serviço desejado. Nossa equipe entrará em contato em até 24 horas com um orçamento personalizado."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Seu email para contato"
          buttonText="Enviar Solicitação"
          termsText="Seus dados serão usados apenas para fornecer orçamento e manter contato sobre seu serviço. Nunca compartilhamos informações com terceiros."
        />
      </div>

      <div id="contact-methods" data-section="contact-methods">
        <div className="mx-auto px-4 md:px-6">
          <div className="max-w-4xl mx-auto py-16 md:py-24">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-center text-foreground mb-12">
              Outras Formas de Entrar em Contato
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="p-8 rounded-2xl bg-card border border-accent">
                <h3 className="text-xl font-semibold text-foreground mb-4">Telefone</h3>
                <a href="tel:+5511999999999" className="text-lg text-primary-cta hover:underline">
                  (11) 9999-9999
                </a>
                <p className="text-foreground/60 mt-2">Ligações: Seg-Sex 9h-18h, Sab 9h-13h</p>
              </div>
              <div className="p-8 rounded-2xl bg-card border border-accent">
                <h3 className="text-xl font-semibold text-foreground mb-4">WhatsApp</h3>
                <a href="https://wa.me/5511999999999" className="text-lg text-primary-cta hover:underline">
                  +55 11 9999-9999
                </a>
                <p className="text-foreground/60 mt-2">Disponível para envio de fotos e orçamentos</p>
              </div>
              <div className="p-8 rounded-2xl bg-card border border-accent">
                <h3 className="text-xl font-semibold text-foreground mb-4">Email</h3>
                <a href="mailto:contato@sapatreiropro.com.br" className="text-lg text-primary-cta hover:underline">
                  contato@sapatreiropro.com.br
                </a>
                <p className="text-foreground/60 mt-2">Resposta em até 24 horas</p>
              </div>
              <div className="p-8 rounded-2xl bg-card border border-accent">
                <h3 className="text-xl font-semibold text-foreground mb-4">Endereço</h3>
                <p className="text-lg text-foreground">Rua Principal, 123</p>
                <p className="text-lg text-foreground">São Paulo, SP</p>
                <p className="text-foreground/60 mt-2">
                  <a href="https://maps.google.com" className="text-primary-cta hover:underline">
                    Ver no Google Maps
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </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>
  );
}