"use client"

import Link from "next/link"
import { MessageCircle, BookOpen, Users, HeadphonesIcon, Clock, Shield } from "lucide-react"
import { AnimatedWrapper } from "@/components/animated-wrapper"
import { SectionTitle } from "@/components/section-title"
import { GlassCard } from "@/components/glass-card"
import { Button } from "@/components/ui/button"

interface SupportOption {
    icon: React.ReactNode
    title: string
    description: string
    buttonText: string
    link: string
    features?: string[]
    badge?: string
}

interface SupportData {
    sectionId: string
    overline: string
    title: string
    subtitle?: string
    options: SupportOption[]
}

// Dados padrão de suporte
const defaultSupportData: SupportData = {
    sectionId: "suporte",
    overline: "Suporte Dedicado",
    title: "Estamos Sempre à Disposição para Ajudá-lo",
    subtitle: "Conte com nossa equipe especializada para garantir o melhor aproveitamento do sistema GADM e maximizar os resultados da sua empresa.",
    options: [
        {
            icon: <MessageCircle size={32} className="text-primary" />,
            title: "Atendimento Online",
            description: "Suporte técnico em tempo real para resolver suas dúvidas com agilidade e eficiência.",
            buttonText: "Iniciar Chat",
            link: "https://wa.me/5544998543210",
            features: ["Resposta imediata", "Técnicos especializados", "Suporte via WhatsApp"],
            badge: "24/7"
        },
        {
            icon: <BookOpen size={32} className="text-primary" />,
            title: "Base de Conhecimento",
            description: "Acesse nossa biblioteca completa com tutoriais, guias e documentação detalhada do sistema.",
            buttonText: "Acessar Documentação",
            link: "#documentacao",
            features: ["Tutoriais em vídeo", "Guias passo a passo", "FAQ completo"],
            badge: "Gratuito"
        },
        {
            icon: <Users size={32} className="text-primary" />,
            title: "Treinamentos",
            description: "Treinamentos personalizados para sua equipe dominar todas as funcionalidades do sistema.",
            buttonText: "Solicitar Treinamento",
            link: "#contato",
            features: ["Presencial ou online", "Material didático", "Certificado"],
            badge: "Personalizado"
        },
    ]
}

// Componente para um card de opção de suporte
interface SupportOptionCardProps {
    option: SupportOption
    index: number
    showFeatures?: boolean
}

function SupportOptionCard({ option, index, showFeatures = true }: SupportOptionCardProps) {
    return (
        <AnimatedWrapper delay={index * 0.1}>
            <GlassCard className="h-full flex flex-col text-center group hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:border-primary/20 relative overflow-hidden">
                {/* Badge opcional */}
                {option.badge && (
                    <div className="absolute top-4 right-4 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full font-medium">
                        {option.badge}
                    </div>
                )}

                {/* Ícone com animação */}
                <div className="mb-6 flex justify-center">
                    <div className="p-4 rounded-2xl bg-primary/10 group-hover:bg-primary/20 transition-all duration-300 group-hover:scale-110">
                        {option.icon}
                    </div>
                </div>

                {/* Título */}
                <h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-primary transition-colors duration-300">
                    {option.title}
                </h3>

                {/* Descrição */}
                <p className="text-muted-foreground text-sm leading-relaxed mb-4 flex-grow">
                    {option.description}
                </p>

                {/* Features opcionais */}
                {showFeatures && option.features && (
                    <ul className="space-y-2 mb-6 text-left">
                        {option.features.map((feature, idx) => (
                            <li key={idx} className="flex items-center text-xs text-muted-foreground">
                                <span className="w-1.5 h-1.5 bg-primary rounded-full mr-2 flex-shrink-0"></span>
                                {feature}
                            </li>
                        ))}
                    </ul>
                )}

                {/* Call to action */}
                <div className="mt-auto">
                    <Button
                        asChild
                        variant="outline"
                        className="w-full border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-300 group/btn"
                    >
                        <Link
                            href={option.link}
                            target={option.link.startsWith('http') ? '_blank' : undefined}
                            rel={option.link.startsWith('http') ? 'noopener noreferrer' : undefined}
                            className="flex items-center justify-center"
                        >
                            <span>{option.buttonText}</span>
                            {option.link.startsWith('http') && (
                                <MessageCircle size={16} className="ml-2 group-hover/btn:scale-110 transition-transform" />
                            )}
                        </Link>
                    </Button>
                </div>
            </GlassCard>
        </AnimatedWrapper>
    )
}

