import { Metadata } from 'next'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import { FileText, Shield, ArrowUpRight, Scale, Handshake, ScrollText, ChevronRight } from 'lucide-react'

export const metadata: Metadata = {
  title: 'Peças Processuais com IA | LexMind - Gere Documentos Jurídicos',
  description: 'Gere peças processuais completas com inteligência artificial: petições iniciais, contestações, apelações, contratos e muito mais. Rápido, preciso e personalizado.',
  keywords: 'peças processuais, petição inicial, contestação, apelação, contrato, IA jurídica, documentos jurídicos',
  openGraph: {
    title: 'Peças Processuais com IA | LexMind',
    description: 'Gere peças processuais completas com inteligência artificial. Rápido, preciso e personalizado para advogados.',
    type: 'website',
  },
}

const documentTypes = [
  {
    title: 'Petição Inicial',
    slug: 'peticao-inicial',
    description: 'A peça que dá início ao processo judicial. Apresente os fatos, fundamentos jurídicos e pedidos de forma clara e persuasiva.',
    icon: FileText,
    color: 'from-teal-500 to-teal-600',
    features: ['Qualificação das partes', 'Fundamentação jurídica', 'Pedidos específicos'],
  },
  {
    title: 'Contestação',
    slug: 'contestacao',
    description: 'A defesa do réu contra a petição inicial. Impugne fatos, apresente preliminares e construa uma defesa sólida.',
    icon: Shield,
    color: 'from-teal-500 to-teal-700',
    features: ['Preliminares processuais', 'Impugnação dos fatos', 'Teses defensivas'],
  },
  {
    title: 'Apelação',
    slug: 'apelacao',
    description: 'Recurso contra sentença de primeiro grau. Demonstre os erros da decisão e busque a reforma no tribunal.',
    icon: Scale,
    color: 'from-teal-600 to-indigo-600',
    features: ['Razões recursais', 'Demonstração do error in judicando', 'Pedido de reforma'],
  },
  {
    title: 'Contrato',
    slug: 'contrato',
    description: 'Documentos contratuais completos e seguros juridicamente. Cláusulas claras, proteção para ambas as partes.',
    icon: Handshake,
    color: 'from-indigo-500 to-teal-600',
    features: ['Cláusulas essenciais', 'Proteção jurídica', 'Conformidade legal'],
  },
]

export default function PecasPage() {
  return (
    <>
      <Navbar />
      <main className="relative min-h-screen overflow-hidden">
        {/* Background */}
        <div className="fixed inset-0 bg-grid pointer-events-none z-0" />
        <div className="fixed inset-0 bg-radial-purple pointer-events-none z-0" />
        <div className="fixed top-1/4 -left-32 w-96 h-96 bg-teal-600/10 rounded-full blur-[128px] pointer-events-none" />
        <div className="fixed top-3/4 -right-32 w-96 h-96 bg-teal-600/10 rounded-full blur-[128px] pointer-events-none" />

        {/* Hero */}
        <section className="relative z-10 pt-32 pb-20 px-4 sm:px-6 lg:px-8">
          <div className="max-w-7xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8">
              <ScrollText className="w-4 h-4 text-teal-400" />
              <span className="text-sm text-teal-300">Peças Processuais com IA</span>
            </div>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
              <span className="gradient-text">Todas as Peças Jurídicas</span>
              <br />
              <span className="text-white">em um só lugar</span>
            </h1>
            <p className="text-lg sm:text-xl text-gray-400 max-w-3xl mx-auto mb-12">
              Escolha o tipo de documento que você precisa e gere peças completas em minutos 
              com inteligência artificial treinada em milhares de processos reais.
            </p>
          </div>
        </section>

        {/* Grid de Peças */}
        <section className="relative z-10 pb-24 px-4 sm:px-6 lg:px-8">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {documentTypes.map((doc) => {
                const Icon = doc.icon
                return (
                  <Link
                    key={doc.slug}
                    href={`/pecas/${doc.slug}`}
                    className="group relative glass rounded-2xl p-8 hover:border-teal-500/30 transition-all duration-300 hover:glow-purple"
                  >
                    <div className="flex items-start gap-5">
                      <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${doc.color} flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300`}>
                        <Icon className="w-7 h-7 text-white" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between mb-3">
                          <h2 className="text-2xl font-bold text-white group-hover:gradient-text transition-all">
                            {doc.title}
                          </h2>
                          <ArrowUpRight className="w-5 h-5 text-gray-500 group-hover:text-teal-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all" />
                        </div>
                        <p className="text-gray-400 mb-4 leading-relaxed">
                          {doc.description}
                        </p>
                        <ul className="space-y-2">
                          {doc.features.map((feature) => (
                            <li key={feature} className="flex items-center gap-2 text-sm text-gray-500">
                              <ChevronRight className="w-3 h-3 text-teal-500" />
                              {feature}
                            </li>
                          ))}
                        </ul>
                        <div className="mt-6 inline-flex items-center gap-2 text-sm font-medium text-teal-400 group-hover:text-teal-300">
                          Gerar {doc.title} com IA
                          <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </div>
                      </div>
                    </div>
                  </Link>
                )
              })}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="relative z-10 pb-24 px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center glass rounded-2xl p-12">
            <h2 className="text-3xl font-bold text-white mb-4">
              Não encontrou o que procura?
            </h2>
            <p className="text-gray-400 mb-8 max-w-xl mx-auto">
              Nossa IA pode gerar qualquer tipo de peça processual. Acesse o painel e descreva 
              o que você precisa — nós cuidamos do resto.
            </p>
            <Link
              href="/register"
              className="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-teal-600 to-teal-600 text-white font-semibold hover:glow-purple-strong transition-all duration-300"
            >
              Começar Gratuitamente
              <ArrowUpRight className="w-5 h-5" />
            </Link>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}
