@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/event-detail-panel.tsx

@@ -1,8 +1,21 @@
 "use client";
 
 import * as React from "react";
-import { Calendar, ChevronRight, Radio, Star } from "lucide-react";
+import {
+  Calendar,
+  CalendarX,
+  ChevronRight,
+  Gift,
+  MapPin,
+  RefreshCw,
+  Star,
+  Ticket,
+  Timer,
+  Unplug,
+  User,
+} from "lucide-react";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 import { EventPosterFallback } from "./event-poster-fallback";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
@@ -13,48 +26,93 @@ import {
 } from "./event-types";
 
 /**
- * EventDetailPanel — the BODY of the event detail sheet.
+ * EventDetailPanel — the BODY of the event detail sheet, and the body the
+ * event PAGE is a superset of.
  *
  * Deliberately not a sheet. The design opens this as a side sheet over a dimmed
- * page on desktop and a bottom sheet on mobile, and the DS already ships `Sheet`
- * and `Drawer`; owning sheet mechanics a third time here would fork them. The
- * consuming app mounts this inside whichever container the breakpoint calls for.
+ * page on desktop and a bottom drawer on mobile, and the DS already ships
+ * `Sheet` and `Drawer`; owning sheet mechanics a third time here would fork
+ * them. The consuming app mounts this inside whichever container the
+ * breakpoint calls for, and passes the container's own controls (close, back,
+ * share) as `headerActions`, positioned over the poster by this component.
+ *
+ * ONE BODY, TWO HOSTS. The same regions in the same order everywhere: poster,
+ * title, when-line, one chip row, venue, line-up, about, external link, then a
+ * footer of one primary action over a row of ghost actions. The page renders
+ * these regions itself with more room; nothing here is invented twice.
  *
- * This is the terminal surface for acting on an event, which is why the cards
- * that open it carry no actions of their own — the footer is where booking and
- * directions live.
+ * THE HERO IS CAPPED, NOT A RATIO. 91% of posters are 4:5 flyers, and at 4:5 a
+ * hero took 68% of a side sheet and cut the venue card mid-row before any
+ * scrolling — the one thing this surface exists to answer. So `heroHeight`
+ * caps it: 300px on the 480px side sheet, 318px on the phone drawer, chosen so
+ * the venue card clears the fold even when status, fee, hype and two tags wrap
+ * the chip row onto a second line. It crops more than a 4:3 would, and that is
+ * the trade; the full flyer is one tap away on the page.
  *
- * Everything is injected: strings via `labels`, times via `formatters`, and the
- * close/share affordances as `headerActions` so the sheet container owns
- * dismissal (bearmenu sheets close by drag handle, not by back navigation).
+ * STATUS IS A CHIP, IN THE INFO BLOCK. Cards put pills on the poster because a
+ * card has nowhere else; a detail surface does, and a portrait flyer is busy
+ * artwork already. `live` and the free fee are `--success`; `soon` is the
+ * accent — success is reserved for live and free, and a third meaning on the
+ * same colour would flatten both. `ended` desaturates and dims the POSTER
+ * (never the whole surface, which drops text below AA), mutes the title and
+ * adds an explicit chip; the host replaces the primary action rather than
+ * disabling it.
+ *
+ * Everything is injected: strings via `labels`, times via `formatters`, the
+ * date line and the soon label composed by the caller (clause order is
+ * locale-dependent and "is this live" depends on the app's clock, not the
+ * DS's).
  */
 
 export type EventDetailPanelLinkProps = {
   href: string;
   className?: string;
   children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
 };
 
 function DefaultLink({ href, ...props }: EventDetailPanelLinkProps) {
   return <a href={href} {...props} />;
 }
 
