import Link from "next/link";
import { Shell } from "@/components/Shell";
import { PageHeader } from "@/components/PageHeader";
import { db, educationResources } from "@/db";
import { asc, count, eq } from "drizzle-orm";
import { specialties } from "@content/education";

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

export default async function EducationPage() {
  const counts = await db.select({ specialty: educationResources.specialty, n: count() }).from(educationResources).groupBy(educationResources.specialty);
  const featured = await db.query.educationResources.findMany({ where: eq(educationResources.featured, true), orderBy: asc(educationResources.specialty) });
  const countFor = (k: string) => counts.find((c) => c.specialty === k)?.n ?? 0;
  return (
    <Shell>
      <PageHeader eyebrow="Education" title={<>Get better at the thing <span className="serif-i">you love.</span></>} intro="Libraries, ebooks, videos and media – organised by specialty and stored in our Google Drive. Every team owns its own shelf.">
        <p className="text-sm text-mist">Friday afternoons are learning time. Use them.</p>
      </PageHeader>
      <section className="mx-auto max-w-7xl px-5 pb-16">
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {specialties.map((s, i) => (
            <Link key={s.key} href={`/education/${encodeURIComponent(s.key)}`} className="card p-6 group flex flex-col justify-between min-h-44">
              <span className="eyebrow">{String(i + 1).padStart(2, "0")} · {countFor(s.key)} resources</span>
              <div>
                <p className="text-2xl font-medium group-hover:text-soul">{s.key}</p>
                <p className="text-sm text-ink/60 mt-1">{s.blurb}</p>
              </div>
            </Link>
          ))}
        </div>
        <h2 className="eyebrow mt-14 mb-4">Drive libraries</h2>
        <ul className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
          {featured.map((r) => (
            <li key={r.id}><a href={r.url} target="_blank" rel="noreferrer" className="flex items-center justify-between rounded-xl border border-line bg-white px-4 py-3 text-sm hover:border-ink"><span>{r.title}</span><span className="text-mist text-xs">Drive ↗</span></a></li>
          ))}
        </ul>
      </section>
    </Shell>
  );
}