import { motion } from 'framer-motion'
import Link from 'next/link'
import { useState } from 'react'
import { HiBookOpen, HiLightningBolt, HiDocumentText, HiAcademicCap } from 'react-icons/hi'

export default function QuickAccess() {
  const [hoveredIndex, setHoveredIndex] = useState(null)

  const quickAccessItems = [
    {
      title: 'Biblioteca de Prompts',
      description: 'Mais de 50 prompts organizados por categoria',
      icon: HiBookOpen,
      href: '/prompts',
      color: 'bg-blue-500',
      highlight: true,
      stats: '50+ prompts'
    },
    {
      title: 'Prompts Jurídicos',
      description: 'Peticionamento, contratos e análises legais',
      icon: HiDocumentText,
      href: '/prompts?tag=juridico',
      color: 'bg-green-500',
      stats: '20+ prompts'
    },
    {
      title: 'Concursos Públicos',
      description: 'Estratégias de estudo e simulados com IA',
      icon: HiAcademicCap,
      href: '/prompts?tag=concurso',
      color: 'bg-purple-500',
      stats: '15+ prompts'
    },
    {
      title: 'Gestão Administrativa',
      description: 'Organização e otimização de processos',
      icon: HiLightningBolt,
      href: '/prompts?tag=administrativo',
      color: 'bg-orange-500',
      stats: '15+ prompts'
    }
  ]

  return (
    <section className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div 
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
        >
          <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
            Acesso Rápido aos Melhores Recursos
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Encontre rapidamente o que você precisa para transformar sua prática profissional
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {quickAccessItems.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -8 }}
              className={`group ${item.highlight ? 'md:col-span-2 lg:col-span-1' : ''}`}
            >
              <Link
                href={item.href}
                className={`block ${item.highlight ? 'md:flex md:items-center' : ''}`}
                onMouseEnter={() => setHoveredIndex(index)}
                onMouseLeave={() => setHoveredIndex(null)}
              >
                <div className={`category-card ${item.highlight ? 'md:flex-1' : ''}`}>
                  <div className="text-center">
                    <motion.div 
                      className={`${item.color} w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}
                      animate={hoveredIndex === index ? { scale: 1.1, rotate: 5 } : { scale: 1, rotate: 0 }}
                      transition={{ duration: 0.3 }}
                    >
                      <item.icon className="h-8 w-8 text-white" aria-hidden="true" />
                    </motion.div>
                    
                    <div className="flex items-center justify-center space-x-2 mb-2">
                      <h3 className="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors duration-200">
                        {item.title}
                      </h3>
                      {item.highlight && (
                        <span className="bg-accent-100 text-accent-700 text-xs font-medium px-2 py-1 rounded-full">
                          Destaque
                        </span>
                      )}
                    </div>
                    
                    <p className="text-gray-600 text-sm leading-relaxed mb-3">
                      {item.description}
                    </p>
                    
                    <div className="flex items-center justify-center space-x-2 text-xs text-gray-500">
                      <span>{item.stats}</span>
                      <span>•</span>
                      <span>Clique para acessar</span>
                    </div>
                  </div>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}