/* eslint-disable */
// Project data — editável. Adicione/remova projetos aqui.
const PROJECTS = [
  { id: 'velo-clube',   title: 'Velo Clube',   year: '2025', category: 'Jersey - Sportwear', img: 'assets/projects/velo-clube.png' },
  { id: 'inter',        title: 'Inter',        year: '2024', category: 'Jersey - Sportwear', img: 'assets/projects/inter.png' },
  { id: 'mevo',         title: 'Mevo',         year: '2025', category: 'Branding',           img: 'assets/projects/mevo.png' },
  { id: 'portuguesa',   title: 'Portuguesa',   year: '2024', category: 'Jersey - Sportwear', img: 'assets/projects/portuguesa.png' },
  { id: 'padel',        title: 'Padel',        year: '2022', category: 'Branding',           img: 'assets/projects/padel.png' },
  { id: 'g3x',          title: 'G3X',          year: '2025', category: 'Jersey - Sportwear', img: 'assets/projects/g3x.png' },
  { id: 'baseball',     title: 'Baseball',     year: '2024', category: 'Branding',           img: 'assets/projects/baseball.png' },
  { id: 'gym',          title: 'GYM',          year: '2025', category: 'Branding',           img: 'assets/projects/gym.png' },
  { id: 'mirassol',     title: 'Mirassol',     year: '2025', category: 'Jersey - Sportwear', img: 'assets/projects/mirassol.png' },
];

window.PROJECTS = PROJECTS;

/* Placeholder painted media — diagonal stripes + label.
   When you have real images, replace with <img src="..."> inside .media */
function PlaceholderMedia({ title, hue = 220, tone = 0.4 }) {
  const bg = `oklch(${tone} 0.09 ${hue})`;
  const accent = `oklch(${Math.min(tone + 0.15, 0.92)} 0.14 ${hue})`;
  return (
    <div className="media placeholder" style={{ ['--ph-bg']: bg, background: bg }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 30% 25%, ${accent} 0%, transparent 55%)`,
        opacity: 0.65,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 19px)`,
      }} />
      <span className="label" style={{ position: 'relative', zIndex: 2 }}>{`{ ${title} }`}</span>
    </div>
  );
}

function ArrowIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function ProjectMedia({ project }) {
  if (project.img) {
    return <img className="media" src={project.img} alt={project.title} loading="lazy" />;
  }
  return <PlaceholderMedia title={project.title} hue={project.hue} tone={project.tone} />;
}

function ProjectCard({ project, index }) {
  return (
    <a
      className="card reveal"
      href={`case.html?id=${project.id}`}
      style={{ ['--i']: index }}
      data-screen-label={`Card · ${project.title}`}
    >
      <ProjectMedia project={project} />
      <div className="overlay" />
      <div className="arrow"><ArrowIcon /></div>
      <div className="meta">
        <span>{project.category}</span>
        <span>{project.year}</span>
      </div>
      <span className="pill">{project.title}</span>
    </a>
  );
}

window.ProjectCard = ProjectCard;
window.ProjectMedia = ProjectMedia;
window.PlaceholderMedia = PlaceholderMedia;
window.ArrowIcon = ArrowIcon;