/* global React */
const { useState } = React;

const PROJECTS = [
  { id: "04", year: "2024", title: "Deepfake Detection",       cat: "Research / Vision",      tags: ["pytorch", "opencv", "docker"],             desc: "Detects deepfake video using temporal-consistency features over CNN backbones.", link: "https://www.kaggle.com/models/armanchaudhary/xception5o", featured: true },
  { id: "01", year: "2025", title: "Oxidize",                  cat: "AI Systems / Code Translation", tags: ["langgraph","rust", "docker"],       desc: "Agentic Python-to-Rust transpiler with compiler/test fix loops, sandboxed execution, and a FastAPI + React UI.", link: "https://oxidize-web.vercel.app/", featured: true },
  { id: "06", year: "2024", title: "GPT from Scratch",         cat: "Reimplementation",       tags: ["python", "pytorch", "huggingface"],        desc: "A from-scratch GPT — tokenizer, attention, training loop. The point is the understanding.", link: "https://github.com/Arman176001/ChatGPT-from-scratch", featured: false },
  { id: "09", year: "2023", title: "FlappyBird AI",            cat: "RL / Agent",             tags: ["python", "pytorch", "gym"],                desc: "Reinforcement-learned agent for Flappy Bird — DQN, replay buffer, the works.", link: "https://github.com/Arman176001/FlappyBirdAI", featured: false },
  { id: "02", year: "2025", title: "Drona",                    cat: "Product / AI Agent",     tags: ["langchain", "next", "education"],          desc: "AI-powered learning assistant that personalises explanations, problem sets, and pacing.", link: "https://drona-three.vercel.app/", featured: true },
  { id: "08", year: "2024", title: "Llama 3 · Algebra",        cat: "Fine-Tuning",            tags: ["pytorch", "unsloth"],                      desc: "Fine-tuned Llama 3 8B on an algebra dataset for step-by-step explanations.", link: "https://huggingface.co/Arman176/Llama-Algebra/tree/main", featured: false },
  { id: "05", year: "2024", title: "ResNet from Scratch",      cat: "Reimplementation",       tags: ["pytorch", "numpy"],                        desc: "Full ResNet-50 reimplemented from the paper — every block, every skip connection.", link: "https://github.com/Arman176001/ResNet-From-Scratch", featured: false },
  { id: "07", year: "2024", title: "Twacha AI",                cat: "Product / Vision",       tags: ["yolo", "fastapi", "react"],                desc: "Facial dermatologist — analyses skin conditions with computer vision and ranked diagnoses.", link: "https://github.com/kaavya7705/twacha-ai", featured: false },
  { id: "10", year: "2023", title: "YT Comment Sentiment",     cat: "NLP",                    tags: ["huggingface", "llama", "next"],            desc: "Sentiment analysis pipeline over YouTube comments with a Next.js dashboard.", link: "https://v0-youtube-comments-analysis-yqfe2qef2im-arman176001s-projects.vercel.app/", featured: false },
];

function Projects() {
  const [filter, setFilter] = useState("all");
  const cats = ["all", "featured", "research", "product", "reimplementation"];
  const visible = PROJECTS.filter((p) => {
    if (filter === "all") return true;
    if (filter === "featured") return p.featured;
    return p.cat.toLowerCase().includes(filter);
  });

  return (
    <section id="projects" className="section projects-section">
      <div className="shell">
        <div className="section-tag mono">03 / projects</div>
        <div className="section-head">
          <h2>Selected work,<br /><em className="serif">2023 → now</em>.</h2>
          <div className="meta">// {PROJECTS.length} projects<br />// open-source where possible</div>
        </div>

        <div className="proj-filters mono">
          {cats.map((c) => (
            <button
              key={c}
              className={"proj-filter hover-target " + (filter === c ? "active" : "")}
              onClick={() => setFilter(c)}
            >
              <span className="dot" />
              {c}
            </button>
          ))}
          <span className="proj-count">[ {visible.length} / {PROJECTS.length} ]</span>
        </div>

        <ul className="proj-list">
          <li className="proj-row proj-head mono">
            <span className="c-id">№</span>
            <span className="c-yr">YEAR</span>
            <span className="c-tt">TITLE</span>
            <span className="c-ct">CATEGORY</span>
            <span className="c-tg">STACK</span>
            <span className="c-go">LINK</span>
          </li>
          {visible.map((p, i) => (
            <ProjectRow key={p.id} p={p} i={i} />
          ))}
        </ul>
      </div>
    </section>
  );
}

function ProjectRow({ p, i }) {
  const [hover, setHover] = useState(false);
  return (
    <li
      className={"proj-row hover-target " + (hover ? "is-hover" : "")}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ animation: `projIn 0.5s var(--bezier) ${Math.min(i, 8) * 0.04}s both` }}
    >
      <a href={p.link} target="_blank" rel="noopener" className="proj-link">
        <span className="c-id mono">{String(i + 1).padStart(2, "0")}</span>
        <span className="c-yr mono">{p.year}</span>
        <span className="c-tt">
          <span className="proj-title">{p.title}</span>
          {p.featured && <span className="proj-flag mono">★ featured</span>}
        </span>
        <span className="c-ct mono">{p.cat}</span>
        <span className="c-tg mono">
          {p.tags.map((t) => <span key={t} className="proj-tag">{t}</span>)}
        </span>
        <span className="c-go mono">
          <span className="go-arrow">↗</span>
        </span>
      </a>

      {/* hover description slide (outside main anchor so links can nest) */}
      <div className="proj-hover">
        <div className="proj-hover-inner">
          <p>{p.desc}</p>
          {p.modelCard && (
            <a
              href={p.modelCard}
              target="_blank"
              rel="noopener"
              className="proj-extra mono hover-target"
              onClick={(e) => e.stopPropagation()}
            >
              <span className="dot" /> model card <span className="proj-extra-arrow">↗</span>
            </a>
          )}
        </div>
      </div>
    </li>
  );
}

Object.assign(window, { Projects });