"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Zap, Clock, Users, FileText } from "lucide-react";

export default function SupportPage() {
  const navItems = [
    { name: "Início", id: "/" },
    { name: "Empresa", id: "/empresa" },
    { name: "Produtos", id: "/produtos" },
    { name: "Segmentos", id: "/segmentos" },
    { name: "Contato", id: "/contato" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Início", href: "/" },
        { label: "Sobre Nós", href: "/empresa" },
        { label: "Produtos", href: "/produtos" },
      ],
    },
    {
      items: [
        { label: "Segmentos", href: "/segmentos" },
        { label: "Diferenciais", href: "/empresa" },
        { label: "Suporte", href: "/suporte" },
      ],
    },
    {
      items: [
        { label: "Contato", href: "/contato" },
        { label: "WhatsApp", href: "https://wa.me/55" },
        { label: "E-mail", href: "mailto:contato@fabrijet.com.br" },
      ],
    },
    {
      items: [
        { label: "Política de Privacidade", href: "#" },
        { label: "Termos & Condições", href: "#" },
        { label: "Compliance", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Fabrijet"
          bottomLeftText="Soluções em Impressão Digital"
          bottomRightText="contato@fabrijet.com.br"
        />
      </div>

      <div id="support" data-section="support">
        <AboutMetric
          title="Centro de Suporte e Downloads - Fabrijet"
          useInvertedBackground={false}
          metricsAnimation="entrance-slide"
          metrics={[
            { icon: Clock, label: "Atendimento Técnico", value: "24/7" },
            { icon: Zap, label: "Tempo Médio de Resposta", value: "<2h" },
            { icon: Users, label: "Especialistas Disponíveis", value: "50+" },
            { icon: FileText, label: "Documentos e Manuais", value: "100+" },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis columns={footerColumns} logoText="Fabrijet" />
      </div>
    </ThemeProvider>
  );
}