"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Target } from "lucide-react";

export default function SegmentsPage() {
  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="segments" data-section="segments">
        <FeatureCardTwentyThree
          features={[
            {
              id: "1",
              title: "Comunicação Visual & Sinalização",
              tags: ["Signage", "Branding", "Outdoor"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APYRvSHVuqSDqR00s2zbxPADrj/vibrant-communication-materials-includin-1772496492367-954eb3eb.png",
              imageAlt: "Soluções em Comunicação Visual",
            },
            {
              id: "2",
              title: "Impressão Têxtil Industrial",
              tags: ["Têxtil", "Fashion", "Customização"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APYRvSHVuqSDqR00s2zbxPADrj/high-quality-textile-printing-showing-de-1772496491586-b005cfbd.png",
              imageAlt: "Impressão em Têxteis",
            },
            {
              id: "3",
              title: "Produtos Promocionais & Personalizados",
              tags: ["Branding", "Marketing", "Corporate"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APYRvSHVuqSDqR00s2zbxPADrj/branded-promotional-products-including-p-1772496491720-6729b450.jpg",
              imageAlt: "Produtos Promocionais",
            },
            {
              id: "4",
              title: "Gráficas & Estúdios de Design",
              tags: ["Gráfica", "Design", "Produção"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APYRvSHVuqSDqR00s2zbxPADrj/professional-printing-for-graphics-indus-1772496492326-84dc595b.png",
              imageAlt: "Soluções Gráficas Profissionais",
            },
          ]}
          animationType="slide-up"
          title="Segmentos Atendidos"
          description="Soluções especializadas para as principais indústrias que dependem de impressão digital de alta qualidade"
          tag="Múltiplas Aplicações"
          tagIcon={Target}
          tagAnimation="entrance-slide"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

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