import React, { useMemo } from "react";
import { motion } from "framer-motion";
import { Zap, Shield, Globe } from "lucide-react";
import "./styles.css";

function ParticleRing() {
    const particles = useMemo(() => {
        const items = [];
        const count = 150;
        for (let i = 0; i < count; i++) {
            const angle = Math.random() * Math.PI * 2;
            const radius = 30 + Math.random() * 40;
            const size = 3 + Math.random() * 8;
            const hue = 30 + Math.random() * 10;
            const saturation = 30 + Math.random() * 20;
            const lightness = 60 + Math.random() * 20;
            items.push({
                cx: 50 + radius * Math.cos(angle),
                cy: 50 + radius * Math.sin(angle),
                size,
                color: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
                delay: Math.random() * -20,
                duration: 15 + Math.random() * 10
            });
        }
        return items;
    }, []);

    return (
        <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none flex items-center justify-center opacity-70">
            <div className="relative w-[150vw] h-[150vw] sm:w-[100vw] sm:h-[100vw] lg:w-[80vw] lg:h-[80vw] shrink-0">
                <motion.div
                    animate={{ rotate: 360 }}
                    transition={{ repeat: Infinity, duration: 120, ease: "linear" }}
                    className="absolute inset-0"
                >
                    {particles.map((p, i) => (
                        <motion.div
                            key={i}
                            className="absolute rounded-full shadow-[0_2px_10px_rgba(0,0,0,0.2)]"
                            style={{
                                left: `${p.cx}%`,
                                top: `${p.cy}%`,
                                width: p.size,
                                height: p.size,
                                backgroundColor: p.color,
                            }}
                            animate={{
                                y: ["-10px", "10px", "-10px"],
                                scale: [1, 1.2, 1],
                                opacity: [0.6, 1, 0.6]
                            }}
                            transition={{
                                repeat: Infinity,
                                duration: p.duration,
                                delay: p.delay,
                                ease: "easeInOut"
                            }}
                        />
                    ))}
                </motion.div>
            </div>
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vw] sm:w-[50vw] sm:h-[50vw] lg:w-[40vw] lg:h-[40vw] rounded-full bg-[#0A0A0A] blur-3xl z-10" />
        </div>
    );
}

export default function App() {
  return (
    <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-white/20 relative overflow-hidden flex flex-col justify-between">
      <ParticleRing />

      <main className="relative z-10 flex flex-col justify-end p-6 md:p-10 pb-20 md:pb-12 pointer-events-none h-screen">
        <div className="flex flex-col md:flex-row items-end justify-between w-full pb-8 md:pb-0 gap-10 md:gap-20">
          <motion.h1
              initial={{ opacity: 0, y: 40 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, delay: 0.4, ease: [0.16, 1, 0.3, 1] }}
              className="flex-1 text-[12vw] sm:text-[9vw] md:text-[6.5vw] lg:text-[7vw] leading-[0.85] font-bold tracking-tighter uppercase max-w-[80vw] pointer-events-auto mix-blend-difference text-white"
          >
              What will we<br />
              build<br />
              today?
          </motion.h1>

          <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 1, delay: 0.8 }}
              className="flex-none w-full md:w-[320px] lg:w-[400px] text-xs md:text-[10px] lg:text-xs font-medium uppercase tracking-widest leading-loose text-white/50 mix-blend-difference pointer-events-auto"
          >
              <p className="text-white/70 mb-6">
                Enter a prompt on the left to generate a fully functional, production-ready application in seconds.
              </p>

              <div className="flex flex-col gap-3">
                <div className="flex items-center gap-3">
                  <Zap size={14} className="text-[#eab308]" />
                  <span>Real-time Generation</span>
                </div>
                <div className="flex items-center gap-3">
                  <Shield size={14} className="text-[#3b82f6]" />
                  <span>Secure Deployment</span>
                </div>
                <div className="flex items-center gap-3">
                  <Globe size={14} className="text-[#a855f7]" />
                  <span>Global Hosting</span>
                </div>
              </div>

              <div className="mt-8 flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full w-max">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span>
                <span className="text-[10px] font-bold text-white/70 tracking-widest uppercase">System Ready</span>
              </div>
          </motion.div>
        </div>
      </main>

      <div className="absolute bottom-6 left-0 right-0 text-center z-10">
        <p className="text-white/30 text-[10px] font-medium uppercase tracking-[0.2em]">Powered by Gemini &amp; Chatly AI</p>
      </div>
    </div>
  );
}