apple-ahh-portfolio/components/Projects.tsx

import React from 'react';
import { PROJECTS } from '../constants';

const Projects: React.FC = () => {
  return (
    <section id="projects" className="bg-[#fff] border-b border-[#d6d6d6] py-12">
      <div className="max-w-[980px] mx-auto px-4">
        
        {/* Section Header */}
        <div className="text-center mb-12">
            <h2 className="text-3xl font-display font-medium text-[#333] mb-2">
                Built for performance.
            </h2>
            <p className="text-[#666] text-lg font-sans">
                Thousands of lines of code. Zero compromise.
            </p>
        </div>

        {/* 2009 Grid Layout */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {PROJECTS.map((project) => (
            <div key={project.id} className="flex flex-col group">
                {/* Image Box */}
                <div className="h-[240px] w-full overflow-hidden rounded-md border border-gray-300 shadow-md mb-4 bg-gray-100 relative">
                     <img 
                        src={project.image} 
                        alt={project.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                     />
                     {/* Gloss Overlay */}
                     <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent pointer-events-none" />
                </div>

                {/* Content */}
                <h3 className="text-xl font-bold text-[#333] font-sans mb-1 group-hover:text-[#0083e6] transition-colors cursor-pointer flex items-center gap-2">
                    {project.title}
                    
                    {/* Fedora SVG */}
                    {project.id === 'fedora-bytebeat' && (
                        <svg viewBox="0 0 14 14" className="w-5 h-5 mb-0.5" xmlns="http://www.w3.org/2000/svg">
                            <path d="m 6.8848754,1.0000711 c -3.2587005,0.0618 -5.8826129,2.72355 -5.8848705,5.99671 l 0,4.6430899 c 0.00181,0.75194 0.6125562,1.3602 1.3651321,1.3602 2.682e-4,0 0.00137,0 0.00164,0 8.23e-4,-10e-6 0.00249,0 0.00329,0 l 0.00164,0 4.6315803,0 c 3.3124987,-10e-4 5.9967077,-2.68707 5.9967077,-5.9999999 0,-3.31392 -2.686309,-6 -5.9999997,-6 -0.02588,0 -0.0515,-3.1999e-4 -0.0773,0 -0.0128,1.6e-4 -0.02505,-2.3999e-4 -0.03783,0 z m 1.730263,1.82073 c 0.02126,-5.4e-4 0.04275,0 0.06414,0 0.209167,0 0.341292,0.0205 0.539474,0.0724 0.226849,0.0595 0.394658,0.24499 0.394735,0.41447 1.01e-4,0.24819 -0.136939,0.39309 -0.422696,0.39309 -0.154071,0 -0.22822,-0.0345 -0.511513,-0.0345 -0.895596,0 -1.626782,0.73112 -1.628287,1.62664 l 0,1.22369 c 0,0.22408 0.18709,0.41283 0.411183,0.41283 l 0.93092,0 c 0.23447,0 0.41758,0.17967 0.417764,0.41447 0,0.23473 -0.183215,0.41447 -0.417764,0.41447 l -1.129933,0 -0.21217,0 0,0.21054 0,1.42762 c 0,1.3691599 -1.104569,2.4753299 -2.473686,2.4753299 -0.209215,0 -0.3413107,-0.0205 -0.5394734,-0.0724 -0.2267786,-0.0594 -0.3946594,-0.24681 -0.394737,-0.41611 0,-0.24819 0.1367469,-0.39145 0.4226979,-0.39145 0.1538263,0 0.2283257,0.0345 0.5115125,0.0345 0.895603,0 1.626888,-0.7313 1.628291,-1.6266399 -3e-6,0 0,-1.2316 0,-1.23191 -3e-6,-0.22438 -0.187095,-0.40954 -0.411187,-0.40954 -6.36e-4,0 -0.0016,0 -0.0016,0 l -0.930918,0 c -0.234955,0 -0.416121,-0.17954 -0.416121,-0.41447 -6.1e-5,-0.23627 0.184085,-0.41447 0.424343,-0.41447 l 1.125,0 0.210527,0 0,-0.21217 0,-1.42106 c -3e-6,-1.34791 1.069895,-2.44152 2.409538,-2.47532 z m 1.30921,0.0954 c 0.8562886,0.44851 1.4407896,1.34457 1.4407896,2.37829 0,1.3868 -1.052185,2.51856 -2.4013146,2.65954 0.164957,-0.15256 0.268091,-0.36887 0.268091,-0.6102 -2.04e-4,-0.26094 -0.121941,-0.49472 -0.310853,-0.64802 0.668547,-0.1158 1.1825636,-0.70111 1.1825636,-1.40132 1e-6,-0.50763 -0.2695986,-0.9535 -0.6726976,-1.20395 0.353577,-0.0982 0.6037636,-0.41032 0.6036196,-0.78289 -6.9e-5,-0.14405 -0.04107,-0.27657 -0.1101986,-0.39145 z m -5.6282893,3.81415 c -0.1658665,0.15217 -0.2697985,0.37124 -0.2697371,0.61348 0,0.26114 0.120642,0.49314 0.309212,0.64638 -0.6683184,0.11707 -1.1809229,0.70752 -1.1809229,1.4079 0,0.50754 0.2684383,0.9523099 0.671053,1.2022999 -0.3531752,0.0987 -0.6036184,0.411 -0.6036184,0.7829 6.89e-5,0.14404 0.039434,0.2763 0.1085531,0.39144 -0.8552602,-0.44881 -1.4391449,-1.34359 -1.4391449,-2.3766399 0,-1.38801 1.0536597,-2.52765 2.4046052,-2.66776 z" fill="#000000"/>
                        </svg>
                    )}

                    {/* Python SVG */}
                    {['m5rcode', 'bytebeat-win', 'fedora-bytebeat'].includes(project.id) && (
                        <svg viewBox="0 0 512 512" className="w-4 h-4 mb-0.5" xmlns="http://www.w3.org/2000/svg">
                            <g>
                                <path d="M194.734,246.879h121.768c33.9,0,60.956-27.908,60.956-61.95V68.846c0-33.035-27.87-57.855-60.956-63.371 c-20.943-3.484-42.673-5.069-63.51-4.971c-20.845,0.097-40.74,1.874-58.258,4.971c-51.586,9.117-60.952,28.191-60.952,63.371 v46.463H255.69v15.486H133.782h-45.75c-35.434,0-66.459,21.295-76.158,61.808c-11.192,46.435-11.694,75.409,0,123.898 c8.666,36.088,29.359,61.807,64.79,61.807h41.917v-55.699C118.581,282.37,153.39,246.879,194.734,246.879z M187.063,84.333 c-12.636,0-22.877-10.355-22.877-23.161c0-12.849,10.241-23.3,22.877-23.3c12.594,0,22.873,10.451,22.873,23.3 C209.936,73.979,199.658,84.333,187.063,84.333z M499.37,192.603c-8.761-35.27-25.484-61.808-60.96-61.808h-45.75v54.134 c0,41.972-35.582,77.292-76.158,77.292H194.734c-33.349,0-60.952,28.547-60.952,61.954v116.079 c0,33.037,28.726,52.476,60.952,61.943c38.589,11.353,75.59,13.409,121.768,0c30.688-8.876,60.956-26.764,60.956-61.943v-46.461 H255.69v-15.486h121.768h60.952c35.431,0,48.638-24.715,60.96-61.807C512.092,278.314,511.549,241.589,499.37,192.603z M324.178,424.766c12.64,0,22.873,10.356,22.873,23.156c0,12.85-10.233,23.305-22.873,23.305 c-12.595,0-22.877-10.455-22.877-23.305C301.301,435.122,311.583,424.766,324.178,424.766z" fill="#000000" />
                            </g>
                        </svg>
                    )}

                    {/* Vercel SVG */}
                    {project.id === 'geminicord' && (
                        <svg viewBox="0 0 15 15" className="w-4 h-4 mb-0.5" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                fillRule="evenodd"
                                clipRule="evenodd"
                                d="M7.49998 1L6.92321 2.00307L1.17498 12L0.599976 13H1.7535H13.2464H14.4L13.825 12L8.07674 2.00307L7.49998 1ZM7.49998 3.00613L2.3285 12H12.6714L7.49998 3.00613Z"
                                fill="#333333"
                            />
                        </svg>
                    )}
                </h3>
                <p className="text-sm text-[#666] leading-relaxed font-sans mb-3">
                    {project.description}
                </p>
                
                <a 
                    href={project.githubUrl}
                    className="text-[12px] font-bold text-[#0083e6] hover:underline flex items-center gap-1 font-sans"
                >
                    Learn more <span className="text-[10px]">▶</span>
                </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Projects;