// WorkTiles.jsx — reusable case-study tiles
const WORK_DATA = [
  { id: 'coed', title: 'Coed-y-Parc RFC', cat: 'Rugby Club', year: '2025', img: 'https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=1200&q=75&auto=format&fit=crop', summary: 'Full club site: fixtures, match reports, sponsors, player photography.' },
  { id: 'gower', title: 'Gower Timber Co.', cat: 'Trades', year: '2025', img: 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1200&q=75&auto=format&fit=crop', summary: 'Product catalogue + enquiry site for a family-run sawmill in Gower.' },
  { id: 'hendy', title: 'Hendy Kitchens', cat: 'Local Business', year: '2024', img: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=75&auto=format&fit=crop', summary: 'Portfolio + booking form for a bespoke kitchen fitter.' },
  { id: 'oyw', title: 'Own Your Wedding', cat: 'Marketplace · Internal', year: '2024', img: 'https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=75&auto=format&fit=crop', summary: 'Supplier marketplace built in-house for the ALP Media group.' },
];

function WorkTiles({ setPage, limit }) {
  const mob = useIsMobile();
  const items = limit ? WORK_DATA.slice(0, limit) : WORK_DATA;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(6, 1fr)', gap: mob ? 24 : 20 }}>
      {items.map((w, i) => {
        const span = mob ? undefined : ((i === 0) ? 'span 4' : (i === 1 ? 'span 2' : (i % 2 === 0 ? 'span 2' : 'span 4')));
        const ratio = mob ? '3 / 2' : (span === 'span 4' ? '2 / 1' : '4 / 3');
        return (
          <Reveal key={w.id} delay={i * 80} style={{ gridColumn: span, cursor: 'pointer' }}
            onClick={() => setPage('caseStudy:' + w.id)}>
            <div className="img-slot" style={{ aspectRatio: ratio }}>
              <img src={w.img} alt={w.title} />
              <div className="img-label">IMG · {w.id.toUpperCase()}-01</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 14, gap: 12 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg2)' }}>{w.cat} · {w.year}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--fg1)', lineHeight: 1.1, marginTop: 6 }}>{w.title}</div>
              </div>
              <div style={{ fontSize: 22, color: 'var(--fg2)' }}>→</div>
            </div>
          </Reveal>
        );
      })}
    </div>
  );
}

window.WORK_DATA = WORK_DATA;
window.WorkTiles = WorkTiles;