import Link from "next/link";
import { JsonLd } from "@/components/JsonLd";
import { PageHero, SectionHeader } from "@/components/MpcBlocks";
import { SelectedListingDiscoveryLinks, SelectedListingFoundationSummary, SelectedListingGrid } from "@/components/listings/SelectedListingBlocks";
import { getAdminState } from "@/lib/admin-store";
import { selectedListingsByType, selectedListingsFromState } from "@/lib/selected-listings";
import { breadcrumbSchema, collectionPageSchema, createPageMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";
export const metadata = createPageMetadata({
  title: "Marloth Park Restaurants | Selected Food Options Near Kruger",
  description: "Browse selected Marloth Park restaurant and food listings as useful details become available through Marloth Park Central.",
  path: "/restaurants",
  image: "/images/local-options/food-dining.webp",
  keywords: ["Marloth Park restaurants", "Marloth Park food", "places to eat in Marloth Park"],
});

export default async function RestaurantsPage() {
  const state = await getAdminState();
  const listings = selectedListingsByType(selectedListingsFromState(state), "restaurant");
  return (
    <main className="selected-hub-page restaurants-hub-page">
      <JsonLd data={[
        breadcrumbSchema([{ name: "Home", path: "/" }, { name: "Restaurants", path: "/restaurants" }]),
        collectionPageSchema({ name: "Marloth Park restaurants", description: "Selected restaurant and food listings in Marloth Park.", path: "/restaurants", itemNames: listings.map((listing) => listing.name) }),
      ]} />
      <PageHero
        eyebrow="Restaurants / food"
        title="Selected Marloth Park food and restaurant options"
        text="MPC will list selected visitor-useful food options only. Confirm hours, menus, booking needs and current details directly before relying on a listing."
        image="/images/local-options/food-dining.webp"
        primary={{ label: "View selected food listings", href: "#restaurants" }}
        secondary={{ label: "Request restaurant listing", href: "/list-your-business" }}
      />
      <section className="section" id="restaurants">
        <div className="container">
          <SectionHeader eyebrow="Curated food listings" title="Restaurants listed on MPC" text="Only selected options with useful visitor details appear here." />
          <SelectedListingGrid listings={listings} emptyTitle="Selected restaurant and food listings" emptyText="MPC shows selected restaurant and food listings when active public listing details are available." />
        </div>
      </section>
      <SelectedListingFoundationSummary />
      <SelectedListingDiscoveryLinks currentPath="/restaurants" />
    </main>
  );
}