"use client";

const stats = [
	{
		value: "$150-200",
		label: "Average Savings Per Order",
	},
	{
		value: "1-2 Days",
		label: "Delivery Turnaround",
	},
	{
		value: "Since 2018",
		label: "Serving Colorado",
	},
	{
		value: "100%",
		label: "Customer Satisfaction",
	},
];

export default function Stats() {
	return (
		<section className="w-full py-20 px-4">
			<div className="max-w-7xl mx-auto">
				<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
					{stats.map((stat, index) => (
						<div key={index} className="text-center">
							<div
								className="text-4xl md:text-5xl font-bold mb-2"
								style={{ color: "var(--teal)" }}
							>
								{stat.value}
							</div>
							<div
								className="text-sm md:text-base"
								style={{ color: "var(--foreground)" }}
							>
								{stat.label}
							</div>
						</div>
					))}
				</div>
			</div>
		</section>
	);
}