import React, { useState, useEffect } from 'react';
import { 
  Rocket, 
  Link as LinkIcon, 
  ArrowUpRight, 
  Sparkles, 
  Github, 
  Twitter, 
  Terminal,
  Activity
} from 'lucide-react';

// --- Data Configuration ---
const subdomains = [
  {
    title: 'V2Links',
    prefix: 'v2links',
    domain: 'xi0.in',
    tagline: 'Link Routing & Analytics',
    description: 'Next-generation link routing, advanced URL management, and comprehensive network analytics tailored for the modern web.',
    icon: LinkIcon,
    theme: 'fuchsia'
  }
];

// --- Components ---

// Animated Star & Grid Background
const GalaxyBackground = () => {
  const [stars, setStars] = useState([]);

  useEffect(() => {
    const newStars = Array.from({ length: 120 }).map(() => ({
      id: Math.random(),
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 2 + 0.5,
      opacity: Math.random() * 0.8 + 0.2,
      animationDuration: Math.random() * 3 + 2,
      animationDelay: Math.random() * 5,
    }));
    setStars(newStars);
  }, []);

  return (
    <div className="fixed inset-0 z-0 overflow-hidden bg-[#050505] pointer-events-none">
      {/* Tech Grid Overlay */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_10%,transparent_100%)]" />
      
      {/* Deep Space Background / Nebula Gradients */}
      <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-purple-900/20 rounded-full blur-[120px] mix-blend-screen animate-pulse" style={{ animationDuration: '12s' }} />
      <div className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-cyan-900/10 rounded-full blur-[150px] mix-blend-screen animate-pulse" style={{ animationDuration: '15s' }} />
      <div className="absolute top-[30%] left-[50%] w-[40%] h-[40%] bg-fuchsia-900/10 rounded-full blur-[120px] mix-blend-screen" />
      
      {/* Stars */}
      {stars.map((star) => (
        <div
          key={star.id}
          className="absolute rounded-full bg-white animate-twinkle"
          style={{
            left: `${star.x}%`,
            top: `${star.y}%`,
            width: `${star.size}px`,
            height: `${star.size}px`,
            opacity: star.opacity,
            animationDuration: `${star.animationDuration}s`,
            animationDelay: `${star.animationDelay}s`,
          }}
        />
      ))}
    </div>
  );
};

