/* global React */
const NS = window.AlessandroMerliPortfolioDesignSystem_251cec;
const { SectionHeader, ProjectCard, Divider } = NS;

function WorkScreen({ go }) {
  const { Section } = window.AMLayout;
  const D = window.AM_DATA;

  return (
    <div>
      <Section>
        <SectionHeader size="xl" index={1} eyebrow="Selected Work"
          title="Six projects, from sketch to serial production."
          description="Performance bicycles and hardware — each developed end to end: benchmarking, surfacing, CFD/FEM-informed engineering, DFM, and supplier coordination. Open any project for the full case study." />
      </Section>

      <div style={{ padding: '0 var(--gutter) var(--section-y)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 'clamp(36px,4vw,64px)' }}>
          {D.projects.map((p) => (
            <ProjectCard key={p.id} index={p.index} title={p.title} client={p.client} year={p.year}
              brief={p.brief} imageSrc={p.card || p.hero} imageLabel={`${p.title} — ${p.client}`} ratio="4 / 3"
              href={`#p/${p.id}`}
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); go('product', p.id); }} />
          ))}
        </div>
      </div>
    </div>
  );
}

window.WorkScreen = WorkScreen;