'use client'

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { motion, AnimatePresence } from 'framer-motion'
import { Scale, ArrowRight, Mail, Sparkles, Shield, FileSearch, Brain } from 'lucide-react'

/* ─── Particle Field ─── */
function Particles() {
  const [particles, setParticles] = useState<{ id: number; x: number; y: number; size: number; duration: number; delay: number }[]>([])

  useEffect(() => {
    const pts = Array.from({ length: 60 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 3 + 1,
      duration: Math.random() * 20 + 15,
      delay: Math.random() * -20,
    }))
    setParticles(pts)
  }, [])

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {particles.map((p) => (
        <div
          key={p.id}
          className="absolute rounded-full bg-emerald-400/20 animate-float"
          style={{
            left: `${p.x}%`,
            top: `${p.y}%`,
            width: `${p.size}px`,
            height: `${p.size}px`,
            animationDuration: `${p.duration}s`,
            animationDelay: `${p.delay}s`,
          }}
        />
      ))}
    </div>
  )
}

/* ─── Feature Card ─── */
function FeatureCard({
  icon: Icon,
  emoji,
  title,
  desc,
  delay,
}: {
  icon: React.ComponentType<{ className?: string }>
  emoji: string
  title: string
  desc: string
  delay: number
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{ duration: 0.7, delay, ease: [0.25, 0.4, 0.25, 1] }}
      className="group relative p-8 rounded-3xl bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] hover:border-emerald-500/30 transition-all duration-700 hover:-translate-y-2 hover:shadow-2xl hover:shadow-emerald-500/[0.05]"
    >
      <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-emerald-500/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
      <div className="relative">
        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
          <span className="text-2xl">{emoji}</span>
        </div>
        <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
        <p className="text-[15px] text-zinc-400 leading-relaxed">{desc}</p>
      </div>
    </motion.div>
  )
}

