import React, { useState, useEffect, useRef } from 'react';
import { 
  Github, 
  Linkedin, 
  Mail, 
  ExternalLink, 
  Code2, 
  User, 
  Briefcase, 
  Cpu, 
  ChevronDown,
  Menu,
  X,
  Globe,
  Terminal,
  Database,
  Layout,
  Gift, 
  ShoppingCart, 
  Music, 
  ClipboardCopy, 
  Download // New icon for download
} from 'lucide-react';

const EMAIL_ADDRESS = "harikrishnamanoj2@gmail.com";
const PHONE_NUMBER = "+919539440572"; 

// Custom hook for scroll reveal animation
const RevealOnScroll = ({ children, className = "" }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      {
        threshold: 0.1,
        rootMargin: "0px 0px -50px 0px"
      }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current && observer) {
        observer.unobserve(ref.current);
      }
      observer.disconnect();
    };
  }, []);

  return (
    <div 
      ref={ref} 
      className={`transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'} ${className}`}
    >
      {children}
    </div>
  );
};

const Portfolio = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const [scrolled, setScrolled] = useState(false);
  const [copyMessage, setCopyMessage] = useState(null);

  // Unified function to handle copying content (email or phone)
  const copyToClipboard = (content, type) => {
    const textarea = document.createElement('textarea');
    textarea.value = content;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    
    let success = false;
    try {
      success = document.execCommand('copy');
      setCopyMessage({ text: `${type} copied!`, type: 'success' });
    } catch (err) {
      console.error('Copy failed:', err);
      setCopyMessage({ text: `Failed to copy ${type}.`, type: 'error' });
    }
    
    document.body.removeChild(textarea);

    setTimeout(() => {
      setCopyMessage(null);
    }, 2000);
  };

  // Handler for Email button
  const copyEmailHandler = (e) => {
    e.preventDefault();
    copyToClipboard(EMAIL_ADDRESS, 'Email');
  };

  // Handler for Phone button
  const copyPhoneHandler = (e) => {
    e.preventDefault();
    copyToClipboard(PHONE_NUMBER, 'Phone number');
  };


  // Handle scroll effects and active section
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
      
      const sections = ['home', 'about', 'experience', 'projects', 'skills', 'contact'];
      let currentActive = 'home';
      
      for (let i = sections.length - 1; i >= 0; i--) {
        const sectionId = sections[i];
        const element = document.getElementById(sectionId);
        if (element) {
          const rect = element.getBoundingClientRect();
          if (rect.top <= 200) { 
            currentActive = sectionId;
            break;
          }
        }
      }
      
      setActiveSection(currentActive);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []); 

  const navLinks = [
    { name: 'Home', href: '#home', id: 'home' },
    { name: 'About', href: '#about', id: 'about' },
    { name: 'Experience', href: '#experience', id: 'experience' },
    { name: 'Projects', href: '#projects', id: 'projects' },
    { name: 'Skills', href: '#skills', id: 'skills' },
  ];

  const experiences = [
    {
      company: "Maninfini Automation Pvt Ltd, Bangalore",
      role: "Flutter Developer",
      period: "Jun 2024 - Nov 2024",
      description: "Developed and maintained cross-platform mobile applications for the innovative 'Game of Giving' initiative, focusing on resource redistribution and social impact.",
      tech: ["Flutter", "Dart", "Firebase", "REST APIs"]
    },
    {
      company: "Brototype, Ernakulam",
      role: "Flutter Developer Intern",
      period: "Nov 2023 - Feb 2024",
      description: "Gained hands-on experience in mobile application development, implementing key features and utilizing state management patterns like Bloc to enhance app scalability.",
      tech: ["Flutter", "Dart", "Bloc", "Hive"]
    },
    {
      company: "Govt Polytechnic college, Kalamassery",
      role: "Diploma In Electronics And Communication Engineering",
      period: "2018 - 2021 (CGPA: 8.04)",
      description: "Completed academic coursework focused on core electronics and communication principles, providing a strong analytical foundation for software development.",
      tech: ["Electronics", "Communication", "C Programming"]
    }
  ];

  const projects = [
    {
      title: "Game of Giving Apps",
      description: "A community-focused initiative involving multiple cross-platform apps (Giver, Needy, Mentor) for redistributing surplus resources, promoting sustainability and social impact.",
      tags: ["Flutter", "Dart", "Play Store", "App Store"],
      link: "https://play.google.com/store/apps/developer?id=644869124", 
      github: null, 
      color: "bg-green-600",
      icon: <Gift className="w-12 h-12 text-green-300" />
    },
    {
      title: "HRX Store - E-Commerce App",
      description: "A feature-rich e-commerce application with secure payment (Razorpay), Firebase Authentication, product categories, and cart management. Built with an accompanying Admin app.",
      tags: ["Flutter", "Dart", "Firebase Firestore/Storage", "Bloc", "Razorpay"],
      link: "https://play.google.com/store/apps/details?id=com.ecom.hrx_store&pcampaignid=web_share", 
      github: "https://github.com/Harikrishna-Manoj/HRX_Store_e_commerce", 
      color: "bg-indigo-600",
      icon: <ShoppingCart className="w-12 h-12 text-indigo-300" />
    },
    {
      title: "Rhythm Music Player",
      description: "A conceptualized and developed offline music player with a sleek UI. Features include volume control, a dedicated play screen, mini player, and organization using Hive Database.",
      tags: ["Flutter", "Dart", "Hive Database", "Bloc"],
      link: "https://play.google.com/store/apps/details?id=in.freelance.rhythm_music_player&pcampaignid=web_share", 
      github: "https://github.com/Harikrishna-Manoj/Rhythm_music_player", 
      color: "bg-red-600",
      icon: <Music className="w-12 h-12 text-red-300" />
    }
  ];

  const skills = [
    { category: "Languages & Frameworks", icon: <Code2 className="w-6 h-6" />, items: ["Dart", "Flutter", "SQL", "OOPS", "REST APIs", "GraphQL"] },
    { category: "State Management & Architecture", icon: <Layout className="w-6 h-6" />, items: ["Bloc", "Provider", "GetX", "Clean Architecture", "MVC", "SOLID Principle"] },
    { category: "Backend & Database", icon: <Database className="w-6 h-6" />, items: ["Firebase", "Hive", "PostgreSQL", "Data Structure", "Payment Gateway"] },
    { category: "Tools & DevOps", icon: <Cpu className="w-6 h-6" />, items: ["Git/GitHub", "VS Code", "Android Studio", "Figma", "Codemagic", "ChatGPT", "Davinci Resolve", "Photoshop"] }
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans selection:bg-indigo-500/30 selection:text-indigo-200">
      
      {/* Toast Notification for Copy */}
      {copyMessage && (
        <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 z-[100] px-6 py-3 rounded-full shadow-lg transition-opacity duration-300 ${copyMessage.type === 'success' ? 'bg-green-500/90 text-white' : 'bg-red-500/90 text-white'}`}>
          <div className="flex items-center gap-2">
            <ClipboardCopy className="w-4 h-4" />
            <p className="text-sm font-medium">{copyMessage.text}</p>
          </div>
        </div>
      )}

      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-950/80 backdrop-blur-md shadow-lg shadow-indigo-500/5 border-b border-slate-800/50 py-4' : 'bg-transparent py-6'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <a href="#home" className="text-2xl font-bold text-indigo-400 flex items-center gap-2 group">
            <div className="relative">
                <div className="absolute inset-0 bg-indigo-500/20 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <Code2 className="w-8 h-8 relative z-10 transition-transform duration-300 group-hover:rotate-12" />
            </div>
            <span>Harikrishna<span className="text-slate-100">Manoj</span></span>
          </a>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center gap-8">
            {navLinks.map((link) => (
              <a 
                key={link.id} 
                href={link.href}
                className={`text-sm font-medium relative py-1 transition-colors hover:text-indigo-400 ${activeSection === link.id ? 'text-indigo-400' : 'text-slate-400'}`}
              >
                {link.name}
                <span className={`absolute bottom-0 left-0 w-full h-0.5 bg-indigo-400 transform origin-left transition-transform duration-300 ${activeSection === link.id ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`}></span>
              </a>
            ))}
            {/* Contact Button preserved */}
            <a 
              href="#contact" 
              className="px-5 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-full hover:bg-indigo-500 transition-all hover:shadow-[0_0_20px_-5px_rgba(79,70,229,0.5)] hover:-translate-y-0.5 active:scale-95"
            >
              Contact
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button 
            className="md:hidden text-slate-300 hover:text-indigo-400 transition-colors p-2"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            aria-label="Toggle menu"
          >
            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Nav */}
        <div className={`md:hidden absolute top-full left-0 w-full bg-slate-900 border-b border-slate-800 shadow-xl transition-all duration-300 overflow-hidden ${isMenuOpen ? 'max-h-96 py-4' : 'max-h-0 py-0'}`}>
          <div className="flex flex-col items-center gap-4">
            {/* Mobile menu includes Contact */}
            {[...navLinks, { name: 'Contact', href: '#contact', id: 'contact' }].map((link) => (
              <a 
                key={link.id} 
                href={link.href}
                className="text-slate-400 font-medium hover:text-indigo-400 py-2 w-full text-center hover:bg-slate-800/50 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                {link.name}
              </a>
            ))}
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="pt-32 pb-20 md:pt-48 md:pb-32 px-6 bg-slate-950 overflow-hidden relative">
        {/* Background blobs */}
        <div className="absolute top-20 left-10 w-72 h-72 bg-indigo-600/10 rounded-full blur-[100px] animate-pulse"></div>
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-violet-600/10 rounded-full blur-[100px] animate-pulse delay-1000"></div>

        <div className="container mx-auto flex flex-col md:flex-row items-center gap-12 relative z-10">
          <div className="flex-1 space-y-8 animate-in slide-in-from-bottom-10 fade-in duration-1000">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium border border-indigo-500/20 hover:bg-indigo-500/20 transition-colors cursor-default">
              <Briefcase className="w-4 h-4"/> Flutter Developer
            </div>
            <h1 className="text-5xl md:text-7xl font-extrabold text-white tracking-tight leading-tight">
              Crafting Exceptional <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-violet-400 animate-gradient-x">Mobile Experiences</span> with Flutter.
            </h1>
            <p className="text-xl text-slate-400 max-w-lg leading-relaxed">
              I'm Harikrishna Manoj, a dedicated Flutter Developer specializing in building robust, cross-platform mobile applications that prioritize functionality and aesthetics.
            </p>
            <div className="flex flex-wrap gap-4">
              <a href="#projects" className="px-8 py-3.5 bg-white text-slate-950 font-medium rounded-full hover:bg-slate-200 transition-all shadow-xl shadow-slate-900/50 hover:scale-105 active:scale-95">
                View Mobile Projects
              </a>
              {/* Changed mailto to copy function for the primary button */}
              <button onClick={copyEmailHandler} className="px-8 py-3.5 bg-transparent text-white border border-slate-700 font-medium rounded-full hover:bg-slate-800 transition-all hover:scale-105 active:scale-95">
                Copy Email
              </button>
            </div>
            <div className="flex gap-6 text-slate-500 pt-4">
              <a href="https://github.com/Harikrishna-Manoj" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-all hover:scale-110 hover:-translate-y-1">
                <Github className="w-6 h-6" aria-label="GitHub Profile" />
              </a>
              <a href="https://www.linkedin.com/in/harikrishna-manoj-5851411b9/" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-all hover:scale-110 hover:-translate-y-1">
                <Linkedin className="w-6 h-6" aria-label="LinkedIn Profile" />
              </a>
              {/* Changed mailto to copy function for the icon */}
              <button onClick={copyEmailHandler} className="hover:text-indigo-400 transition-all hover:scale-110 hover:-translate-y-1" aria-label="Copy Email Address">
                <Mail className="w-6 h-6" />
              </button>
            </div>
          </div>
          <div className="flex-1 relative animate-in slide-in-from-right-10 fade-in duration-1000 delay-200">
            <div className="relative w-full aspect-square max-w-md mx-auto group">
              <div className="absolute inset-0 bg-gradient-to-tr from-indigo-500 to-violet-500 rounded-2xl rotate-6 opacity-20 blur-2xl group-hover:opacity-40 transition-opacity duration-500"></div>
              <div className="absolute inset-0 bg-slate-800 rounded-2xl rotate-3 transition-transform duration-500 group-hover:rotate-6"></div>
              {/* Profile Image */}
              <div className="relative h-full w-full bg-slate-900 rounded-2xl overflow-hidden shadow-2xl flex items-center justify-center border border-slate-800 transition-transform duration-500 group-hover:-translate-y-2">
                 <img 
                   src="uploaded:new hari.jpg-a9701c9d-3920-46e6-bf3b-95874c9ca9fe" 
                   alt="Harikrishna Manoj Profile Picture" 
                   className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700"
                   onError={(e) => {
                     e.target.onerror = null; 
                     e.target.style.display = 'none';
                     const parent = e.target.parentNode;
                     const fallbackDiv = document.createElement('div');
                     fallbackDiv.className = 'text-slate-700 text-6xl font-bold';
                     fallbackDiv.textContent = 'HM';
                     parent.appendChild(fallbackDiv);
                   }}
                 />
              </div>
            </div>
          </div>
        </div>
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce hidden md:block text-slate-600">
          <ChevronDown className="w-6 h-6" />
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-slate-950">
        <div className="container mx-auto px-6">
          <RevealOnScroll>
            <div className="max-w-3xl mx-auto text-center mb-16">
                <h2 className="text-sm font-bold tracking-widest text-indigo-400 uppercase mb-3">About Me</h2>
                <h3 className="text-3xl md:text-4xl font-bold text-white mb-6">Building top-tier, user-centric mobile software</h3>
                <p className="text-lg text-slate-400 leading-relaxed">
                Specializing in Flutter development, my expertise lies in crafting cross-platform mobile applications that prioritize exceptional user experiences. My dedication to staying current with industry trends drives my focus on producing top-tier software that seamlessly merges functionality with aesthetics, ensuring high-quality solutions for the dynamic mobile landscape.
                </p>
            </div>
          </RevealOnScroll>

          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {[
              { icon: <User />, title: "User-Centric Design", desc: "Prioritizing exceptional user experiences by merging seamless functionality with modern aesthetics." },
              { icon: <Briefcase />, title: "Cross-Platform Expertise", desc: "Crafting robust mobile applications for both Android and iOS using the Flutter framework." },
              { icon: <Code2 />, title: "Architecture Focus", desc: "Implementing Bloc, Clean Architecture, and SOLID principles for scalable and maintainable codebases." }
            ].map((item, index) => (
              <RevealOnScroll key={index} className={`delay-${index * 100}`}>
                <div className="p-8 h-full rounded-2xl bg-slate-900 border border-slate-800 hover:border-indigo-500/30 hover:shadow-lg hover:shadow-indigo-500/10 hover:-translate-y-2 transition-all duration-300 group">
                    <div className="w-12 h-12 bg-indigo-500/10 rounded-xl flex items-center justify-center text-indigo-400 mb-6 group-hover:bg-indigo-500/20 group-hover:scale-110 transition-all duration-300">
                    {item.icon}
                    </div>
                    <h4 className="text-xl font-bold text-white mb-3">{item.title}</h4>
                    <p className="text-slate-400">{item.desc}</p>
                </div>
              </RevealOnScroll>
            ))}
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section id="experience" className="py-20 bg-slate-900">
        <div className="container mx-auto px-6">
          <RevealOnScroll>
            <div className="flex flex-col md:flex-row gap-16 max-w-6xl mx-auto">
                <div className="md:w-1/3">
                <h2 className="text-sm font-bold tracking-widest text-indigo-400 uppercase mb-3">Career Path</h2>
                <h3 className="text-3xl md:text-4xl font-bold text-white mb-6">My Professional Journey</h3>
                <p className="text-slate-400 mb-8">
                    My experience focuses on hands-on Flutter development, from core concepts to implementing complex state management and database solutions.
                </p>
                <a 
                  href="uploaded:Harikrishna_Flutter_Developer_Resume.pdf" 
                  download="Harikrishna_Manoj_Resume.pdf"
                  className="inline-flex items-center gap-2 text-indigo-400 font-medium hover:text-indigo-300 transition-colors group"
                >
                    Download Resume <Download className="w-4 h-4 transition-transform group-hover:translate-y-1" />
                </a>
                </div>
                
                <div className="md:w-2/3 space-y-8">
                {experiences.map((exp, index) => (
                    <div key={index} className="relative pl-8 border-l-2 border-slate-800 hover:border-indigo-500 transition-colors duration-300 pb-8 last:pb-0 group">
                    <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-slate-900 border-4 border-slate-700 group-hover:border-indigo-500 transition-colors duration-300 group-hover:scale-125"></div>
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
                        <h4 className="text-xl font-bold text-white group-hover:text-indigo-300 transition-colors">{exp.role}</h4>
                        <span className="text-sm font-medium text-slate-400 bg-slate-800 px-3 py-1 rounded-full w-fit mt-2 sm:mt-0 border border-transparent group-hover:border-slate-700 transition-all">{exp.period}</span>
                    </div>
                    <h5 className="text-indigo-400 font-medium mb-4">{exp.company}</h5>
                    <p className="text-slate-400 mb-4">{exp.description}</p>
                    <div className="flex flex-wrap gap-2">
                        {exp.tech.map((tag, i) => (
                        <span key={i} className="text-xs font-medium text-slate-300 bg-slate-800 border border-slate-700 px-2 py-1 rounded hover:bg-slate-700 transition-colors">
                            {tag}
                        </span>
                        ))}
                    </div>
                    </div>
                ))}
                </div>
            </div>
          </RevealOnScroll>
        </div>
      </section>

      {/* Projects Section */}
      <section id="projects" className="py-20 bg-slate-950">
        <div className="container mx-auto px-6">
          <RevealOnScroll>
            <div className="text-center mb-16">
                <h2 className="text-sm font-bold tracking-widest text-indigo-400 uppercase mb-3">Portfolio</h2>
                <h3 className="text-3xl md:text-4xl font-bold text-white">Mobile Applications</h3>
            </div>
          </RevealOnScroll>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {projects.map((project, index) => (
              <RevealOnScroll key={index} className={`delay-${index * 100}`}>
                <div className="group rounded-2xl overflow-hidden bg-slate-900 border border-slate-800 hover:border-indigo-500/30 hover:shadow-xl hover:shadow-indigo-500/10 hover:-translate-y-2 transition-all duration-300 flex flex-col h-full">
                    <div className={`h-48 ${project.color} relative overflow-hidden flex items-center justify-center`}>
                    <div className="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors duration-500"></div>
                    
                    {/* ENHANCED Mock phone frame using project-specific color and icon */}
                    <div className="w-1/2 h-full bg-slate-800 rounded-b-[40px] shadow-2xl relative border-t-8 border-b-2 border-slate-700 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-1.5 bg-slate-950 rounded-b-lg"></div>
                        <div className="p-2 h-full">
                            <div className="h-full bg-slate-950 rounded-lg flex flex-col justify-center items-center text-center">
                                {/* Project Icon and Title as the "Screenshot" */}
                                <div className={`p-4 rounded-xl ${project.color}/20 mb-3`}>
                                    {project.icon}
                                </div>
                                <p className="text-xs text-slate-500 font-bold mt-2 px-2 truncate">{project.title.split(' - ')[0]}</p>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div className="p-8 flex flex-col flex-grow">
                    <h4 className="text-xl font-bold text-white mb-2 group-hover:text-indigo-400 transition-colors">{project.title}</h4>
                    <p className="text-slate-400 mb-6 flex-grow">{project.description}</p>
                    <div className="flex flex-wrap gap-2 mb-6">
                        {project.tags.map((tag, i) => (
                        <span key={i} className="px-3 py-1 bg-indigo-500/10 rounded-md text-xs font-semibold text-indigo-300 hover:bg-indigo-500/20 hover:text-indigo-300 transition-colors cursor-default">
                            {tag}
                        </span>
                        ))}
                    </div>
                    <div className="flex items-center gap-4 mt-auto">
                        {/* Only render if github link exists */}
                        {project.github && (
                            <a href={project.github} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm font-medium text-slate-400 hover:text-indigo-400 transition-colors hover:underline underline-offset-4">
                            <Github className="w-4 h-4" /> Code
                            </a>
                        )}
                        {/* Only render if store link exists */}
                        {project.link && (
                            <a href={project.link} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm font-medium text-slate-400 hover:text-indigo-400 transition-colors hover:underline underline-offset-4">
                            <ExternalLink className="w-4 h-4" /> Store Link
                            </a>
                        )}
                    </div>
                    </div>
                </div>
              </RevealOnScroll>
            ))}
          </div>
          
          <RevealOnScroll>
            <div className="text-center mt-12">
                <a href="https://github.com/Harikrishna-Manoj" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white border border-slate-800 font-medium rounded-full hover:bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-lg hover:shadow-indigo-500/10 active:scale-95">
                <Github className="w-4 h-4" /> View All Code on GitHub
                </a>
            </div>
          </RevealOnScroll>
        </div>
      </section>

      {/* Skills Section */}
      <section id="skills" className="py-20 bg-slate-900 text-white">
        <div className="container mx-auto px-6">
          <RevealOnScroll>
            <div className="flex flex-col md:flex-row gap-16 items-center max-w-6xl mx-auto">
                <div className="md:w-1/2">
                <h2 className="text-sm font-bold tracking-widest text-indigo-400 uppercase mb-3">My Stack</h2>
                <h3 className="text-3xl md:text-4xl font-bold mb-6">Expertise in Mobile Development</h3>
                <p className="text-slate-400 mb-8 leading-relaxed">
                    My proficiency centers around the Flutter ecosystem, backed by a strong understanding of architecture patterns and scalable data solutions, using tools like Bloc for state management and Hive/Firebase for persistence.
                </p>
                <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-slate-800/50 rounded-lg border border-slate-700 hover:border-indigo-500/50 transition-colors">
                    <h4 className="font-bold text-lg text-indigo-400 mb-1">Flutter</h4>
                    <p className="text-sm text-slate-400">Primary Framework</p>
                    </div>
                    <div className="p-4 bg-slate-800/50 rounded-lg border border-slate-700 hover:border-indigo-500/50 transition-colors">
                    <h4 className="font-bold text-lg text-indigo-400 mb-1">Bloc/Provider</h4>
                    <p className="text-sm text-slate-400">State Management</p>
                    </div>
                </div>
                </div>

                <div className="md:w-1/2 w-full">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    {skills.map((skill, index) => (
                    <div key={index} className="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-indigo-500/50 hover:bg-slate-800/80 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-indigo-500/10 backdrop-blur-sm">
                        <div className="flex items-center gap-3 mb-4 text-indigo-400">
                        {skill.icon}
                        <h4 className="font-bold text-white">{skill.category}</h4>
                        </div>
                        <div className="flex flex-wrap gap-2">
                        {skill.items.map((item, i) => (
                            <span key={i} className="px-3 py-1 bg-slate-700/50 rounded-md text-xs font-medium text-slate-300 hover:bg-indigo-500/20 hover:text-indigo-300 transition-colors cursor-default">
                            {item}
                            </span>
                        ))}
                        </div>
                    </div>
                    ))}
                </div>
                </div>
            </div>
          </RevealOnScroll>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-slate-950">
        <div className="container mx-auto px-6">
          <RevealOnScroll>
            <div className="max-w-4xl mx-auto bg-indigo-600 rounded-3xl overflow-hidden shadow-2xl shadow-indigo-500/20 flex flex-col md:flex-row transform transition-transform duration-500 hover:scale-[1.01]">
                <div className="md:w-1/2 p-10 md:p-12 text-white flex flex-col justify-between relative overflow-hidden group">
                <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500 rounded-full -mr-16 -mt-16 opacity-50 group-hover:scale-150 transition-transform duration-700"></div>
                <div className="absolute bottom-0 left-0 w-24 h-24 bg-indigo-500 rounded-full -ml-12 -mb-12 opacity-50 group-hover:scale-150 transition-transform duration-700 delay-100"></div>
                
                <div className="relative z-10">
                    <h3 className="text-3xl font-bold mb-4">Let's connect and build!</h3>
                    <p className="text-indigo-100 mb-8">
                    I'm currently seeking new Flutter development opportunities. Reach out via email or connect with me on LinkedIn.
                    </p>
                    
                    <div className="space-y-4">
                    {/* EMAIL: Click to Copy */}
                    <button onClick={copyEmailHandler} className="flex items-center gap-4 group/item hover:text-white transition-colors w-full text-left" aria-label="Copy Email Address">
                        <div className="w-10 h-10 bg-indigo-500/50 rounded-full flex items-center justify-center backdrop-blur-sm group-hover/item:bg-white group-hover/item:text-indigo-600 transition-colors">
                        <Mail className="w-5 h-5" />
                        </div>
                        <span className="group-hover/item:translate-x-1 transition-transform">{EMAIL_ADDRESS} (Click to Copy)</span>
                    </button>
                    
                    {/* PHONE: Click to Copy - CHANGED FROM <a> TO <button> */}
                    <button onClick={copyPhoneHandler} className="flex items-center gap-4 group/item hover:text-white transition-colors w-full text-left" aria-label="Copy Phone Number">
                        <div className="w-10 h-10 bg-indigo-500/50 rounded-full flex items-center justify-center backdrop-blur-sm group-hover/item:bg-white group-hover/item:text-indigo-600 transition-colors">
                            <Terminal className="w-5 h-5" />
                        </div>
                        <span className="group-hover/item:translate-x-1 transition-transform">{PHONE_NUMBER} (Click to Copy)</span>
                    </button>
                    </div>
                </div>
                </div>
                
                <div className="md:w-1/2 p-10 md:p-12 flex flex-col justify-center items-center bg-indigo-700">
                    <div className="text-center">
                        <Globe className="w-16 h-16 mx-auto mb-4 text-white opacity-80" />
                        <h4 className="text-2xl font-bold text-white mb-2">Connect with me</h4>
                        <p className="text-indigo-200 mb-6">Let's discuss your next project.</p>
                        <div className="flex gap-4 justify-center text-white">
                            <a href="https://www.linkedin.com/in/harikrishna-manoj-5851411b9/" target="_blank" rel="noopener noreferrer" className="p-3 bg-indigo-500 rounded-full hover:bg-white hover:text-indigo-600 transition-colors" aria-label="LinkedIn Profile">
                                <Linkedin className="w-5 h-5" />
                            </a>
                            <a href="https://github.com/Harikrishna-Manoj" target="_blank" rel="noopener noreferrer" className="p-3 bg-indigo-500 rounded-full hover:bg-white hover:text-indigo-600 transition-colors" aria-label="GitHub Profile">
                                <Github className="w-5 h-5" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
          </RevealOnScroll>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 border-t border-slate-800 py-8">
        <div className="container mx-auto px-6 text-center text-slate-500">
          <p>&copy; {new Date().getFullYear()} Harikrishna Manoj. Built with React and Tailwind CSS.</p>
        </div>
      </footer>
    </div>
  );
};

export default Portfolio;