/** Shared surfaces for booking list & detail — frosted glass, brand accents. */

export const bookingGlass = {
  card: "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
  panel:
    "border border-border/50 bg-card/80 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/65",
  rail: "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
  iconWell:
    "border border-border/50 bg-background/70 text-foreground/75 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-background/50",
  iconWellHero:
    "border border-border/50 bg-background/60 text-foreground shadow-sm ring-1 ring-border/30 backdrop-blur-md supports-[backdrop-filter]:bg-background/45",
  activeTab:
    "border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] shadow-sm backdrop-blur-md ring-1 ring-[color:var(--freight-brand-ring)]",
  iconWellGreen:
    "border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] shadow-sm backdrop-blur-sm",
  tabRail:
    "rounded-xl border border-border/60 bg-muted/10 p-2 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/5",
  tableHeader:
    "bg-muted/30 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/20",
} as const;

export const bookingSurface = {
  page: "min-h-screen bg-background ",
  pageInner: "mx-auto max-w-[1600px] space-y-5 ",
  hero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
  heroGlow:
    "pointer-events-none absolute -right-24 -top-24 size-72 rounded-full bg-muted/40 blur-3xl",
  heroSheen:
    "pointer-events-none absolute inset-0 bg-gradient-to-br from-background/40 via-transparent to-muted/20",
  panel: `overflow-hidden rounded-xl ${bookingGlass.panel}`,
  panelToolbar: `flex flex-wrap items-center justify-between gap-3 border-b border-border/50 px-4 py-3.5 sm:px-5 ${bookingGlass.rail}`,
  tableWrap: "px-0",
  sectionCard: `overflow-hidden rounded-xl transition-shadow duration-200 hover:shadow-md ${bookingGlass.card}`,
  sectionHeader:
    "flex items-center gap-3 border-b border-border/50 bg-muted/15 px-5 py-4 backdrop-blur-sm",
  sectionBody: "px-5 py-5",
  detailHero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
  sectionIcon: `flex size-9 shrink-0 items-center justify-center rounded-lg ${bookingGlass.iconWellGreen}`,
  sectionIconLg: `flex size-11 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
  valueCard:
    "rounded-xl border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] p-4 shadow-sm backdrop-blur-md",
  stickySidebar: "lg:sticky lg:top-6 lg:self-start",
  metricTile:
    "rounded-lg border border-border/50 bg-background/70 px-4 py-3 shadow-xs backdrop-blur-sm",
  emptyState:
    "flex flex-col items-center justify-center gap-3 px-6 py-16 text-center",
} as const;

export const bookingInput = {
  search:
    "h-10 w-full rounded-lg border border-border/60 bg-background/80 pl-10 text-sm shadow-xs backdrop-blur-sm transition-[box-shadow,border-color] placeholder:text-muted-foreground focus-visible:border-[color:var(--freight-brand)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--freight-brand-ring)] sm:max-w-xs",
} as const;

export const bookingTable = {
  headerCell:
    "h-11 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground",
  rowHover:
    "transition-colors hover:bg-muted/25 data-[state=selected]:bg-muted/30",
  rowIcon: `flex size-10 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
} as const;
