import type { Metadata } from "next";
import Link from "next/link";
import { CompactCTA, InnerLayout, PageHero } from "../components/inner";
import { Icon } from "../components/icons";
import { readPublicAreas } from "../lib/public-settings";
export const metadata:Metadata={title:"Area Layanan Bogor",description:"Area layanan instalasi listrik Padjajaran Elektrik di Kota dan Kabupaten Bogor.",alternates:{canonical:"/area"}};
export const dynamic="force-dynamic";
export default async function AreaPage(){const areas=await readPublicAreas();return <InnerLayout><PageHero title="Area Layanan Bogor" description="Penjadwalan pekerjaan di Kota dan Kabupaten Bogor berdasarkan lokasi, jenis pekerjaan, urgensi, dan ketersediaan teknisi."/><section className="inner-section"><div className="shell">{areas.length?<div className="inner-grid">{areas.map(area=><article className="inner-card" key={area.id}><span className="eyebrow">{area.city}</span><h2>{area.name}</h2><p>{area.uniqueIntro}</p><Link className="text-link" href={`/area/${area.slug}`}>Lihat detail area <Icon name="arrow"/></Link></article>)}</div>:<div className="empty-state"><h2>Area layanan sedang diperbarui</h2><p>Hubungi kami untuk memastikan ketersediaan jadwal di lokasi Anda.</p></div>}</div></section><CompactCTA/></InnerLayout>}