"use client"

import { TrendingUp, FileText, Archive, BarChartBig } from "lucide-react"
import { AnimatedWrapper } from "@/components/animated-wrapper"
import { SectionTitle } from "@/components/section-title"
import { GlassCard } from "@/components/glass-card"

interface Product {
    icon: React.ReactNode
    title: string
    description: string
}

interface ProductsData {
    sectionId: string
    overline: string
    title: string
    subtitle: string
    products: Product[]
}

// Dados dos produtos - separados da lógica de apresentação
const productsData: ProductsData = {
    sectionId: "produto",
    overline: "Nossas Soluções",
    title: "Produtos Completos para sua Empresa",
    subtitle: "Soluções completas para gerenciamento empresarial, adaptadas para o seu negócio.",
    products: [
        {
            icon: <TrendingUp size={32} className="text-primary" />,
            title: "Financeiro",
            description: "Facilite e agilize suas operações financeiras com automação de rotinas.",
        },
        {
            icon: <FileText size={32} className="text-primary" />,
            title: "NF-e, NFC-e, NFS-e",
            description: "Emissão de notas fiscais integrada com o módulo financeiro.",
        },
        {
            icon: <Archive size={32} className="text-primary" />,
            title: "SPED Fiscal e Contribuições",
            description: "Emissão de documentos fiscais de forma facilitada e segura.",
        },
        {
            icon: <BarChartBig size={32} className="text-primary" />,
            title: "Relatórios Gerenciais",
            description: "Emissão de relatórios para tomadas de decisões estratégicas.",
        },
    ]
}

// Componente para um produto individual
interface ProductCardProps {
    product: Product
    index: number
}

function ProductCard({ product, index }: ProductCardProps) {
    return (
        <AnimatedWrapper delay={index * 0.1}>
            <GlassCard className="h-full text-center group hover:transform hover:scale-105 transition-transform duration-300">
                <div className="mb-6 flex justify-center group-hover:scale-110 transition-transform duration-300">
                    {product.icon}
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-2 group-hover:text-primary transition-colors duration-300">
                    {product.title}
                </h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                    {product.description}
                </p>
            </GlassCard>
        </AnimatedWrapper>
    )
}

// Componente principal da seção
interface ProductsSectionProps {
    data?: ProductsData
    className?: string
}

export function ProductsSection({
    data = productsData,
    className = ""
}: ProductsSectionProps) {
    return (
        <section
            id={data.sectionId}
            className={`py-20 lg:py-28 bg-secondary ${className}`}
        >
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <AnimatedWrapper>
                    <SectionTitle
                        overline={data.overline}
                        title={data.title}
                        subtitle={data.subtitle}
                    />
                </AnimatedWrapper>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
                    {data.products.map((product, index) => (
                        <ProductCard
                            key={product.title}
                            product={product}
                            index={index}
                        />
                    ))}
                </div>
            </div>
        </section>
    )
}

// Export adicional para facilitar customização
export { type Product, type ProductsData }