import React, { useState, useEffect, useRef } from 'react';
import { motion, useMotionValue, useTransform, useScroll } from 'framer-motion';
import * as THREE from 'three';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

// Custom 3D Scene Component with Glass-like Materials
function FloatingGlassObjects() {
  const mesh1 = useRef();
  const mesh2 = useRef();
  const mesh3 = useRef();
  
  useFrame((state) => {
    if (mesh1.current) mesh1.current.rotation.y = state.clock.elapsedTime * 0.3;
    if (mesh2.current) mesh2.current.rotation.x = state.clock.elapsedTime * 0.2;
    if (mesh3.current) mesh3.current.rotation.z = state.clock.elapsedTime * 0.4;
  });

  return (
    <>
      <mesh ref={mesh1} position={[-2, 1, -3]}>
        <boxGeometry args={[0.8, 0.8, 0.8]} />
        <meshPhysicalMaterial 
          color="#6366f1" 
          transmission={0.9}
          roughness={0.1}
          metalness={0.1}
          clearcoat={1}
          clearcoatRoughness={0.1}
          ior={1.5}
        />
      </mesh>
      
      <mesh ref={mesh2} position={[2, -1, -4]}>
        <sphereGeometry args={[0.6, 32, 32]} />
        <meshPhysicalMaterial 
          color="#ec4899" 
          transmission={0.85}
          roughness={0.05}
          metalness={0.05}
          clearcoat={1}
          clearcoatRoughness={0.05}
          ior={1.6}
        />
      </mesh>
      
      <mesh ref={mesh3} position={[0, 2, -5]}>
        <torusGeometry args={[0.5, 0.2, 16, 32]} />
        <meshPhysicalMaterial 
          color="#10b981" 
          transmission={0.9}
          roughness={0.08}
          metalness={0.1}
          clearcoat={1}
          clearcoatRoughness={0.08}
          ior={1.55}
        />
      </mesh>
    </>
  );
}

function Scene() {
  return (
    <>
      <ambientLight intensity={0.8} />
      <pointLight position={[10, 10, 10]} intensity={2} />
      <pointLight position={[-10, -10, -10]} intensity={1} />
      <FloatingGlassObjects />
    </>
  );
}

