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

const Feats = () => {
	const isOddTotal = feats.length % 2 === 1;

	return (
		<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) => {
					const isLast = i === feats.length - 1;
					const isLastRow = isOddTotal
						? isLast
						: i >= feats.length - 2;
					const isLeftCol = i % 2 === 0;
					const colSpan = isOddTotal && isLast ? 'sm:col-span-2' : '';
					const rightBorder =
						isLeftCol && !(isOddTotal && isLast)
							? 'sm:border-r'
							: '';
					const bottomBorder = isLastRow ? 'sm:border-b-0' : '';

					return (
						<li
							key={feat.title}
							className={`border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] md:p-7 ${colSpan} ${rightBorder} ${bottomBorder}`}
						>
							<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;