import React, { useState, useEffect } from 'react';
import { Activity, Dna, Brain, Shield, ChevronRight, Zap, Heart, Fingerprint, Microchip, ActivitySquare } from 'lucide-react';

export default function VexalisHealth() {
  const [pulse, setPulse] = useState(64);
  const [scrolled, setScrolled] = useState(false);

  // Simulate a live heartbeat/metric update for that "alive" futuristic feel
  useEffect(() => {
    const interval = setInterval(() => {
      setPulse(prev => prev + (Math.floor(Math.random() * 5) - 2));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  // Handle scroll for nav blurring
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Injecting custom fonts to match your sexy vibe perfectly
  const fontStyles = `
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Urbanist:wght@300;400;600&family=JetBrains+Mono:wght@100..800&display=swap');
    
    .font-serif-display { font-family: 'Playfair Display', serif; }
    .font-urbanist { font-family: 'Urbanist', sans-serif; }
    .font-mono { font-family: 'JetBrains Mono', monospace; }
    
    .cyber-grid {
      background-image: linear-gradient(to right, rgba(0, 255, 170, 0.05) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(0, 255, 170, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
    }
  `;

  return (
    <div className="min-h-screen bg-[#030303] text-white selection:bg-[#00ffaa] selection:text-black font-urbanist overflow-hidden">
      <style>{fontStyles}</style>

      {/* Persistent Cyber Grid */}
      <div className="fixed inset-0 pointer-events-none cyber-grid z-0 mask-image-b" 
           style={{ maskImage: 'linear-gradient(to bottom, white 20%, transparent 90%)', WebkitMaskImage: 'linear-gradient(to bottom, white 20%, transparent 90%)' }}>
      </div>

      {/* Floating Header */}
      <header className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-[#030303]/80 backdrop-blur-md border-b border-white/5 py-4' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <Fingerprint className="text-[#00ffaa] w-6 h-6" />
            <span className="font-serif-display text-xl tracking-wide">Vexalis <span className="text-white/50 italic">Health</span></span>
          </div>
          <nav className="hidden md:flex gap-8 font-mono text-xs uppercase tracking-widest text-white/50">
            <a href="#platform" className="hover:text-[#00ffaa] transition-colors">Platform</a>
            <a href="#biometrics" className="hover:text-[#00ffaa] transition-colors">Biometrics</a>
            <a href="#security" className="hover:text-[#00ffaa] transition-colors">Security</a>
          </nav>
          <button className="px-5 py-2 rounded-full border border-white/10 text-xs font-mono uppercase tracking-widest hover:border-[#00ffaa] hover:text-[#00ffaa] transition-all bg-white/[0.02]">
            Init Sequence
          </button>
        </div>
      </header>

      <main className="relative z-10 pt-32 pb-24">
        
        {/* --- HERO SECTION --- */}
        <section className="min-h-[80vh] flex flex-col justify-center items-center text-center px-6 max-w-5xl mx-auto relative">
          
          {/* Glowing orb behind text */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-[#00ffaa] rounded-full blur-[150px] opacity-[0.03] pointer-events-none"></div>

          <div className="flex items-center justify-center gap-3 mb-8 px-4 py-2 rounded-full border border-[#00ffaa]/20 bg-[#00ffaa]/5 backdrop-blur-sm">
            <span className="w-1.5 h-1.5 bg-[#00ffaa] rounded-full animate-pulse shadow-[0_0_10px_#00ffaa]"></span>
            <span className="font-mono text-[#00ffaa] text-[10px] uppercase tracking-[0.3em]">Protocol Active</span>
          </div>
          
          <h1 className="font-serif-display text-6xl md:text-8xl lg:text-9xl mb-6 leading-[0.9] tracking-tight">
            Precision <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-[#00ffaa]/40 italic">Longevity.</span>
          </h1>
          
          <p className="font-urbanist text-lg md:text-xl text-white/50 max-w-2xl mx-auto leading-relaxed mb-12 font-light">
            Vexalis Health collapses the boundary between biological constraints and computational edge. Your cellular infrastructure, visualized and optimized.
          </p>

          <div className="flex flex-col sm:flex-row gap-6 items-center">
            <button className="group relative px-8 py-4 bg-[#00ffaa] text-black font-mono text-xs uppercase tracking-widest overflow-hidden">
              <span className="relative z-10 font-bold flex items-center gap-2">
                Sync Biometrics <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </span>
              <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
            </button>
            <button className="px-8 py-4 border border-white/10 hover:border-white/30 text-white font-mono text-xs uppercase tracking-widest transition-all">
              View Architecture
            </button>
          </div>
        </section>

        {/* --- BIOMETRIC COMMAND CENTER (The "Practical" Bento Grid) --- */}
        <section id="biometrics" className="max-w-7xl mx-auto px-6 py-24">
          <div className="mb-12 flex flex-col md:flex-row justify-between items-end gap-6">
            <div>
              <div className="font-mono text-[#00ffaa] text-xs uppercase tracking-widest mb-4 flex items-center gap-2">
                <ActivitySquare className="w-4 h-4" /> Live Telemetry
              </div>
              <h2 className="font-serif-display text-4xl md:text-5xl">Diagnostic <span className="italic text-white/50">Hub</span></h2>
            </div>
            <p className="font-mono text-xs text-white/30 max-w-xs text-right">
              REAL-TIME NEURAL AND SOMATIC DATA AGGREGATION. ZERO LATENCY.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            {/* Main Metric Card */}
            <div className="md:col-span-2 group relative p-8 rounded-[2rem] border border-white/10 bg-white/[0.02] hover:bg-white/[0.04] transition-all duration-500 overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-[#00ffaa] blur-[100px] opacity-0 group-hover:opacity-[0.05] transition-opacity duration-700 rounded-full"></div>
              
              <div className="flex justify-between items-start mb-12 relative z-10">
                <div className="p-3 bg-black/50 border border-white/10 rounded-2xl backdrop-blur-md">
                  <Heart className="w-6 h-6 text-[#00ffaa]" />
                </div>
                <div className="text-right">
                  <span className="font-mono text-[10px] text-white/40 uppercase tracking-widest">Cardiovascular Sync</span>
                  <div className="flex items-baseline gap-2 justify-end">
                    <span className="font-mono text-5xl font-light tracking-tighter text-white">{pulse}</span>
                    <span className="font-mono text-[#00ffaa] text-sm">BPM</span>
                  </div>
                </div>
              </div>

              {/* Mock Graph */}
              <div className="h-32 w-full flex items-end gap-1 relative z-10">
                {[...Array(40)].map((_, i) => (
                  <div 
                    key={i} 
                    className="w-full bg-[#00ffaa] rounded-t-sm transition-all duration-500"
                    style={{ 
                      height: `${Math.random() * 80 + 20}%`,
                      opacity: Math.random() > 0.5 ? 0.8 : 0.3
                    }}
                  ></div>
                ))}
              </div>
            </div>

            {/* Neural Load Card */}
            <div className="p-8 rounded-[2rem] border border-white/10 border-dashed bg-white/[0.01] flex flex-col justify-between hover:border-[#00ffaa]/30 transition-colors duration-500">
              <div className="flex justify-between items-center mb-8">
                <Brain className="w-5 h-5 text-white/50" />
                <span className="font-mono text-[10px] text-[#00ffaa] uppercase tracking-widest border border-[#00ffaa]/20 px-2 py-1 rounded-full">Optimal</span>
              </div>
              <div>
                <h3 className="font-serif-display text-2xl mb-2">Neuro-Plasticity</h3>
                <p className="font-urbanist text-sm text-white/40 mb-6">Synaptic response times operating at peak human baseline +14%.</p>
                <div className="w-full h-1 bg-white/10 rounded-full overflow-hidden">
                  <div className="h-full bg-gradient-to-r from-white/30 to-[#00ffaa] w-[86%] rounded-full shadow-[0_0_10px_#00ffaa]"></div>
                </div>
              </div>
            </div>

            {/* DNA Sequence Card */}
            <div className="p-8 rounded-[2rem] border border-white/10 bg-[#050505] relative overflow-hidden group">
              <div className="absolute -right-4 -bottom-4 text-white/5 group-hover:text-white/10 transition-colors duration-500">
                <Dna className="w-48 h-48" />
              </div>
              <div className="relative z-10 h-full flex flex-col justify-between">
                <div className="p-3 bg-white/5 border border-white/10 rounded-2xl w-fit mb-8">
                  <Microchip className="w-5 h-5 text-white" />
                </div>
                <div>
                  <h3 className="font-serif-display text-2xl mb-2">Genomic Patch</h3>
                  <p className="font-mono text-xs text-white/40 uppercase tracking-widest">v2.4.1 Installed</p>
                </div>
              </div>
            </div>

            {/* Security Protocol */}
            <div className="md:col-span-2 p-8 rounded-[2rem] border border-[#00ffaa]/20 bg-[#00ffaa]/[0.02] flex items-center justify-between">
              <div className="flex gap-6 items-center">
                <div className="relative">
                  <Shield className="w-10 h-10 text-[#00ffaa]" />
                  <div className="absolute inset-0 bg-[#00ffaa] blur-xl opacity-20"></div>
                </div>
                <div>
                  <h3 className="font-serif-display text-xl mb-1">Military-Grade Encryption</h3>
                  <p className="font-urbanist text-sm text-[#00ffaa]/60">Your biological data is secured via quantum-resistant tunneling.</p>
                </div>
              </div>
              <button className="w-12 h-12 rounded-full border border-[#00ffaa]/30 flex items-center justify-center hover:bg-[#00ffaa] hover:text-black transition-all">
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>

          </div>
        </section>
      </main>

      {/* --- FOOTER (Adapted directly from your style) --- */}
      <footer className="bg-[#050505] border-t border-white/5 pt-20 pb-8 px-6 md:px-12 relative z-10">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
            <div className="space-y-6 md:col-span-2">
                <div className="flex items-center gap-2">
                  <Fingerprint className="text-[#00ffaa] w-5 h-5" />
                  <h2 className="font-serif-display text-2xl text-white tracking-wide">Vexalis <span className="italic text-white/50">Health</span></h2>
                </div>
                <p className="font-urbanist text-sm text-white/40 max-w-sm leading-relaxed">
                    Structuring biological chaos into absolute clarity. We design systems that blur the line between human anatomy and raw code.
                </p>
                <p className="font-mono text-xs text-[#00ffaa]/60 mt-8">© {new Date().getFullYear()} Harsh Mehta Labs</p>
            </div>
            
            <div>
                <h4 className="font-mono text-[10px] text-white uppercase tracking-[0.2em] mb-6">Directory</h4>
                <ul className="space-y-4 font-mono text-xs text-white/40 uppercase tracking-widest">
                    <li className="hover:text-[#00ffaa] cursor-pointer transition-colors flex items-center gap-2"><span className="w-1 h-1 bg-white/20 rounded-full"></span> Platform</li>
                    <li className="hover:text-[#00ffaa] cursor-pointer transition-colors flex items-center gap-2"><span className="w-1 h-1 bg-white/20 rounded-full"></span> Architecture</li>
                    <li className="hover:text-[#00ffaa] cursor-pointer transition-colors flex items-center gap-2"><span className="w-1 h-1 bg-white/20 rounded-full"></span> Whitepaper</li>
                </ul>
            </div>

            <div>
                <h4 className="font-mono text-[10px] text-white uppercase tracking-[0.2em] mb-6">Secure Line</h4>
                <ul className="space-y-4 font-mono text-xs text-white/40 uppercase tracking-widest">
                    <li><a href="#" className="hover:text-[#00ffaa] transition-colors">INITIATE CONTACT</a></li>
                    <li><a href="#" className="hover:text-[#00ffaa] transition-colors">ENCRYPTED COMMS</a></li>
                </ul>
            </div>
        </div>
        
        <div className="max-w-7xl mx-auto border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <span className="font-mono text-[10px] text-white/30 uppercase tracking-[0.2em]">Designed & Engineered for the Edge</span>
            <div className="flex items-center gap-3 px-4 py-2 rounded-full border border-[#00ffaa]/10 bg-[#00ffaa]/[0.02]">
                <span className="w-1.5 h-1.5 rounded-full bg-[#00ffaa] animate-pulse"></span>
                <span className="font-mono text-[10px] text-[#00ffaa]/80 uppercase tracking-widest">Vexalis Node Secure</span>
            </div>
        </div>
      </footer>
    </div>
  );
}