import React, { useState, useEffect } from 'react';
import { 
  Terminal, Code2, Cpu, MonitorPlay, 
  Github, Linkedin, Mail, ExternalLink, 
  ChevronRight, Sparkles, Layers, Box
} from 'lucide-react';

const useTypewriter = (text, speed = 50, delay = 0) => {
  const [displayText, setDisplayText] = useState('');
  const [isTyping, setIsTyping] = useState(false);

  useEffect(() => {
    let timeout;
    let typingInterval;

    timeout = setTimeout(() => {
      setIsTyping(true);
      let i = 0;
      typingInterval = setInterval(() => {
        if (i < text.length) {
          setDisplayText((prev) => prev + text.charAt(i));
          i++;
        } else {
          setIsTyping(false);
          clearInterval(typingInterval);
        }
      }, speed);
    }, delay);

    return () => {
      clearTimeout(timeout);
      clearInterval(typingInterval);
    };
  }, [text, speed, delay]);

  return { displayText, isTyping };
};

const GlassCard = ({ children, className = '', hoverEffect = true }) => (
  <div className={`
    relative bg-slate-900/40 backdrop-blur-xl border border-slate-700/50 rounded-2xl p-6
    ${hoverEffect ? 'hover:border-cyan-500/30 hover:bg-slate-800/50 hover:shadow-[0_0_30px_-5px_rgba(6,182,212,0.2)] hover:-translate-y-1 transition-all duration-300' : ''}
    ${className}
  `}>
    {children}
  </div>
);

const techStack = [
  { name: 'React', icon: <MonitorPlay className="w-6 h-6 text-cyan-400" />, desc: 'Frontend UI' },
  { name: 'Vue 3', icon: <Layers className="w-6 h-6 text-emerald-400" />, desc: 'Progressive Web' },
  { name: 'Tailwind CSS', icon: <Box className="w-6 h-6 text-blue-400" />, desc: 'Styling' },
  { name: 'Arch Linux', icon: <Terminal className="w-6 h-6 text-indigo-400" />, desc: 'OS & Env' },
  { name: 'ESP32', icon: <Cpu className="w-6 h-6 text-rose-400" />, desc: 'IoT Hardware' },
];

const projects = [
  {
    title: 'SIOS',
    subtitle: 'School Integrated OS',
    description: 'A comprehensive, next-generation school management system designed to unify administrative tasks, student tracking, and communication into a single, seamless platform.',
    tags: ['React', 'Tailwind', 'Node.js', 'PostgreSQL'],
    glow: 'from-blue-500/20 to-cyan-500/20',
    border: 'group-hover:border-cyan-500/50'
  },
  {
    title: 'Modular RC AIoT',
    subtitle: 'Robotics & AI',
    description: 'An advanced, modular remote-controlled vehicle powered by AI and Internet of Things. Built with ESP32 microcontrollers for real-time telemetry and automated navigation.',
    tags: ['ESP32', 'C++', 'Vue 3', 'WebSockets'],
    glow: 'from-emerald-500/20 to-teal-500/20',
    border: 'group-hover:border-emerald-500/50'
  }
];

