import Image from "next/image";
import { prisma } from "@/lib/prisma";

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

function initials(name: string) {
  return name.split(" ").map((w) => w[0]).join("");
}

export default async function AboutPage() {
  const brokers = await prisma.broker.findMany({ include: { coverage: true }, orderBy: { name: "asc" } });

  return (
    <main className="mx-auto max-w-6xl px-6 py-14">
      <p className="text-xs font-bold tracking-widest text-brand uppercase">Who we are</p>
      <h1 className="mt-2 text-3xl font-bold text-[#231f20]">Our people</h1>
      <p className="mt-4 max-w-[62ch] text-stone-600">
        Richland Properties is a Pretoria-based commercial brokerage covering Gauteng&apos;s office, industrial and
        retail markets. Our brokers each work a defined set of regions, so every enquiry reaches someone who knows
        the area.
      </p>

      <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
        {brokers.map((b) => (
          <div key={b.id} className="flex gap-4 rounded border border-stone-200 bg-white p-5">
            {b.photoUrl ? (
              <Image src={b.photoUrl} alt={b.name} width={56} height={56} className="h-14 w-14 flex-none rounded-full object-cover" />
            ) : (
              <span className="flex h-14 w-14 flex-none items-center justify-center rounded-full bg-brand text-lg font-bold text-white">
                {initials(b.name)}
              </span>
            )}
            <div>
              <h2 className="font-bold text-[#231f20]">{b.name}</h2>
              <p className="text-sm font-semibold text-brand">{b.title}</p>
              <p className="mt-2 text-sm text-stone-500">
                Covers {b.coverage.map((c) => c.area).join(", ") || "—"}
              </p>
              <a href={`tel:${b.phone.replace(/\s/g, "")}`} className="mt-2 inline-block text-sm text-stone-600 hover:text-brand">
                {b.phone}
              </a>
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}