// Seção adicional de garantias/benefícios
interface SupportBenefitsProps {
    benefits: Array<{
        icon: React.ReactNode
        title: string
        description: string
    }>
}

function SupportBenefits({ benefits }: SupportBenefitsProps) {
    return (
        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
            {benefits.map((benefit, index) => (
                <AnimatedWrapper key={benefit.title} delay={0.3 + index * 0.1}>
                    <div className="flex items-start gap-4 text-center md:text-left">
                        <div className="flex-shrink-0 p-2 rounded-lg bg-primary/10">
                            {benefit.icon}
                        </div>
                        <div>
                            <h4 className="font-medium text-foreground mb-1">{benefit.title}</h4>
                            <p className="text-sm text-muted-foreground">{benefit.description}</p>
                        </div>
                    </div>
                </AnimatedWrapper>
            ))}
        </div>
    )
}

// Componente principal da seção
interface SupportSectionProps {
    data?: SupportData
    className?: string
    showFeatures?: boolean
    showBenefits?: boolean
    variant?: "default" | "compact" | "detailed"
}

export function SupportSection({
    data = defaultSupportData,
    className = "",
    showFeatures = true,
    showBenefits = true,
    variant = "default"
}: SupportSectionProps) {
    // Benefícios do suporte
    const supportBenefits = [
        {
            icon: <HeadphonesIcon size={20} className="text-primary" />,
            title: "Suporte Especializado",
            description: "Equipe técnica com ampla experiência em sistemas de gestão"
        },
        {
            icon: <Clock size={20} className="text-primary" />,
            title: "Resposta Rápida",
            description: "Atendimento ágil para não interromper suas operações"
        },
        {
            icon: <Shield size={20} className="text-primary" />,
            title: "Garantia de Qualidade",
            description: "Comprometimento com a excelência em todos os atendimentos"
        }
    ]

    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">
                {/* Header da seção */}
                <AnimatedWrapper>
                    <SectionTitle
                        overline={data.overline}
                        title={data.title}
                        subtitle={data.subtitle}
                    />
                </AnimatedWrapper>

                {/* Grid de opções de suporte */}
                <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
                    {data.options.map((option, index) => (
                        <SupportOptionCard
                            key={option.title}
                            option={option}
                            index={index}
                            showFeatures={showFeatures}
                        />
                    ))}
                </div>

                {/* Benefícios adicionais */}
                {showBenefits && variant === "detailed" && (
                    <SupportBenefits benefits={supportBenefits} />
                )}

                {/* Call to action adicional */}
                {variant === "detailed" && (
                    <AnimatedWrapper delay={0.5}>
                        <div className="text-center mt-12 p-8 rounded-2xl bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/20">
                            <h3 className="text-lg font-semibold text-foreground mb-2">
                                Precisa de ajuda personalizada?
                            </h3>
                            <p className="text-muted-foreground mb-4">
                                Nossa equipe está pronta para atender suas necessidades específicas
                            </p>
                            <Button asChild className="bg-primary hover:bg-primary/90">
                                <Link href="#contato">
                                    Falar com Especialista
                                </Link>
                            </Button>
                        </div>
                    </AnimatedWrapper>
                )}
            </div>
        </section>
    )
}

// Exports para facilitar customização
export type { SupportOption, SupportData }