const Projects = () => {
  const items = [
    {
      mono: "C", thumbClass: "",
      title: "csv-to-parquet-pipeline",
      desc: "Cleans, validates, and converts multi-million-row CSVs to Parquet, faster than the naive pandas path. Schema enforcement, retry logic, full pytest coverage.",
      stats: "2M rows · 40× faster · 94% coverage",
      tags: ["Python", "pandas", "pytest", "Docker"],
      href: "https://github.com/missacodes"
    },
    {
      mono: "W", thumbClass: "alt2",
      title: "world-cup-2026-predictor",
      desc: "Browser-based bracket simulator for the 2026 World Cup. Group-stage logic, knockout rounds, and persistent picks. No backend, just JS and localStorage.",
      stats: "vanilla JS · no dependencies · localStorage-persisted",
      tags: ["JavaScript", "HTML", "CSS"],
      href: "https://github.com/missacodes/world-cup-2026-predictor"
    },
  ];
  return (
    <section className="section section--alt" id="projects">
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">Projects</div>
          <h2>Things I've made.</h2>
        </div>
        <div className="projects">
          {items.map((p, i) => (
            <a className="project" href={p.href} key={i}>
              <div className={`project-thumb ${p.thumbClass}`}>{p.mono}</div>
              <div>
                <div className="project-title">{p.title}</div>
                <div className="project-desc">{p.desc}</div>
                {p.stats && <div className="project-stats">{p.stats}</div>}
                <div className="project-meta">
                  {p.tags.map(t => <span className="project-chip" key={t}>{t}</span>)}
                </div>
              </div>
              <div className="project-arrow"><Icon name="arrow-up-right" size={16}/></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Projects = Projects;