+export type EventDetailStatus = "upcoming" | "soon" | "live" | "ended";
+
 export type EventDetailVenue = {
   name: string;
-  /** Address plus opening line, composed by the caller. */
-  meta?: string;
+  /** Address line, e.g. "Str. Iuliu Maniu 5". */
+  address?: string;
+  /** e.g. "4.7" — rendered with a star. */
   ratingLabel?: string;
+  /** e.g. "open until 20:00" — appended to the meta row when given. */
+  openLabel?: string;
+  /** Lights the green dot on the thumbnail. */
+  isOpenNow?: boolean;
   thumbnailUrl?: string;
+  /**
+   * The venue's own page. Without it the card is not a link and shows
+   * `labels.venueNoPage` beneath the name — a venue the ingest knows by name
+   * only, which is common and must not read as a broken link.
+   */
   href?: string;
 };
 
 export type EventDetailPanelLabels = {
   free: string;
   liveNow: string;
+  /** The ended chip, e.g. "Ended". */
+  ended: string;
   /** Section heading above the venue card. */
   venueHeading: string;
+  /** Under the venue name when the venue has no page, e.g. "name only — no venue page yet". */
+  venueNoPage: string;
+  /** Section heading above the performers. */
+  lineupHeading: string;
   /** Section heading above the description. */
   aboutHeading: string;
+  /** Italic placeholder when there is no description, e.g. "Event details coming soon." */
+  noDescription: string;
+  readMore: string;
+  readLess: string;
 };
 
 export type EventDetailPanelProps = {
@@ -63,21 +121,38 @@ export type EventDetailPanelProps = {
   formatters: EventFormatters;
   /**
    * The date line, composed by the caller — the design reads
-   * "Saturday, September 5 · Starts at 20:00", whose clause order and
-   * preposition are locale-dependent.
+   * "Tuesday, September 8 · Starts at 17:30", or "· time to be announced" when
+   * the hour is unknown. Clause order and preposition are locale-dependent.
    */
   dateLine: string;
+  /** The start as an ISO string; when given the date line is a `<time dateTime>`. */
+  dateTime?: string;
+  status?: EventDetailStatus;
+  /** The soon chip's text, composed by the caller — "Starts in 2h 10m". Required to render it. */
+  soonLabel?: string;
+  /** The hype tier, rendered as given (the app's own badge) in the chip row. */
+  hype?: React.ReactNode;
   venue?: EventDetailVenue;
-  /** Category chips beside the live/price chips. */
+  /** Activity tags, after status, fee and hype. */
   tags?: string[];
-  isLive?: boolean;
-  /** Close and share controls, positioned over the poster by this component. */
+  /** Performer names, in the order the API gave them. */
+  performers?: string[];
+  /** How many performers to show before the "show all" chip. Default 5. */
+  performersPreview?: number;
+  /** The "show all" chip's text, e.g. "Show all 8 performers". Required to render it. */
+  showAllPerformersLabel?: string;
+  /** Close, back and share controls, positioned over the poster by this component. */
   headerActions?: React.ReactNode;
-  /** Footer actions — the booking CTA and directions. Rendered in a sticky footer. */
+  /** The footer — usually an `EventDetailFooter`. Rendered below the scroll region. */
   footer?: React.ReactNode;
   /** An external link row, e.g. "View on Instagram". */
   externalLink?: React.ReactNode;
-  /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+  /**
+   * Poster height cap in px, or `"aspect"` for the poster's own 4:5. Defaults
+   * to 318 for `compact` (the phone drawer) and 300 otherwise (the side sheet).
+   */
+  heroHeight?: number | "aspect";
+  /** `compact` is the phone drawer: the shorter default hero cap. */
   size?: "compact" | "default";
   linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
   className?: string;
@@ -85,69 +160,76 @@ export type EventDetailPanelProps = {
   fallback?: React.ReactNode;
 };
 
+/** Description length past which the panel clamps to four lines with Read more. */
+const DESCRIPTION_CLAMP_CHARS = 220;
+
 const CHIP =
-  "inline-flex items-center gap-1 rounded-full border border-border px-2.5 text-xs";
+  "inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-full border border-border bg-card px-2.5 text-[11.5px] font-semibold text-muted-foreground";
+
+const SECTION_HEADING =
+  "text-[13px] font-extrabold tracking-[-0.01em] text-foreground";
+
+function heroHeightStyle(
+  heroHeight: number | "aspect",
+): React.CSSProperties | undefined {
+  return heroHeight === "aspect" ? undefined : { height: heroHeight };
+}
 
 export function EventDetailPanel({
   event,
   labels,
   formatters,
   dateLine,
+  dateTime,
+  status = "upcoming",
+  soonLabel,
+  hype,
   venue,
   tags,
-  isLive,
+  performers,
+  performersPreview = 5,
+  showAllPerformersLabel,
   headerActions,
   footer,
   externalLink,
+  heroHeight,
   size = "default",
   linkComponent: LinkComponent = DefaultLink,
   className,
   fallback = <EventPosterFallback />,
 }: EventDetailPanelProps) {
   const compact = size === "compact";
+  const cap = heroHeight ?? (compact ? 318 : 300);
   const fee = resolveEventEntryFee(event);
+  const isEnded = status === "ended";
+  const [descriptionExpanded, setDescriptionExpanded] = React.useState(false);
+  const [performersExpanded, setPerformersExpanded] = React.useState(false);
 
-  const venueCard = venue && (
-    <div className="flex items-center gap-3 rounded-[13px] border border-border p-2.5">
-      <div
-        className={cn(
-          "shrink-0 overflow-hidden rounded-[10px] bg-muted",
-          compact ? "h-12 w-12" : "h-[52px] w-[52px]"
-        )}
-      >
-        {venue.thumbnailUrl && (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={venue.thumbnailUrl}
-            alt=""
-            className="h-full w-full object-cover"
-            loading="lazy"
-            decoding="async"
-          />
-        )}
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className={cn("font-bold", compact ? "text-[13.5px]" : "text-sm")}>{venue.name}</div>
-        {venue.meta && (
-          <div className={cn("text-muted-foreground", compact ? "text-[11.5px]" : "text-xs")}>
-            {venue.meta}
-          </div>
-        )}
-        {venue.ratingLabel && (
-          <div className="mt-0.5 flex items-center gap-1 text-xs font-bold">
-            <Star className="h-3 w-3" aria-hidden />
-            {venue.ratingLabel}
-          </div>
-        )}
-      </div>
-      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
-    </div>
-  );
+  const description = event.description?.trim() ?? "";
+  const clampDescription =
+    description.length > DESCRIPTION_CLAMP_CHARS && !descriptionExpanded;
+
+  const shownPerformers =
+    performers && !performersExpanded
+      ? performers.slice(0, performersPreview)
+      : (performers ?? []);
+  const hiddenPerformers = (performers?.length ?? 0) - shownPerformers.length;
 
   return (
-    <div className={cn("flex h-full flex-col overflow-hidden bg-card", className)}>
+    <div
+      className={cn("flex h-full flex-col overflow-hidden bg-card", className)}
+    >
       <div className="flex-1 overflow-y-auto">
-        <div className="relative aspect-[4/5] shrink-0 overflow-hidden bg-muted">
+        {/* The poster. Ended dims and desaturates it — the photo, not the text. */}
+        <div
+          className={cn(
+            "relative shrink-0 overflow-hidden bg-muted",
+            cap === "aspect" && "aspect-[4/5]",
+            !event.poster_url && "bg-[image:var(--gradient-primary)]",
+            isEnded && "saturate-[.35] brightness-[.82]",
+          )}
+          style={heroHeightStyle(cap)}
+        >
           {event.poster_url ? (
             // eslint-disable-next-line @next/next/no-img-element
             <img
@@ -160,201 +242,637 @@ export function EventDetailPanel({
           ) : (
             fallback
           )}
-          {headerActions}
+          {/* Scrim into the card so the title below reads as continuous with the poster. */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-[34%] bg-gradient-to-t from-card via-card/50 to-transparent"
+          />
+          {headerActions && (
+            <div className="absolute inset-x-3 top-3 z-[2] flex items-center gap-2">
+              {headerActions}
+            </div>
+          )}
         </div>
 
-        <div
-          className={cn(
-            "flex flex-col gap-3.5",
-            compact ? "px-4 pt-4" : "px-[22px] pt-5"
-          )}
-        >
+        <div className="flex flex-col gap-[13px] px-[18px] pt-3.5">
+          {/* Two lines at most: the title is what the card already said. */}
           <h2
             className={cn(
-              "font-extrabold leading-[1.25] tracking-[-0.02em]",
-              compact ? "text-xl" : "text-[21px]"
+              "line-clamp-2 text-[21px] font-extrabold leading-[1.25] tracking-[-0.025em]",
+              isEnded ? "text-muted-foreground" : "text-foreground",
             )}
           >
             {event.title}
           </h2>
 
-          <div
-            className={cn(
-              "flex items-center gap-1.5 text-muted-foreground",
-              compact ? "text-[12.5px]" : "text-[13px]"
-            )}
-          >
-            <Calendar className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} aria-hidden />
-            {dateLine}
+          <div className="flex flex-wrap items-center gap-1.5 text-[13px] text-muted-foreground">
+            <Calendar className="h-3.5 w-3.5 shrink-0" aria-hidden />
+            {dateTime ? <time dateTime={dateTime}>{dateLine}</time> : dateLine}
           </div>
 
-          {/* The live chip is green, not the brand accent: "on now" reads as one
-              colour across every events surface, and it is the same green the app
-              already uses for "open now". */}
-          <div className="flex flex-wrap gap-1.5">
-            {isLive && (
-              <span
-                className={cn(
-                  CHIP,
-                  "h-7 border-success/30 bg-success/10 font-semibold text-success"
-                )}
-              >
-                <Radio className="h-3 w-3" aria-hidden />
-                {labels.liveNow}
-              </span>
-            )}
-            {tags?.map((tag) => (
-              <span key={tag} className={cn(CHIP, "h-7")}>
-                {tag}
-              </span>
-            ))}
-            {fee.kind === "free" && (
-              <span className={cn(CHIP, "h-7 border-success/40 font-semibold text-success")}>
-                {labels.free}
-              </span>
-            )}
-            {fee.kind === "paid" && (
-              <span className={cn(CHIP, "h-7")}>{formatters.price(fee.amountRon)}</span>
-            )}
-          </div>
+          <EventDetailChipRow
+            event={event}
+            labels={labels}
+            formatters={formatters}
+            status={status}
+            soonLabel={soonLabel}
+            hype={hype}
+            tags={tags}
+          />
 
           {venue && (
             <div>
-              <div className="pb-2 text-[13px] font-extrabold">{labels.venueHeading}</div>
-              {venue.href ? (
-                <LinkComponent href={venue.href} className="block">
-                  {venueCard}
-                </LinkComponent>
-              ) : (
-                venueCard
-              )}
+              <div className={cn(SECTION_HEADING, "pb-2")}>
+                {labels.venueHeading}
+              </div>
+              <EventDetailVenueCard
+                venue={venue}
+                labels={labels}
+                linkComponent={LinkComponent}
+              />
             </div>
           )}
 
-          {event.description && (
+          {performers && performers.length > 0 && (
             <div>
-              <div className="pb-1.5 text-[13px] font-extrabold">{labels.aboutHeading}</div>
-              <p
-                className={cn(
-                  "leading-[1.6] text-muted-foreground",
-                  compact ? "text-[13px]" : "text-[13.5px]"
+              <div className={cn(SECTION_HEADING, "pb-2")}>
+                {labels.lineupHeading}
+              </div>
+              <div className="flex flex-wrap gap-[7px]">
+                {shownPerformers.map((name) => (
+                  <span
+                    key={name}
+                    className="inline-flex h-[26px] items-center gap-1.5 rounded-full bg-muted px-2.5 text-xs font-semibold text-foreground"
+                  >
+                    <User
+                      className="h-3 w-3 text-muted-foreground"
+                      aria-hidden
+                    />
+                    {name}
+                  </span>
+                ))}
+                {hiddenPerformers > 0 && showAllPerformersLabel && (
+                  <button
+                    type="button"
+                    onClick={() => setPerformersExpanded(true)}
+                    className="inline-flex h-[26px] cursor-pointer items-center rounded-full border border-dashed border-border px-2.5 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {showAllPerformersLabel}
+                  </button>
                 )}
-              >
-                {event.description}
-              </p>
+              </div>
             </div>
           )}
 
+          <div>
+            <div className={cn(SECTION_HEADING, "pb-1.5")}>
+              {labels.aboutHeading}
+            </div>
+            {description ? (
+              <>
+                <p
+                  className={cn(
+                    "whitespace-pre-line text-[13.5px] leading-[1.6] text-foreground/85",
+                    clampDescription && "line-clamp-4",
+                  )}
+                >
+                  {description}
+                </p>
+                {description.length > DESCRIPTION_CLAMP_CHARS && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setDescriptionExpanded((current) => !current)
+                    }
+                    aria-expanded={descriptionExpanded}
+                    className="mt-1.5 cursor-pointer text-[13px] font-bold text-accent hover:underline focus-visible:outline-none focus-visible:underline"
+                  >
+                    {descriptionExpanded ? labels.readLess : labels.readMore}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-[13.5px] italic leading-[1.6] text-muted-foreground">
+                {labels.noDescription}
+              </p>
+            )}
+          </div>
+
           {externalLink}
-          <div className="h-2" aria-hidden />
+          <div className="h-1.5" aria-hidden />
         </div>
       </div>
 
-      {footer && (
-        <div
-          className={cn(
-            "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
-            compact
-              ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]"
-              : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
-          )}
-        >
-          <Separator className="absolute inset-x-0 top-0" />
+      {footer}
+    </div>
+  );
+}
+
+// ─── Footer ─────────────────────────────────────────────────────────────────
 
-          {footer}
+export type EventDetailFooterProps = {
+  /**
+   * The one primary action — a `Button` (reserve, tickets, directions when
+   * there is no booking, or "see what's on tonight" for an ended event). The
+   * host decides which; this only lays it out.
+   */
+  primary: React.ReactNode;
+  /**
+   * Zero to two ghost actions — `EventDetailGhostAction`s — drawn as one row
+   * above the primary with a hairline between them. Ghosts, not bordered
+   * boxes: three bordered buttons stacked read as three equal choices, and
+   * the reserve action is not one of three.
+   */
+  ghosts?: React.ReactNode[];
+  className?: string;
+};
+
+/** The sticky footer under the panel's scroll region: one primary over a ghost row. */
+export function EventDetailFooter({
+  primary,
+  ghosts = [],
+  className,
+}: EventDetailFooterProps) {
+  const visible = ghosts.filter(Boolean);
+  return (
+    <div
+      className={cn(
+        "relative flex shrink-0 flex-col gap-0.5 bg-card/95 px-3 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))] backdrop-blur-sm",
+        className,
+      )}
+    >
+      <Separator className="absolute inset-x-0 top-0" />
+      {visible.length > 0 && (
+        <div className="flex items-stretch">
+          {visible.map((ghost, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && (
+                <Separator orientation="vertical" className="my-2 h-auto" />
+              )}
+              {ghost}
+            </React.Fragment>
+          ))}
         </div>
       )}
+      {primary}
+    </div>
+  );
+}
+
+export type EventDetailGhostActionProps = {
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  href?: string;
+  linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  /** `_blank` for an outward link (a maps app). */
+  target?: string;
+  rel?: string;
+  className?: string;
+};
+
+const GHOST_CLASS =
+  "flex h-10 min-w-0 flex-1 cursor-pointer items-center justify-center gap-[7px] rounded-[10px] text-[13px] font-semibold text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none";
+
+/** A quiet action in the footer's ghost row. A link when `href` is given, a button otherwise. */
+export function EventDetailGhostAction({
+  icon,
+  children,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  target,
+  rel,
+  className,
+}: EventDetailGhostActionProps) {
+  const body = (
+    <>
+      {icon}
+      <span className="truncate">{children}</span>
+    </>
+  );
+  if (href) {
+    if (target) {
+      return (
+        <a
+          href={href}
+          target={target}
+          rel={rel}
+          onClick={onClick}
+          className={cn(GHOST_CLASS, className)}
+        >
+          {body}
+        </a>
+      );
+    }
+    return (
+      <LinkComponent
+        href={href}
+        onClick={onClick}
+        className={cn(GHOST_CLASS, className)}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(GHOST_CLASS, className)}
+    >
+      {body}
+    </button>
+  );
+}
+
+// ─── Error ──────────────────────────────────────────────────────────────────
+
+export type EventDetailPanelErrorProps = {
+  title: string;
+  description: string;
+  retryLabel: string;
+  onRetry: () => void;
+  /** The way onward, e.g. "See what's on tonight". */
+  secondaryLabel?: string;
+  secondaryHref?: string;
+  onSecondary?: () => void;
+  linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+  /** Close/share controls over the (empty) hero — same slot as the panel. */
+  headerActions?: React.ReactNode;
+  className?: string;
+};
+
+/**
+ * The panel when the event could not be loaded: an empty gradient hero so the
+ * sheet keeps its shape and its controls, then the message and a way onward —
+ * not only an apology.
+ */
+export function EventDetailPanelError({
+  title,
+  description,
+  retryLabel,
+  onRetry,
+  secondaryLabel,
+  secondaryHref,
+  onSecondary,
+  linkComponent: LinkComponent = DefaultLink,
+  headerActions,
+  className,
+}: EventDetailPanelErrorProps) {
+  return (
+    <div
+      className={cn("flex h-full flex-col overflow-hidden bg-card", className)}
+    >
+      <div className="relative flex aspect-video shrink-0 items-center justify-center bg-[image:var(--gradient-primary)] text-primary-foreground/90">
+        <CalendarX className="h-12 w-12" aria-hidden />
+        {headerActions && (
+          <div className="absolute inset-x-3 top-3 z-[2] flex items-center gap-2">
+            {headerActions}
+          </div>
+        )}
+      </div>
+      <div
+        role="alert"
+        className="flex flex-1 flex-col items-center justify-center gap-3 px-6 py-8 text-center"
+      >
+        <span className="flex h-[62px] w-[62px] items-center justify-center rounded-full bg-muted text-muted-foreground">
+          <Unplug className="h-[26px] w-[26px]" aria-hidden />
+        </span>
+        <h2 className="text-[17px] font-extrabold tracking-[-0.02em]">
+          {title}
+        </h2>
+        <p className="text-[13.5px] leading-[1.6] text-muted-foreground">
+          {description}
+        </p>
+        <div className="flex w-full flex-col gap-[9px] pt-1">
+          <Button onClick={onRetry} fullWidth>
+            <RefreshCw aria-hidden />
+            {retryLabel}
+          </Button>
+          {secondaryLabel &&
+            (secondaryHref ? (
+              <Button asChild variant="outline" fullWidth>
+                <LinkComponent href={secondaryHref}>
+                  {secondaryLabel}
+                </LinkComponent>
+              </Button>
+            ) : (
+              <Button variant="outline" fullWidth onClick={onSecondary}>
+                {secondaryLabel}
+              </Button>
+            ))}
+        </div>
+      </div>
     </div>
   );
 }
 
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
 export type EventDetailPanelSkeletonProps = {
-  /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+  /** `compact` is the phone drawer: the shorter default hero cap. */
   size?: "compact" | "default";
-  /** Close and share controls, positioned over the poster — same slot as the real component. */
+  heroHeight?: number | "aspect";
+  /** Close and share controls over the poster — same slot as the real component. */
   headerActions?: React.ReactNode;
+  /**
+   * Announces the skeleton as a busy status region with this text, e.g.
+   * "Loading the event". Without it the skeleton is `aria-hidden` and the host
+   * is expected to announce loading itself.
+   */
+  label?: string;
   className?: string;
 };
 
-/** Mirrors `<EventDetailPanel>`'s geometry exactly: the hero scrolls away with the body, the footer is sticky. */
+/** Mirrors `<EventDetailPanel>`'s geometry: capped hero, two title lines, when-line, chips, venue card, line-up, about, ghost row and primary. */
 export function EventDetailPanelSkeleton({
   size = "default",
+  heroHeight,
   headerActions,
+  label,
   className,
 }: EventDetailPanelSkeletonProps) {
-  const compact = size === "compact";
-
+  const cap = heroHeight ?? (size === "compact" ? 318 : 300);
   return (
     <div
-      aria-hidden="true"
+      {...(label
+        ? { role: "status", "aria-busy": true, "aria-label": label }
+        : { "aria-hidden": true })}
       className={cn("flex h-full flex-col overflow-hidden bg-card", className)}
     >
       <div className="flex-1 overflow-y-auto">
-        <div className="relative aspect-[4/5] shrink-0 overflow-hidden bg-muted">
-          {headerActions}
-        </div>
-
         <div
           className={cn(
-            "flex flex-col gap-3.5",
-            compact ? "px-4 pt-4" : "px-[22px] pt-5"
+            "relative shrink-0 bg-muted",
+            cap === "aspect" && "aspect-[4/5]",
           )}
+          style={heroHeightStyle(cap)}
         >
-          <Skeleton className={cn("w-3/4", compact ? "h-5" : "h-[21px]")} />
-
-          <div className="flex items-center gap-1.5">
-            <Skeleton className={cn("shrink-0 rounded-full", compact ? "h-3.5 w-3.5" : "h-4 w-4")} />
-            <Skeleton className={cn("w-48", compact ? "h-[12.5px]" : "h-[13px]")} />
+          {headerActions && (
+            <div className="absolute inset-x-3 top-3 z-[2] flex items-center gap-2">
+              {headerActions}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col gap-[13px] px-[18px] pt-3.5">
+          <div className="flex flex-col gap-1.5">
+            <Skeleton className="h-[22px] w-[86%]" />
+            <Skeleton className="h-[22px] w-[58%]" />
           </div>
-
-          <div className="flex flex-wrap gap-1.5">
-            <Skeleton className="h-7 w-20 rounded-full" />
-            <Skeleton className="h-7 w-16 rounded-full" />
+          <Skeleton className="h-3.5 w-[54%]" />
+          <div className="flex gap-[7px]">
+            <Skeleton className="h-6 w-[74px] rounded-full" />
+            <Skeleton className="h-6 w-[88px] rounded-full" />
+            <Skeleton className="h-6 w-[66px] rounded-full" />
           </div>
-
           <div>
-            <Skeleton className="mb-2 h-[13px] w-28" />
-            <div className="flex items-center gap-3 rounded-[13px] border border-border p-2.5">
-              <Skeleton
-                className={cn(
-                  "shrink-0 rounded-[10px]",
-                  compact ? "h-12 w-12" : "h-[52px] w-[52px]"
-                )}
-              />
-              <div className="min-w-0 flex-1">
-                <Skeleton className={cn("w-1/2", compact ? "h-[13.5px]" : "h-3.5")} />
-                <Skeleton className={cn("mt-1 w-3/4", compact ? "h-[11.5px]" : "h-3")} />
-              </div>
-              <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
+            <Skeleton className="mb-2 h-3.5 w-24" />
+            <Skeleton className="h-[74px] w-full rounded-[13px]" />
+          </div>
+          <div>
+            <Skeleton className="mb-2 h-3.5 w-[70px]" />
+            <div className="flex gap-[7px]">
+              <Skeleton className="h-[26px] w-[92px] rounded-full" />
+              <Skeleton className="h-[26px] w-[104px] rounded-full" />
             </div>
           </div>
-
           <div>
-            <Skeleton className="mb-1.5 h-[13px] w-32" />
+            <Skeleton className="mb-1.5 h-3.5 w-[120px]" />
             <div className="flex flex-col gap-1.5">
-              <Skeleton className={cn("w-full", compact ? "h-[13px]" : "h-[13.5px]")} />
-              <Skeleton className={cn("w-full", compact ? "h-[13px]" : "h-[13.5px]")} />
-              <Skeleton className={cn("w-2/3", compact ? "h-[13px]" : "h-[13.5px]")} />
+              <Skeleton className="h-[13px] w-full" />
+              <Skeleton className="h-[13px] w-full" />
+              <Skeleton className="h-[13px] w-[72%]" />
             </div>
           </div>
-
-          <div className="h-2" aria-hidden />
+          <div className="h-1.5" aria-hidden />
         </div>
       </div>
+      <div className="relative flex shrink-0 flex-col gap-0.5 bg-card/95 px-3 pt-3 pb-[max(0.875rem,env(safe-area-inset-bottom))]">
+        <Separator className="absolute inset-x-0 top-0" />
+        <div className="flex items-stretch gap-2 py-0.5">
+          <Skeleton className="h-9 flex-1 rounded-[10px]" />
+          <Skeleton className="h-9 flex-1 rounded-[10px]" />
+        </div>
+        <Skeleton className="h-11 w-full rounded-xl" />
+      </div>
+    </div>
+  );
+}
+
+// ─── Chip row ───────────────────────────────────────────────────────────────
+
+export type EventDetailChipRowProps = Pick<
+  EventDetailPanelProps,
+  "event" | "formatters" | "status" | "soonLabel" | "hype" | "tags"
+> & {
+  /** Only the chip strings — a page rendering the row alone need not name the section headings. */
+  labels: Pick<EventDetailPanelLabels, "free" | "liveNow" | "ended">;
+  className?: string;
+};
+
+/**
+ * One wrapping row, all 24px: status, fee, hype, then activity tags. Exported
+ * so the page renders the same row above its title — it is the panel's row,
+ * not a second one.
+ */
+export function EventDetailChipRow({
+  event,
+  labels,
+  formatters,
+  status = "upcoming",
+  soonLabel,
+  hype,
+  tags,
+  className,
+}: EventDetailChipRowProps) {
+  const fee = resolveEventEntryFee(event);
+  return (
+    <div className={cn("flex flex-wrap gap-[7px]", className)}>
+      {status === "live" && (
+        <span
+          className={cn(
+            CHIP,
+            "border-success/30 bg-success/10 font-bold text-success",
+          )}
+        >
+          <span aria-hidden className="h-1.5 w-1.5 rounded-full bg-success" />
+          {labels.liveNow}
+        </span>
+      )}
+      {status === "soon" && soonLabel && (
+        <span
+          className={cn(
+            CHIP,
+            "border-accent/30 bg-accent-subtle font-bold text-accent",
+          )}
+        >
+          <Timer className="h-3 w-3" aria-hidden />
+          {soonLabel}
+        </span>
+      )}
+      {status === "ended" && (
+        <span
+          className={cn(
+            CHIP,
+            "border-transparent bg-muted font-bold text-muted-foreground",
+          )}
+        >
+          {labels.ended}
+        </span>
+      )}
+      {fee.kind === "free" && (
+        <span
+          className={cn(
+            CHIP,
+            "border-success/30 bg-success/10 font-bold text-success",
+          )}
+        >
+          <Gift className="h-3 w-3" aria-hidden />
+          {labels.free}
+        </span>
+      )}
+      {fee.kind === "paid" && (
+        <span className={cn(CHIP, "text-foreground")}>
+          <Ticket className="h-3 w-3" aria-hidden />
+          {formatters.price(fee.amountRon)}
+        </span>
+      )}
+      {hype}
+      {tags?.map((tag) => (
+        <span key={tag} className={CHIP}>
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+// ─── Venue card ─────────────────────────────────────────────────────────────
+
+export type EventDetailVenueCardProps = {
+  venue: EventDetailVenue;
+  labels: Pick<EventDetailPanelLabels, "venueNoPage">;
+  linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+  /** Thumbnail size in px: 52 in the sheet, 64 on the page. */
+  thumbnailSize?: 52 | 64;
+  /** An inline action beside the chevron — the page's "Open in Maps". */
+  action?: React.ReactNode;
+  className?: string;
+};
 
+/**
+ * The venue row: cover with an open-now dot, name, address · rating · open
+ * label, a chevron when it links. Without `venue.href` it is not a link and
+ * says so — a venue the ingest knows by name only must not read as broken.
+ */
+export function EventDetailVenueCard({
+  venue,
+  labels,
+  linkComponent: LinkComponent = DefaultLink,
+  thumbnailSize = 52,
+  action,
+  className,
+}: EventDetailVenueCardProps) {
+  const meta =
+    venue.href && (venue.address || venue.ratingLabel || venue.openLabel);
+  // The main area (thumb, name, meta, chevron) is the link; `action` sits
+  // BESIDE it, never inside — an anchor cannot contain another control, and a
+  // page's "Open in Maps" must not navigate to the venue instead.
+  const main = (
+    <>
       <div
         className={cn(
-          "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
-          compact
-            ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]"
-            : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
+          "relative shrink-0 overflow-hidden rounded-[11px] bg-muted",
+          thumbnailSize === 64 ? "h-16 w-16" : "h-[52px] w-[52px]",
+          !venue.thumbnailUrl &&
+            "flex items-center justify-center text-muted-foreground",
         )}
       >
-        <Separator className="absolute inset-x-0 top-0" />
-
-        <Skeleton className="h-[46px] flex-1 rounded-xl" />
-        <Skeleton className="h-[46px] w-24 rounded-xl" />
+        {venue.thumbnailUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={venue.thumbnailUrl}
+            alt=""
+            className="h-full w-full object-cover"
+            loading="lazy"
+            decoding="async"
+          />
+        ) : (
+          <MapPin className="h-5 w-5" aria-hidden />
+        )}
+        {venue.isOpenNow && (
+          <span
+            aria-hidden
+            className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-success ring-2 ring-card"
+          />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-bold">{venue.name}</div>
+        {venue.href ? (
+          meta && (
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+              {venue.address && (
+                <span className="truncate">{venue.address}</span>
+              )}
+              {venue.address && venue.ratingLabel && (
+                <span aria-hidden className="text-border">
+                  ·
+                </span>
+              )}
+              {venue.ratingLabel && (
+                <span className="inline-flex shrink-0 items-center gap-1">
+                  <Star className="h-[11px] w-[11px]" aria-hidden />
+                  {venue.ratingLabel}
+                </span>
+              )}
+              {venue.openLabel && (
+                <>
+                  <span aria-hidden className="text-border">
+                    ·
+                  </span>
+                  <span className="shrink-0">{venue.openLabel}</span>
+                </>
+              )}
+            </div>
+          )
+        ) : (
+          <div className="mt-0.5 text-xs text-muted-foreground">
+            {labels.venueNoPage}
+          </div>
+        )}
       </div>
+      {venue.href && (
+        <ChevronRight
+          className="h-[17px] w-[17px] shrink-0 text-muted-foreground"
+          aria-hidden
+        />
+      )}
+    </>
+  );
+  const MAIN_CLASS = "flex min-w-0 flex-1 items-center gap-3";
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-[13px] border border-border bg-card p-2.5",
+        className,
+      )}
+    >
+      {venue.href ? (
+        <LinkComponent
+          href={venue.href}
+          className={cn(
+            MAIN_CLASS,
+            "-m-1 rounded-[11px] p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          {main}
+        </LinkComponent>
+      ) : (
+        <div className={MAIN_CLASS}>{main}</div>
+      )}
+      {action}
     </div>
   );
 }