import React, { useState, useEffect } from 'react';
import { 
  Cpu, Zap, Car, Paintbrush, Network, ArrowRight, 
  Download, Star, ShieldCheck, Box, Terminal, 
  Activity, Radio, ChevronRight
} from 'lucide-react';

// --- CONFIGURAÇÃO VISUAL TRINITY ---
const theme = {
  bg: "bg-[#020205]",
  glass: "bg-white/[0.03] backdrop-blur-xl border border-white/10",
  neonBlue: "text-cyan-400",
  neonPurple: "text-purple-400",
  neonGreen: "text-emerald-400", 
  neonOrange: "text-amber-400",
  borderBlue: "border-cyan-500/30",
  borderPurple: "border-purple-500/30",
  gradientBlue: "from-cyan-500 to-blue-600",
  gradientTrinity: "from-purple-600 via-cyan-400 to-emerald-400"
};

const App = () => {
  const [scrolled, setScrolled] = useState(false);
  const [tokenCount, setTokenCount] = useState(1420);

  // Efeito de scroll para o Header
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    
    // Simulação de fluxo de tokens
    const interval = setInterval(() => {
      setTokenCount(prev => prev + Math.floor(Math.random() * 5));
    }, 3000);
    
    return () => {
      window.removeEventListener('scroll', handleScroll);
      clearInterval(interval);
    };
  }, []);

  return (
    <div className={`min-h-screen ${theme.bg} text-slate-200 font-sans selection:bg-cyan-500/30 overflow-x-hidden`}>
      
      {/* 1. HEADER DA LOJA (ESTILO COMANDO CENTRAL) */}
      <header className={`fixed top-0 w-full z-50 transition-all duration-500 ${scrolled ? 'py-4 bg-black/80 backdrop-blur-lg border-b border-white/10' : 'py-6 bg-transparent'}`}>
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <div className="flex items-center gap-4 group cursor-pointer">
            <div className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${theme.gradientBlue} flex items-center justify-center shadow-lg shadow-cyan-500/20 group-hover:scale-110 transition-transform`}>
              <Cpu size={28} className="text-white" />
            </div>
            <div>
              <h1 className="font-bold text-2xl tracking-tighter leading-none">SensorIA <span className="font-light opacity-50">Store</span></h1>
              <p className="text-[9px] text-cyan-500 uppercase tracking-[0.3em] font-bold mt-1">OSIA Trinity Core</p>
            </div>
          </div>
          
          <div className="hidden md:flex items-center gap-6">
            <div className="flex flex-col items-end">
              <span className="text-[10px] text-slate-500 font-mono">TOKENS PROCESSADOS</span>
              <span className="text-sm font-bold font-mono text-cyan-400">{tokenCount.toLocaleString('pt-BR')}</span>
            </div>
            <div className="h-8 w-px bg-white/10"></div>
            <span className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-[10px] font-bold tracking-widest">
              <span className="w-2 h-2 bg-emerald-500 rounded-full animate-ping"></span> KERNEL v5.2 ONLINE
            </span>
          </div>
        </div>
      </header>

      <main className="pt-40 pb-20 px-6 max-w-7xl mx-auto space-y-32">

        {/* 2. HERO: O MANIFESTO TRINITY */}
        <section className="relative text-center space-y-8 py-10">
          {/* Efeitos de Fundo */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-purple-600/10 rounded-full blur-[120px] -z-10"></div>
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-b from-cyan-500 to-transparent opacity-50"></div>

          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-bold tracking-[0.2em] border border-cyan-500/30 bg-cyan-500/5 text-cyan-400 uppercase">
            <Radio size={12} className="animate-pulse" /> Ecossistema Sensorial 001
          </div>

          <h2 className="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter">
            Inteligência que <br/>
            <span className={`text-transparent bg-clip-text bg-gradient-to-r ${theme.gradientTrinity}`}>
              Sente o Mundo Real.
            </span>
          </h2>

          <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed font-light">
            O fim das interfaces estáticas. Bem-vindo aos <strong className="text-white">Sensores Digitais</strong> que interpretam o plano físico através do Kernel Trinity.
          </p>
          
          <div className="flex flex-wrap justify-center gap-4 pt-6">
            <button className="px-8 py-4 bg-white text-black font-bold rounded-2xl flex items-center gap-2 hover:bg-cyan-400 transition-colors group">
              Explorar Protocolos <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="px-8 py-4 bg-white/5 border border-white/10 font-bold rounded-2xl hover:bg-white/10 transition-colors">
              Documentação 001
            </button>
          </div>
        </section>

        {/* 3. VITRINE DE APPS (GRID) */}
        <section className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
          
          {/* APP 01: PINTOR IA */}
          <div className={`${theme.glass} rounded-[40px] overflow-hidden group hover:border-cyan-500/50 transition-all duration-700`}>
            <div className="h-56 relative overflow-hidden bg-zinc-900">
               <img 
                src="https://images.unsplash.com/photo-1589939705384-5185137a7f0f?q=80&w=1000&auto=format&fit=crop" 
                className="w-full h-full object-cover opacity-40 group-hover:scale-110 transition duration-700" 
                alt="Pintura IA" 
               />
               <div className="absolute inset-0 bg-gradient-to-t from-[#020205] to-transparent"></div>
               <div className="absolute top-6 right-6 px-3 py-1 bg-emerald-500/20 border border-emerald-500/50 rounded-full text-[10px] font-bold text-emerald-400 uppercase tracking-widest">
                 Live em Campo
               </div>
               <div className="absolute bottom-6 left-6 flex items-end gap-4">
                 <div className="w-14 h-14 bg-cyan-500 rounded-2xl flex items-center justify-center shadow-2xl shadow-cyan-500/50">
                    <Paintbrush size={28} className="text-black" />
                 </div>
                 <div>
                    <h3 className="text-2xl font-bold leading-none">Pintor IA <span className="text-cyan-400">Pro</span></h3>
                    <p className="text-[10px] font-mono text-cyan-400/60 mt-2 uppercase tracking-tighter">Módulo: Estética Visual</p>
                 </div>
               </div>
            </div>
            <div className="p-8 space-y-6">
              <p className="text-sm text-slate-400 leading-relaxed">
                Interpreta patologias de superfícies, calcula volumetria e gera orçamentos técnicos via Visão Computacional. O braço direito do profissional de pintura.
              </p>
              <div className="flex items-center justify-between pt-6 border-t border-white/5">
                <div className="flex gap-1 text-amber-400">
                  {[...Array(5)].map((_, i) => <Star key={i} size={14} fill="currentColor" />)}
                </div>
                <button className="text-[10px] font-black uppercase tracking-widest text-cyan-400 flex items-center gap-2 group">
                  Abrir Dashboard <ChevronRight size={14} className="group-hover:translate-x-1 transition-transform" />
                </button>
              </div>
            </div>
          </div>

          {/* APP 02: AUTOMOTIZIA */}
          <div className={`${theme.glass} rounded-[40px] overflow-hidden group hover:border-purple-500/50 transition-all duration-700 opacity-90`}>
            <div className="h-56 relative overflow-hidden bg-zinc-900">
               <img 
                src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?q=80&w=1000&auto=format&fit=crop" 
                className="w-full h-full object-cover opacity-40 group-hover:scale-110 transition duration-700" 
                alt="AutomotizIA" 
               />
               <div className="absolute inset-0 bg-gradient-to-t from-[#020205] to-transparent"></div>
               <div className="absolute top-6 right-6 px-3 py-1 bg-purple-500/20 border border-purple-500/50 rounded-full text-[10px] font-bold text-purple-400 uppercase tracking-widest">
                 Alpha Test
               </div>
               <div className="absolute bottom-6 left-6 flex items-end gap-4">
                 <div className="w-14 h-14 bg-purple-600 rounded-2xl flex items-center justify-center shadow-2xl shadow-purple-500/50">
                    <Car size={28} className="text-white" />
                 </div>
                 <div>
                    <h3 className="text-2xl font-bold leading-none">AutomotizIA</h3>
                    <p className="text-[10px] font-mono text-purple-400/60 mt-2 uppercase tracking-tighter">Módulo: Diagnóstico OBD2</p>
                 </div>
               </div>
            </div>
            <div className="p-8 space-y-6">
              <p className="text-sm text-slate-400 leading-relaxed">
                O "Mecânico Digital" da Trinity. Conecta-se à telemetria veicular para prever falhas e otimizar a performance de frotas operacionais.
              </p>
              <div className="flex items-center justify-between pt-6 border-t border-white/5">
                <span className="text-[10px] font-mono text-slate-500 uppercase">Kernel v1.0.4</span>
                <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 flex items-center gap-2">
                  Aguardando Sync <Activity size={12} />
                </span>
              </div>
            </div>
          </div>

          {/* APP 03: WZ ENTERPRISE */}
          <div className={`${theme.glass} rounded-[40px] overflow-hidden border border-emerald-500/20 transition-all duration-700 relative`}>
             <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-cyan-400"></div>
            <div className="h-56 relative overflow-hidden bg-black flex items-center justify-center">
               <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(16,185,129,0.1)_0%,transparent_70%)]"></div>
               <div className="text-center z-10">
                 <div className="w-20 h-20 mx-auto bg-emerald-500/10 border border-emerald-500/40 rounded-full flex items-center justify-center mb-4 shadow-[0_0_40px_rgba(16,185,129,0.2)] group-hover:scale-110 transition-transform">
                    <Network size={36} className="text-emerald-400" />
                 </div>
                 <h4 className="text-emerald-400 font-bold text-xs tracking-[0.4em] uppercase">Infraestrutura Core</h4>
               </div>
            </div>
            <div className="p-8 space-y-6">
              <div>
                <h3 className="text-2xl font-bold">WZ Soluções</h3>
                <p className="text-[10px] font-mono text-emerald-400/60 mt-2 uppercase tracking-tighter">Parceiro Trinity Gold</p>
              </div>
              <p className="text-sm text-slate-400 leading-relaxed">
                A espinha dorsal da conectividade. Fornece o tráfego de dados e telefonia IP que sustenta a comunicação entre os sensores e a IA.
              </p>
              <div className="pt-6 border-t border-white/5">
                <div className="flex items-center gap-3 text-[10px] text-emerald-400 bg-emerald-400/5 px-4 py-3 rounded-2xl border border-emerald-400/10">
                  <ShieldCheck size={16} />
                  Sincronização de Rede Certificada
                </div>
              </div>
            </div>
          </div>

        </section>

        {/* 4. FOOTER: ESTADO DO SISTEMA */}
        <footer className="pt-20 border-t border-white/5 text-center space-y-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
            <div className="space-y-1">
              <p className="text-[9px] text-slate-500 uppercase tracking-widest font-bold">Uptime</p>
              <p className="text-xs font-mono">99.9998%</p>
            </div>
            <div className="space-y-1">
              <p className="text-[9px] text-slate-500 uppercase tracking-widest font-bold">Localidade</p>
              <p className="text-xs font-mono">Cascavel, PR</p>
            </div>
            <div className="space-y-1">
              <p className="text-[9px] text-slate-500 uppercase tracking-widest font-bold">Protocolo</p>
              <p className="text-xs font-mono">Trinity Alpha</p>
            </div>
            <div className="space-y-1">
              <p className="text-[9px] text-slate-500 uppercase tracking-widest font-bold">Segurança</p>
              <p className="text-xs font-mono">Quantum Grade</p>
            </div>
          </div>
          
          <div className="flex flex-col items-center gap-4">
             <div className="flex items-center gap-8 text-zinc-600">
               <div className="flex items-center gap-2 hover:text-cyan-400 cursor-help transition-colors">
                 <Cpu size={14}/> <span className="text-[10px] font-bold uppercase tracking-widest">OSIA Engine</span>
               </div>
               <div className="flex items-center gap-2 hover:text-purple-400 cursor-help transition-colors">
                 <Box size={14}/> <span className="text-[10px] font-bold uppercase tracking-widest">Trinity Core</span>
               </div>
               <div className="flex items-center gap-2 hover:text-emerald-400 cursor-help transition-colors">
                 <Terminal size={14}/> <span className="text-[10px] font-bold uppercase tracking-widest">Astra Hub</span>
               </div>
             </div>
             <p className="text-[9px] text-zinc-700 font-mono tracking-[0.4em] pt-4">
               STILO BORIS TECH © 2025 | FUNDAÇÃO ECOSSISTEMA 001
             </p>
          </div>
        </footer>

      </main>
    </div>
  );
};

export default App;