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

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

    return (
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.7 }}>
            <motion.div
                animate={{ rotate: 360 }}
                transition={{ repeat: Infinity, duration: 120, ease: "linear" }}
                style={{ position: 'relative', width: '100vw', height: '100vw' }}
            >
                {particles.map((p, i) => (
                    <motion.div
                        key={i}
                        style={{
                            position: 'absolute',
                            borderRadius: '50%',
                            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>
    );
}

export default function App() {
  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#0A0A0A', color: 'white', fontFamily: 'system-ui, sans-serif', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <ParticleRing />
      <main style={{ position: 'relative', zIndex: 10, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '2.5rem', paddingBottom: '5rem', height: '100vh', pointerEvents: 'none' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', width: '100%', gap: '2.5rem' }}>
          <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] }}
            style={{ flex: 1, fontSize: 'clamp(3rem, 10vw, 7rem)', lineHeight: 0.85, fontWeight: 'bold', letterSpacing: '-0.04em', textTransform: 'uppercase', color: 'white', mixBlendMode: 'difference', pointerEvents: 'auto' }}
          >
            What will we<br />build<br />today?
          </motion.h1>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1, delay: 0.8 }}
            style={{ maxWidth: 400, fontSize: '10px', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.15em', lineHeight: 2, color: 'rgba(255,255,255,0.5)', pointerEvents: 'auto' }}
          >
            <p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: '1.5rem' }}>Enter a prompt on the left to generate a fully functional, production-ready application in seconds.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}><Zap size={14} color="#eab308" /><span>Real-time Generation</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}><Shield size={14} color="#3b82f6" /><span>Secure Deployment</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}><Globe size={14} color="#a855f7" /><span>Global Hosting</span></div>
            </div>
            <div style={{ marginTop: '2rem', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '9999px', width: 'fit-content' }}>
              <span style={{ position: 'relative', width: 8, height: 8 }}>
                <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', backgroundColor: '#34d399', animation: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', opacity: 0.75 }}></span>
                <span style={{ position: 'relative', display: 'inline-flex', borderRadius: '50%', width: 8, height: 8, backgroundColor: '#10b981' }}></span>
              </span>
              <span style={{ fontSize: '10px', fontWeight: 700, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>System Ready</span>
            </div>
          </motion.div>
        </div>
      </main>
      <div style={{ position: 'absolute', bottom: '1.5rem', left: 0, right: 0, textAlign: 'center', zIndex: 10 }}>
        <p style={{ color: 'rgba(255,255,255,0.3)', fontSize: '10px', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.2em' }}>Powered by Gemini &amp; Chatly AI</p>
      </div>
      <style>{`@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }`}</style>
    </div>
  );
}