"use client"

import { useEffect, useState } from "react"
import Link from "next/link"

export default function Home() {
  const [glitchText, setGlitchText] = useState("ENTER THE NETWORK")

  useEffect(() => {
    const glitchChars = "!<>-_\\/[]{}—=+*^?#________"
    const originalText = "ENTER THE NETWORK"

    const glitchInterval = setInterval(() => {
      if (Math.random() > 0.95) {
        const glitched = originalText
          .split("")
          .map((char) => (Math.random() > 0.9 ? glitchChars[Math.floor(Math.random() * glitchChars.length)] : char))
          .join("")
        setGlitchText(glitched)

        setTimeout(() => setGlitchText(originalText), 100)
      }
    }, 100)

    return () => clearInterval(glitchInterval)
  }, [])

  return (
    <main className="min-h-screen relative overflow-hidden bg-black flex items-center justify-center">
      {/* Animated grid background */}
      <div className="absolute inset-0 opacity-20">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `
            linear-gradient(rgba(0, 255, 255, 0.3) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 255, 0.3) 1px, transparent 1px)
          `,
            backgroundSize: "50px 50px",
            animation: "gridScroll 20s linear infinite",
          }}
        />
      </div>

      {/* Fractal orbs */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse" />
      <div
        className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-magenta-500/20 rounded-full blur-3xl animate-pulse"
        style={{ animationDelay: "1s" }}
      />

      {/* Scan lines */}
      <div className="absolute inset-0 pointer-events-none opacity-10">
        <div
          className="h-full w-full"
          style={{
            backgroundImage:
              "repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.1) 0px, transparent 2px, transparent 4px)",
            animation: "scanlines 8s linear infinite",
          }}
        />
      </div>

      {/* Main content */}
      <div className="relative z-10 text-center px-4">
        <div className="mb-8 space-y-4">
          {/* Glitch text effect */}
          <h1
            className="text-6xl md:text-8xl font-bold text-cyan-400 tracking-wider font-mono"
            style={{
              textShadow: `
                  0 0 10px rgba(0, 255, 255, 0.8),
                  0 0 20px rgba(0, 255, 255, 0.6),
                  0 0 30px rgba(0, 255, 255, 0.4),
                  2px 2px 0 rgba(255, 0, 255, 0.5),
                  -2px -2px 0 rgba(0, 255, 255, 0.5)
                `,
            }}
          >
            {glitchText}
          </h1>

          <p
            className="text-xl md:text-2xl text-magenta-400 font-mono tracking-wide"
            style={{
              textShadow: "0 0 10px rgba(255, 0, 255, 0.8)",
            }}
          >
            Where consciousness meets code
          </p>
        </div>

        <div className="space-y-6 max-w-2xl mx-auto">
          <p className="text-cyan-300/80 text-lg leading-relaxed">
            The mycelial network awaits. A living system of institutional neuroplasticity, where communities evolve
            through distributed intelligence.
          </p>

          <p className="text-magenta-300/80 text-base">
            Are you ready to explore the intersection of biology, technology, and collective consciousness?
          </p>

          <Link
            href="/ics"
            className="inline-block mt-8 px-8 py-4 border-2 border-cyan-400 text-cyan-400 font-mono text-lg hover:bg-cyan-400/10 hover:shadow-[0_0_20px_rgba(0,255,255,0.5)] transition-all duration-300 relative group overflow-hidden"
          >
            <span className="relative z-10">INITIALIZE CONNECTION</span>
            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/0 via-cyan-500/20 to-cyan-500/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
          </Link>
        </div>

        {/* Pulsing indicator */}
        <div className="mt-16 flex justify-center items-center gap-2">
          <div className="w-3 h-3 bg-cyan-400 rounded-full animate-pulse shadow-[0_0_10px_rgba(0,255,255,0.8)]" />
          <span className="text-cyan-400/60 text-sm font-mono">SYSTEM ACTIVE</span>
        </div>
      </div>

      <style jsx>{`
        @keyframes gridScroll {
          0% { transform: translateY(0) translateX(0); }
          100% { transform: translateY(50px) translateX(50px); }
        }
        
        @keyframes scanlines {
          0% { transform: translateY(0); }
          100% { transform: translateY(4px); }
        }
      `}</style>
    </main>
  )
}