"use client"

import Image from "next/image"
import Link from "next/link"
import { BookOpen, ArrowRight, Clock, FileText } 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 DocumentationData {
    sectionId: string
    overline: string
    title: string
    subtitle?: string
    comingSoonMessage: string
    expectedFeatures: string[]
    contactUrl: string
    imageUrl: string
}

// Dados padrão
const defaultDocumentationData: DocumentationData = {
    sectionId: "documentacao",
    overline: "Recursos",
    title: "Documentação Completa do GADM",
    subtitle: "Encontre guias detalhados, tutoriais em vídeo e respostas para suas perguntas sobre o sistema.",
    comingSoonMessage: "Nossa documentação detalhada está sendo preparada para oferecer a melhor experiência de aprendizado e suporte.",
    expectedFeatures: [
        "Guias passo a passo ilustrados",
        "Tutoriais em vídeo interativos",
        "Base de conhecimento completa",
        "FAQ com respostas detalhadas"
    ],
    contactUrl: "#contato",
    imageUrl: "/assets/images/index/docs.png",
}

// Componente principal
interface DocumentationSectionProps {
    data?: DocumentationData
    className?: string
}

export function DocumentationSection({
    data = defaultDocumentationData,
    className = ""
}: DocumentationSectionProps) {
    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={data.subtitle}
                    />
                </AnimatedWrapper>

                <div className="mt-12">
                    <AnimatedWrapper delay={0.1}>
                        <GlassCard className="text-center p-8 md:p-12">
                            {/* Badge "Em breve" */}
                            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium ">
                                <Clock size={16} />
                                Em Desenvolvimento
                            </div>

                            {/* Mensagem principal */}
                            <p className="text-muted-foreground text-lg mb-8 leading-relaxed">
                                {data.comingSoonMessage}
                            </p>

                            {/* Preview da imagem */}
                            <div className="mb-8">
                                <Image
                                    src={data.imageUrl}
                                    alt="Preview da documentação em desenvolvimento"
                                    width={800}
                                    height={400}
                                    className="rounded-2xl shadow-lg mx-auto border border-border/50"
                                    placeholder="blur"
                                    blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
                                />
                            </div>

                            {/* Lista do que está vindo */}
                            <div className="mb-8">
                                <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center justify-center gap-2">
                                    <FileText size={20} className="text-primary" />
                                    O que você encontrará:
                                </h3>
                                <div className="grid sm:grid-cols-2 gap-3 text-left max-w-md mx-auto">
                                    {data.expectedFeatures.map((feature, index) => (
                                        <div key={index} className="flex items-center gap-2">
                                            <span className="w-1.5 h-1.5 bg-primary rounded-full flex-shrink-0"></span>
                                            <span className="text-sm text-muted-foreground">{feature}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>

                            {/* Call to actions */}
                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <Button
                                    asChild
                                    size="lg"
                                    className="bg-primary hover:bg-primary/90 group"
                                >
                                    <Link href={data.contactUrl} className="flex items-center gap-2">
                                        <BookOpen size={18} />
                                        <span>Solicitar Suporte Agora</span>
                                        <ArrowRight
                                            size={16}
                                            className="group-hover:translate-x-1 transition-transform"
                                        />
                                    </Link>
                                </Button>

                                <Button
                                    asChild
                                    variant="outline"
                                    size="lg"
                                    className="border-primary text-primary hover:bg-primary hover:text-primary-foreground"
                                >
                                    <Link href="mailto:contato@ingasoft.com.br">
                                        Enviar Dúvida por E-mail
                                    </Link>
                                </Button>
                            </div>

                            {/* Texto adicional */}
                            <p className="text-xs text-muted-foreground mt-6">
                                Enquanto nossa documentação está em desenvolvimento, nossa equipe está disponível para suporte personalizado
                            </p>
                        </GlassCard>
                    </AnimatedWrapper>
                </div>
            </div>
        </section>
    )
}

// Export para facilitar customização
export type { DocumentationData }