// ProjectCard.jsx
const ProjectCard = ({ image, category, title, description, tags = [], url }) => (
  <article className="project-card">
    <div className="project-thumb">
      {image
        ? <img src={image} alt={title} />
        : <div className="project-placeholder"><Icon name="sparkles" size={56}/></div>
      }
      <div className="project-overlay">
        {url && (
          <a href={url} target="_blank" rel="noreferrer" className="project-link">
            <span>View project</span>
            <Icon name="arrow-right" size={14}/>
          </a>
        )}
      </div>
    </div>
    <div className="project-info">
      <div className="eyebrow">{category}</div>
      <h3>{title}</h3>
      <p>{description}</p>
      <div className="project-tags">
        {tags.map(t => <span key={t} className="tag">{t}</span>)}
      </div>
    </div>
  </article>
);
window.ProjectCard = ProjectCard;

const PROJECTS = [
  {
    image: 'assets/project-hope-foundation.png',
    category: 'Non-profit · Shipped',
    title: 'Hope Foundation',
    description: 'Donation management, volunteer signup, and impact tracking for a non-profit. Live and processing donations.',
    tags: ['Next.js', 'Razorpay', 'Sanity CMS'],
    url: null,
  },
  {
    image: 'assets/project-salamat.png',
    category: 'Healthcare · In build',
    title: 'Salamat',
    description: 'Healthcare resource-sharing platform that lets doctors securely share medical materials and support with patients. UAE-based client.',
    tags: ['React', 'Accessibility', 'UAE'],
    url: 'https://salamat-rho.vercel.app',
  },
  {
    image: 'assets/project-sotyx.png',
    category: 'EdTech · In build',
    title: 'Sotyx',
    description: 'Mentorship platform pairing mentors with learners for structured guidance, with an AI chatbot answering questions in real time.',
    tags: ['Next.js', 'AI chatbot', 'Mentorship'],
    url: 'https://sotyx-mentorship-v2.vercel.app',
  },
];
window.PROJECTS = PROJECTS;