import Reveal from '@/components/ui/reveal';
import SectionHeading from '@/components/ui/section-heading';
import { projects } from '@/lib/site';

const Projects = () => (
	<section id="work" className="container-page py-16">
		<SectionHeading title="Selected Work">
			Instant-Response Web Applications
		</SectionHeading>

		<div className="grid divide-y divide-white/12 panel md:grid-cols-3 md:divide-x md:divide-y-0">
			{projects.map((project, i) => (
				<Reveal key={project.title} delay={i * 60}>
					<article className="flex h-full flex-col justify-between p-6 transition-colors hover:bg-white/4 md:p-7">
						<div>
							<h3 className="font-display text-lg font-medium tracking-tight text-ink">
								{project.title}
							</h3>
							<p className="mt-2.5 text-sm leading-relaxed text-ink/70">
								{project.blurb}
							</p>
						</div>

						<p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
							{project.stack}
						</p>
					</article>
				</Reveal>
			))}
		</div>
	</section>
);

export default Projects;