"use client"

import { Search, ListChecks, DraftingCompass, Settings2, ClipboardCheck, Rocket } from "lucide-react"
import { AnimatedWrapper } from "@/components/animated-wrapper"
import { SectionTitle } from "@/components/section-title"

interface ProcessStep {
    num: string
    icon: React.ReactNode
    title: string
    description: string
}

interface ProcessData {
    sectionId: string
    overline: string
    title: string
    subtitle?: string
    steps: ProcessStep[]
}

// Dados padrão do processo
const defaultProcessData: ProcessData = {
    sectionId: "processos",
    overline: "Como Funciona",
    title: "Nossa Estratégia de Implementação",
    subtitle: "Um processo estruturado e comprovado para garantir o sucesso da sua solução tecnológica.",
    steps: [
        {
            num: "01",
            icon: <Search size={24} />,
            title: "CONHEÇA",
            description: "Análise inicial do negócio e levantamento de requisitos para entender suas necessidades específicas."
        },
        {
            num: "02",
            icon: <ListChecks size={24} />,
            title: "PLANO",
            description: "Definição da estratégia de implantação e cronograma detalhado do projeto."
        },
        {
            num: "03",
            icon: <DraftingCompass size={24} />,
            title: "PROJETO",
            description: "Customização e configuração da solução de acordo com os processos da empresa."
        },
        {
            num: "04",
            icon: <Settings2 size={24} />,
            title: "DESENVOLVER",
            description: "Implementação do sistema com desenvolvimento de funcionalidades específicas."
        },
        {
            num: "05",
            icon: <ClipboardCheck size={24} />,
            title: "TESTES",
            description: "Validação completa da solução com testes funcionais e de integração."
        },
        {
            num: "06",
            icon: <Rocket size={24} />,
            title: "LANÇAMENTO",
            description: "Go-live do sistema com treinamento da equipe e acompanhamento inicial."
        },
    ]
}

// Componente para um step individual
interface ProcessStepCardProps {
    step: ProcessStep
    index: number
}

function ProcessStepCard({ step, index }: ProcessStepCardProps) {
    return (
        <AnimatedWrapper delay={index * 0.1}>
            <div className="flex items-start gap-6 group">
                {/* Número do step */}
                <div className="flex-shrink-0 w-16 h-16 rounded-full bg-primary/10 dark:bg-primary/20 text-primary flex items-center justify-center text-2xl font-bold group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-300">
                    {step.num}
                </div>

                {/* Conteúdo do step */}
                <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                        <span className="text-primary group-hover:text-primary/80 transition-colors">
                            {step.icon}
                        </span>
                        <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
                            {step.title}
                        </h3>
                    </div>
                    <p className="text-muted-foreground text-sm leading-relaxed">
                        {step.description}
                    </p>
                </div>
            </div>
        </AnimatedWrapper>
    )
}

// Componente principal da seção
interface ProcessSectionProps {
    data?: ProcessData
    className?: string
    showSubtitle?: boolean
}

export function ProcessSection({
    data = defaultProcessData,
    className = "",
    showSubtitle = false
}: ProcessSectionProps) {
    return (
        <section
            id={data.sectionId}
            className={`py-20 lg:py-28 ${className}`}
        >
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                {/* Header da seção */}
                <AnimatedWrapper>
                    <SectionTitle
                        overline={data.overline}
                        title={data.title}
                        subtitle={showSubtitle ? data.subtitle : undefined}
                    />
                </AnimatedWrapper>

                {/* Grid de steps */}
                <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
                    {data.steps.map((step, index) => (
                        <ProcessStepCard
                            key={step.title}
                            step={step}
                            index={index}
                        />
                    ))}
                </div>
            </div>
        </section>
    )
}

// Exports para facilitar customização
export type { ProcessStep, ProcessData }