@bearmenu/ui 0.8.9 → 0.8.11

package/src/components/menu-kitchen-list.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MenuKitchenList, type MenuKitchenListLabels } from "./menu-kitchen-list";
+import type { MenuKitchenPreview } from "./menu-types";
+
+const labels: MenuKitchenListLabels = {
+  openVenue: (name) => `Open ${name}`,
+  openDish: (name) => `See ${name}`,
+  openNow: "Open now",
+  showMore: "Show 10 more",
+};
+
+const kitchen: MenuKitchenPreview = {
+  place: { id: "p1", slug: "salt-and-stone", name: "Salt & Stone", open_now: true },
+  href: "/places/salt-and-stone",
+  metaLabel: "courtyard · Centru",
+  hoursLabel: "kitchen until 23:00",
+  priceLabel: "62 lei",
+  dish: {
+    name: "Truffle Tagliatelle",
+    href: "/menu/dishes/truffle-tagliatelle",
+    kicker: "MOST NAMED HERE",
+    meta: "17 reviews name it",
+  },
+};
+
+describe("MenuKitchenList", () => {
+  /**
+   * The reason this component exists rather than a flag on `RankedVenueList`.
+   * If these ever collapse into one link the surface has silently lost the
+   * drawer, which is the second half of what the row is for.
+   */
+  it("gives the row and the dish separate destinations", () => {
+    render(<MenuKitchenList kitchens={[kitchen]} labels={labels} />);
+
+    const venue = screen.getByRole("link", { name: "Open Salt & Stone" });
+    const dish = screen.getByRole("link", { name: "See Truffle Tagliatelle" });
+
+    expect(venue).toHaveAttribute("href", "/places/salt-and-stone");
+    expect(dish).toHaveAttribute("href", "/menu/dishes/truffle-tagliatelle");
+    // Anchors must be siblings, never nested — nesting is invalid HTML and
+    // breaks middle-click on both targets.
+    expect(venue.contains(dish)).toBe(false);
+    expect(dish.contains(venue)).toBe(false);
+  });
+
+  /**
+   * `must_try` arrives from a list endpoint, so roughly a third of entries have
+   * no `slug`. Those must render as content, not as a link to nowhere.
+   */
+  it("renders an inert dish line when the must-try has no menu row behind it", () => {
+    const noHref = { ...kitchen, dish: { name: "Risotto ai Funghi", kicker: "MOST NAMED HERE" } };
+    render(<MenuKitchenList kitchens={[noHref]} labels={labels} />);
+
+    expect(screen.getByText("Risotto ai Funghi")).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /^See / })).not.toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Open Salt & Stone" })).toBeInTheDocument();
+  });
+
+  it("still reads as a venue with no dish at all", () => {
+    const bare: MenuKitchenPreview = {
+      place: { id: "p2", slug: "green-room", name: "Green Room" },
+      href: "/places/green-room",
+    };
+    render(<MenuKitchenList kitchens={[bare]} labels={labels} />);
+
+    expect(screen.getByText("Green Room")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Open Green Room" })).toBeInTheDocument();
+  });
+
+  it("omits the show-more control until the caller wires one", () => {
+    const { rerender } = render(<MenuKitchenList kitchens={[kitchen]} labels={labels} />);
+    expect(screen.queryByRole("button", { name: "Show 10 more" })).not.toBeInTheDocument();
+
+    rerender(<MenuKitchenList kitchens={[kitchen]} labels={labels} onShowMore={() => {}} />);
+    expect(screen.getByRole("button", { name: "Show 10 more" })).toBeInTheDocument();
+  });
+});

package/src/components/menu-kitchen-list.tsx

