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

const Feats = () => (
	<section id="feats" className="container-page py-16">
		<SectionHeading title="Leadership">
			Operations and community work outside of code.
		</SectionHeading>

		<ul className="grid panel sm:grid-cols-2">
			{feats.map((feat, i) => (
				<li
					key={feat.title}
					className="border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] sm:odd:border-r sm:odd:nth-last-2:border-b-0 md:p-7"
				>
					<Reveal delay={i * 60}>
						<h3 className="font-display text-base font-normal text-ink">
							{feat.title}
						</h3>
						<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
							{feat.detail}
						</p>
					</Reveal>
				</li>
			))}
		</ul>
	</section>
);

export default Feats;