/* ─── Main Page ─── */
export default function Home() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)
  const [mounted, setMounted] = useState(false)

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

  const handleSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault()
      if (email.trim()) {
        setSubmitted(true)
      }
    },
    [email]
  )

  return (
    <main className="min-h-screen bg-[#040810] text-white overflow-hidden">
      {/* ═══ CSS Animations ═══ */}
      <style jsx global>{`
        @keyframes float {
          0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.2; }
          25% { transform: translateY(-30px) translateX(10px); opacity: 0.6; }
          50% { transform: translateY(-15px) translateX(-10px); opacity: 0.3; }
          75% { transform: translateY(-40px) translateX(5px); opacity: 0.5; }
        }
        .animate-float { animation: float linear infinite; }

        @keyframes gradient-shift {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        .animate-gradient {
          background-size: 200% 200%;
          animation: gradient-shift 8s ease infinite;
        }

        @keyframes pulse-ring {
          0% { transform: scale(0.9); opacity: 1; }
          100% { transform: scale(1.8); opacity: 0; }
        }
        .animate-pulse-ring {
          animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        @keyframes glow {
          0%, 100% { opacity: 0.4; }
          50% { opacity: 0.8; }
        }
        .animate-glow { animation: glow 4s ease-in-out infinite; }

        @keyframes scan-line {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(100vh); }
        }
        .animate-scan {
          animation: scan-line 8s linear infinite;
        }
      `}</style>

      {/* ═══ NAVBAR ═══ */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-[#040810]/60 backdrop-blur-2xl border-b border-white/[0.04]">
        <div className="max-w-7xl mx-auto px-6 lg:px-8 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center shadow-lg shadow-emerald-500/20">
              <Scale className="w-4 h-4 text-white" />
            </div>
            <span className="text-xl font-bold tracking-tight">
              <span className="text-white">Lex</span>
              <span className="text-emerald-400">Mind</span>
            </span>
          </Link>
          <div className="flex items-center gap-3">
            <Link
              href="/login"
              className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors px-4 py-2"
            >
              Já tem conta? Acessar
            </Link>
            <Link
              href="/register"
              className="hidden sm:block text-sm px-5 py-2 rounded-full border border-white/10 text-zinc-400 hover:text-white hover:border-white/20 transition-all"
            >
              Criar Conta
            </Link>
          </div>
        </div>
      </nav>

      {/* ═══ HERO — Full Viewport ═══ */}
      <section className="relative min-h-screen flex flex-col items-center justify-center px-6 pt-16">
        {/* Background effects */}
        <div className="absolute inset-0">
          {/* Central mega glow */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-emerald-500/[0.04] blur-[200px] animate-glow" />
          <div className="absolute top-1/3 left-[20%] w-[400px] h-[400px] rounded-full bg-teal-500/[0.03] blur-[150px] animate-glow" style={{ animationDelay: '-2s' }} />
          <div className="absolute bottom-1/4 right-[15%] w-[300px] h-[300px] rounded-full bg-cyan-500/[0.03] blur-[120px] animate-glow" style={{ animationDelay: '-4s' }} />

          {/* Scan line */}
          <div className="absolute left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent animate-scan" />

          {/* Grid */}
          <div
            className="absolute inset-0 opacity-[0.02]"
            style={{
              backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
              backgroundSize: '60px 60px',
            }}
          />
        </div>

        {mounted && <Particles />}

        <div className="relative max-w-4xl mx-auto text-center z-10">
          {/* "Em Breve" Badge */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="inline-flex items-center gap-2.5 mb-10"
          >
            <div className="relative">
              <div className="absolute inset-0 rounded-full bg-emerald-500/40 animate-pulse-ring" />
              <div className="relative px-6 py-2.5 rounded-full bg-emerald-500/[0.1] border border-emerald-500/30 backdrop-blur-sm">
                <span className="flex items-center gap-2 text-sm font-semibold text-emerald-300 tracking-wide">
                  <Sparkles className="w-4 h-4" />
                  EM BREVE
                </span>
              </div>
            </div>
          </motion.div>

          {/* Headline */}
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.4, ease: [0.25, 0.4, 0.25, 1] }}
            className="text-5xl sm:text-6xl lg:text-8xl font-extrabold tracking-tight leading-[1.05] mb-8"
          >
            <span className="block text-white/90">O Direito nunca mais</span>
            <span className="block bg-gradient-to-r from-emerald-300 via-teal-300 to-cyan-300 bg-clip-text text-transparent animate-gradient">
              será o mesmo.
            </span>
          </motion.h1>

          {/* Subheadline */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.7 }}
            className="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-14 leading-relaxed"
          >
            Inteligência Artificial que entende a lei como você.
            <br className="hidden sm:block" />
            <span className="text-zinc-300">Mais rápido, mais preciso, mais inteligente.</span>
          </motion.p>

          {/* Email Form */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.9 }}
            className="max-w-lg mx-auto"
          >
            <p className="text-sm text-zinc-500 mb-4 font-medium">Seja o primeiro a ter acesso</p>

            <AnimatePresence mode="wait">
              {!submitted ? (
                <motion.form
                  key="form"
                  onSubmit={handleSubmit}
                  className="flex flex-col sm:flex-row gap-3"
                  exit={{ opacity: 0, scale: 0.95 }}
                >
                  <div className="relative flex-1">
                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-600" />
                    <input
                      type="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="seu@email.com.br"
                      className="w-full pl-12 pr-4 py-4 rounded-2xl bg-white/[0.05] border border-white/[0.08] text-white placeholder-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all text-[15px]"
                    />
                  </div>
                  <button
                    type="submit"
                    className="group px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold text-[15px] transition-all hover:shadow-2xl hover:shadow-emerald-500/30 hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center gap-2 whitespace-nowrap"
                  >
                    Quero Acesso Antecipado
                    <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                  </button>
                </motion.form>
              ) : (
                <motion.div
                  key="thanks"
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5 }}
                  className="py-5 px-8 rounded-2xl bg-emerald-500/[0.1] border border-emerald-500/30 text-center"
                >
                  <p className="text-emerald-300 font-semibold text-lg">🎉 Obrigado!</p>
                  <p className="text-zinc-400 text-sm mt-1">Você será notificado assim que o LexMind estiver disponível.</p>
                </motion.div>
              )}
            </AnimatePresence>

            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1.2 }}
              className="text-xs text-zinc-600 mt-4 flex items-center justify-center gap-1.5"
            >
              <Shield className="w-3.5 h-3.5" />
              Vagas limitadas para o lançamento
            </motion.p>
          </motion.div>
        </div>

        {/* Scroll indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 2 }}
          className="absolute bottom-10 left-1/2 -translate-x-1/2"
        >
          <div className="w-6 h-10 rounded-full border-2 border-white/10 flex items-start justify-center p-1.5">
            <motion.div
              animate={{ y: [0, 12, 0] }}
              transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
              className="w-1.5 h-1.5 rounded-full bg-emerald-400/60"
            />
          </div>
        </motion.div>
      </section>

      {/* ═══ FEATURES PREVIEW ═══ */}
      <section className="relative py-32 px-6">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[1px] bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent" />

        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-center mb-20"
          >
            <p className="text-sm font-semibold text-emerald-400 mb-4 tracking-[0.2em] uppercase">
              O que está por vir
            </p>
            <h2 className="text-4xl sm:text-5xl font-extrabold text-white mb-6">
              Tecnologia que redefine<br />
              <span className="bg-gradient-to-r from-emerald-300 to-teal-300 bg-clip-text text-transparent">
                a prática jurídica
              </span>
            </h2>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            <FeatureCard
              icon={Brain}
              emoji="🤖"
              title="IA Jurídica Avançada"
              desc="Peças processuais completas em menos de 30 segundos, com fundamentação técnica e jurisprudência atualizada."
              delay={0}
            />
            <FeatureCard
              icon={FileSearch}
              emoji="⚖️"
              title="Jurisprudência Inteligente"
              desc="Pesquisa semântica em milhares de decisões de todos os tribunais do Brasil. Encontre o precedente perfeito."
              delay={0.15}
            />
            <FeatureCard
              icon={FileSearch}
              emoji="📄"
              title="Análise de Processos"
              desc="Upload do PDF e receba parecer completo com legislação atualizada. Análise profunda em segundos."
              delay={0.3}
            />
            <FeatureCard
              icon={Shield}
              emoji="🔒"
              title="Segurança Total"
              desc="Seus dados protegidos com criptografia de ponta a ponta. Conformidade total com a LGPD."
              delay={0.45}
            />
          </div>
        </div>
      </section>

      {/* ═══ SOCIAL PROOF ═══ */}
      <section className="relative py-24 px-6">
        <div className="max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative p-12 sm:p-16 rounded-[2rem] bg-gradient-to-b from-white/[0.04] to-white/[0.01] border border-white/[0.06] text-center overflow-hidden"
          >
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[300px] h-[200px] rounded-full bg-emerald-500/[0.05] blur-[100px]" />
            <div className="relative">
              <div className="flex items-center justify-center gap-1 mb-8">
                {Array.from({ length: 5 }).map((_, i) => (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, scale: 0 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: i * 0.1 + 0.3 }}
                    className="text-2xl"
                  >
                    ⭐
                  </motion.div>
                ))}
              </div>
              <p className="text-2xl sm:text-3xl font-bold text-white/90 mb-4 leading-snug">
                &ldquo;A nova era do Direito está chegando.&rdquo;
              </p>
              <p className="text-zinc-400 text-lg mb-8">
                Desenvolvido por especialistas em IA e Direito
              </p>
              <div className="flex flex-wrap items-center justify-center gap-8 text-sm text-zinc-500">
                <span className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-emerald-500" />
                  Tecnologia de ponta
                </span>
                <span className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-teal-500" />
                  Escritórios inovadores
                </span>
                <span className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-cyan-500" />
                  Precisão jurídica
                </span>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ═══ SECOND CTA ═══ */}
      <section className="relative py-32 px-6">
        <div className="absolute inset-0">
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] rounded-full bg-emerald-500/[0.04] blur-[180px]" />
        </div>
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="relative max-w-2xl mx-auto text-center"
        >
          <h2 className="text-3xl sm:text-4xl font-extrabold text-white mb-6">
            Não fique de fora da revolução
          </h2>
          <p className="text-lg text-zinc-400 mb-10">
            Garanta seu acesso antecipado e transforme sua prática jurídica com inteligência artificial.
          </p>
          <Link
            href="/register"
            className="group inline-flex items-center gap-3 px-10 py-5 rounded-full bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold text-lg transition-all hover:shadow-2xl hover:shadow-emerald-500/30 hover:-translate-y-0.5"
          >
            Criar Conta
            <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
          </Link>
        </motion.div>
      </section>

      {/* ═══ FOOTER ═══ */}
      <footer className="border-t border-white/[0.04] bg-[#030609] py-12 px-6">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 rounded-md bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center">
                <Scale className="w-3 h-3 text-white" />
              </div>
              <span className="text-sm font-bold">
                <span className="text-white">Lex</span>
                <span className="text-emerald-400">Mind</span>
              </span>
            </div>

            <div className="flex items-center gap-6 text-sm text-zinc-600">
              <a href="/adv/termos" target="_blank" className="hover:text-zinc-400 transition-colors">Termos de Uso</a>
              <span className="text-zinc-800">|</span>
              <a href="/adv/privacidade" target="_blank" className="hover:text-zinc-400 transition-colors">Política de Privacidade</a>
            </div>

            <div className="flex items-center gap-4">
              {/* Social placeholders */}
              {['𝕏', 'in', '▶'].map((s, i) => (
                <div
                  key={i}
                  className="w-8 h-8 rounded-full bg-white/[0.04] border border-white/[0.06] flex items-center justify-center text-xs text-zinc-600 hover:text-zinc-400 hover:border-white/10 transition-all cursor-pointer"
                >
                  {s}
                </div>
              ))}
            </div>
          </div>

          <div className="mt-8 pt-6 border-t border-white/[0.04] text-center">
            <p className="text-xs text-zinc-700">
              © 2026 LexMind Tecnologia Jurídica Ltda. Todos os direitos reservados.
            </p>
            <div className="flex items-center justify-center gap-2 mt-3 opacity-40 hover:opacity-70 transition-opacity duration-300">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-teal-400"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
              <span className="text-[0.65rem] text-teal-400/60 tracking-[0.15em] font-semibold">KISLANSKI INDUSTRIES</span>
            </div>
          </div>
        </div>
      </footer>
    </main>
  )
}