const SubdomainCard = ({ data }) => {
  const Icon = data.icon;
  
  return (
    <a 
      href={`http://${data.prefix}.${data.domain}`}
      className="group relative block w-full outline-none"
    >
      {/* Container: 
        - Mobile: Breaks out of padding (-mx-6), no rounded corners, edge-to-edge.
        - Desktop: Rounded corners, glowing borders.
      */}
      <div className="relative -mx-6 px-6 py-10 md:mx-0 md:px-10 md:py-12 bg-white/[0.02] hover:bg-white/[0.04] border-y border-white/5 md:border border-white/10 md:rounded-[2rem] transition-all duration-500 overflow-hidden backdrop-blur-xl group-hover:shadow-[0_0_80px_-20px_rgba(217,70,239,0.3)] group-hover:border-fuchsia-500/30">
        
        {/* Dynamic Hover Gradient inside card */}
        <div className="absolute inset-0 bg-gradient-to-br from-fuchsia-500/0 via-fuchsia-500/0 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
        
        {/* Tech Decorators */}
        <div className="hidden md:block absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-fuchsia-500/50 rounded-tl-lg" />
        <div className="hidden md:block absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-cyan-500/50 rounded-br-lg" />
        
        <div className="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-8 md:gap-12">
          
          {/* Left: Icon & Branding */}
          <div className="flex-shrink-0 relative">
            <div className="absolute inset-0 bg-fuchsia-500/20 blur-2xl rounded-full group-hover:bg-fuchsia-500/40 transition-all duration-500" />
            <div className="relative w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-black/50 border border-white/10 flex items-center justify-center group-hover:border-fuchsia-500/50 group-hover:scale-105 transition-all duration-500 shadow-2xl">
              <Icon className="w-10 h-10 md:w-12 md:h-12 text-fuchsia-400 group-hover:text-fuchsia-300 transition-colors" />
            </div>
          </div>

          {/* Middle: Content */}
          <div className="flex-grow">
            <div className="flex items-center gap-3 mb-3">
              <span className="flex h-2 w-2 relative">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-fuchsia-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-fuchsia-500"></span>
              </span>
              <span className="text-fuchsia-400 text-xs font-mono uppercase tracking-widest">{data.tagline}</span>
            </div>
            
            <h3 className="text-4xl md:text-5xl font-black text-white mb-4 tracking-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-gray-400 transition-all">
              {data.title}
            </h3>
            
            <p className="text-gray-400 text-base md:text-lg leading-relaxed max-w-2xl font-light">
              {data.description}
            </p>
          </div>

          {/* Right: Action & URL */}
          <div className="flex flex-col items-start md:items-end gap-4 w-full md:w-auto mt-4 md:mt-0 pt-6 md:pt-0 border-t border-white/5 md:border-none">
            <div className="font-mono text-sm md:text-base text-gray-500 group-hover:text-cyan-400 transition-colors flex items-center gap-2">
              <span className="text-white font-semibold">{data.prefix}</span>
              <span>.{data.domain}</span>
            </div>
            
            <div className="flex items-center justify-center gap-2 px-6 py-3 rounded-full bg-white/5 border border-white/10 group-hover:bg-fuchsia-500 group-hover:border-fuchsia-400 text-white font-medium transition-all duration-300 w-full md:w-auto">
              <span>Launch Module</span>
              <ArrowUpRight className="w-4 h-4 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300" />
            </div>
          </div>

        </div>
      </div>
    </a>
  );
};

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

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

  return (
    <div className="min-h-screen bg-[#050505] text-gray-200 font-sans selection:bg-fuchsia-500/30 overflow-x-hidden">
      
      <GalaxyBackground />

      {/* --- Main Content --- */}
      <div className="relative z-10 max-w-7xl mx-auto px-6 py-8 md:py-16 flex flex-col min-h-screen">
        
        {/* Navigation / Header */}
        <nav className="flex items-center justify-between mb-16 md:mb-24 animate-fade-in-down">
          <div className="flex items-center gap-4 group cursor-pointer">
            <div className="w-12 h-12 rounded-xl border border-white/10 flex items-center justify-center bg-white/[0.03] backdrop-blur-md relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity" />
              <Terminal className="w-6 h-6 text-white relative z-10" />
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-black tracking-widest text-white uppercase leading-none">
                xi0<span className="text-fuchsia-500">.in</span>
              </span>
              <span className="text-[0.65rem] text-gray-500 tracking-[0.3em] uppercase mt-1">Command Hub</span>
            </div>
          </div>
          
          <div className="hidden md:flex items-center gap-8 text-xs font-bold text-gray-500 tracking-[0.2em] uppercase">
            <a href="#systems" className="hover:text-white transition-colors flex items-center gap-2">
              <Activity className="w-4 h-4 text-cyan-500" /> Systems
            </a>
            <a href="#network" className="hover:text-white transition-colors">Network</a>
          </div>
        </nav>

        {/* Hero Section */}
        <main className="flex-grow flex flex-col justify-center">
          <header className={`max-w-4xl mb-16 md:mb-24 transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
            <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white/[0.03] border border-white/10 text-gray-300 text-xs font-bold uppercase tracking-[0.2em] mb-8 backdrop-blur-md shadow-lg">
              <Sparkles className="w-4 h-4 text-cyan-400" />
              <span>Core Infrastructure</span>
            </div>
            
            <h1 className="text-5xl md:text-7xl lg:text-[6rem] font-black text-white tracking-tighter mb-8 leading-[1]">
              The <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">Cosmic</span> <br className="hidden md:block"/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 via-purple-400 to-cyan-400 animate-gradient-x">
                Network.
              </span>
            </h1>
            
            <p className="text-lg md:text-2xl text-gray-400 leading-relaxed max-w-2xl font-light">
              Navigate the central nexus. Access isolated environments, link directories, and experimental tools deployed across the <strong className="text-gray-200 font-medium">xi0.in</strong> galaxy.
            </p>
          </header>

          {/* Subdomains Area */}
          <section id="systems" className="mb-20 w-full">
            <div className="flex items-center gap-6 mb-10 md:mb-16 opacity-70">
              <h2 className="text-xs font-black text-gray-400 uppercase tracking-[0.4em]">Active Modules</h2>
              <div className="h-px flex-grow bg-gradient-to-r from-white/20 to-transparent"></div>
            </div>
            
            <div className="flex flex-col gap-8 w-full">
              {subdomains.map((sub) => (
                <SubdomainCard key={sub.prefix} data={sub} />
              ))}
            </div>
          </section>
        </main>

        {/* Footer */}
        <footer id="network" className="py-8 md:py-10 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 relative z-10">
          <div className="flex items-center gap-3">
            <span className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" />
            <span className="text-xs font-bold text-gray-500 tracking-[0.2em] uppercase">Status: Optimal</span>
          </div>
          
          <div className="flex items-center gap-8">
            <a href="#" className="text-gray-500 hover:text-white transition-all hover:scale-110">
              <Github className="w-5 h-5" />
            </a>
            <a href="#" className="text-gray-500 hover:text-cyan-400 transition-all hover:scale-110">
              <Twitter className="w-5 h-5" />
            </a>
            <a href="#" className="text-gray-500 hover:text-fuchsia-400 transition-all hover:scale-110">
              <Rocket className="w-5 h-5" />
            </a>
          </div>
        </footer>

      </div>
      
      {/* Global styles for animations */}
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes fade-in-down {
          0% { opacity: 0; transform: translateY(-30px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes twinkle {
          0%, 100% { opacity: 0; transform: scale(0.8); }
          50% { opacity: 1; transform: scale(1.2); }
        }

        @keyframes gradient-x {
          0%, 100% {
            background-size: 200% 200%;
            background-position: left center;
          }
          50% {
            background-size: 200% 200%;
            background-position: right center;
          }
        }

        .animate-fade-in-down {
          animation: fade-in-down 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .animate-twinkle {
          animation-name: twinkle;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
        }

        .animate-gradient-x {
          animation: gradient-x 8s ease infinite;
        }
      `}} />
    </div>
  );
}