import React, { useState } from 'react';
import { 
  Code2, 
  Sparkles, 
  Terminal, 
  Linkedin, 
  Mail, 
  Phone, 
  MapPin, 
  ExternalLink, 
  Github, 
  ChevronRight, 
  Cpu, 
  Layers, 
  BookOpen, 
  Send, 
  CheckCircle2, 
  Zap, 
  Award, 
  Copy, 
  Download,
  Check,
  User,
  Monitor,
  Layout,
  Database
} from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('all');
  const [copiedEmail, setCopiedEmail] = useState(false);
  const [copiedPhone, setCopiedPhone] = useState(false);
  const [terminalOutput, setTerminalOutput] = useState([
    { type: 'system', text: 'P. Somnath Das Portfolio OS v2.5 initialized.' },
    { type: 'system', text: 'Type "help" or click buttons below to run interactive commands.' }
  ]);
  const [terminalInput, setTerminalInput] = useState('');
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

  // AI Prompt Generator Interactive Feature
  const [aiRole, setAiRole] = useState('Front-End Developer');
  const [aiTask, setAiTask] = useState('Build a responsive Glassmorphic Card component');
  const [generatedPrompt, setGeneratedPrompt] = useState('');
  const [promptCopied, setPromptCopied] = useState(false);

  const handleCopyEmail = () => {
    navigator.clipboard.writeText('psomnathdas@email.com');
    setCopiedEmail(true);
    setTimeout(() => setCopiedEmail(false), 2000);
  };

  const handleCopyPhone = () => {
    navigator.clipboard.writeText('+919790095490');
    setCopiedPhone(true);
    setTimeout(() => setCopiedPhone(false), 2000);
  };

  const handleTerminalSubmit = (e) => {
    e.preventDefault();
    if (!terminalInput.trim()) return;

    const cmd = terminalInput.trim().toLowerCase();
    let newLogs = [...terminalOutput, { type: 'user', text: `$ ${terminalInput}` }];

    switch (cmd) {
      case 'help':
        newLogs.push({ type: 'response', text: 'Available commands: about, skills, education, projects, contact, clear' });
        break;
      case 'about':
        newLogs.push({ type: 'response', text: 'P. Somnath Das - B.Sc CS 3rd Year student at Vel Tech Ranga Sanku College. Specializing in Web Dev & GenAI.' });
        break;
      case 'skills':
        newLogs.push({ type: 'response', text: 'Core: HTML5, CSS3, JS (ES6+), Core Java | Emerging: GenAI, Machine Learning, Computer Vision' });
        break;
      case 'education':
        newLogs.push({ type: 'response', text: 'B.Sc. Computer Science (2024-2027) | Vel Tech Ranga Sanku College | Sem V' });
        break;
      case 'projects':
        newLogs.push({ type: 'response', text: '1. Personal Portfolio Engine\n2. AI PromptCraft Studio\n3. NeuralVision JS Visualizer' });
        break;
      case 'contact':
        newLogs.push({ type: 'response', text: 'Email: psomnathdas@email.com | Phone: +91 9790095490 | Location: Chennai, India' });
        break;
      case 'clear':
        setTerminalOutput([]);
        setTerminalInput('');
        return;
      default:
        newLogs.push({ type: 'error', text: `Command not recognized: "${cmd}". Type "help" for a list of commands.` });
    }

    setTerminalOutput(newLogs);
    setTerminalInput('');
  };

  const generatePrompt = () => {
    const prompt = `Act as an expert ${aiRole}. Cleanly execute the following task with high precision and modern best practices: "${aiTask}". Ensure mobile responsiveness, semantic structure, modular reusable code, and optimized UI performance.`;
    setGeneratedPrompt(prompt);
  };

  const handleCopyPrompt = () => {
    if (!generatedPrompt) return;
    navigator.clipboard.writeText(generatedPrompt);
    setPromptCopied(true);
    setTimeout(() => setPromptCopied(false), 2000);
  };

  const handleContactSubmit = (e) => {
    e.preventDefault();
    if (formData.name && formData.email && formData.message) {
      setFormSubmitted(true);
      setTimeout(() => {
        setFormSubmitted(false);
        setFormData({ name: '', email: '', message: '' });
      }, 4000);
    }
  };

  const projects = [
    {
      id: 1,
      category: 'web',
      title: 'Interactive Web Suite & Portfolio Engine',
      subtitle: 'Self-Directed Core Front-End Development',
      description: 'A responsive multi-page web architecture featuring modular dynamic DOM updates, custom client-side JS state logic, and mobile-first CSS3 Flexbox/Grid patterns.',
      tags: ['HTML5', 'CSS3', 'JavaScript ES6+', 'DOM Manipulation', 'Responsive UX'],
      highlights: [
        'Semantic HTML5 design with custom CSS animations',
        'Dynamic client-side interactivity without heavy external dependencies',
        'Optimized viewport handling and cross-browser consistency'
      ],
      type: 'Featured Project'
    },
    {
      id: 2,
      category: 'ai',
      title: 'PromptCraft AI Studio',
      subtitle: 'Generative AI & Web Engineering Concept',
      description: 'An interactive web utility designed to compose, refine, and optimize prompts for Large Language Models with real-time feedback and dynamic parameter tweaking.',
      tags: ['JavaScript', 'Generative AI', 'Tailwind CSS', 'UI Engineering'],
      highlights: [
        'Structured prompt templates for developer productivity',
        'Instant copy-to-clipboard and customizable parameter sliders',
        'Clean dark glassmorphism user interface'
      ],
      type: 'GenAI Web App'
    },
    {
      id: 3,
      category: 'core',
      title: 'Java Data Structure Visualizer',
      subtitle: 'Core Software Engineering & Logic',
      description: 'Interactive visual representations of foundational Data Structures and Algorithms implemented with Core Java logic ported to browser DOM visualization.',
      tags: ['Core Java', 'DSA', 'Logic Design', 'Web Mechanics'],
      highlights: [
        'Visual step-by-step trace for array operations and sorting',
        'Bridging classic computer science fundamentals with visual web UX'
      ],
      type: 'CS Core Project'
    }
  ];

  const filteredProjects = activeTab === 'all' 
    ? projects 
    : projects.filter(p => p.category === activeTab);

  return (
    <div className="min-h-screen bg-[#070B14] text-slate-100 font-sans selection:bg-cyan-500/30 selection:text-cyan-200">
      
      {/* Background Radial Glow Effects */}
      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
        <div className="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-cyan-600/10 rounded-full blur-[120px]" />
        <div className="absolute top-[40%] right-[-10%] w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[150px]" />
        <div className="absolute bottom-[-10%] left-[20%] w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[140px]" />
      </div>

      {/* Navigation Bar */}
      <header className="sticky top-0 z-50 backdrop-blur-xl bg-[#070B14]/80 border-b border-slate-800/60">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          <a href="#hero" className="flex items-center gap-2 font-bold text-lg tracking-tight group">
            <span className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center text-white font-mono text-sm shadow-lg shadow-cyan-500/20 group-hover:scale-105 transition-transform">
              SD
            </span>
            <span className="bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
              P. Somnath Das
            </span>
          </a>

          <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-slate-400">
            <a href="#about" className="hover:text-cyan-400 transition-colors">About</a>
            <a href="#skills" className="hover:text-cyan-400 transition-colors">Skills</a>
            <a href="#projects" className="hover:text-cyan-400 transition-colors">Projects</a>
            <a href="#ai-lab" className="hover:text-cyan-400 transition-colors">AI Studio</a>
            <a href="#terminal" className="hover:text-cyan-400 transition-colors">Console</a>
            <a href="#contact" className="hover:text-cyan-400 transition-colors">Contact</a>
          </nav>

          <a 
            href="#contact"
            className="px-4 py-2 text-xs sm:text-sm font-semibold rounded-lg bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 hover:bg-cyan-500/20 hover:border-cyan-500/60 transition-all flex items-center gap-2"
          >
            <Zap className="w-4 h-4" />
            <span>Hire Me</span>
          </a>
        </div>
      </header>

      {/* Main Content */}
      <main className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 space-y-24 pt-12 pb-24">
        
        {/* HERO SECTION */}
        <section id="hero" className="pt-8 sm:pt-16 pb-6">
          <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-12">
            
            <div className="space-y-6 max-w-2xl">
              <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-xs font-semibold tracking-wide">
                <span className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />
                B.Sc. Computer Science • 3rd Year (Sem V)
              </div>

              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.15]">
                Front-End Web Developer & <br />
                <span className="bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 bg-clip-text text-transparent">
                  Generative AI Enthusiast
                </span>
              </h1>

              <p className="text-slate-400 text-base sm:text-lg leading-relaxed">
                Detail-oriented Computer Science student building fast, responsive, user-centric web applications with <strong className="text-slate-200 font-medium">HTML5, CSS3, JavaScript (ES6+)</strong>, and <strong className="text-slate-200 font-medium">Core Java</strong>. Passionate about integrating AI models into modern web interfaces.
              </p>

              {/* Action Buttons */}
              <div className="flex flex-wrap items-center gap-4 pt-2">
                <a 
                  href="#projects"
                  className="px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-semibold text-sm shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:scale-[1.02] transition-all flex items-center gap-2"
                >
                  <span>Explore Work</span>
                  <ChevronRight className="w-4 h-4" />
                </a>

                <button 
                  onClick={handleCopyEmail}
                  className="px-5 py-3 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 hover:text-white hover:border-slate-700 font-semibold text-sm transition-all flex items-center gap-2"
                >
                  {copiedEmail ? (
                    <>
                      <Check className="w-4 h-4 text-emerald-400" />
                      <span className="text-emerald-400">Email Copied!</span>
                    </>
                  ) : (
                    <>
                      <Mail className="w-4 h-4 text-cyan-400" />
                      <span>psomnathdas@email.com</span>
                    </>
                  )}
                </button>
              </div>

              {/* Quick Info Badges */}
              <div className="pt-6 border-t border-slate-800/80 flex flex-wrap items-center gap-6 text-xs text-slate-400">
                <div className="flex items-center gap-2">
                  <MapPin className="w-4 h-4 text-cyan-400" />
                  <span>Chennai, Tamil Nadu</span>
                </div>
                <div className="flex items-center gap-2">
                  <BookOpen className="w-4 h-4 text-blue-400" />
                  <span>Vel Tech Ranga Sanku College</span>
                </div>
                <div className="flex items-center gap-2">
                  <Award className="w-4 h-4 text-purple-400" />
                  <span>2024–2027 Batch</span>
                </div>
              </div>
            </div>

            {/* Profile Highlight Card */}
            <div className="w-full lg:w-[380px] p-6 rounded-2xl bg-gradient-to-b from-slate-900/80 to-slate-950/80 border border-slate-800/80 backdrop-blur-xl shadow-2xl relative group">
              <div className="absolute -inset-0.5 bg-gradient-to-r from-cyan-500/20 to-purple-500/20 rounded-2xl blur opacity-50 group-hover:opacity-100 transition duration-500" />
              
              <div className="relative space-y-6">
                <div className="flex items-center justify-between">
                  <div className="w-12 h-12 rounded-xl bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400 font-bold text-xl">
                    SD
                  </div>
                  <span className="text-xs px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 font-mono">
                    Active Student
                  </span>
                </div>

                <div>
                  <h3 className="text-lg font-bold text-slate-100">P. Somnath Das</h3>
                  <p className="text-xs text-slate-400">Computer Science Undergraduate</p>
                </div>

                <div className="space-y-3 text-xs">
                  <div className="p-3 rounded-xl bg-slate-900/90 border border-slate-800 flex items-center justify-between">
                    <span className="text-slate-400">Specialization</span>
                    <span className="text-cyan-300 font-medium">Front-End & GenAI</span>
                  </div>
                  <div className="p-3 rounded-xl bg-slate-900/90 border border-slate-800 flex items-center justify-between">
                    <span className="text-slate-400">Primary Code</span>
                    <span className="text-slate-200 font-mono">JS (ES6+) / Java</span>
                  </div>
                  <div className="p-3 rounded-xl bg-slate-900/90 border border-slate-800 flex items-center justify-between">
                    <span className="text-slate-400">Current Semester</span>
                    <span className="text-purple-300 font-medium">Semester V</span>
                  </div>
                </div>

                <div className="pt-2 flex items-center justify-between gap-3">
                  <a 
                    href="[https://linkedin.com/in/p-somnath-das-a72056416](https://linkedin.com/in/p-somnath-das-a72056416)" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="flex-1 py-2.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium flex items-center justify-center gap-2 transition-colors"
                  >
                    <Linkedin className="w-4 h-4 text-blue-400" />
                    <span>LinkedIn</span>
                  </a>
                  <button 
                    onClick={handleCopyPhone}
                    className="px-3 py-2.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium flex items-center gap-1.5 transition-colors"
                    title="Click to copy phone"
                  >
                    <Phone className="w-3.5 h-3.5 text-cyan-400" />
                    <span>{copiedPhone ? "Copied" : "Call"}</span>
                  </button>
                </div>
              </div>
            </div>

          </div>
        </section>

        {/* SKILLS ARCHITECTURE */}
        <section id="skills" className="space-y-8">
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-cyan-400 text-xs font-semibold tracking-wider uppercase">
              <Cpu className="w-4 h-4" />
              <span>Technical Capabilities</span>
            </div>
            <h2 className="text-3xl font-bold tracking-tight">Skills & Domain Expertise</h2>
            <p className="text-slate-400 text-sm max-w-xl">
              Structured combination of modern web technologies, core computer science principles, and emerging AI concepts.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            
            {/* Front-End & Web Tech */}
            <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800/80 hover:border-cyan-500/40 transition-all space-y-4">
              <div className="w-10 h-10 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-cyan-400">
                <Layout className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-bold text-slate-100 text-base">Web Development</h3>
                <p className="text-xs text-slate-400">Responsive & Modern Interfaces</p>
              </div>
              <ul className="space-y-2 text-xs text-slate-300">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                  <span>HTML5 (Semantic Layouts)</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                  <span>CSS3 (Flexbox, Grid, Animations)</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                  <span>JavaScript (ES6+, DOM Logic)</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                  <span>Responsive Web Design</span>
                </li>
              </ul>
            </div>

            {/* Programming Languages & Core CS */}
            <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800/80 hover:border-blue-500/40 transition-all space-y-4">
              <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400">
                <Code2 className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-bold text-slate-100 text-base">Core Engineering</h3>
                <p className="text-xs text-slate-400">Software Logic & Data Structures</p>
              </div>
              <ul className="space-y-2 text-xs text-slate-300">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                  <span>Core Java Programming</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                  <span>Data Structures & Algorithms (DSA)</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                  <span>Database Management (DBMS)</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-blue-400 shrink-0" />
                  <span>Python & C++ Foundations</span>
                </li>
              </ul>
            </div>

            {/* AI & Developer Tools */}
            <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800/80 hover:border-purple-500/40 transition-all space-y-4">
              <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400">
                <Sparkles className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-bold text-slate-100 text-base">AI & Tooling</h3>
                <p className="text-xs text-slate-400">Emerging Tech & Workflow</p>
              </div>
              <ul className="space-y-2 text-xs text-slate-300">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-purple-400 shrink-0" />
                  <span>Generative AI Fundamentals</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-purple-400 shrink-0" />
                  <span>Machine Learning Trends</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-purple-400 shrink-0" />
                  <span>Computer Vision Concepts</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-purple-400 shrink-0" />
                  <span>Git Version Control & VS Code</span>
                </li>
              </ul>
            </div>

          </div>
        </section>

        {/* PROJECTS SECTION */}
        <section id="projects" className="space-y-8">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-cyan-400 text-xs font-semibold tracking-wider uppercase">
                <Layers className="w-4 h-4" />
                <span>Featured Work</span>
              </div>
              <h2 className="text-3xl font-bold tracking-tight">Development & Portfolio Projects</h2>
            </div>

            {/* Project Filter Tabs */}
            <div className="flex items-center gap-2 p-1 rounded-xl bg-slate-900 border border-slate-800 text-xs">
              <button 
                onClick={() => setActiveTab('all')}
                className={`px-3 py-1.5 rounded-lg transition-all ${activeTab === 'all' ? 'bg-cyan-500/20 text-cyan-400 font-semibold' : 'text-slate-400 hover:text-slate-200'}`}
              >
                All Work
              </button>
              <button 
                onClick={() => setActiveTab('web')}
                className={`px-3 py-1.5 rounded-lg transition-all ${activeTab === 'web' ? 'bg-cyan-500/20 text-cyan-400 font-semibold' : 'text-slate-400 hover:text-slate-200'}`}
              >
                Web Dev
              </button>
              <button 
                onClick={() => setActiveTab('ai')}
                className={`px-3 py-1.5 rounded-lg transition-all ${activeTab === 'ai' ? 'bg-cyan-500/20 text-cyan-400 font-semibold' : 'text-slate-400 hover:text-slate-200'}`}
              >
                GenAI Apps
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredProjects.map((project) => (
              <div 
                key={project.id}
                className="group p-6 rounded-2xl bg-gradient-to-b from-slate-900/90 to-slate-950/90 border border-slate-800 hover:border-slate-700 transition-all flex flex-col justify-between space-y-6"
              >
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-[10px] font-mono uppercase tracking-wider px-2.5 py-1 rounded-md bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">
                      {project.type}
                    </span>
                    <ExternalLink className="w-4 h-4 text-slate-500 group-hover:text-cyan-400 transition-colors" />
                  </div>

                  <div>
                    <h3 className="text-lg font-bold text-slate-100 group-hover:text-cyan-300 transition-colors">
                      {project.title}
                    </h3>
                    <p className="text-xs text-slate-400 mt-1">{project.subtitle}</p>
                  </div>

                  <p className="text-xs text-slate-300 leading-relaxed">
                    {project.description}
                  </p>

                  <div className="space-y-2 pt-2">
                    {project.highlights.map((h, i) => (
                      <div key={i} className="flex items-start gap-2 text-[11px] text-slate-400">
                        <span className="text-cyan-400 mt-0.5">•</span>
                        <span>{h}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="pt-4 border-t border-slate-800/80 flex flex-wrap gap-1.5">
                  {project.tags.map((tag, i) => (
                    <span 
                      key={i} 
                      className="text-[10px] px-2 py-0.5 rounded bg-slate-800/80 text-slate-300 border border-slate-700/50"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* AI PROMPT STUDIO INTERACTIVE SANDBOX */}
        <section id="ai-lab" className="p-8 rounded-3xl bg-gradient-to-r from-purple-950/30 via-slate-900 to-cyan-950/30 border border-purple-500/20 backdrop-blur-xl space-y-6">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div className="space-y-1">
              <div className="flex items-center gap-2 text-purple-400 text-xs font-semibold tracking-wider uppercase">
                <Sparkles className="w-4 h-4" />
                <span>Interactive AI Playground</span>
              </div>
              <h2 className="text-2xl font-bold tracking-tight">Generative AI Prompt Generator</h2>
              <p className="text-slate-400 text-xs max-w-lg">
                Test Somnath's prompt engineering generator logic built directly into this portfolio.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="space-y-4 text-xs">
              <div>
                <label className="block text-slate-300 font-medium mb-1.5">Select Target Role</label>
                <select 
                  value={aiRole}
                  onChange={(e) => setAiRole(e.target.value)}
                  className="w-full p-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 focus:border-purple-500 outline-none"
                >
                  <option value="Front-End Developer">Front-End Developer</option>
                  <option value="UI/UX Specialist">UI/UX Specialist</option>
                  <option value="Core Java Engineer">Core Java Engineer</option>
                  <option value="Generative AI Researcher">Generative AI Researcher</option>
                </select>
              </div>

              <div>
                <label className="block text-slate-300 font-medium mb-1.5">Desired Task / Objective</label>
                <input 
                  type="text"
                  value={aiTask}
                  onChange={(e) => setAiTask(e.target.value)}
                  className="w-full p-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 focus:border-purple-500 outline-none"
                  placeholder="e.g. Create a responsive CSS Flexbox layout"
                />
              </div>

              <button 
                onClick={generatePrompt}
                className="w-full py-3 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold flex items-center justify-center gap-2 shadow-lg shadow-purple-500/20 hover:scale-[1.01] transition-all"
              >
                <Sparkles className="w-4 h-4" />
                <span>Generate Structured Prompt</span>
              </button>
            </div>

            {/* Generated Output Box */}
            <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800/80 flex flex-col justify-between space-y-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-[11px] text-purple-400 font-mono">Structured Output</span>
                  {generatedPrompt && (
                    <button 
                      onClick={handleCopyPrompt}
                      className="text-[11px] text-slate-400 hover:text-slate-200 flex items-center gap-1"
                    >
                      {promptCopied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
                      <span>{promptCopied ? "Copied" : "Copy"}</span>
                    </button>
                  )}
                </div>
                <div className="p-3 rounded-xl bg-slate-900/80 border border-slate-800/50 text-xs text-slate-300 font-mono min-h-[110px] leading-relaxed">
                  {generatedPrompt || 'Click "Generate Structured Prompt" to preview the AI prompt compiler output.'}
                </div>
              </div>

              <div className="text-[11px] text-slate-500">
                ⚡ Designed to demonstrate prompt structure & client-side string processing capabilities.
              </div>
            </div>
          </div>
        </section>

        {/* INTERACTIVE TERMINAL SECTION */}
        <section id="terminal" className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 text-cyan-400 text-xs font-semibold tracking-wider uppercase">
              <Terminal className="w-4 h-4" />
              <span>Developer Command Line</span>
            </div>
            <span className="text-xs text-slate-500 font-mono">Interactive Shell</span>
          </div>

          <div className="rounded-2xl bg-slate-950 border border-slate-800 shadow-2xl overflow-hidden font-mono text-xs">
            {/* Terminal Header Bar */}
            <div className="px-4 py-3 bg-slate-900/90 border-b border-slate-800/80 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="w-3 h-3 rounded-full bg-rose-500/80" />
                <span className="w-3 h-3 rounded-full bg-amber-500/80" />
                <span className="w-3 h-3 rounded-full bg-emerald-500/80" />
                <span className="ml-2 text-slate-400 text-[11px]">somnath-das@portfolio-os:~</span>
              </div>
              <span className="text-[10px] text-slate-500">bash / zsh</span>
            </div>

            {/* Terminal Body */}
            <div className="p-4 space-y-2 max-h-[220px] overflow-y-auto">
              {terminalOutput.map((log, idx) => (
                <div key={idx} className="leading-relaxed">
                  {log.type === 'system' && <span className="text-slate-500">{log.text}</span>}
                  {log.type === 'user' && <span className="text-cyan-400">{log.text}</span>}
                  {log.type === 'response' && <span className="text-emerald-300 whitespace-pre-wrap">{log.text}</span>}
                  {log.type === 'error' && <span className="text-rose-400">{log.text}</span>}
                </div>
              ))}
            </div>

            {/* Terminal Input Form */}
            <form onSubmit={handleTerminalSubmit} className="p-3 bg-slate-900/50 border-t border-slate-800/80 flex items-center gap-2">
              <span className="text-cyan-400 font-bold">$</span>
              <input 
                type="text"
                value={terminalInput}
                onChange={(e) => setTerminalInput(e.target.value)}
                placeholder="Type 'help', 'about', 'skills', 'projects', 'education'..."
                className="flex-1 bg-transparent text-slate-200 outline-none placeholder:text-slate-600"
              />
              <button type="submit" className="text-slate-400 hover:text-cyan-400 text-[11px] px-2 py-1 rounded bg-slate-800">
                Run
              </button>
            </form>
          </div>
        </section>

        {/* EDUCATION & BACKGROUND */}
        <section id="about" className="space-y-6">
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-cyan-400 text-xs font-semibold tracking-wider uppercase">
              <BookOpen className="w-4 h-4" />
              <span>Academic Timeline</span>
            </div>
            <h2 className="text-3xl font-bold tracking-tight">Education & Coursework</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            
            {/* Degree Card */}
            <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-xs text-cyan-400 font-mono px-2.5 py-1 rounded-md bg-cyan-500/10 border border-cyan-500/20">
                  2024 - 2027 (Expected)
                </span>
                <span className="text-xs text-slate-400 font-medium">Semester V</span>
              </div>

              <div>
                <h3 className="text-lg font-bold text-slate-100">B.Sc. in Computer Science</h3>
                <p className="text-xs text-cyan-300 font-medium mt-1">Vel Tech Ranga Sanku College of Arts and Science</p>
                <p className="text-xs text-slate-400">Avadi, Chennai, Tamil Nadu</p>
              </div>

              <div className="space-y-2 pt-2 border-t border-slate-800/80 text-xs text-slate-300">
                <p className="font-semibold text-slate-200">Core Coursework Covered:</p>
                <div className="flex flex-wrap gap-1.5">
                  {['Web Development (HTML/CSS/JS)', 'Data Structures & Algorithms', 'Database Management Systems (DBMS)', 'Core Java'].map((c, i) => (
                    <span key={i} className="px-2 py-1 rounded bg-slate-800 text-slate-300 text-[11px]">
                      {c}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* Schooling Card */}
            <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-xs text-blue-400 font-mono px-2.5 py-1 rounded-md bg-blue-500/10 border border-blue-500/20">
                  Completed 2024
                </span>
                <span className="text-xs text-slate-400">Class XII</span>
              </div>

              <div>
                <h3 className="text-lg font-bold text-slate-100">Higher Secondary Certificate</h3>
                <p className="text-xs text-blue-300 font-medium mt-1">Dayspring Matriculation Higher Secondary School</p>
                <p className="text-xs text-slate-400">Chennai, Tamil Nadu</p>
              </div>

              <div className="pt-2 border-t border-slate-800/80 text-xs text-slate-400 leading-relaxed">
                Completed secondary education with focus on Mathematics, Science, and Foundational Computer Concepts.
              </div>
            </div>

          </div>
        </section>

        {/* CONTACT SECTION */}
        <section id="contact" className="space-y-8 pt-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            
            <div className="space-y-6">
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-cyan-400 text-xs font-semibold tracking-wider uppercase">
                  <Mail className="w-4 h-4" />
                  <span>Get In Touch</span>
                </div>
                <h2 className="text-3xl font-bold tracking-tight">Let's Connect & Build Together</h2>
                <p className="text-slate-400 text-sm leading-relaxed">
                  I am actively seeking internship opportunities, front-end projects, and collaborative technical builds. Feel free to reach out directly.
                </p>
              </div>

              <div className="space-y-4 text-xs">
                <div className="p-4 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Mail className="w-5 h-5 text-cyan-400" />
                    <div>
                      <p className="text-slate-400">Email Address</p>
                      <p className="text-slate-200 font-medium">psomnathdas@email.com</p>
                    </div>
                  </div>
                  <button 
                    onClick={handleCopyEmail}
                    className="p-2 rounded-lg bg-slate-800 text-slate-300 hover:text-cyan-400"
                  >
                    <Copy className="w-4 h-4" />
                  </button>
                </div>

                <div className="p-4 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Phone className="w-5 h-5 text-cyan-400" />
                    <div>
                      <p className="text-slate-400">Phone Number</p>
                      <p className="text-slate-200 font-medium">+91 9790095490</p>
                    </div>
                  </div>
                  <button 
                    onClick={handleCopyPhone}
                    className="p-2 rounded-lg bg-slate-800 text-slate-300 hover:text-cyan-400"
                  >
                    <Copy className="w-4 h-4" />
                  </button>
                </div>

                <a 
                  href="[https://linkedin.com/in/p-somnath-das-a72056416](https://linkedin.com/in/p-somnath-das-a72056416)"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-4 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-between hover:border-blue-500/50 transition-colors"
                >
                  <div className="flex items-center gap-3">
                    <Linkedin className="w-5 h-5 text-blue-400" />
                    <div>
                      <p className="text-slate-400">LinkedIn Profile</p>
                      <p className="text-slate-200 font-medium">p-somnath-das-a72056416</p>
                    </div>
                  </div>
                  <ExternalLink className="w-4 h-4 text-slate-500" />
                </a>
              </div>
            </div>

            {/* Contact Form */}
            <div className="p-6 sm:p-8 rounded-3xl bg-slate-900/80 border border-slate-800/80 space-y-4">
              <h3 className="text-lg font-bold text-slate-100">Send a Direct Message</h3>

              {formSubmitted ? (
                <div className="p-6 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 space-y-2 text-center">
                  <CheckCircle2 className="w-8 h-8 mx-auto" />
                  <p className="font-semibold text-sm">Message Received!</p>
                  <p className="text-xs text-emerald-300/80">Thank you for reaching out, Somnath will get back to you shortly.</p>
                </div>
              ) : (
                <form onSubmit={handleContactSubmit} className="space-y-4 text-xs">
                  <div>
                    <label className="block text-slate-400 mb-1">Your Name</label>
                    <input 
                      type="text" 
                      required
                      value={formData.name}
                      onChange={(e) => setFormData({...formData, name: e.target.value})}
                      placeholder="e.g. Rahul Sharma"
                      className="w-full p-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 focus:border-cyan-500 outline-none"
                    />
                  </div>

                  <div>
                    <label className="block text-slate-400 mb-1">Your Email</label>
                    <input 
                      type="email" 
                      required
                      value={formData.email}
                      onChange={(e) => setFormData({...formData, email: e.target.value})}
                      placeholder="e.g. rahul@example.com"
                      className="w-full p-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 focus:border-cyan-500 outline-none"
                    />
                  </div>

                  <div>
                    <label className="block text-slate-400 mb-1">Message</label>
                    <textarea 
                      rows={4}
                      required
                      value={formData.message}
                      onChange={(e) => setFormData({...formData, message: e.target.value})}
                      placeholder="Briefly describe your project or inquiry..."
                      className="w-full p-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 focus:border-cyan-500 outline-none resize-none"
                    />
                  </div>

                  <button 
                    type="submit"
                    className="w-full py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-semibold flex items-center justify-center gap-2 shadow-lg shadow-cyan-500/20 hover:scale-[1.01] transition-all text-xs"
                  >
                    <Send className="w-4 h-4" />
                    <span>Send Message</span>
                  </button>
                </form>
              )}
            </div>

          </div>
        </section>

      </main>

      {/* Footer */}
      <footer className="border-t border-slate-800/80 bg-[#05080F] text-slate-500 text-xs py-8">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p>© {new Date().getFullYear()} P. Somnath Das. All rights reserved.</p>
          <div className="flex items-center gap-4">
            <a href="#hero" className="hover:text-cyan-400 transition-colors">Back to top ↑</a>
          </div>
        </div>
      </footer>

    </div>
  );
}