const { useState } = React;

const projectsData = [
  {
    id: "001",
    title: "Amazon Clone",
    description: "A fully functional e-commerce platform replicating Amazon's core features — product listings, shopping cart, and a clean responsive UI.",
    tags: ["HTML", "CSS", "JavaScript", "React JS"],
    link: "#",
    alt: false,
  },
  {
    id: "002",
    title: "Tic Tac Toe Game",
    description: "An interactive two-player Tic Tac Toe game with win detection logic and a clean minimal interface built with React JS.",
    tags: ["React JS", "JavaScript", "CSS"],
    link: "#",
    alt: true,
  },
];

function ProjectCard({ project }) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      className={`project-card${project.alt ? " alt" : ""}`}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ transform: hovered ? "translateY(-5px)" : "translateY(0)", transition: "transform 0.3s ease" }}
    >
      <div className="project-num">PROJECT / {project.id}</div>
      <h3 className="project-title">{project.title}</h3>
      <p className="project-desc">{project.description}</p>
      <div className="project-tags">
        {project.tags.map(tag => (
          <span key={tag} className="project-tag">{tag}</span>
        ))}
      </div>
      <a href={project.link} className="project-link">View Project →</a>
    </div>
  );
}

function ProjectsSection() {
  return (
    <div className="projects-grid">
      {projectsData.map(project => (
        <ProjectCard key={project.id} project={project} />
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("projects-root")).render(<ProjectsSection />);