import Link from "next/link";
import { Header } from "@/components/marketing/header";
import { calculators } from "@/lib/calculators/registry";

export default function CalculatorsPage() {
  return (
    <main>
      <Header />
      <section className="container-shell py-16">
        <h1 className="text-5xl font-black">Business calculators</h1>
        <p className="mt-4 max-w-2xl text-slate-600">Explore free calculators for ecommerce, marketing, SaaS, finance and service businesses.</p>
        <div className="mt-10 grid gap-5 md:grid-cols-3">
          {calculators.map((calculator) => (
            <Link key={calculator.slug} href={`/calculators/${calculator.slug}`} className="card p-6 transition hover:-translate-y-1">
              <div className="text-sm font-bold uppercase tracking-wide text-blue-600">{calculator.category}</div>
              <h2 className="mt-4 text-xl font-black">{calculator.title}</h2>
              <p className="mt-3 text-sm leading-6 text-slate-600">{calculator.description}</p>
            </Link>
          ))}
        </div>
      </section>
    </main>
  );
}