import { useState, useEffect } from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { HiSparkles, HiArrowRight, HiBookOpen, HiLightningBolt, HiPlay } from 'react-icons/hi'

export default function Hero() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  const stats = [
    { number: '50+', label: 'Prompts Especializados', delay: 0.1 },
    { number: '3', label: 'Áreas de Atuação', delay: 0.2 },
    { number: '100%', label: 'Gratuito', delay: 0.3 }
  ]

  const floatingCards = [
    {
      icon: HiBookOpen,
      title: 'Prompts Jurídicos',
      description: 'Peticionamento, petições e contratos',
      delay: 0.4,
      position: { top: '-2rem', left: '-2rem' }
    },
    {
      icon: HiLightningBolt,
      title: 'Concursos Públicos',
      description: 'Estudo e revisão direcionada',
      delay: 0.6,
      position: { top: '4rem', right: '-2rem' }
    },
    {
      icon: HiSparkles,
      title: 'Administrativo',
      description: 'Gestão e organização',
      delay: 0.8,
      position: { bottom: '2rem', left: '1rem' }
    }
  ]

  if (!mounted) {
    return (
      <section className="relative bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 text-white overflow-hidden min-h-screen flex items-center">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
          <div className="text-center">
            <div className="animate-pulse">
              <div className="h-12 bg-white/20 rounded-lg mb-6 w-96 mx-auto"></div>
              <div className="h-8 bg-white/20 rounded-lg mb-4 w-3/4 mx-auto"></div>
              <div className="h-6 bg-white/20 rounded-lg mb-8 w-1/2 mx-auto"></div>
            </div>
          </div>
        </div>
      </section>
    )
  }

  return (
    <section className="relative bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 text-white overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 bg-pattern opacity-10" aria-hidden="true"></div>
      
      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center lg:text-left"
          >
            <motion.div 
              className="flex items-center justify-center lg:justify-start space-x-2 mb-6"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.2, duration: 0.6 }}
            >
              <HiSparkles className="h-6 w-6 text-accent-400" aria-hidden="true" />
              <span className="text-accent-400 font-semibold">IA para Profissionais</span>
            </motion.div>
            
            <motion.h1 
              className="text-4xl lg:text-6xl font-bold mb-6 leading-tight"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3, duration: 0.8 }}
            >
              Transforme sua Prática 
              <span className="text-accent-400"> Jurídica e Administrativa</span> com IA
            </motion.h1>
            
            <motion.p 
              className="text-xl lg:text-2xl text-primary-100 mb-8 leading-relaxed"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4, duration: 0.8 }}
            >
              Aprenda a usar Inteligência Artificial no dia a dia de escritórios jurídicos, 
              administrativos e nos seus estudos para concursos públicos.
            </motion.p>

            <motion.div 
              className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center lg:justify-start"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5, duration: 0.8 }}
            >
              <Link href="/prompts" className="btn-primary flex items-center justify-center space-x-2 group">
                <HiBookOpen className="h-5 w-5 group-hover:scale-110 transition-transform duration-200" aria-hidden="true" />
                <span>Biblioteca de Prompts</span>
                <HiArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true" />
              </Link>
              
              <button 
                className="btn-secondary flex items-center justify-center space-x-2 text-white border-white hover:bg-white hover:text-primary-700 group"
                onClick={() => {
                  const element = document.querySelector('#sobre')
                  if (element) element.scrollIntoView({ behavior: 'smooth' })

              >
                <HiPlay className="h-5 w-5 group-hover:scale-110 transition-transform duration-200" aria-hidden="true" />
                <span>Como Funciona</span>
              </button>
            </motion.div>

            {/* Stats */}
            <motion.div 
              className="grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-primary-500"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6, duration: 0.8 }}
            >
              {stats.map((stat, index) => (
                <motion.div 
                  key={index}
                  className="text-center"
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: stat.delay, duration: 0.6 }}
                >
                  <div className="text-2xl font-bold text-accent-400">{stat.number}</div>
                  <div className="text-sm text-primary-200">{stat.label}</div>
                </motion.div>
              ))}
            </motion.div>
          </motion.div>

          {/* Floating Cards */}
          <div className="hidden lg:block relative">
            {floatingCards.map((card, index) => (
              <motion.div
                key={index}
                className="absolute glass-effect rounded-xl p-6 border border-white/20 animate-float"
                style={card.position}
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: card.delay, duration: 0.8 }}
                whileHover={{ scale: 1.05 }}
              >
                <div className="flex items-center space-x-3">
                  <div className="bg-accent-500 p-2 rounded-lg">
                    <card.icon className="h-5 w-5 text-white" aria-hidden="true" />
                  </div>
                  <div>
                    <div className="font-semibold">{card.title}</div>
                    <div className="text-sm text-primary-200">{card.description}</div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}