`src/app/architects/page.tsx`

86 lines
import Link from 'next/link';
import type { Metadata } from 'next';
import { listEntitiesWithCounts } from '@/lib/db';
import { BreadcrumbArchive } from '@/components/BreadcrumbArchive';
import { CrossPromo } from '@/components/CrossPromo';
import { currentSurface } from '@/lib/site';

export const metadata: Metadata = {
  title: 'Architects',
  description: 'Architects and studios in the archive — addresses they designed, in Beverly Hills and outward.',
  alternates: { canonical: '/architects' },
};

export default async function ArchitectsIndex() {
  const [surface, studios, architects] = await Promise.all([
    currentSurface(),
    listEntitiesWithCounts('studio'),
    listEntitiesWithCounts('architect'),
  ]);
  const all = [...architects, ...studios].sort((a, b) => b.oeuvre_count - a.oeuvre_count);

  return (
    <>
      <div className="max-w-4xl mx-auto px-6 pt-6">
        <BreadcrumbArchive items={[{ label: 'Archive', href: '/' }, { label: 'Architects' }]} />
      </div>

      <header className="max-w-4xl mx-auto px-6 py-12 border-b border-ink/10">
        <p className="text-xs uppercase tracking-[0.15em] text-ink/50 mb-2">Architects + studios</p>
        <h1 className="font-display text-5xl md:text-6xl text-ink tracking-[-0.02em] leading-[1.02]">
          Who built it.
        </h1>
        <p className="mt-4 font-display italic text-xl text-ink/70 max-w-prose">
          Every architect or studio with a verified work in the archive. Click to see their oeuvre on a map.
        </p>
      </header>

      <section className="max-w-4xl mx-auto px-6 py-10">
        {all.length === 0 ? (
          <p className="text-sm italic text-ink/55">
            No architects with a verified work in the archive yet.
          </p>
        ) : (
          <ul className="divide-y divide-ink/10">
            {all.map(e => (
              <li key={e.id}>
                <Link
                  href={`/entity/${encodeURIComponent(e.slug)}`}
                  className="grid grid-cols-[1fr_auto] gap-4 items-baseline py-5 hover:text-coral transition group"
                >
                  <div>
                    <h2 className="font-display text-2xl text-ink group-hover:text-coral tracking-[-0.01em]">
                      {e.display_name}
                    </h2>
                    {e.bio_short && (
                      <p className="mt-1 text-sm text-ink/65 leading-relaxed max-w-prose">
                        {e.bio_short}
                      </p>
                    )}
                  </div>
                  <div className="text-right">
                    <p className="font-mono text-xs uppercase tracking-[0.15em] text-ink/50">
                      {e.kind}
                    </p>
                    <p className="font-mono text-xs text-ink/45">
                      {e.birth_year ?? '?'}–{e.death_year ?? '?'}
                    </p>
                    <p className="mt-1 font-display text-2xl text-ink/70 group-hover:text-coral">
                      {e.oeuvre_count}{' '}
                      <span className="font-sans text-[10px] uppercase tracking-[0.15em] text-ink/40">
                        {e.oeuvre_count === 1 ? 'work' : 'works'}
                      </span>
                    </p>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </section>

      <CrossPromo current={surface.key} />
    </>
  );
}