@@ -0,0 +1,284 @@
+import { Check, ChevronRight, Clock, MessageSquare, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import type { MenuKitchenPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuKitchenList — the intent page's spine.
+ *
+ * Venues ranked by how often reviews name their dishes, each row carrying the
+ * dish that earned it its place. Not a grid of dishes: a shortlist of rooms you
+ * could walk into.
+ *
+ * ## Two targets, and why this is not `<RankedVenueList>`
+ *
+ * The row goes to the venue. The dish name opens the item drawer — the same
+ * drawer the dish tiles open, listing every kitchen that makes it and for how
+ * much. Those are two different destinations inside one row, and the hub's
+ * `<RankedVenueList>` wraps its ENTIRE row in a single `LinkComponent`, so it
+ * structurally cannot express a second one. That is the reason this exists
+ * rather than a variant flag on that component.
+ *
+ * The mechanism is a stretched overlay, as in `<MenuItem>`: the venue link is
+ * an absolutely-positioned sibling at `z-[1]`, and the dish link sits above it
+ * at `z-[2]`. Nesting one anchor inside another is invalid HTML and breaks
+ * middle-click on both.
+ *
+ * The dish name is underlined so it reads as a target before it is pressed. The
+ * chevron belongs to the venue and stays on the right, away from it — an
+ * unmarked second target inside a row that already navigates is a trap.
+ *
+ * ## The filtered state changes the row's reason for being there
+ *
+ * With a dish or dietary filter on, each row swaps its most-named dish for the
+ * one that actually matched, and the kicker changes with it ("MOST NAMED HERE"
+ * → "WHY IT MATCHES"). A filtered list whose rows still advertise their
+ * most-named dish is claiming the filter matched something it did not.
+ *
+ * ## Header
+ *
+ * Deliberately none. The page composes `<SectionHeader>` above it, the same way
+ * the events hub does, because the heading here carries a count and a "see the
+ * full ranking" link into `/top` that the list knows nothing about.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type MenuKitchenListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuKitchenListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuKitchenListLabels = {
+  /** Accessible prefix for the row's venue link, e.g. "Open". */
+  openVenue: (name: string) => string;
+  /** Accessible name for the dish link, e.g. "See Truffle Tagliatelle". */
+  openDish: (name: string) => string;
+  /** Accessible name for the open-now dot. */
+  openNow: string;
+  /** Reveals the next page of rows, e.g. "Show 10 more". */
+  showMore?: string;
+};
+
+export type MenuKitchenListProps = {
+  kitchens: MenuKitchenPreview[];
+  labels: MenuKitchenListLabels;
+  /**
+   * Reveals more rows IN PLACE. The intent page pages ten at a time and never
+   * navigates for the eleventh — the list is the page.
+   */
+  onShowMore?: () => void;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuKitchenList({
+  kitchens,
+  labels,
+  onShowMore,
+  linkComponent = DefaultLink,
+  className,
+}: MenuKitchenListProps) {
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <ol>
+        {kitchens.map((kitchen, index) => (
+          <li key={kitchen.place.slug} className="[&:first-child>div]:pt-0">
+            {/* The DS `Separator`, drawn BETWEEN rows rather than a `border-t`
+                with a `first:` reset on every row. It lives inside the `<li>`
+                because `<ol>` admits only list items, so a sibling element
+                between them would be invalid markup. */}
+            {index > 0 && <Separator />}
+            <KitchenRow kitchen={kitchen} labels={labels} linkComponent={linkComponent} />
+          </li>
+        ))}
+      </ol>
+
+      {onShowMore && labels.showMore && (
+        <button
+          type="button"
+          onClick={onShowMore}
+          className="mt-2 self-start rounded-md py-2 text-[13px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+        >
+          {labels.showMore}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function KitchenRow({
+  kitchen,
+  labels,
+  linkComponent: LinkComponent,
+}: {
+  kitchen: MenuKitchenPreview;
+  labels: MenuKitchenListLabels;
+  linkComponent: MenuLinkComponent;
+}) {
+  const { place, dish } = kitchen;
+  const openNow = place.open_now === true;
+
+  return (
+    <div className="relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5">
+      {/* The venue link, stretched. `z-[1]` — the dish link sits above it. */}
+      <LinkComponent
+        href={kitchen.href}
+        aria-label={labels.openVenue(place.name)}
+        className="absolute inset-0 z-[1] rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      />
+
+      <span className="relative h-[46px] w-[46px] shrink-0 overflow-hidden rounded-[11px] bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]">
+        {place.thumbnail_url && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={place.thumbnail_url}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+          />
+        )}
+        <span
+          title={openNow ? labels.openNow : undefined}
+          className={cn(
+            "absolute right-[5px] top-[5px] h-[7px] w-[7px] rounded-full ring-2 ring-white/85",
+            openNow ? "bg-[var(--free,oklch(0.55_0.13_155))]" : "bg-[oklch(0.8_0.01_60)]"
+          )}
+        />
+      </span>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
+        <span className="truncate text-[14.5px] font-bold tracking-[-0.01em] lg:text-[15.5px]">
+          {place.name}
+        </span>
+        <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">
+          {place.rating && (
+            <>
+              <Star className="h-[11px] w-[11px] shrink-0" aria-hidden />
+              {place.rating.rating}
+              {kitchen.metaLabel && " · "}
+            </>
+          )}
+          {kitchen.metaLabel}
+        </span>
+        {kitchen.hoursLabel && (
+          <span
+            className={cn(
+              "mt-[3px] inline-flex h-[21px] w-max items-center gap-[5px] rounded-md px-2 text-[10.5px] font-bold",
+              openNow
+                ? "bg-[oklch(0.96_0.02_155)] text-[var(--free,oklch(0.45_0.13_155))]"
+                : "bg-muted text-muted-foreground"
+            )}
+          >
+            <Clock className="h-2.5 w-2.5 shrink-0" aria-hidden />
+            {kitchen.hoursLabel}
+          </span>
+        )}
+      </div>
+
+      {dish && (
+        /* DESKTOP ONLY, where it is a column of its own beside the venue.
+           On the phone it wrapped to a third line under the row — kicker, dish,
+           mention count — which turned a four-line venue row into a seven-line
+           block and, ten rows down, buried the venue names the list exists to
+           be scanned for. The dish is not what a reader is choosing here; it is
+           one tap away on the venue's own page, with room to state it.
+
+           `order-5` puts it last in the visual order without moving it in the
+           DOM, where it belongs to the venue. */
+        <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+          <span
+            className={cn(
+              "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
+              dish.matched ? "text-accent" : "text-[oklch(0.72_0.01_60)]"
+            )}
+          >
+            {dish.kicker}
+            {dish.matched && dish.matchLabel && (
+              <span className="inline-flex items-center gap-1 rounded-[5px] bg-accent-subtle px-1.5 py-px text-[10.5px] font-bold normal-case tracking-normal text-accent">
+                <Check className="h-2.5 w-2.5 shrink-0" aria-hidden />
+                {dish.matchLabel}
+              </span>
+            )}
+          </span>
+
+          {dish.href ? (
+            <LinkComponent
+              href={dish.href}
+              aria-label={labels.openDish(dish.name)}
+              className="relative z-[2] mt-0.5 block truncate font-serif text-[13.5px] italic underline decoration-[oklch(0.84_0.01_60)] decoration-1 underline-offset-[3px] transition-colors hover:text-accent hover:decoration-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:text-[15px]"
+            >
+              {dish.name}
+            </LinkComponent>
+          ) : (
+            <span className="mt-0.5 block truncate font-serif text-[13.5px] italic lg:text-[15px]">
+              {dish.name}
+            </span>
+          )}
+
+          {dish.meta && (
+            <span className="mt-[3px] flex items-center gap-1 text-[11.5px] text-muted-foreground">
+              {!dish.matched && <MessageSquare className="h-2.5 w-2.5 shrink-0" aria-hidden />}
+              {dish.meta}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0">
+        {kitchen.priceLabel && (
+          <span className="text-base font-extrabold tabular-nums text-accent">
+            {kitchen.priceLabel}
+          </span>
+        )}
+        <ChevronRight className="h-[15px] w-[15px] shrink-0 text-muted-foreground" aria-hidden />
+      </div>
+    </div>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/**
+ * The list's own loading state, at the row's own footprint.
+ *
+ * It lives HERE, beside the component, and that is the whole point: a skeleton
+ * kept in the consuming app drifts the moment the row's padding or thumbnail
+ * size changes, and the drift is invisible until a page reflows on load. The
+ * measurements below are the same literals the row above uses — change one and
+ * the diff shows you the other.
+ */
+export function MenuKitchenListSkeleton({
+  rows = 10,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col", className)} aria-hidden>
+      {Array.from({ length: rows }, (_, index) => (
+        <div key={index}>
+          {index > 0 && <Separator />}
+          <div className="flex flex-wrap items-center gap-[11px] py-3 lg:flex-nowrap lg:gap-4 lg:py-3.5">
+            <Skeleton className="h-[46px] w-[46px] rounded-[11px] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5 lg:w-[226px] lg:flex-none">
+              <Skeleton className="h-4 w-[60%]" />
+              <Skeleton className="h-3 w-[45%]" />
+              <Skeleton className="h-[21px] w-[120px] rounded-md" />
+            </div>
+            {/* Desktop only, as the real row's dish column now is. */}
+            <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+              <Skeleton className="h-2.5 w-[90px]" />
+              <Skeleton className="mt-1.5 h-4 w-[70%]" />
+              <Skeleton className="mt-1.5 h-3 w-[40%]" />
+            </div>
+            <Skeleton className="ml-auto h-5 w-[56px] lg:ml-0" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/menu-mocks.ts

@@ -20,10 +20,17 @@
 
 import type {
   MenuConceptPreview,
+  MenuFamilyBlockPreview,
   MenuFamilyPreview,
+  MenuFilterChip,
+  MenuIndexEntry,
+  MenuIntentFigure,
   MenuIntentTile,
   MenuItemPreview,
+  MenuKitchenPreview,
+  MenuLoosenOption,
   MenuVenuePreview,
+  QaItem,
 } from "./menu-types";
 import type { PlacePreview } from "./place-types";
 
@@ -345,18 +352,6 @@ export const mockFamily: MenuFamilyPreview = {
   price_high: 84,
   price_median: 49,
   venue_photo_urls: [],
-  signature: {
-    item: {
-      id: "f1",
-      slug: "truffle-tagliatelle",
-      name: "Truffle Tagliatelle",
-      kind: "dish",
-      mentions: 17,
-      sizes_and_prices: [{ size: 320, price: 62 }],
-    },
-    why: "Salt & Stone",
-    href: "/menu/dishes/truffle-tagliatelle",
-  },
 };
 
 /** The drinks counterpart, and the reason `chip.count` is optional. */
@@ -375,17 +370,6 @@ export const mockDrinkFamily: MenuFamilyPreview = {
   price_high: 54,
   price_median: 28,
   venue_photo_urls: [],
-  signature: {
-    item: {
-      id: "f2",
-      slug: "house-negroni",
-      name: "House negroni",
-      kind: "drink",
-      mentions: 16,
-      sizes_and_prices: [{ size: 150, price: 32 }],
-    },
-    why: "The Copper Yard",
-  },
 };
 
 const intentGradient = (hue: number) =>
@@ -415,3 +399,194 @@ export const mockHubLabels = {
   openNow: "Open now",
   until: "until",
 };
+
+/* ── intent page ────────────────────────────────────────────────────────── */
+
+/**
+ * The intent page's kitchen rows.
+ *
+ * The gaps are the gaps the API actually has, and they are the reason the row
+ * degrades the way it does: `must_try` entries arrive from a LIST endpoint, so
+ * a third of them carry no `slug` (nothing to open — the dish line goes inert)
+ * and none of them carry `mentions` (only `review_ids.length`, which is absent
+ * for census items — so the count line disappears rather than reading zero).
+ * A layout that survives these survives production.
+ */
+export const mockKitchens: MenuKitchenPreview[] = [
+  {
+    place: placeBySlug("salt-and-stone"),
+    href: "/places/salt-and-stone",
+    metaLabel: "courtyard · Centru",
+    hoursLabel: "kitchen until 23:00",
+    priceLabel: "62 lei",
+    dish: {
+      name: "Truffle Tagliatelle",
+      href: "/menu/dishes/truffle-tagliatelle",
+      kicker: "MOST NAMED HERE",
+      meta: "17 reviews name it",
+    },
+  },
+  {
+    place: placeBySlug("the-copper-yard"),
+    href: "/places/the-copper-yard",
+    metaLabel: "pizzeria · Centru",
+    hoursLabel: "kitchen until 23:30",
+    priceLabel: "54 lei",
+    dish: {
+      name: "Tagliatelle cu Hribi",
+      href: "/menu/dishes/tagliatelle-cu-hribi",
+      kicker: "MOST NAMED HERE",
+      meta: "14 reviews name it",
+    },
+  },
+  {
+    // Closed, and its must-try has no live menu row — the dish line is inert.
+    place: { ...placeBySlug("the-quiet-hours"), open_now: false },
+    href: "/places/the-quiet-hours",
+    metaLabel: "bistro · Gheorgheni",
+    hoursLabel: "closed · opens 12:00",
+    priceLabel: "58 lei",
+    dish: { name: "Risotto ai Funghi", kicker: "MOST NAMED HERE" },
+  },
+  {
+    // No dish at all: the row must still read as a venue.
+    place: placeBySlug("green-room-canteen"),
+    href: "/places/green-room-canteen",
+    metaLabel: "bistro · Centru",
+    priceLabel: "38 lei",
+  },
+];
+
+/** The same rows in a filtered state — each answering the filter, not volunteering. */
+export const mockMatchedKitchens: MenuKitchenPreview[] = mockKitchens.slice(0, 3).map((kitchen) => ({
+  ...kitchen,
+  dish: kitchen.dish && {
+    ...kitchen.dish,
+    kicker: "WHY IT MATCHES",
+    meta: "mid-range · 300g",
+    matched: true,
+    matchLabel: "vegetarian",
+  },
+}));
+
+export const mockIntentFigures: MenuIntentFigure[] = [
+  { key: "total", value: "247", label: "kitchens" },
+  { key: "pizza", value: "120", label: "make a pizza", onSelect: () => {} },
+  { key: "pasta", value: "96", label: "make pasta", onSelect: () => {} },
+  { key: "open", value: "58", label: "open now", onSelect: () => {} },
+];
+
+/**
+ * Note there is no zero-count chip here, and that is not an oversight: the
+ * facets endpoint omits values that would match nothing, so a chip can only
+ * become `empty` client-side, after it was offered and the reader's next filter
+ * emptied it. The `Dead` story constructs that case deliberately.
+ */
+export const mockFilterChips: MenuFilterChip[] = [
+  { key: "open", label: "Open now", count: 58, active: true },
+  { key: "price", label: "Mid-range", count: 96 },
+  { key: "terrace", label: "Terrace", count: 31 },
+  { key: "veg", label: "Has a vegetarian dish", count: 84 },
+  { key: "late", label: "Serving past midnight", count: 4 },
+  { key: "centru", label: "Centru", count: 90 },
+];
+
+export const mockLoosenOptions: MenuLoosenOption[] = [
+  { key: "open", label: "Drop “Open now”", gainLabel: "+8 kitchens" },
+  { key: "price", label: "Drop “Mid-range”", gainLabel: "+7 kitchens" },
+  { key: "veg", label: "Drop “Vegetarian”", gainLabel: "+2 kitchens" },
+];
+
+/* ── the browse index ───────────────────────────────────────────────────── */
+
+/**
+ * The long tail is the point of these fixtures.
+ *
+ * Cluj's cuisine facet runs from 457 down to 1, and twenty-two of the
+ * thirty-eight have fewer than twenty places. A layout tested only on the head
+ * of that list looks fine and then ships a page whose last two columns are
+ * single digits.
+ */
+export const mockIndexEntries: MenuIndexEntry[] = [
+  ["Breakfast & brunch", 314],
+  ["Romanian", 299],
+  ["Bakery", 250],
+  ["Italian", 247],
+  ["Pizza", 245],
+  ["Fast food", 229],
+  ["Vegetarian", 172],
+  ["American", 153],
+  ["Vegan", 108],
+  ["Mediterranean", 78],
+  ["Seafood", 77],
+  ["Eastern European", 67],
+  ["Fusion", 61],
+  ["Middle Eastern", 58],
+  ["BBQ", 57],
+  ["Deli", 51],
+  ["Steakhouse", 49],
+  ["Japanese", 34],
+  ["French", 26],
+  ["Sushi", 23],
+  ["Turkish", 22],
+  ["Chinese", 14],
+  ["Greek", 12],
+  ["Indian", 11],
+  ["Thai", 7],
+  ["German", 5],
+  ["Lebanese", 3],
+  ["Portuguese", 1],
+].map(([name, count], index) => ({
+  slug: String(name).toLowerCase().replace(/[^a-z]+/g, "-"),
+  name: String(name),
+  count: Number(count),
+  href: `/menu/cuisines/${String(name).toLowerCase().replace(/[^a-z]+/g, "-")}`,
+  gradient: Object.values(mockGradients)[index % 5],
+}));
+
+export const mockFamilyBlock: MenuFamilyBlockPreview = {
+  slug: "italian",
+  name: "Italian",
+  venueCount: 247,
+  chips: [
+    { slug: "pizza", label: "Pizza", count: 120 },
+    { slug: "pasta", label: "Pasta", count: 96 },
+    { slug: "salad", label: "Salad", count: 88 },
+  ],
+  priceBandLabel: "22–86 lei",
+  photoUrls: [],
+  // Three, as the cuisines index sends, and stripped the same way: no dish and
+  // no price. The dish column is ~110px inside this card, which truncates the
+  // name and wraps its kicker to three lines; the price is already the band
+  // above.
+  venues: mockKitchens
+    .slice(0, 3)
+    .map((kitchen) => ({ ...kitchen, dish: undefined, priceLabel: undefined })),
+  href: "/menu/cuisines/italian",
+};
+
+/** No photographs, no venue, no price — the degraded block still reads. */
+export const mockBareFamilyBlock: MenuFamilyBlockPreview = {
+  slug: "portuguese",
+  name: "Portuguese",
+  venueCount: 1,
+  href: "/menu/cuisines/portuguese",
+};
+
+export const mockQa: QaItem[] = [
+  {
+    question: "Which Italian kitchen is best in Cluj?",
+    answer:
+      "Salt & Stone is named most often — seventeen reviews single out the truffle tagliatelle. The Copper Yard is second on volume and about eight lei cheaper across the menu.",
+  },
+  {
+    question: "What does an Italian main cost?",
+    answer:
+      "Pasta runs 38 to 84 lei and pizza 30 to 68 across these kitchens. Ninety-six of them sit in the mid-range price band.",
+  },
+  {
+    question: "Anywhere open late?",
+    answer:
+      "Four keep the kitchen going past midnight — The Copper Yard until 00:00 is the latest of the Italian rooms.",
+  },
+];