// Procedural artwork for project tiles — no SVG illustration, just CSS shapes
const { useState, useEffect, useRef } = React;

function ProjectArtwork({ kind, url }) {
  return (
    <div className="pa pa-noise">
      <div className="pa-grid"></div>
      <div className="pa-shape" style={url ? { inset: 0, transform: 'none' } : {}}>
        {url ? (
          <img src={url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : (
          <>
            {kind === 'bloom' && (
              <div className="pa-bloom">
                {Array.from({ length: 25 }).map((_, i) => <span key={i} />)}
              </div>
            )}
            {kind === 'fps' && (
              <div className="pa-crosshair"><div className="core"></div></div>
            )}
            {kind === 'match' && (
              <div className="pa-rings">
                <span></span><span></span><span></span><span></span>
                <div className="ball"></div>
              </div>
            )}
            {kind === 'rick' && (
              <div className="pa-rick">
                <span></span><span></span><span></span><span></span><span></span>
              </div>
            )}
            {kind === 'roll' && (
              <div className="pa-roll">
                <div className="track"></div>
                <div className="ball"></div>
              </div>
            )}
            {kind === 'city' && (
              <div className="pa-city">
                <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

function ProjectCard({ project, featured, onOpen, index }) {
  const ar = project.aspect === 'landscape' ? '16/9' : '3/4';
  return (
    <article
      className={`pcard${featured ? ' featured' : ''}`}
      style={{ '--card-ar': ar }}
      onClick={() => onOpen(project.id)}
    >
      <div className="pcard-media">
        <div className="pcard-media-inner">
          <ProjectArtwork kind={project.artwork} url={project.cover || (project.screenshots ? project.screenshots[0] : null)} />
        </div>
        {project.icon && (
          <div className="pcard-icon-overlay">
            <img src={project.icon} alt={`${project.title} icon`} />
          </div>
        )}
        <div className={`pcard-tag ${project.status}`}>
          <span className="status-dot-inline"></span>
          {project.statusLabel}
        </div>
      </div>
      <div className="pcard-body">
        <div className="pcard-meta">
          <span>{String(index + 1).padStart(2, '0')}</span>
          <span className="dot-sep"></span>
          <span>{project.engine}</span>
          <span className="dot-sep"></span>
          <span>{project.year}</span>
        </div>
        <h3>{project.title}</h3>
        <p className="pcard-desc">{project.description}</p>
        <div className="pcard-foot">
          <div className="pcard-stack">
            {project.stack.slice(0, featured ? 5 : 3).map((s) => (
              <span key={s} className="chip">{s}</span>
            ))}
          </div>
          <div className="pcard-arrow">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
    </article>
  );
}

window.ProjectArtwork = ProjectArtwork;
window.ProjectCard = ProjectCard;