import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { ArrowRight, Terminal } from "lucide-react";

export function Hero() {
  return (
    <section id="home" className="relative min-h-screen flex items-center pt-16 overflow-hidden">
      {/* Background Image & Overlay */}
      <div className="absolute inset-0 z-0">
        <img 
          src="/hero-bg.png" 
          alt="Abstract Minecraft Tech Background" 
          className="w-full h-full object-cover opacity-60"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/90 to-background" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(16,185,129,0.1)_0%,transparent_70%)]" />
      </div>

      <div className="container mx-auto px-4 relative z-10 grid lg:grid-cols-2 gap-12 items-center">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="space-y-6"
        >
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-mono font-medium">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
            </span>
            Available for new projects
          </div>
          
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-heading leading-tight text-white">
            Crafting the <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-200 text-glow">
              Future
            </span> of Minecraft
          </h1>
          
          <p className="text-lg text-muted-foreground max-w-xl font-light">
            We are NeveTime Team. A collective of expert developers building high-performance mods, plugins, and custom server solutions.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 pt-4">
            <Button size="lg" className="bg-primary hover:bg-primary/90 text-background font-bold text-base h-12 px-8">
              Start Project
              <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
            <Button size="lg" variant="outline" className="border-white/10 text-white hover:bg-white/5 h-12 px-8 font-mono">
              <Terminal className="mr-2 w-4 h-4 text-primary" />
              View Portfolio
            </Button>
          </div>
        </motion.div>

        {/* Floating holographic card effect */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="hidden lg:block relative"
        >
          <div className="absolute -inset-1 bg-gradient-to-r from-primary/50 to-emerald-600/50 rounded-2xl blur-2xl opacity-20 animate-pulse" />
          <div className="relative glass-card rounded-2xl p-6 md:p-8 aspect-video flex flex-col justify-between border-primary/20">
            <div className="flex justify-between items-start">
              <div className="flex gap-2">
                <div className="w-3 h-3 rounded-full bg-red-500/50" />
                <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
                <div className="w-3 h-3 rounded-full bg-green-500/50" />
              </div>
              <div className="font-mono text-xs text-primary/50">server_log.txt</div>
            </div>
            
            <div className="font-mono text-sm space-y-2 text-muted-foreground my-4">
              <div className="flex gap-2">
                <span className="text-primary">{">"}</span>
                <span>Initializing NeveTime Core...</span>
              </div>
              <div className="flex gap-2">
                <span className="text-primary">{">"}</span>
                <span>Loading modules: [Mods, Plugins, Web]</span>
              </div>
              <div className="flex gap-2">
                <span className="text-primary">{">"}</span>
                <span className="text-emerald-400">Success! System ready.</span>
              </div>
              <div className="flex gap-2 animate-pulse">
                <span className="text-primary">{">"}</span>
                <span className="w-2 h-4 bg-primary inline-block" />
              </div>
            </div>

            <div className="grid grid-cols-3 gap-4 mt-auto">
              {[1, 2, 3].map((i) => (
                <div key={i} className="h-2 bg-white/10 rounded-full w-full overflow-hidden">
                  <div className="h-full bg-primary/50 w-[70%]" />
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
