'use client';

import { Mail, MapPin, Github, Linkedin, ExternalLink, Award, Briefcase, GraduationCap, Code, Database, Cloud, Terminal, Send } from "lucide-react";

export default function Home() {
  const personalInfo = {
    name: "Dheeraj Gajula",
    title: "Software & Network Engineer",
    email: "dheeraj.gajula@colorado.edu",
    location: "Boulder, CO",
    portfolio: "portfolio",
    linkedin: "www.linkedin.com/in/dheeraj-gajula-8776381ba",
    github: "github.com/dheerajgajula02"
  };

  const experience = [
    {
      title: "Software Engineer – 1",
      company: "Versa Networks",
      location: "Bangalore, India",
      period: "June 2024 – Aug 2025",
      highlights: [
        "Developed REST APIs in GoLang and Cassandra serving 3000+ reqs/s with metrics through Prometheus and Grafana dashboards",
        "Performed Quantitative and Qualitative analysis of virus total malicious feed data building data pipelines using Python and BigQuery with Mathematical Reinforcement model",
        "Containerized multiple services using Docker and Kubernetes and deployed them in GCP"
      ]
    },
    {
      title: "Software Engineer – Intern",
      company: "Versa Networks",
      location: "Bangalore, India",
      period: "Feb 2024 – June 2024",
      highlights: [
        "Automated device usage tracking, reduced billing time from 7 days to under an hour",
        "Analyzed inconsistent logs, built anomaly detection systems and StateMachines to track device states",
        "Used MongoDB and Python Data modelling to process hierarchical data with insights on Prometheus and Grafana",
        "Used Flask and FastAPI for services, Docker and Docker compose for deployment"
      ]
    }
  ];

  const education = [
    {
      degree: "Master's in Computer Science",
      school: "University of Colorado – Boulder",
      location: "Boulder, CO",
      period: "Aug 2025 – May 2027",
      coursework: ["Enterprise Networks", "Network Systems", "Machine Learning"]
    },
    {
      degree: "Bachelor's in Computer Science and Engineering",
      school: "Dayanada Sagar College of Engineering",
      location: "Bangalore, India",
      period: "Nov 2020 – May 2024",
      gpa: "3.76/4.0",
      coursework: ["Data Structures & Algorithms", "Database Systems", "Operating Systems", "Computer Networks", "Cloud Computing", "Machine Learning", "Deep Learning", "NLP", "Computer Vision"]
    }
  ];

  const projects = [
    {
      name: "Network Applications",
      tech: "C++, Network Programming",
      period: "Sept 2025 – Present",
      description: [
        "Developed multi-threaded TCP/UDP-based HTTP Web Server in C++ with GET/HEAD/POST request parsing and UDP client/server file transfer system with FTP-like commands",
        "Implemented persistent connections with pipelining and timeout handling, serving multiple file types with correct Content-Type headers",
        "Built concurrent request processing using threading/forking for HTTP with reliable transfer mechanisms (Stop-and-Wait, Go-Back-N) for UDP"
      ]
    },
    {
      name: "Enterprise Network Lab",
      tech: "STP, DHCP Server, EIGRP, RIP, Wireshark, Wireless, VLANs",
      period: "Sept 2025 – Present",
      description: [
        "Configured Cisco enterprise networks with VLANs, trunking (802.1Q/ISL), VTP, STP/RSTP, and HSRP-based gateway redundancy",
        "Deployed wireless LANs with DHCP, multi-SSID VLAN segmentation; implemented NAT/PAT for Internet, DMZ, and VLAN address translation",
        "Implemented routing protocols (RIP v1/v2, EIGRP, OSPF multi-area) with redistribution, VRF isolation, DR/BDR elections, and summarization"
      ]
    },
    {
      name: "Schizo AI",
      tech: "Python, TensorFlow, Explainable AI",
      period: "2024",
      description: [
        "Presented undergrad thesis at International Conference for Advanced Data Driven Intelligence",
        "Explored explainable AI models like Lime, SHAP, CAM in the context of Schizophrenia diagnosis"
      ]
    }
  ];

  const skills = {
    "Languages": ["GoLang", "Python", "C/C++", "SQL", "Bash"],
    "Frameworks & Database": ["Flask", "FastAPI", "Postgres", "BigQuery", "Cassandra", "MongoDB", "Prometheus", "FireBase"],
    "Developer Tools": ["Git", "Docker", "Kubernetes", "GCP", "Grafana", "AWS", "NGINX", "Hugging Face", "wireshark"],
    "Libraries": ["pandas", "NumPy", "Matplotlib", "TensorFlow", "OpenCV", "scikit-learn", "Seaborn", "NLTK"],
    "Networking": ["TCP/IP", "UDP", "HTTP/HTTPS", "DNS", "DHCP", "BGP", "OSPF", "EIGRP", "RIP", "VLANs", "NAT/PAT", "Sockets", "protocol design"]
  };

  const achievements = [
    {
      title: "Explainable AI in the context of Schizophrenia",
      year: "2024",
      description: "Presented undergrad thesis at International Conference for Advanced Data Driven Intelligence. Built Schizo AI project exploring explainable AI models."
    },
    {
      title: "Smart India Hackathon Winner",
      year: "2022",
      description: "Innovative solutions to save Court's time during hearings. Built project Tenali as backend engineer."
    },
    {
      title: "UNESCO India Africa Hackathon Finalist",
      year: "2023",
      description: "Energy flow optimization. Selected from 200 students from India. Received Best Contributors award."
    }
  ];

  return (
    <div className="min-h-screen bg-black">
      {/* Hero Section */}
      <section className="relative bg-[#4B0082] border-b-[4px] border-[#7B3FF2] overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-10 left-10 w-40 h-40 bg-[#7B3FF2] rotate-12"></div>
          <div className="absolute bottom-20 right-20 w-32 h-32 bg-[#7B3FF2] -rotate-6"></div>
        </div>
        
        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32">
          <div className="transform -rotate-1">
            <h1 className="text-5xl md:text-7xl font-black text-white mb-4 tracking-tight drop-shadow-[8px_8px_0px_rgba(123,63,242,1)]">
              {personalInfo.name}
            </h1>
            <div className="inline-block bg-black border-4 border-[#7B3FF2] px-6 py-3 transform rotate-1 shadow-[8px_8px_0px_rgba(123,63,242,0.3)]">
              <p className="text-xl md:text-2xl font-bold text-white">
                {personalInfo.title}
              </p>
            </div>
          </div>

          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-4">
            {[
              { icon: Mail, text: personalInfo.email, href: `mailto:${personalInfo.email}` },
              { icon: Github, text: personalInfo.github, href: `https://${personalInfo.github}` },
              { icon: Linkedin, text: "LinkedIn", href: `https://${personalInfo.linkedin}` }
            ].map((contact, idx) => (
              <a
                key={idx}
                href={contact.href}
                target="_blank"
                rel="noopener noreferrer"
                className="group bg-black border-4 border-[#7B3FF2] p-4 transform hover:-translate-y-2 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200"
              >
                <div className="flex items-center gap-3">
                  <contact.icon className="w-6 h-6 text-[#4B0082] group-hover:scale-110 transition-transform" />
                  <span className="font-bold text-sm text-white truncate">{contact.text}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section className="max-w-7xl mx-auto px-6 py-16 md:py-24">
        <div className="flex items-center gap-4 mb-12">
          <Briefcase className="w-10 h-10 text-[#7B3FF2]" />
          <h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
            EXPERIENCE
          </h2>
        </div>

        <div className="space-y-6">
          {experience.map((job, idx) => (
            <div
              key={idx}
              className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform hover:translate-x-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
              style={{ transform: idx % 2 === 0 ? 'rotate(-0.5deg)' : 'rotate(0.5deg)' }}
            >
              <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
                <div>
                  <h3 className="text-2xl md:text-3xl font-black text-white mb-2">{job.title}</h3>
                  <p className="text-xl font-bold text-[#7B3FF2]">{job.company}</p>
                  <p className="text-sm font-bold text-gray-400">{job.location}</p>
                </div>
                <div className="inline-block bg-[#4B0082] border-4 border-[#7B3FF2] px-4 py-2 self-start">
                  <span className="font-black text-white text-sm">{job.period}</span>
                </div>
              </div>
              <ul className="space-y-3 mt-6">
                {job.highlights.map((highlight, hIdx) => (
                  <li key={hIdx} className="flex gap-3">
                    <span className="text-[#7B3FF2] font-black text-xl flex-shrink-0">▸</span>
                    <span className="text-base font-semibold text-gray-300">{highlight}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Projects Section */}
      <section className="bg-[#4B0082] border-y-4 border-[#7B3FF2] py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <Code className="w-10 h-10 text-white" />
            <h2 className="text-4xl md:text-5xl font-black text-white transform rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,1)]">
              PROJECTS
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {projects.map((project, idx) => (
              <div
                key={idx}
                className="bg-black border-4 border-[#7B3FF2] p-6 transform hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
                style={{ transform: `rotate(${(idx % 3 - 1) * 0.8}deg)` }}
              >
                <div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-3 py-1 inline-block mb-4 transform -rotate-1">
                  <span className="text-xs font-black text-white">{project.period}</span>
                </div>
                <h3 className="text-2xl font-black text-white mb-2">{project.name}</h3>
                <p className="text-sm font-bold text-[#7B3FF2] mb-4">{project.tech}</p>
                <ul className="space-y-2">
                  {project.description.map((desc, dIdx) => (
                    <li key={dIdx} className="flex gap-2">
                      <span className="text-[#7B3FF2] font-black flex-shrink-0">•</span>
                      <span className="text-sm font-semibold text-gray-300">{desc}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section className="max-w-7xl mx-auto px-6 py-16 md:py-24">
        <div className="flex items-center gap-4 mb-12">
          <Terminal className="w-10 h-10 text-[#7B3FF2]" />
          <h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
            TECHNICAL SKILLS
          </h2>
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          {Object.entries(skills).map(([category, items], idx) => (
            <div
              key={idx}
              className="bg-black border-4 border-[#7B3FF2] p-6 transform hover:translate-x-2 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200"
              style={{ transform: `rotate(${(idx % 2 === 0 ? -0.5 : 0.5)}deg)` }}
            >
              <div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-4 py-2 inline-block mb-4 transform rotate-1">
                <h3 className="text-xl font-black text-white">{category}</h3>
              </div>
              <div className="flex flex-wrap gap-2">
                {items.map((skill, sIdx) => (
                  <span
                    key={sIdx}
                    className="bg-black border-3 border-[#7B3FF2] px-3 py-1 font-bold text-sm text-white hover:bg-[#4B0082] hover:text-white transition-colors duration-200 cursor-default"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Education Section */}
      <section className="bg-[#1a0033] border-y-4 border-[#7B3FF2] py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <GraduationCap className="w-10 h-10 text-white" />
            <h2 className="text-4xl md:text-5xl font-black text-white transform rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,1)]">
              EDUCATION
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {education.map((edu, idx) => (
              <div
                key={idx}
                className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
                style={{ transform: `rotate(${(idx % 2 === 0 ? -0.8 : 0.8)}deg)` }}
              >
                <div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-3 py-1 inline-block mb-4">
                  <span className="text-sm font-black text-white">{edu.period}</span>
                </div>
                <h3 className="text-2xl font-black text-white mb-2">{edu.degree}</h3>
                {edu.gpa && (
                  <div className="inline-block bg-[#4B0082] border-3 border-[#7B3FF2] px-3 py-1 mb-2">
                    <span className="text-sm font-black text-white">GPA: {edu.gpa}</span>
                  </div>
                )}
                <p className="text-lg font-bold text-[#7B3FF2] mb-1">{edu.school}</p>
                <p className="text-sm font-bold text-gray-400 mb-4">{edu.location}</p>
                <div className="mt-4">
                  <p className="text-xs font-black text-gray-500 mb-2">KEY COURSEWORK:</p>
                  <div className="flex flex-wrap gap-2">
                    {edu.coursework.slice(0, 6).map((course, cIdx) => (
                      <span
                        key={cIdx}
                        className="bg-black border-2 border-[#7B3FF2] px-2 py-1 text-xs font-bold text-white"
                      >
                        {course}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Achievements Section */}
      <section className="max-w-7xl mx-auto px-6 py-16 md:py-24">
        <div className="flex items-center gap-4 mb-12">
          <Award className="w-10 h-10 text-[#7B3FF2]" />
          <h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
            ACHIEVEMENTS
          </h2>
        </div>

        <div className="space-y-6">
          {achievements.map((achievement, idx) => (
            <div
              key={idx}
              className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform hover:translate-x-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
              style={{ transform: `rotate(${((idx % 3) - 1) * 0.5}deg)` }}
            >
              <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                <div className="flex-1">
                  <h3 className="text-2xl md:text-3xl font-black text-white mb-2">{achievement.title}</h3>
                  <p className="text-base font-semibold text-gray-300">{achievement.description}</p>
                </div>
                <div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-4 py-2 self-start">
                  <span className="font-black text-white text-xl">{achievement.year}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="max-w-7xl mx-auto px-6 py-16 md:py-24">
        <div className="flex items-center gap-4 mb-12">
          <Send className="w-10 h-10 text-[#7B3FF2]" />
          <h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
            CONTACT ME
          </h2>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {/* Contact Info */}
          <div className="space-y-6">
            <div className="bg-black border-4 border-[#7B3FF2] p-6 transform -rotate-1 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200">
              <h3 className="text-2xl font-black text-white mb-4">GET IN TOUCH</h3>
              <p className="text-base font-semibold text-gray-300 mb-6">
                I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.
              </p>
              
              <div className="space-y-4">
                <a href={`mailto:${personalInfo.email}`} className="flex items-center gap-3 group">
                  <div className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3 group-hover:scale-110 transition-transform">
                    <Mail className="w-6 h-6 text-white" />
                  </div>
                  <span className="font-bold text-white">{personalInfo.email}</span>
                </a>
                
                <div className="flex items-center gap-3">
                  <div className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3">
                    <MapPin className="w-6 h-6 text-white" />
                  </div>
                  <span className="font-bold text-white">{personalInfo.location}</span>
                </div>
              </div>

              <div className="mt-8 flex gap-4">
                <a
                  href={`https://${personalInfo.github}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3 hover:bg-[#7B3FF2] hover:border-[#4B0082] transition-colors"
                >
                  <Github className="w-6 h-6 text-white" />
                </a>
                <a
                  href={`https://${personalInfo.linkedin}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3 hover:bg-[#7B3FF2] hover:border-[#4B0082] transition-colors"
                >
                  <Linkedin className="w-6 h-6 text-white" />
                </a>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform rotate-1 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200">
            <form className="space-y-6" onSubmit={(e) => {
              e.preventDefault();
              const formData = new FormData(e.target);
              const subject = formData.get('subject');
              const message = formData.get('message');
              window.location.href = `mailto:${personalInfo.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
            }}>
              <div>
                <label className="block text-sm font-black text-white mb-2">YOUR NAME</label>
                <input
                  type="text"
                  name="name"
                  required
                  className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors"
                  placeholder="John Doe"
                />
              </div>

              <div>
                <label className="block text-sm font-black text-white mb-2">YOUR EMAIL</label>
                <input
                  type="email"
                  name="email"
                  required
                  className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors"
                  placeholder="john@example.com"
                />
              </div>

              <div>
                <label className="block text-sm font-black text-white mb-2">SUBJECT</label>
                <input
                  type="text"
                  name="subject"
                  required
                  className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors"
                  placeholder="Let's work together!"
                />
              </div>

              <div>
                <label className="block text-sm font-black text-white mb-2">MESSAGE</label>
                <textarea
                  name="message"
                  required
                  rows="5"
                  className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors resize-none"
                  placeholder="Your message here..."
                ></textarea>
              </div>

              <button
                type="submit"
                className="w-full bg-[#4B0082] border-4 border-[#7B3FF2] px-6 py-4 font-black text-white text-lg hover:bg-[#7B3FF2] hover:border-[#4B0082] transform hover:-translate-y-1 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200"
              >
                SEND MESSAGE
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-[#1a0033] border-t-4 border-[#7B3FF2] py-12">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <div className="inline-block bg-black border-4 border-[#7B3FF2] px-8 py-4 transform -rotate-1 shadow-[8px_8px_0px_rgba(123,63,242,1)]">
            <p className="text-2xl font-black text-white">LET'S BUILD SOMETHING AMAZING</p>
          </div>
          <p className="mt-8 text-white font-bold">
            © 2025 {personalInfo.name}. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}