import { Suspense } from "react";
import type { Metadata } from "next";
import FoodDirectory from "@/components/food/FoodDirectory";

export const metadata: Metadata = {
  title: "Food and Beverage | Discover Syria",
  description: "Restaurants and cafés across Syria, filtered by city and search.",
};

export default function FoodAndBeveragePage() {
  return (
    <>
      <header className="lf-head">
        <div className="wrap">
          <span className="eyebrow">Life and Fun</span>
          <h1 className="lf-title">Food and Beverage</h1>
          <p className="lead">Courtyard restaurants, old-city cafés and seaside tables, filtered by city and search.</p>
        </div>
      </header>
      <section className="wrap lf-body">
        {/* Static export: the ?type= value is read on the client, so the directory sits behind a Suspense boundary. */}
        <Suspense fallback={null}>
          <FoodDirectory />
        </Suspense>
      </section>
    </>
  );
}