// Mouse Follower Component
function MouseFollower() {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  
  useEffect(() => {
    const handleMouseMove = (e) => {
      mouseX.set(e.clientX);
      mouseY.set(e.clientY);
    };
    
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, [mouseX, mouseY]);
  
  const scale = useTransform(mouseX, [0, window.innerWidth], [1, 1.2]);
  
  return (
    <motion.div
      className="fixed top-0 left-0 w-6 h-6 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full pointer-events-none z-50 mix-blend-difference"
      style={{
        x: mouseX,
        y: mouseY,
        scale: scale,
        translateX: '-50%',
        translateY: '-50%'
      }}
    />
  );
}

// Animated Background Component
function AnimatedBackground() {
  return (
    <div className="fixed inset-0 overflow-hidden -z-10">
      {/* Gradient Mesh Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-indigo-900/20 via-purple-900/20 to-pink-900/20"></div>
      
      {/* Floating Particles */}
      {[...Array(20)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute w-2 h-2 bg-white/10 rounded-full"
          animate={{
            x: [0, Math.random() * 100 - 50],
            y: [0, Math.random() * 100 - 50],
            opacity: [0.3, 0.7, 0.3],
            scale: [0.5, 1.2, 0.5]
          }}
          transition={{
            duration: Math.random() * 10 + 10,
            repeat: Infinity,
            delay: Math.random() * 5
          }}
          style={{
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`
          }}
        />
      ))}
      
      {/* Animated Waves */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse"></div>
        <div className="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/5 to-transparent animate-pulse" style={{ animationDelay: '2s' }}></div>
        <div className="absolute top-3/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/15 to-transparent animate-pulse" style={{ animationDelay: '4s' }}></div>
      </div>
    </div>
  );
}

// Parallax Section Component
function ParallaxSection({ children, speed = 0.1 }) {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [0, speed * 500]);
  
  return (
    <motion.div style={{ y }} className="relative">
      {children}
    </motion.div>
  );
}

export default function App() {
  const [isLoaded, setIsLoaded] = useState(false);
  
  useEffect(() => {
    setIsLoaded(true);
  }, []);
  
  return (
    <div className="min-h-screen bg-black text-white overflow-x-hidden">
      {/* Animated Background */}
      <AnimatedBackground />
      
      {/* Mouse Follower */}
      <MouseFollower />
      
      {/* Hero Section */}
      <section className="min-h-screen flex items-center justify-center relative overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Canvas camera={{ position: [0, 0, 10], fov: 75 }}>
            <Scene />
          </Canvas>
        </div>
        
        <div className="relative z-10 text-center px-4 max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.5 }}
            className="mb-8"
          >
            <h1 className="text-6xl md:text-8xl font-bold bg-gradient-to-r from-indigo-400 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-6">
              Derby4k
            </h1>
            <p className="text-xl md:text-2xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
              مصمم جرافيك احترافي يدمج بين أحدث ترندات UI/UX والابتكار البصري
            </p>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 1 }}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <button className="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-semibold hover:from-indigo-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-2xl backdrop-blur-sm">
              استكشف أعمالي
            </button>
            <button className="px-8 py-4 border-2 border-white/30 rounded-full text-lg font-semibold hover:bg-white/10 transition-all duration-300 transform hover:scale-105 backdrop-blur-sm">
              تواصل معي
            </button>
          </motion.div>
        </div>
        
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 2, delay: 1.5 }}
          className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"
        >
          <svg className="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </motion.div>
      </section>
      
      {/* Services Section with Glass Cards */}
      <ParallaxSection speed={0.05}>
        <section className="py-20 px-4 relative">
          <div className="max-w-6xl mx-auto">
            <motion.h2 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
              className="text-4xl md:text-5xl font-bold text-center mb-16"
            >
              خدماتي الاحترافية
            </motion.h2>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                { title: "تصميم واجهات المستخدم", desc: "واجهات حديثة ومبتكرة تعزز تجربة المستخدم" },
                { title: "تصميم تجربة المستخدم", desc: "تحليل وتحسين رحلة المستخدم لزيادة التحويلات" },
                { title: "الهوية البصرية", desc: "هويات بصرية فريدة تعبر عن قيم علامتك التجارية" }
              ].map((service, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 50 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.2 }}
                  viewport={{ once: true }}
                  className="bg-white/5 backdrop-blur-xl p-8 rounded-2xl border border-white/10 hover:border-indigo-500/30 transition-all duration-300 group hover:shadow-2xl hover:shadow-indigo-500/20"
                >
                  <div className="w-12 h-12 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 backdrop-blur-sm">
                    <span className="text-xl">🎨</span>
                  </div>
                  <h3 className="text-xl font-bold mb-4">{service.title}</h3>
                  <p className="text-gray-400">{service.desc}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </ParallaxSection>
      
      {/* Portfolio Section with Glass Cards */}
      <ParallaxSection speed={0.08}>
        <section className="py-20 px-4">
          <div className="max-w-6xl mx-auto">
            <motion.h2 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
              className="text-4xl md:text-5xl font-bold text-center mb-16"
            >
              أحدث أعمالي
            </motion.h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {[1, 2, 3, 4, 5, 6].map((item) => (
                <motion.div
                  key={item}
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5 }}
                  viewport={{ once: true }}
                  className="group relative overflow-hidden rounded-2xl aspect-square bg-white/5 backdrop-blur-xl border border-white/10 hover:border-indigo-500/30 transition-all duration-300"
                >
                  <div className="w-full h-full flex items-center justify-center p-6">
                    <div className="text-center">
                      <div className="w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl mx-auto mb-4 flex items-center justify-center backdrop-blur-sm">
                        <span className="text-2xl">✨</span>
                      </div>
                      <h3 className="text-xl font-bold mb-2">مشروع {item}</h3>
                      <p className="text-gray-400 text-sm">تصميم عصري مع تأثيرات ثلاثية الأبعاد</p>
                    </div>
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
                    <button className="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:from-indigo-700 hover:to-purple-700 transition-all duration-300 backdrop-blur-sm">
                      عرض التفاصيل
                    </button>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </ParallaxSection>
      
      {/* CTA Section with Glass Effect */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="bg-white/5 backdrop-blur-xl p-12 rounded-3xl border border-white/10"
          >
            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              جاهز لتحويل أفكارك إلى واقع؟
            </h2>
            <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
              دعنا نعمل معًا لإنشاء تجربة بصرية استثنائية تميز علامتك التجارية
            </p>
            <motion.button
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
              className="px-12 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-semibold hover:from-indigo-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-2xl backdrop-blur-sm"
            >
              ابدأ مشروعك الآن
            </motion.button>
          </motion.div>
        </div>
      </section>
      
      {/* Footer */}
      <footer className="py-12 px-4 border-t border-white/10">
        <div className="max-w-6xl mx-auto text-center">
          <h3 className="text-2xl font-bold mb-4">Derby4k</h3>
          <p className="text-gray-400 mb-6">مصمم جرافيك احترافي | متخصص في UI/UX الحديث</p>
          <div className="flex justify-center space-x-6">
            <a href="#" className="text-gray-400 hover:text-white transition-colors duration-300">.behance</a>
            <a href="#" className="text-gray-400 hover:text-white transition-colors duration-300">.dribbble</a>
            <a href="#" className="text-gray-400 hover:text-white transition-colors duration-300">.instagram</a>
          </div>
        </div>
      </footer>
    </div>
  );
}