import Link from 'next/link';
import type { Metadata } from 'next';
import { BASE, ilceler, iller, statsByIlce } from '@/lib/bolge';
import { BolgeHero, CrumbLd, crumbBase } from '@/components/landing/Bolge';
export const dynamic = 'force-dynamic';

export const metadata: Metadata = {
  title: 'İllere göre arsa ve tarla ilan videosu',
  description: "Türkiye'nin 81 ilinde ada ve parselden, tapudaki sınırı uydu görüntüsünde gösteren Türkçe seslendirmeli dikey ilan videosu.",
  alternates: { canonical: BASE },
};

export default async function Bolgeler() {
  const stats = await statsByIlce();
  const byIl = iller().map((il) => ({ il, n: ilceler(il).reduce((a, x) => a + (stats.get(x.id)?.videos || 0), 0) }));
  return (
    <>
      <CrumbLd crumbs={crumbBase} />
      <BolgeHero crumbs={crumbBase} title="İllere göre arsa ilan videosu" lead="İlinizi seçin; ilçenizdeki parselin ada ve parsel numarasıyla tapudaki sınırı uydu görüntüsünde çizip Türkçe seslendirmeli dikey ilan videosu hazırlayalım." />
      <section className="bg-paper-2 px-3 py-6 md:px-6 md:py-10">
        <ul className="grid grid-cols-2 border-l border-t border-ink/10 bg-white sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
          {byIl.map(({ il, n }) => (
            <li key={il.id}><Link href={`${BASE}/${il.slug}`} className="flex items-baseline justify-between gap-2 border-b border-r border-ink/10 bg-white px-3 py-2.5 text-[14.5px] font-semibold hover:bg-signal-soft">
              <span>{il.ad}</span>{n > 0 && <span className="num text-[11.5px] font-normal text-ink-soft">{n} video</span>}</Link></li>
          ))}
        </ul>
      </section>
    </>
  );
}