import Link from "next/link";
import { Shell } from "@/components/Shell";
import { PageHeader } from "@/components/PageHeader";
import { offices } from "@content/offices";
import { db, people } from "@/db";
import { count, eq } from "drizzle-orm";

export const metadata = { title: "Offices" };

export default async function OfficesPage() {
  const counts = await db.select({ office: people.office, n: count() }).from(people).where(eq(people.isActive, true)).groupBy(people.office);
  const now = new Date();
  return (
    <Shell>
      <PageHeader eyebrow="Office guides" title={<>Two homes, <span className="serif-i">one table.</span></>} intro="Everything you need to land in either office: getting in, where things are, rooms, coffee, and what to do at 6pm." />
      <section className="mx-auto max-w-7xl px-5 pb-16 grid gap-4 md:grid-cols-2">
        {offices.map((o, i) => {
          const n = counts.find((c) => c.office === o.city.toUpperCase())?.n ?? 0;
          const time = new Intl.DateTimeFormat("en-GB", { timeZone: o.timezone, hour: "2-digit", minute: "2-digit" }).format(now);
          return (
            <Link key={o.slug} href={`/offices/${o.slug}`} className="card overflow-hidden group">
              <div className={`${i === 0 ? "bg-soul" : "bg-ink"} text-white p-8 min-h-64 flex flex-col justify-between`}>
                <div className="flex justify-between text-sm text-white/70"><span>{n} people</span><span>Local time {time}</span></div>
                <h2 className="display group-hover:underline underline-offset-8">{o.city}</h2>
              </div>
              <div className="p-6">
                <p className="serif-i text-xl">{o.hero}</p>
                <p className="mt-3 text-sm text-mist">{o.address.join(", ")}</p>
              </div>
            </Link>
          );
        })}
      </section>
    </Shell>
  );
}