import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Zap, 
  ShieldCheck, 
  Cpu, 
  ChevronRight, 
  MousePointer2, 
  Music, 
  Lock,
  ArrowRight,
  Fingerprint
} from 'lucide-react';

// --- Componentes de UI Auxiliares ---

const GlassCard = ({ children, className = "" }) => (
  <div className={`backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl ${className}`}>
    {children}
  </div>
);

const SectionTitle = ({ children, subtitle }) => (
  <div className="text-center mb-16 px-4">
    <motion.h2 
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400 mb-4"
    >
      {children}
    </motion.h2>
    {subtitle && (
      <motion.p 
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: 0.2 }}
        className="text-blue-300/80 text-lg max-w-2xl mx-auto uppercase tracking-widest text-sm"
      >
        {subtitle}
      </motion.p>
    )}
  </div>
);

// --- Componente Principal App ---

export default function App() {
  const [email, setEmail] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  // Efeito de Parallax suave baseado no mouse para o fundo
  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePos({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (email) setIsSubmitted(true);
  };

  return (
    <div className="min-h-screen bg-[#05070a] text-white font-sans selection:bg-blue-500/30 overflow-x-hidden">
      
      {/* Background Decorativo "3D" */}
      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
        <div 
          className="absolute w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[120px]"
          style={{ 
            top: mousePos.y * 0.1, 
            left: mousePos.x * 0.1,
            transition: 'transform 0.2s ease-out'
          }}
        />
        <div className="absolute top-1/4 -right-20 w-96 h-96 bg-purple-600/10 rounded-full blur-[100px]" />
        <div className="absolute bottom-0 left-1/4 w-[800px] h-[400px] bg-cyan-600/5 rounded-full blur-[150px]" />
      </div>

      {/* Header */}
      <header className="relative z-10 px-6 py-8 flex justify-between items-center max-w-7xl mx-auto">
        <div className="flex items-center gap-2">
          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(59,130,246,0.5)]">
            <Music size={20} className="text-white" />
          </div>
          <span className="font-bold text-xl tracking-tighter uppercase">Physics<span className="text-blue-400">Piano</span></span>
        </div>
        <div className="hidden md:block text-sm text-gray-400 uppercase tracking-widest font-medium">
          Edição de Elite 2026
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative z-10 pt-20 pb-32 px-6 max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
        <motion.div
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-widest mb-6">
            <Zap size={14} /> Aula Gratuita: Biomecânica de Alta Performance
          </div>
          <h1 className="text-5xl md:text-7xl font-bold leading-tight mb-6">
            A Física do Piano: O Fim da <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Tensão</span>
          </h1>
          <p className="text-lg md:text-xl text-gray-400 mb-10 leading-relaxed max-w-xl">
            Descubra a técnica baseada em <span className="text-white font-semibold">cinética e vetores de força</span> para tocar com leveza absoluta e agilidade extrema. Domine o instrumento sem fadiga muscular.
          </p>

          {!isSubmitted ? (
            <form onSubmit={handleSubmit} className="relative group max-w-md">
              <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-400 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
              <div className="relative flex flex-col sm:flex-row gap-3">
                <input 
                  type="email" 
                  required
                  placeholder="Seu melhor e-mail"
                  className="flex-1 bg-black/40 border border-white/10 rounded-xl px-6 py-4 focus:outline-none focus:border-blue-500 transition-all backdrop-blur-md"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
                <button className="bg-white text-black font-bold px-8 py-4 rounded-xl hover:bg-blue-400 hover:text-white transition-all flex items-center justify-center gap-2 shadow-xl active:scale-95">
                  ASSISTIR AGORA <ChevronRight size={18} />
                </button>
              </div>
              <p className="mt-4 flex items-center gap-2 text-xs text-gray-500">
                <Lock size={12} /> Seus dados estão protegidos pela criptografia SSL.
              </p>
            </form>
          ) : (
            <motion.div 
              initial={{ scale: 0.9, opacity: 0 }} 
              animate={{ scale: 1, opacity: 1 }}
              className="p-6 border border-green-500/30 bg-green-500/10 rounded-2xl max-w-md"
            >
              <h3 className="text-green-400 font-bold text-xl mb-2 flex items-center gap-2">
                <ShieldCheck /> Inscrição Confirmada!
              </h3>
              <p className="text-gray-300">O link da aula foi enviado para o seu e-mail. Verifique sua caixa de entrada agora.</p>
            </motion.div>
          )}
        </motion.div>

        {/* Lado Direito - Ilustração "3D" Visual */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1, delay: 0.2 }}
          className="relative flex justify-center items-center"
        >
          {/* Elemento de profundidade */}
          <div className="absolute inset-0 bg-blue-500/10 rounded-full blur-[100px] animate-pulse" />
          
          <div className="relative z-10 w-full aspect-square flex items-center justify-center">
             {/* Representação Simbólica 3D da Mão/Física */}
             <div className="relative w-72 h-72 md:w-96 md:h-96">
                <motion.div 
                  animate={{ y: [0, -20, 0], rotate: [0, 5, 0] }}
                  transition={{ repeat: Infinity, duration: 6, ease: "easeInOut" }}
                  className="absolute inset-0 border border-white/10 rounded-3xl shadow-[0_40px_100px_rgba(0,0,0,0.5)] backdrop-blur-sm bg-white/5 flex flex-col items-center justify-center p-8 overflow-hidden"
                >
                   {/* Linhas de Grade de Engenharia */}
                   <div className="absolute inset-0 opacity-10" 
                    style={{backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '20px 20px'}} />
                   
                   <Fingerprint size={120} className="text-blue-500 mb-6 drop-shadow-[0_0_15px_rgba(59,130,246,0.8)]" />
                   
                   <div className="space-y-4 w-full relative z-10">
                     <div className="h-1 w-full bg-white/10 rounded-full overflow-hidden">
                       <motion.div 
                        animate={{ width: ["0%", "85%", "40%", "95%"] }}
                        transition={{ repeat: Infinity, duration: 4 }}
                        className="h-full bg-gradient-to-r from-blue-500 to-cyan-400 shadow-[0_0_10px_#3b82f6]" 
                       />
                     </div>
                     <div className="flex justify-between text-[10px] font-mono text-blue-300">
                       <span>FORÇA VETORIAL: 0.4N</span>
                       <span>EFICIÊNCIA: 98%</span>
                     </div>
                   </div>
                </motion.div>

                {/* Elementos flutuantes extras */}
                <motion.div 
                  animate={{ y: [20, -10, 20] }}
                  transition={{ repeat: Infinity, duration: 4, delay: 1 }}
                  className="absolute -top-10 -right-10 w-32 h-32 backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center shadow-2xl"
                >
                  <Cpu className="text-cyan-400" size={40} />
                </motion.div>

                <motion.div 
                  animate={{ y: [-15, 15, -15] }}
                  transition={{ repeat: Infinity, duration: 5 }}
                  className="absolute -bottom-12 -left-8 px-6 py-4 backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl flex flex-col gap-1 shadow-2xl"
                >
                  <span className="text-[10px] text-gray-400">STATUS DA FIBRA</span>
                  <span className="text-xs font-bold text-green-400">RELAXAMENTO TOTAL</span>
                </motion.div>
             </div>
          </div>
        </motion.div>
      </section>

      {/* Seção Problema/Solução */}
      <section className="relative z-10 py-32 px-6 bg-[#0a0d14]">
        <SectionTitle subtitle="A Engenharia por trás da música">O Problema não é sua Prática.</SectionTitle>
        
        <div className="max-w-7xl mx-auto grid md:grid-cols-3 gap-8">
          <GlassCard className="p-10 flex flex-col gap-4 group hover:bg-white/10 transition-all border-blue-500/0 hover:border-blue-500/20">
            <div className="w-14 h-14 rounded-xl bg-red-500/10 flex items-center justify-center text-red-500 mb-4 group-hover:scale-110 transition-transform">
              <Zap size={28} />
            </div>
            <h3 className="text-xl font-bold">Fadiga Crônica</h3>
            <p className="text-gray-400">A tensão acumulada não é falta de treino, é erro biomecânico no uso das alavancas do braço.</p>
          </GlassCard>

          <GlassCard className="p-10 flex flex-col gap-4 group hover:bg-white/10 transition-all border-cyan-500/0 hover:border-cyan-500/20">
            <div className="w-14 h-14 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 mb-4 group-hover:scale-110 transition-transform">
              <MousePointer2 size={28} />
            </div>
            <h3 className="text-xl font-bold">Lentidão Técnica</h3>
            <p className="text-gray-400">Velocidade é subproduto do relaxamento. Se você força para correr, seu limite já foi atingido.</p>
          </GlassCard>

          <GlassCard className="p-10 flex flex-col gap-4 group hover:bg-white/10 transition-all border-purple-500/0 hover:border-purple-500/20">
            <div className="w-14 h-14 rounded-xl bg-purple-500/10 flex items-center justify-center text-purple-500 mb-4 group-hover:scale-110 transition-transform">
              <Fingerprint size={28} />
            </div>
            <h3 className="text-xl font-bold">Falta de Controle</h3>
            <p className="text-gray-400">Sem entender o centro de gravidade de cada movimento, o timbre soa "metálico" ou "duro".</p>
          </GlassCard>
        </div>
      </section>

      {/* Seção CTA Final */}
      <section className="relative z-10 py-32 px-6">
        <div className="max-w-5xl mx-auto">
          <GlassCard className="relative overflow-hidden p-12 md:p-20 text-center border-white/5">
            {/* Overlay Gradient */}
            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent" />
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <h2 className="text-4xl md:text-6xl font-bold mb-8 leading-tight">
                Pronto para desbloquear <br />sua técnica?
              </h2>
              <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto font-light">
                Pare de brigar com as teclas. Aplique a ciência e sinta a música fluir pelas suas mãos sem qualquer resistência física.
              </p>
              
              <button 
                onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
                className="group inline-flex items-center gap-4 bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-bold px-10 py-6 rounded-2xl shadow-[0_20px_40px_rgba(37,99,235,0.3)] hover:shadow-[0_25px_50px_rgba(37,99,235,0.5)] transition-all hover:-translate-y-1 active:scale-95 text-lg"
              >
                QUERO MEU ACESSO GRATUITO <ArrowRight className="group-hover:translate-x-2 transition-transform" />
              </button>
              
              <div className="mt-12 flex flex-wrap justify-center gap-8 text-sm font-mono text-gray-500 uppercase tracking-widest">
                <span className="flex items-center gap-2"><ShieldCheck size={16} /> Método Científico</span>
                <span className="flex items-center gap-2"><ShieldCheck size={16} /> 100% Online</span>
                <span className="flex items-center gap-2"><ShieldCheck size={16} /> Conteúdo Gratuito</span>
              </div>
            </motion.div>
          </GlassCard>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative z-10 py-12 px-6 border-t border-white/5 text-center text-gray-600 text-sm">
        <div className="mb-6 flex justify-center items-center gap-2 grayscale opacity-50">
          <Music size={16} />
          <span className="font-bold tracking-tighter uppercase">PhysicsPiano Academy</span>
        </div>
        <p>&copy; 2026 Todos os direitos reservados. Este site não faz parte do Facebook ou Google.</p>
        <div className="mt-4 flex justify-center gap-6">
          <a href="#" className="hover:text-gray-400 transition-colors">Termos de Uso</a>
          <a href="#" className="hover:text-gray-400 transition-colors">Privacidade</a>
        </div>
      </footer>
    </div>
  );
}