import { Link, useLocation } from 'react-router-dom';
import Layout from './Layout';
import MobileNavigation from './MobileNavigation';
import Footer from './Footer';
import OptimizedImage from './OptimizedImage';
import SEOHead from './SEOHead';

function Home() {
  const location = useLocation();

  return (
    <Layout>
      <SEOHead
        title="Mayank Kushwaha | Best Frontend Developer in Ahmedabad"
        description="Hire Mayank Kushwaha, the best Frontend Developer in Ahmedabad. Expert in React.js, Next.js, and web performance optimization. View portfolio & projects."
        keywords="Mayank Kushwaha, Best Frontend Developer in Ahmedabad, React Developer Ahmedabad, Web Optimization Expert, Portfolio, Hire React Developer, Frontend Developer, Full Stack Developer"
        canonical="https://mayank-kushwaha.in/"
      />
      <main className="main-container">

        {/* Hero Section - Critical for LCP - no animations */}
        <h1 className="hero-critical text-[#FF785A] text-4xl font-InstrumentSerif py-2.5">Mayank Kushwaha</h1>
        <p className="hero-text space-x-2 text-sm sm:text-base pb-2.5 text-zinc-200">Frontend Developer • Full Stack Developer • Software Developer</p>
        <p className="text-zinc-500 text-sm font-sans">Mayank Kushwaha is a detail-oriented and adaptable Software Developer with 1+ year of hands-on experience in building scalable web applications using JavaScript, React.js, Next.js, Node.js, and MongoDB. Mayank Kushwaha currently works as Junior Frontend Developer at Mantra Softech, Ahmedabad, specializing in responsive UI development and real-time dashboards.</p>

        {/* CTA Buttons */}
        <section className="animate-unblur pt-6 pb-4 text-sm sm:text-base flex space-x-1.5 sm:flex-wrap">
          <a target="_blank" rel="noopener noreferrer" className="group flex justify-center items-center space-x-1 text-zinc-400 hover:text-[#FF785A] transition-colors duration-100 text-sm font-Satoshi cursor-pointer" href="/resume/Mayank.pdf">
            <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="h-4 w-4">
              <path d="M312 155h91c2.8 0 5-2.2 5-5 0-8.9-3.9-17.3-10.7-22.9L321 63.5c-5.8-4.8-13-7.4-20.6-7.4-4.1 0-7.4 3.3-7.4 7.4V136c0 10.5 8.5 19 19 19z"></path>
              <path d="M267 136V56H136c-17.6 0-32 14.4-32 32v336c0 17.6 14.4 32 32 32h240c17.6 0 32-14.4 32-32V181h-96c-24.8 0-45-20.2-45-45z"></path>
            </svg>
            <span className="group-hover:underline underline-offset-4">Resume</span>
            <svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="text-base opacity-0 group-hover:opacity-100 transition-opacity duration-100 h-4 w-4">
              <line x1="7" y1="17" x2="17" y2="7"></line>
              <polyline points="7 7 17 7 17 17"></polyline>
            </svg>
          </a>

          <a target="_self" rel="" className="group flex justify-center items-center space-x-1 text-zinc-400 hover:text-[#FF785A] transition-colors duration-100 text-sm font-Satoshi cursor-pointer" href="mailto:mayankkush0842@gmail.com">
            <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" className="h-4 w-4">
              <path d="M435.9 64.9l-367.1 160c-6.5 3.1-6.3 12.4.3 15.3l99.3 56.1c5.9 3.3 13.2 2.6 18.3-1.8l195.8-168.8c1.3-1.1 4.4-3.2 5.6-2 1.3 1.3-.7 4.3-1.8 5.6L216.9 320.1c-4.7 5.3-5.4 13.1-1.6 19.1l64.9 104.1c3.2 6.3 12.3 6.2 15.2-.2L447.2 76c3.3-7.2-4.2-14.5-11.3-11.1z"></path>
            </svg>
            <span className="group-hover:underline underline-offset-4">Get in touch</span>
            <svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="text-base opacity-0 group-hover:opacity-100 transition-opacity duration-100 h-4 w-4">
              <line x1="7" y1="17" x2="17" y2="7"></line>
              <polyline points="7 7 17 7 17 17"></polyline>
            </svg>
          </a>

          <Link className={`hidden md:flex group justify-center items-center space-x-1 text-zinc-400 hover:text-[#FF785A] transition-colors duration-100 text-sm font-Satoshi cursor-pointer hover:underline animate-unblur underline-offset-4 ${location.pathname === '/contact' ? 'text-[#FF785A]' : ''}`} to="/contact">
            <span className="group-hover:underline underline-offset-4">Contact me</span>
            <svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="text-base opacity-0 group-hover:opacity-100 transition-opacity duration-100 h-4 w-4">
              <line x1="7" y1="17" x2="17" y2="7"></line>
              <polyline points="7 7 17 7 17 17"></polyline>
            </svg>
          </Link>

        </section>

        {/* Experience Section - Mayank Kushwaha Professional Experience */}
        <section className="animate-unblur text-sm sm:text-base font-sans" aria-labelledby="experience-heading">
          <h2 id="experience-heading" className="text-xl pt-6 pb-3.5 font-Satoshi">Mayank's - Professional Experience</h2>

          {/* Mantra Softech Experience */}
          <div className="group sm:hover:scale-[1.02] transition-all duration-300 cursor-pointer flex w-full items-start space-x-3.5 mb-4">
            {/* Company Avatar - Hidden on mobile */}
            <div className="hidden sm:flex h-12 w-12 justify-center items-center rounded-lg border border-zinc-700 bg-zinc-800/50">
              <span className="text-white font-semibold text-sm">MS</span>
            </div>
            <div className="w-full">
              <h3 className="text-zinc-300 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1 sm:space-y-0 sm:space-x-4 group-hover:text-[#FF785A] transition-colors font-Satoshi">
                <div className="flex items-center space-x-2">
                  <span className="text-sm sm:text-base">Mantra Softech (India) Pvt. Ltd.</span>
                  <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" className="hidden md:block opacity-0 md:group-hover:opacity-100 transition-opacity duration-300 h-4 w-4">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path d="M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z"></path>
                  </svg>
                </div>
                <span className="text-zinc-400 text-xs sm:text-sm">Ahmedabad, Gujarat</span>
              </h3>
              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center pt-0.5 space-y-1 sm:space-y-0 sm:space-x-2">
                <span className="text-zinc-500 text-xs sm:text-sm">Junior Frontend Developer</span>
                <span className="text-zinc-500 text-xs">Jun 2024 - Present</span>
              </div>
              <ul className="text-zinc-500 text-xs sm:text-sm mt-2 space-y-1">
                <li>• Developed modular, responsive UIs using HTML5, CSS3, and JavaScript</li>
                <li>• Engineered real-time dashboards in ASP.NET with API integration</li>
                <li>• Reduced page load time by 30% through optimization techniques</li>
              </ul>
            </div>
          </div>

          {/* QSPIDERS Experience */}
          <div className="group sm:hover:scale-[1.02] transition-all duration-300 cursor-pointer flex w-full items-start space-x-3.5">
            {/* Company Avatar - Hidden on mobile */}
            <div className="hidden sm:flex h-12 w-12 justify-center items-center rounded-lg border border-zinc-700 bg-zinc-800/50">
              <span className="text-white font-semibold text-sm">QS</span>
            </div>
            <div className="w-full">
              <h3 className="text-zinc-300 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1 sm:space-y-0 sm:space-x-4 group-hover:text-[#FF785A] transition-colors font-Satoshi">
                <div className="flex items-center space-x-2">
                  <span className="text-sm sm:text-base">QSPIDERS</span>
                  <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" className="hidden md:block opacity-0 md:group-hover:opacity-100 transition-opacity duration-300 h-4 w-4">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path d="M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z"></path>
                  </svg>
                </div>
                <span className="text-zinc-400 text-xs sm:text-sm">Ahmedabad, Gujarat</span>
              </h3>
              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center pt-0.5 space-y-1 sm:space-y-0 sm:space-x-2">
                <span className="text-zinc-500 text-xs sm:text-sm">Java Full Stack Intern</span>
                <span className="text-zinc-500 text-xs">Jan 2024 - May 2024</span>
              </div>
              <ul className="text-zinc-500 text-xs sm:text-sm mt-2 space-y-1">
                <li>• Led frontend development for Book Odyssey using Next.js and MongoDB</li>
                <li>• Implemented filtering/search logic and cart/wishlist systems</li>
              </ul>
            </div>
          </div>
        </section>

        {/* Projects Section - Mayank Kushwaha Portfolio Projects */}
        <section className="animate-unblur" aria-labelledby="projects-heading">
          <h2 id="projects-heading" className="pt-9 pb-2.5 text-xl font-Satoshi">Mayank's - Featured Projects</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 py-2">

            {/* MealEdge Project */}
            <div className="animate-unblur">
              <a href='https://mealedge-ai-culinary-intelligence.vercel.app/' target="_blank" rel="noopener noreferrer" className="group flex flex-col rounded hover:bg-zinc-800/30 sm:border border-zinc-700 duration-300 transition-all ease-in-out hover:border-zinc-600">
                {/* Project image - Hidden on mobile, shown on tablet/desktop */}
                <div className="project-header hidden sm:block relative w-full h-36 bg-zinc-800 border border-zinc-700 flex items-center justify-center transition-all duration-300 group-hover:bg-zinc-700/80">
                  <OptimizedImage
                    src="/images/receipe.png"
                    alt="MealEdge AI Culinary Intelligence - Recipe discovery platform"
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                    lazy={true}
                  />
                  <div className="hidden items-center justify-center w-full h-full">
                    <span className="text-zinc-400 text-sm font-medium">AI Culinary</span>
                  </div>
                </div>
                <div className="rounded py-2 px-0 sm:px-3 cursor-pointer">
                  <div className="flex justify-between items-center">
                    <h3 className="text-zinc-300 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1 sm:space-y-0 sm:space-x-4 group-hover:text-[#FF785A] transition-colors font-Satoshi">
                      <div className="flex items-center space-x-2">
                        <span className="text-sm sm:text-base">MealEdge - AI Culinary Intelligence</span>
                        <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" className="hidden md:block opacity-0 md:group-hover:opacity-100 transition-opacity duration-300 h-4 w-4">
                          <path fill="none" d="M0 0h24v24H0z"></path>
                          <path d="M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z"></path>
                        </svg>
                      </div>
                    </h3>
                  </div>
                  <p className="text-zinc-500 line-clamp-2 text-xs sm:text-sm font-sans transition-colors duration-300 group-hover:text-zinc-400 mt-1">AI-powered culinary platform with ingredient recognition and recipe discovery using React.js, Node.js, and AI/ML APIs.</p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">React.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Node.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">AI/ML</span>
                  </div>
                </div>
              </a>
            </div>

            {/* Book Odyssey Project */}
            <div className="animate-unblur">
              <a href='https://bookstore-nextt.vercel.app/' target="_blank" rel="noopener noreferrer" className="group flex flex-col rounded hover:bg-zinc-800/30 sm:border border-zinc-700 duration-300 transition-all ease-in-out hover:border-zinc-600">
                {/* Project image - Hidden on mobile, shown on tablet/desktop */}
                <div className="project-header hidden sm:block relative w-full h-36 bg-zinc-800 border border-zinc-700 flex items-center justify-center transition-all duration-300 group-hover:bg-zinc-700/80">
                  <OptimizedImage
                    src="/images/bookstore.png"
                    alt="Book Odyssey - Online bookstore with real-time listings"
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                    lazy={true}
                  />
                  <div className="hidden items-center justify-center w-full h-full">
                    <span className="text-zinc-400 text-sm font-medium">Bookstore</span>
                  </div>
                </div>
                <div className="rounded py-2 px-0 sm:px-3 cursor-pointer">
                  <div className="flex justify-between items-center">
                    <h3 className="text-zinc-300 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1 sm:space-y-0 sm:space-x-4 group-hover:text-[#FF785A] transition-colors font-Satoshi">
                      <div className="flex items-center space-x-2">
                        <span className="text-sm sm:text-base">Book Odyssey - Online Bookstore</span>
                        <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" className="hidden md:block opacity-0 md:group-hover:opacity-100 transition-opacity duration-300 h-4 w-4">
                          <path fill="none" d="M0 0h24v24H0z"></path>
                          <path d="M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z"></path>
                        </svg>
                      </div>
                    </h3>
                  </div>
                  <p className="text-zinc-500 line-clamp-2 text-xs sm:text-sm font-sans transition-colors duration-300 group-hover:text-zinc-400 mt-1">Full-stack bookstore with real-time listings, Google Books API integration, and SSR/ISR using Next.js and MongoDB.</p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Next.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">MongoDB</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Google API</span>
                  </div>
                </div>
              </a>
            </div>

            {/* Lumina Prompt Graph */}
            <div className="animate-unblur">
              <a href='https://lumina-prompt-graph.vercel.app/' target="_blank" rel="noopener noreferrer" className="group flex flex-col rounded hover:bg-zinc-800/30 sm:border border-zinc-700 duration-300 transition-all ease-in-out hover:border-zinc-600">
                <div className="project-header hidden sm:block relative w-full h-36 bg-zinc-800 border border-zinc-700 flex items-center justify-center transition-all duration-300 group-hover:bg-zinc-700/80">
                  <OptimizedImage
                    src="/images/lumina-prompt-graph-image.png"
                    alt="Lumina Prompt Graph - AI-powered knowledge graph for prompts"
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                    lazy={true}
                  />
                </div>
                <div className="rounded py-2 px-0 sm:px-3 cursor-pointer">
                  <div className="flex justify-between items-center">
                    <h3 className="text-zinc-300 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1 sm:space-y-0 sm:space-x-4 group-hover:text-[#FF785A] transition-colors font-Satoshi">
                      <div className="flex items-center space-x-2">
                        <span className="text-sm sm:text-base">Lumina Prompt Graph</span>
                        <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" className="hidden md:block opacity-0 md:group-hover:opacity-100 transition-opacity duration-300 h-4 w-4">
                          <path fill="none" d="M0 0h24v24H0z"></path>
                          <path d="M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z"></path>
                        </svg>
                      </div>
                    </h3>
                  </div>
                  <p className="text-zinc-500 line-clamp-2 text-xs sm:text-sm font-sans transition-colors duration-300 group-hover:text-zinc-400 mt-1">Living, navigable knowledge graph for AI prompts with on-device semantic search, 3D galaxy view via Three.js, and duplicate detection — all running locally in the browser.</p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Next.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">TypeScript</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Three.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Transformers.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">React Flow</span>
                  </div>
                </div>
              </a>
            </div>

            {/* OpedFlow Deals - Amazon Affiliate Store */}
            <div className="animate-unblur">
              <a href='https://opedflow-deals-frontend.vercel.app/' target="_blank" rel="noopener noreferrer" className="group flex flex-col rounded hover:bg-zinc-800/30 sm:border border-zinc-700 duration-300 transition-all ease-in-out hover:border-zinc-600">
                <div className="project-header hidden sm:block relative w-full h-36 bg-zinc-800 border border-zinc-700 flex items-center justify-center transition-all duration-300 group-hover:bg-zinc-700/80">
                  <OptimizedImage
                    src="/images/Amazon-Affiliate-Store-image.png"
                    alt="OpedFlow Deals - Amazon affiliate storefront"
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                    lazy={true}
                  />
                </div>
                <div className="rounded py-2 px-0 sm:px-3 cursor-pointer">
                  <div className="flex justify-between items-center">
                    <h3 className="text-zinc-300 flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-1 sm:space-y-0 sm:space-x-4 group-hover:text-[#FF785A] transition-colors font-Satoshi">
                      <div className="flex items-center space-x-2">
                        <span className="text-sm sm:text-base">OpedFlow Deals - Amazon Affiliate Store</span>
                        <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" className="hidden md:block opacity-0 md:group-hover:opacity-100 transition-opacity duration-300 h-4 w-4">
                          <path fill="none" d="M0 0h24v24H0z"></path>
                          <path d="M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z"></path>
                        </svg>
                      </div>
                    </h3>
                  </div>
                  <p className="text-zinc-500 line-clamp-2 text-xs sm:text-sm font-sans transition-colors duration-300 group-hover:text-zinc-400 mt-1">Database-less Amazon affiliate storefront with nightly auto-rebuild via scraper webhook, fully static SSG on Vercel CDN, and dual dark/light theming.</p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Next.js</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">TypeScript</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">Tailwind CSS</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">SSG</span>
                  </div>
                </div>
              </a>
            </div>

            {/* Mantra projects */}
            <div className="animate-unblur">
              <div className="group flex flex-col rounded hover:bg-zinc-800/30 sm:border border-zinc-700 duration-300 transition-all ease-in-out hover:border-zinc-600">
                {/* Project image - Hidden on mobile, shown on tablet/desktop */}
                {/* <div className="hidden sm:block relative w-full h-36 bg-zinc-800 border border-zinc-700 flex items-center justify-center transition-all duration-300 group-hover:bg-zinc-700/80">
                  <span className="text-zinc-400 text-sm font-medium transition-colors duration-300 group-hover:text-zinc-300">Dashboards</span>
                </div> */}
                <div className="rounded py-2 px-0 sm:px-3 cursor-pointer">
                  <div className="flex justify-between items-center">
                    <h3 className="md:group-hover:text-[#FF785A] text-zinc-300 duration-300 transition-colors text-sm sm:text-base flex items-center">
                      Company Websites, Portals & Real-Time Dashboards
                    </h3>
                  </div>
                  <p className="text-zinc-500 line-clamp-2 text-xs sm:text-sm font-sans transition-colors duration-300 group-hover:text-zinc-400 mt-1">Responsive enterprise websites for Mantra Softech and Mxface with SEO optimization and modern UI/UX. Industrial monitoring dashboards for MACS, Vedanta, Sterlite with data visualization and RESTful API integration.</p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">HTML5</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">CSS3</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">JavaScript</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">ASP.NET</span>
                    <span className="text-[10px] sm:text-xs bg-zinc-700 text-white px-2 py-0.5 rounded transition-all duration-300 hover:bg-zinc-600 hover:text-zinc-200">REST API</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <p className="text-zinc-500 py-2 text-sm font-sans">Want to see more? <a className="underline underline-offset-4 text-zinc-500 hover:text-zinc-300" href="https://github.com/mayank-kushwaha" target="_blank" rel="noopener noreferrer">Check them out on github</a>.</p>
        </section>

        {/* Skills Section */}
        <section className="animate-unblur text-sm font-sans">
          <h2 className="text-xl pt-8 pb-3 font-Satoshi">Skills</h2>
          <p className="text-zinc-500 py-0.5"><span className="text-zinc-100 font-light">Programming Languages</span> - JavaScript, Java, SQL, HTML5, CSS3, TypeScript</p>
          <p className="text-zinc-500 py-0.5"><span className="text-zinc-100 font-light">Frontend Technologies</span> - React.js, Next.js, HTML5, CSS3, Tailwind CSS, Responsive Web Design</p>
          <p className="text-zinc-500 py-0.5"><span className="text-zinc-100 font-light">Backend Technologies</span> - Node.js, ASP.NET, REST APIs, RESTful Services</p>
          <p className="text-zinc-500 py-0.5"><span className="text-zinc-100 font-light">Databases</span> - MongoDB, MySQL, Database Design, Query Optimization</p>
          <p className="text-zinc-500 py-0.5"><span className="text-zinc-100 font-light">Development Tools</span> - Git, GitHub, VS Code, Chrome DevTools, npm, Webpack</p>
          <p className="text-zinc-500 py-0.5"><span className="text-zinc-100 font-light">Cloud & Deployment</span> - Netlify, Vercel, Version Control, Agile Methodology</p>
        </section>

        {/* Resume Notice */}
        <div className="pt-8 pb-16">
          <p className="text-zinc-400 space-x-1.5 text-sm bg-[#FF785A]/20 animate-unblur border-1 border-zinc-700 py-1 px-2 rounded-md flex items-center">
            <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 352 512" className="text-xs h-4 w-4">
              <path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path>
            </svg>
            <span>Feel free to checkout my <a href="/resume/Mayank.pdf" target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 text-zinc-400 hover:text-zinc-100 cursor-pointer">resume</a>.</span>
          </p>
        </div>

        {/* Footer */}
        <Footer />

        {/* Mobile Navigation */}
        <MobileNavigation />
      </main>
    </Layout>
  );
}

export default Home