import Link from "next/link";
import { prisma } from "@/lib/prisma";

export const metadata = { title: "Area Guides | Richland Properties" };

export default async function AreaGuidesPage() {
  const areas = await prisma.area.findMany({
    include: { _count: { select: { properties: { where: { status: { in: ["ACTIVE", "UNDER_OFFER"] } } } } } },
    orderBy: [{ region: "asc" }, { name: "asc" }],
  });

  const byRegion = areas.reduce<Record<string, typeof areas>>((acc, a) => {
    (acc[a.region] ??= []).push(a);
    return acc;
  }, {});

  return (
    <main className="mx-auto max-w-6xl px-6 py-14">
      <p className="text-xs font-bold tracking-widest text-brand uppercase">Local knowledge</p>
      <h1 className="mt-2 text-3xl font-bold text-[#231f20]">Area guides</h1>
      <p className="mt-4 max-w-[60ch] text-stone-600">
        Browse the suburbs and regions Richland Properties covers, with property counts and links straight into
        filtered listings.
      </p>

      {Object.entries(byRegion).map(([region, regionAreas]) => (
        <section key={region} className="mt-12">
          <h2 className="text-lg font-bold text-[#231f20]">{region}</h2>
          <div className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {regionAreas.map((a) => (
              <Link
                key={a.id}
                href={`/area-guides/${encodeURIComponent(a.name)}`}
                className="rounded border border-stone-200 bg-white p-5 hover:border-brand"
              >
                <h3 className="font-bold text-[#231f20]">{a.name}</h3>
                <p className="mt-2 text-sm text-stone-500 line-clamp-2">{a.shortDescription}</p>
                <p className="mt-3 text-xs font-semibold text-brand">{a._count.properties} active listings</p>
              </Link>
            ))}
          </div>
        </section>
      ))}
    </main>
  );
}