export default function App() {
  const { displayText: titleText } = useTypewriter("Muhammad Yazif Farras", 80, 500);
  const { displayText: subtitleText } = useTypewriter("Full-Stack Developer & AIoT Engineer", 50, 2500);

  return (
    <div className="min-h-screen bg-[#030712] text-slate-200 font-sans selection:bg-cyan-500/30 selection:text-cyan-200 overflow-x-hidden">
      
      {/* Background ambient effects */}
      <div className="fixed inset-0 z-0 pointer-events-none">
        <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] rounded-full bg-cyan-900/20 blur-[120px]" />
        <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] rounded-full bg-indigo-900/20 blur-[120px]" />
        <div className="absolute top-[40%] left-[60%] w-[30%] h-[30%] rounded-full bg-emerald-900/10 blur-[100px]" />
      </div>

      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 bg-[#030712]/70 backdrop-blur-lg border-b border-white/5">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2 group cursor-pointer">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center text-white font-bold text-xl group-hover:shadow-[0_0_20px_rgba(6,182,212,0.5)] transition-all">
              Y
            </div>
            <span className="font-semibold tracking-wide text-white">YAZIF</span>
          </div>
          <div className="hidden md:flex gap-8 text-sm font-medium text-slate-400">
            <a href="#about" className="hover:text-cyan-400 transition-colors">About</a>
            <a href="#projects" className="hover:text-cyan-400 transition-colors">Projects</a>
            <a href="#stack" className="hover:text-cyan-400 transition-colors">Tech Stack</a>
          </div>
          <button className="px-5 py-2.5 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-cyan-400/50 transition-all text-sm font-medium flex items-center gap-2">
            <Mail className="w-4 h-4" />
            Contact Me
          </button>
        </div>
      </nav>

      {/* Main Content */}
      <main className="relative z-10 pt-32 pb-20">
        
        <section className="max-w-7xl mx-auto px-6 min-h-[70vh] flex flex-col justify-center">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 text-sm font-mono mb-8 w-fit">
            <Sparkles className="w-4 h-4" />
            <span>System ready. Welcome to my portfolio.</span>
          </div>
          
          <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6 min-h-[80px] md:min-h-[100px]">
            {titleText}
            <span className="inline-block w-1 md:w-2 h-10 md:h-16 bg-cyan-400 ml-1 animate-pulse" />
          </h1>
          
          <p className="text-xl md:text-3xl text-slate-400 font-light min-h-[40px] mb-10">
            {subtitleText}
          </p>

          <div className="flex flex-wrap items-center gap-4">
            <button className="px-8 py-4 rounded-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] hover:scale-105 transition-all flex items-center gap-2">
              View Projects
              <ChevronRight className="w-5 h-5" />
            </button>
            <div className="flex gap-4 ml-4">
              <a href="#" className="p-3 rounded-full bg-white/5 border border-white/10 hover:border-cyan-400/50 hover:bg-white/10 transition-all text-slate-300 hover:text-cyan-400">
                <Github className="w-5 h-5" />
              </a>
              <a href="#" className="p-3 rounded-full bg-white/5 border border-white/10 hover:border-cyan-400/50 hover:bg-white/10 transition-all text-slate-300 hover:text-cyan-400">
                <Linkedin className="w-5 h-5" />
              </a>
            </div>
          </div>
        </section>

        <section id="stack" className="max-w-7xl mx-auto px-6 py-24">
          <div className="mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">Core Technology Stack</h2>
            <div className="w-20 h-1 bg-gradient-to-r from-cyan-500 to-transparent rounded-full" />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
            {techStack.map((tech, idx) => (
              <GlassCard key={idx} className="flex flex-col items-center text-center group">
                <div className="w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-4 group-hover:scale-110 group-hover:bg-slate-800 transition-all duration-300">
                  {tech.icon}
                </div>
                <h3 className="font-semibold text-slate-200">{tech.name}</h3>
                <p className="text-sm text-slate-400 mt-1">{tech.desc}</p>
              </GlassCard>
            ))}
          </div>
        </section>

        <section id="projects" className="max-w-7xl mx-auto px-6 py-24">
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-white mb-4">Featured Projects</h2>
            <div className="w-20 h-1 bg-gradient-to-r from-cyan-500 to-transparent rounded-full" />
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {projects.map((project, idx) => (
              <div key={idx} className="group relative rounded-3xl p-[1px] bg-gradient-to-b from-white/10 to-transparent hover:from-cyan-500/50 transition-all duration-500 cursor-pointer overflow-hidden">
                <div className={`absolute inset-0 bg-gradient-to-br ${project.glow} opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-2xl`} />
                
                <div className="relative h-full bg-[#0a0f1c] rounded-[23px] p-8 md:p-10 flex flex-col justify-between overflow-hidden">
                  
                  {/* Abstract circuit/tech background pattern */}
                  <div className="absolute top-0 right-0 w-64 h-64 opacity-5 group-hover:opacity-10 group-hover:scale-110 transition-all duration-700 pointer-events-none">
                     <svg viewBox="0 0 100 100" className="fill-current text-white"><path d="M10,10 L90,10 L90,90 L10,90 Z" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="30" cy="30" r="5"/><circle cx="70" cy="70" r="5"/><path d="M30,30 L70,70" stroke="currentColor" strokeWidth="1"/></svg>
                  </div>

                  <div>
                    <h4 className="text-cyan-400 font-mono text-sm tracking-wider mb-2 uppercase">{project.subtitle}</h4>
                    <h3 className="text-3xl font-bold text-white mb-4 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-400 transition-all">{project.title}</h3>
                    <p className="text-slate-400 leading-relaxed mb-8">
                      {project.description}
                    </p>
                  </div>

                  <div className="space-y-6 mt-auto">
                    <div className="flex flex-wrap gap-2">
                      {project.tags.map((tag, tIdx) => (
                        <span key={tIdx} className="px-3 py-1 rounded-md bg-white/5 border border-white/10 text-xs text-slate-300 font-mono">
                          {tag}
                        </span>
                      ))}
                    </div>
                    
                    <div className="pt-6 border-t border-white/5 flex items-center justify-between">
                      <span className="text-sm font-medium text-slate-300 group-hover:text-cyan-400 transition-colors flex items-center gap-2">
                        View Details
                        <ExternalLink className="w-4 h-4" />
                      </span>
                      <div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-cyan-500 group-hover:text-white transition-all">
                        <Code2 className="w-5 h-5" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>

      </main>

      <footer className="border-t border-white/5 bg-[#030712] relative z-10">
        <div className="max-w-7xl mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-2">
             <div className="w-6 h-6 rounded bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center text-white font-bold text-xs">
              Y
            </div>
            <span className="font-semibold text-slate-300">Muhammad Yazif Farras</span>
          </div>
          <p className="text-slate-500 text-sm">
            © {new Date().getFullYear()} All rights reserved. Crafted with React & Tailwind.
          </p>
        </div>
      </footer>
    </div>
  );
}