Bento

import * as React from "react"
import { ArrowUpRightIcon, MousePointer2Icon, TrendingDownIcon, UserRoundXIcon, type LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LogoMark } from "@/components/ui/logo-mark"
import { StatusBadge } from "@/components/ui/status-badge"

import { BentoStage } from "./bento-01.client"
import { ACCOUNTS, ACCOUNTS_KPI, ALERTS, EYEBROW, HEADLINE, LEDE, MOTION_LABEL, REVENUE, type AlertKind } from "./bento-01.data"

/** One tile: its heading and line on the frame, its picture on the sheet. */
function Tile({ title, body, className, children }: { title: string; body: string; className?: string; children: React.ReactNode }) {
  return (
    <li className={cn("flex min-w-0", className)}>
      <Card className="w-full">
        <CardHeader>
          <CardTitle>
            <h3>{title}</h3>
          </CardTitle>
          <CardDescription className="text-pretty">{body}</CardDescription>
        </CardHeader>
        <CardContent className="relative flex min-h-60 flex-col justify-center">{children}</CardContent>
      </Card>
    </li>
  )
}

/** A smooth line through the points: each segment a cubic whose handles follow its neighbours. */
function smoothPath(points: readonly (readonly [number, number])[]): string {
  const r = (n: number) => Math.round(n * 10) / 10
  return points.reduce((path, [x, y], i) => {
    if (i === 0) return `M${r(x)} ${r(y)}`
    const [x0, y0] = points[i - 1]
    const [xa, ya] = points[i - 2] ?? points[i - 1]
    const [xb, yb] = points[i + 1] ?? points[i]
    return `${path} C${r(x0 + (x - xa) / 6)} ${r(y0 + (y - ya) / 6)} ${r(x - (xb - x0) / 6)} ${r(y - (yb - y0) / 6)} ${r(x)} ${r(y)}`
  }, "")
}

/** The revenue line drawing itself: the line, then its wash, then the dot at today. One image, named by its caption. */
function RevenuePicture() {
  const { values } = REVENUE
  const x = (i: number) => 8 + (i * 464) / (values.length - 1)
  const y = (v: number) => 136 - ((v - 28) / 22) * 124
  const points = values.map((v, i) => [x(i), y(v)] as const)
  const line = smoothPath(points)
  const [endX, endY] = points[points.length - 1]
  return (
    <div role="img" aria-label={REVENUE.caption} className="flex flex-col gap-4">
      <div className="flex items-baseline justify-between gap-3">
        <span className="text-xs text-muted-foreground">{REVENUE.label}</span>
        <span className="flex items-center gap-2">
          <span className="type-numeral text-xl">{REVENUE.figure}</span>
          <StatusBadge status="up" variant="success" label={REVENUE.delta} />
        </span>
      </div>
      <svg viewBox="0 0 480 150" className="h-auto w-full overflow-visible">
        {[30, 40, 50].map((tick) => (
          <line key={tick} x1={0} x2={480} y1={y(tick)} y2={y(tick)} stroke="var(--chart-grid)" strokeDasharray="3 4" />
        ))}
        <path
          d={`${line} L${endX} 150 L8 150 Z`}
          fill="var(--chart-1)"
          fillOpacity={0.1}
          className="motion-safe:in-data-[playback=running]:animate-[bento-01-fill_12s_linear_infinite]"
        />
        <path
          d={line}
          fill="none"
          stroke="var(--chart-1)"
          strokeWidth={2}
          strokeLinecap="round"
          pathLength={1}
          strokeDasharray="1 1"
          className="motion-safe:in-data-[playback=running]:animate-[bento-01-draw_12s_linear_infinite]"
        />
        <circle
          cx={endX}
          cy={endY}
          r={4.5}
          fill="var(--card)"
          stroke="var(--chart-1)"
          strokeWidth={2}
          className="origin-center [transform-box:fill-box] motion-safe:in-data-[playback=running]:animate-[bento-01-pop_12s_var(--ease-standard)_infinite]"
        />
      </svg>
      <div className="flex justify-between text-xs text-muted-foreground max-sm:[&>*:nth-child(even)]:invisible">
        {REVENUE.months.map((month) => (
          <span key={month}>{month}</span>
        ))}
      </div>
    </div>
  )
}

const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

/** One digit of a counter: a strip of the ten figures in a one-figure window, set on its own figure and rolled from the older one. */
function Digit({ to, from }: { to: number; from: number }) {
  const vars = { transform: `translateY(-${to}em)`, "--from": `-${from}em`, "--to": `-${to}em` } as React.CSSProperties
  return (
    <span className="relative inline-block overflow-hidden">
      {/* The window is as wide as the figure it lands on, so the still frame spaces like plain text. */}
      <span className="invisible">{to}</span>
      <span
        style={vars}
        className="absolute inset-x-0 top-0 flex flex-col items-center motion-safe:in-data-[playback=running]:animate-[bento-01-roll_12s_linear_infinite]"
      >
        {DIGITS.map((digit) => (
          <span key={digit}>{digit}</span>
        ))}
      </span>
    </span>
  )
}

/** The count of active accounts, rolling up from last month's to this month's; the sentence is what a screen reader hears. */
function CounterPicture() {
  const now = formatNumber(ACCOUNTS_KPI.value)
  const then = formatNumber(ACCOUNTS_KPI.from).padStart(now.length, "0")
  return (
    <div role="img" aria-label={ACCOUNTS_KPI.caption} className="flex flex-col items-start gap-3">
      <span className="text-xs text-muted-foreground">{ACCOUNTS_KPI.label}</span>
      <span className="type-numeral flex text-5xl leading-none">
        {[...now].map((char, i) =>
          /\d/.test(char) ? <Digit key={i} to={Number(char)} from={/\d/.test(then[i]) ? Number(then[i]) : 0} /> : <span key={i}>{char}</span>
        )}
      </span>
      <span className="flex items-center gap-2 text-xs text-muted-foreground">
        <StatusBadge status="up" variant="success" label={ACCOUNTS_KPI.delta} />
        {ACCOUNTS_KPI.note}
      </span>
      <span className="mt-4 flex h-16 w-full items-end gap-1">
        {ACCOUNTS_KPI.weeks.map((week, index) => (
          <span
            key={index}
            style={{ height: `${(week / Math.max(...ACCOUNTS_KPI.weeks)) * 100}%` }}
            className={cn("flex-1 rounded-t-[3px]", index === ACCOUNTS_KPI.weeks.length - 1 ? "bg-(--chart-1)" : "bg-(--chart-1)/40")}
          />
        ))}
      </span>
      <span className="text-xs text-muted-foreground">{ACCOUNTS_KPI.weeksLabel}</span>
    </div>
  )
}

const ALERT_LOOK: Record<AlertKind, { icon: LucideIcon; tile: string }> = {
  churn: { icon: UserRoundXIcon, tile: "bg-danger-muted text-danger" },
  upgrade: { icon: ArrowUpRightIcon, tile: "bg-success-muted text-success" },
  trial: { icon: TrendingDownIcon, tile: "bg-warning-muted text-warning" },
}

/** Each card's own arrival, newest first: the oldest lands on top and is pushed down as the others come. */
const ARRIVE = [
  "motion-safe:in-data-[playback=running]:animate-[bento-01-arrive-0_12s_var(--ease-standard)_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-01-arrive-1_12s_var(--ease-standard)_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-01-arrive-2_12s_var(--ease-standard)_infinite]",
]

/** Three alerts arriving one at a time, each pushing the last one down. Decoration: the tile's words say what alerts do. */
function AlertsPicture() {
  return (
    <ul aria-hidden="true" inert className="flex flex-col gap-2">
      {ALERTS.items.map((alert, index) => {
        const { icon: Icon, tile } = ALERT_LOOK[alert.kind]
        return (
          <li key={alert.title} className={cn("flex h-14 items-center gap-3 elev-1 px-3", ARRIVE[index])}>
            <span className={cn("flex size-8 shrink-0 items-center justify-center rounded-md", tile)}>
              <Icon className="size-4" />
            </span>
            <span className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-sm font-medium">{alert.title}</span>
              <span className="truncate text-xs text-muted-foreground">{alert.detail}</span>
            </span>
            <span className="self-start pt-2 text-xs text-muted-foreground tabular-nums">{alert.time}</span>
          </li>
        )
      })}
    </ul>
  )
}

/** Where each row is lit while the pointer rests on it: the second row is home, the rest take their turn. */
const ROW_LIGHT = [
  "motion-safe:in-data-[playback=running]:animate-[bento-01-visit_12s_linear_7.2s_infinite]",
  "bg-muted/50 motion-safe:in-data-[playback=running]:animate-[bento-01-home_12s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-01-visit_12s_linear_2.4s_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-01-visit_12s_linear_4.8s_infinite]",
]

/** The accounts table with a pointer moving down it and each row lighting as it passes. Decoration beside the tile's words. */
function AccountsPicture() {
  const { columns, rows } = ACCOUNTS
  const grid = "grid grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,0.8fr)] items-center gap-3 px-3"
  return (
    <div aria-hidden="true" inert className="relative">
      <div className={cn(grid, "h-9 border-b border-rule text-xs text-muted-foreground")}>
        <span>{columns.account}</span>
        <span>{columns.plan}</span>
        <span className="text-right">{columns.mrr}</span>
        <span className="text-right">{columns.tickets}</span>
      </div>
      {rows.map((row, index) => (
        <div key={row.account} className={cn(grid, "h-10 rounded-md border-b border-border text-sm last:border-b-0", ROW_LIGHT[index])}>
          <LogoMark name={row.account} size="sm" className="truncate" />
          <span className="truncate text-muted-foreground">{row.plan}</span>
          <span className="text-right tabular-nums">{row.mrr}</span>
          <span className="text-right text-muted-foreground tabular-nums">{row.tickets}</span>
        </div>
      ))}
      <MousePointer2Icon className="absolute top-[5.5rem] left-[86%] size-5 fill-foreground text-background motion-safe:in-data-[playback=running]:animate-[bento-01-pointer_12s_var(--ease-emphasized)_infinite]" />
    </div>
  )
}

/**
 * The overview bento: four unequal tiles under one claim, each a small moving
 * picture of a Northwind workspace built from the kit's own parts — the
 * revenue line drawing itself, the count of active accounts rolling up, alerts
 * arriving one on another, and a pointer walking down the accounts table
 * lighting each row. A wide tile and a narrow one, then a narrow and a wide:
 * six columns from `lg`, two on a tablet, one on a phone.
 *
 * The pictures move only on the kit's MotionStage, which the island hands
 * this section's keyframes: it runs while the grid is on screen, the tab is
 * in front and the reader has not asked for less motion, and its Pause motion
 * toggle holds them still. Held still, each shows its final frame, so the
 * information is there without the motion. The
 * chart and the counter carry figures, so each is an image named by the
 * sentence it shows; the alerts and the table are decoration beside words
 * that say the same. A server component; every word and figure is in
 * `./bento-01.data`.
 */
export function Bento01() {
  const titleId = React.useId()

  return (
    <section
      data-section="bento-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background px-4 py-16 text-foreground md:px-6 md:py-24"
    >
      <div className="mx-auto max-w-7xl">
        <div className="max-w-3xl">
          <p className="type-eyebrow">{EYEBROW}</p>
          <h2 id={titleId} className="type-display mt-4 text-3xl text-balance md:text-4xl">
            {HEADLINE}
          </h2>
          <p className="mt-5 text-base/7 text-pretty text-muted-foreground md:text-lg/8">{LEDE}</p>
        </div>

        <div className="mt-10 md:mt-12">
          <BentoStage label={MOTION_LABEL}>
            <ul className="grid gap-4 md:grid-cols-2 lg:grid-cols-6">
              <Tile title={REVENUE.title} body={REVENUE.body} className="md:col-span-2 lg:col-span-4">
                <RevenuePicture />
              </Tile>
              <Tile title={ACCOUNTS_KPI.title} body={ACCOUNTS_KPI.body} className="lg:col-span-2">
                <CounterPicture />
              </Tile>
              <Tile title={ALERTS.title} body={ALERTS.body} className="lg:col-span-2">
                <AlertsPicture />
              </Tile>
              <Tile title={ACCOUNTS.title} body={ACCOUNTS.body} className="md:col-span-2 lg:col-span-4">
                <AccountsPicture />
              </Tile>
            </ul>
          </BentoStage>
        </div>
      </div>
    </section>
  )
}

export default Bento01

"use client"

import * as React from "react"

import { MotionStage } from "@/components/ui/motion-stage"

/**
 * What bento-01's pictures move on. Every loop starts and ends on the picture
 * as it is drawn without motion — the final, informative frame — so a loop can
 * begin at any moment without a jump, and stopping it lands on the frame that
 * says the most. The tiles apply these through Tailwind, keyed to a running
 * stage; the kit's MotionStage decides when that is and hoists this stylesheet
 * into the head once, however many copies of the section a page holds, so the
 * section installs with its motion and nothing is added to your CSS.
 */
const KEYFRAMES = `
@keyframes bento-01-draw {
  0%, 62% { stroke-dashoffset: 0; opacity: 1 }
  66% { stroke-dashoffset: 0; opacity: 0 }
  67% { stroke-dashoffset: 1; opacity: 0 }
  68% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) }
  90%, 100% { stroke-dashoffset: 0; opacity: 1 }
}
@keyframes bento-01-fill {
  0%, 62% { opacity: 1 }
  66%, 86% { opacity: 0 }
  96%, 100% { opacity: 1 }
}
@keyframes bento-01-pop {
  0%, 62% { opacity: 1; transform: scale(1) }
  66%, 89% { opacity: 0; transform: scale(0.6) }
  93%, 100% { opacity: 1; transform: scale(1) }
}
@keyframes bento-01-roll {
  0%, 58% { transform: translateY(var(--to)); opacity: 1 }
  62% { transform: translateY(var(--to)); opacity: 0 }
  63% { transform: translateY(var(--from)); opacity: 0 }
  66% { transform: translateY(var(--from)); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  86%, 100% { transform: translateY(var(--to)); opacity: 1 }
}
@keyframes bento-01-arrive-0 {
  0%, 55% { opacity: 1; transform: translateY(0) }
  60% { opacity: 0; transform: translateY(0) }
  61%, 88% { opacity: 0; transform: translateY(-8px) }
  92%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-01-arrive-1 {
  0%, 55% { opacity: 1; transform: translateY(0) }
  60% { opacity: 0; transform: translateY(0) }
  61%, 75% { opacity: 0; transform: translateY(-72px) }
  79%, 88% { opacity: 1; transform: translateY(-64px) }
  92%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-01-arrive-2 {
  0%, 55% { opacity: 1; transform: translateY(0) }
  60% { opacity: 0; transform: translateY(0) }
  61% { opacity: 0; transform: translateY(-136px) }
  65%, 75% { opacity: 1; transform: translateY(-128px) }
  79%, 88% { opacity: 1; transform: translateY(-64px) }
  92%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-01-pointer {
  0%, 16% { transform: translate(0, 0) }
  20%, 36% { transform: translate(-36px, 40px) }
  40%, 56% { transform: translate(-12px, 80px) }
  60%, 76% { transform: translate(-52px, -40px) }
  80%, 100% { transform: translate(0, 0) }
}
@keyframes bento-01-home {
  0%, 16% { background-color: color-mix(in oklch, var(--muted) 50%, transparent) }
  19%, 78% { background-color: transparent }
  81%, 100% { background-color: color-mix(in oklch, var(--muted) 50%, transparent) }
}
@keyframes bento-01-visit {
  0%, 100% { background-color: transparent }
  3%, 16% { background-color: color-mix(in oklch, var(--muted) 50%, transparent) }
  19% { background-color: transparent }
}
`

/** bento-01's stage: the kit's MotionStage, carrying this section's keyframes. */
export function BentoStage({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <MotionStage label={label} keyframes={{ href: "bento-01-keyframes", css: KEYFRAMES }}>
      {children}
    </MotionStage>
  )
}

/**
 * Every word and figure `bento-01` sets: the claim, the words on the motion
 * switch, and four tiles — each a heading, one line, and what its moving
 * picture shows. The pictures are of a sample Northwind workspace, so their
 * figures are copy like the headings: written once, here. A picture that
 * carries figures also carries the sentence a screen reader hears instead.
 */
import type { LogoName } from "@/components/ui/logo-mark"

export const EYEBROW = "The workspace"

export const HEADLINE = "The weekly review, ready before anyone asks"

export const LEDE =
  "Revenue, alerts and accounts from the tools you already run, kept current while the team gets on with the week."

/** The name of the toggle that holds every picture still: pressed, it holds them; pressed again, they move. */
export const MOTION_LABEL = "Pause motion"

export const REVENUE = {
  title: "Revenue, redrawn as it lands",
  body: "MRR from billing, refreshed every five minutes and set against the year before it.",
  label: "MRR, last 12 months",
  figure: "$48.2K",
  delta: "+8.1%",
  months: ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
  /** Thousands of dollars, one a month, oldest first. */
  values: [31.4, 32.1, 33.8, 33.2, 35.6, 36.9, 38.4, 39.1, 41.7, 43.0, 44.6, 48.2],
  caption: "Line chart of monthly recurring revenue from October to September, rising from $31.4K to $48.2K, up 8.1% on August.",
}

export const ACCOUNTS_KPI = {
  title: "A figure you can open",
  body: "Every number leads to the rows it was counted from.",
  label: "Active accounts",
  /** The figure the picture counts up to, and the one it counts up from. */
  value: 2418,
  from: 2361,
  delta: "+57",
  note: "since August",
  /** New accounts a week, the last 12 weeks, oldest first. */
  weeks: [9, 12, 8, 14, 11, 13, 10, 15, 12, 16, 14, 18],
  weeksLabel: "New accounts a week, last 12 weeks",
  caption: "Active accounts: 2,418, up 57 since August; new accounts a week have risen from 9 to 18 over the last 12 weeks.",
}

export type AlertKind = "churn" | "upgrade" | "trial"

export const ALERTS = {
  title: "Alerts before the Monday meeting",
  body: "A change outside its usual range reaches the person who owns it.",
  /** Newest first: the picture stacks them the way a feed does. */
  items: [
    { kind: "churn", title: "Churn above its usual range", detail: "3 accounts, 2.6× a normal week", time: "09:14" },
    { kind: "upgrade", title: "Meridian moved to Business", detail: "+$1,840 MRR", time: "08:52" },
    { kind: "trial", title: "Trial conversion fell to 18%", detail: "From 24% last week", time: "08:30" },
  ] satisfies { kind: AlertKind; title: string; detail: string; time: string }[],
}

export const ACCOUNTS = {
  title: "Every account on one row",
  body: "Billing, CRM and support records matched into one customer you can open.",
  columns: { account: "Account", plan: "Plan", mrr: "MRR", tickets: "Tickets" },
  /** The second row is the one the pointer rests on when the picture holds still. */
  rows: [
    { account: "Keystone", plan: "Business", mrr: "$4,120", tickets: "2" },
    { account: "Meridian", plan: "Business", mrr: "$3,860", tickets: "0" },
    { account: "Tidewater", plan: "Team", mrr: "$1,190", tickets: "5" },
    { account: "Lumen", plan: "Team", mrr: "$980", tickets: "1" },
  ] satisfies { account: LogoName; plan: string; mrr: string; tickets: string }[],
}

import * as React from "react"
import { ActivityIcon, BellRingIcon, BriefcaseIcon, LifeBuoyIcon, ReceiptTextIcon, type LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { StatusBadge } from "@/components/ui/status-badge"
import { WorldMap } from "@/components/ui/world-map"

import { BentoStage } from "./bento-02.client"
import { ANOMALY, EYEBROW, HEADLINE, LEDE, LIVE, MOTION_LABEL, SYNCS, THRESHOLD, type SourceIcon } from "./bento-02.data"

/** One tile: its heading and line on the frame, its picture on the sheet. */
function Tile({ title, body, className, children }: { title: string; body: string; className?: string; children: React.ReactNode }) {
  return (
    <li className={cn("flex min-w-0", className)}>
      <Card className="w-full">
        <CardHeader>
          <CardTitle>
            <h3>{title}</h3>
          </CardTitle>
          <CardDescription className="text-pretty">{body}</CardDescription>
        </CardHeader>
        <CardContent className="relative flex min-h-56 flex-col justify-center">{children}</CardContent>
      </Card>
    </li>
  )
}

/** The metric inside its usual band, then out of it: the line draws, the point that left the band rings, the alert arrives. */
function ThresholdPicture() {
  const { values, band, alert } = THRESHOLD
  const x = (i: number) => 10 + (i * 280) / (values.length - 1)
  const y = (v: number) => 270 - (v / 9) * 256
  const line = values.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(" ")
  const endX = x(values.length - 1)
  const endY = y(values[values.length - 1])
  return (
    <div role="img" aria-label={THRESHOLD.caption} className="flex flex-1 flex-col gap-4">
      <div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
        <span>{THRESHOLD.label}</span>
        <span className="inline-flex items-center gap-1.5">
          <span className="size-2.5 rounded-xs bg-muted ring-1 ring-border" />
          {THRESHOLD.range}
        </span>
      </div>
      <svg viewBox="0 0 300 280" className="h-auto w-full overflow-visible">
        <rect x={0} y={y(band[1])} width={300} height={y(band[0]) - y(band[1])} fill="var(--muted)" />
        {band.map((edge) => (
          <line key={edge} x1={0} x2={300} y1={y(edge)} y2={y(edge)} stroke="var(--chart-grid)" strokeDasharray="3 4" />
        ))}
        <path
          d={line}
          fill="none"
          stroke="var(--chart-1)"
          strokeWidth={2}
          strokeLinejoin="round"
          strokeLinecap="round"
          pathLength={1}
          strokeDasharray="1 1"
          className="motion-safe:in-data-[playback=running]:animate-[bento-02-draw_12s_linear_infinite]"
        />
        <circle
          cx={endX}
          cy={endY}
          r={5}
          fill="var(--danger)"
          opacity={0}
          className="origin-center [transform-box:fill-box] motion-safe:in-data-[playback=running]:animate-[bento-02-ring_12s_ease-out_infinite]"
        />
        <circle
          cx={endX}
          cy={endY}
          r={4.5}
          fill="var(--card)"
          stroke="var(--danger)"
          strokeWidth={2}
          className="origin-center [transform-box:fill-box] motion-safe:in-data-[playback=running]:animate-[bento-02-pop_12s_var(--ease-standard)_infinite]"
        />
      </svg>
      <div className="mt-auto flex items-start gap-3 elev-1 p-3 motion-safe:in-data-[playback=running]:animate-[bento-02-note_12s_var(--ease-standard)_infinite]">
        <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-danger-muted text-danger">
          <BellRingIcon className="size-4" />
        </span>
        <span className="flex min-w-0 flex-1 flex-col gap-1.5">
          <span className="text-sm font-medium">{alert.title}</span>
          <span className="text-xs text-muted-foreground">{alert.detail}</span>
          <Badge variant="secondary">{alert.sent}</Badge>
        </span>
      </div>
    </div>
  )
}

/**
 * Where people are working right now: the kit's WorldMap, each place a marker
 * that sends out a slow beacon — the markers take turns, a third at a time.
 */
function LivePicture() {
  const total = LIVE.places.reduce((sum, place) => sum + place.value, 0)
  return (
    <div role="img" aria-label={LIVE.caption} className="flex flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <span className="inline-flex items-center gap-2 text-xs font-medium">
          <span className="relative flex size-2">
            <span className="absolute inset-0 rounded-full bg-success opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-02-live_2s_ease-out_infinite]" />
            <span className="relative size-2 rounded-full bg-success" />
          </span>
          {LIVE.live}
        </span>
        <span className="text-sm text-muted-foreground">
          <span className="type-numeral text-lg text-foreground">{formatNumber(total)}</span> {LIVE.label}
        </span>
      </div>
      <WorldMap
        markers={[...LIVE.places]}
        height={190}
        className="motion-safe:in-data-[playback=running]:[&_[data-slot=world-map-marker]]:animate-[bento-02-beacon_3s_ease-out_infinite] [&_[data-slot=world-map-marker]:nth-child(3n+2)]:[animation-delay:1s] [&_[data-slot=world-map-marker]:nth-child(3n)]:[animation-delay:2s]"
      />
    </div>
  )
}

const SOURCE_ICONS: Record<SourceIcon, LucideIcon> = {
  billing: ReceiptTextIcon,
  crm: BriefcaseIcon,
  product: ActivityIcon,
  support: LifeBuoyIcon,
}

/** The sources, each taking its turn to sync: the row's bar fills and its word says so, then it settles back. Decoration. */
function SyncPicture() {
  return (
    <ul aria-hidden="true" inert className="flex flex-col">
      {SYNCS.sources.map((source, index) => {
        const Icon = SOURCE_ICONS[source.icon]
        const delay = { animationDelay: `${0.6 + index * 2.4}s` }
        return (
          <li key={source.name} className="relative flex h-11 items-center gap-3 border-b border-border last:border-b-0">
            <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-surface ring-1 ring-border">
              <Icon className="size-3.5" />
            </span>
            <span className="min-w-0 flex-1 truncate text-sm">{source.name}</span>
            <span className="grid justify-items-end *:col-start-1 *:row-start-1">
              <span style={delay} className="text-xs text-muted-foreground tabular-nums motion-safe:in-data-[playback=running]:animate-[bento-02-synced_12s_linear_infinite]">
                {source.synced}
              </span>
              <span style={delay} className="opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-02-syncing_12s_linear_infinite]">
                <StatusBadge status="running" variant="info" size="sm" label={SYNCS.syncing} />
              </span>
            </span>
            <span
              style={delay}
              className="absolute inset-x-0 bottom-0 h-0.5 origin-left rounded-full bg-brand opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-02-progress_12s_linear_infinite]"
            />
          </li>
        )
      })}
    </ul>
  )
}

/** Fourteen days of signups growing in, the last one far past the rest and marked in the warning tone. */
function AnomalyPicture() {
  const peak = Math.max(...ANOMALY.values)
  const last = ANOMALY.values.length - 1
  return (
    <div role="img" aria-label={ANOMALY.caption} className="flex flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <span className="text-xs text-muted-foreground">{ANOMALY.label}</span>
        <span className="motion-safe:in-data-[playback=running]:animate-[bento-02-mark_12s_linear_infinite]">
          <StatusBadge status="warning" variant="warning" label={ANOMALY.note} />
        </span>
      </div>
      <div className="flex h-28 items-end gap-1">
        {ANOMALY.values.map((value, index) => (
          <span
            key={index}
            style={{ height: `${(value / peak) * 100}%`, animationDelay: index === last ? undefined : `${index * 50}ms` }}
            className={cn(
              "flex-1 origin-bottom rounded-t-[3px]",
              index === last
                ? "bg-warning motion-safe:in-data-[playback=running]:animate-[bento-02-spike_12s_linear_infinite]"
                : "bg-(--chart-1)/40 motion-safe:in-data-[playback=running]:animate-[bento-02-grow_12s_linear_infinite]"
            )}
          />
        ))}
      </div>
      <div className="flex justify-between text-xs text-muted-foreground">
        {ANOMALY.days.map((day) => (
          <span key={day}>{day}</span>
        ))}
      </div>
    </div>
  )
}

/**
 * The monitoring bento: what Northwind watches, as four moving pictures — a
 * metric leaving its usual band and the alert that says why, a live map of
 * who is working where, each source taking its turn to sync, and a day of
 * signups far past the rest, marked. The alert's tile stands two rows tall on
 * the left from `lg`, beside the map across the top and the two smaller tiles
 * under it; two columns on a tablet, one on a phone.
 *
 * The pictures move only on the kit's MotionStage, which the island hands
 * this section's keyframes — while on screen, in a tab in front, and for a
 * reader who has not asked for less motion — and its Pause motion toggle
 * holds them still; still, each shows its final frame. The chart, the map and
 * the bars carry figures, so each is an image named by what it shows; the
 * syncing list is decoration beside words that say the same. A server
 * component; every word and figure is in `./bento-02.data`.
 */
export function Bento02() {
  const titleId = React.useId()

  return (
    <section
      data-section="bento-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background px-4 py-16 text-foreground md:px-6 md:py-24"
    >
      <div className="mx-auto max-w-7xl">
        <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
          <p className="type-eyebrow">{EYEBROW}</p>
          <h2 id={titleId} className="type-display mt-4 text-3xl text-balance md:text-4xl">
            {HEADLINE}
          </h2>
          <p className="mt-5 max-w-2xl text-base/7 text-pretty text-muted-foreground md:text-lg/8">{LEDE}</p>
        </div>

        <div className="mt-10 md:mt-12">
          <BentoStage label={MOTION_LABEL}>
            <ul className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Tile title={THRESHOLD.title} body={THRESHOLD.body} className="md:row-span-2">
                <ThresholdPicture />
              </Tile>
              <Tile title={LIVE.title} body={LIVE.body} className="lg:col-span-2">
                <LivePicture />
              </Tile>
              <Tile title={SYNCS.title} body={SYNCS.body}>
                <SyncPicture />
              </Tile>
              <Tile title={ANOMALY.title} body={ANOMALY.body} className="md:col-span-2 lg:col-span-1">
                <AnomalyPicture />
              </Tile>
            </ul>
          </BentoStage>
        </div>
      </div>
    </section>
  )
}

export default Bento02

"use client"

import * as React from "react"

import { MotionStage } from "@/components/ui/motion-stage"

/**
 * What bento-02's pictures move on. Every loop starts and ends on the picture
 * as it is drawn without motion — the final, informative frame — so a loop can
 * begin at any moment without a jump, and stopping it lands on the frame that
 * says the most. The tiles apply these through Tailwind, keyed to a running
 * stage; the kit's MotionStage decides when that is and hoists this stylesheet
 * into the head once, however many copies of the section a page holds, so the
 * section installs with its motion and nothing is added to your CSS.
 */
const KEYFRAMES = `
@keyframes bento-02-draw {
  0%, 60% { stroke-dashoffset: 0; opacity: 1 }
  64% { stroke-dashoffset: 0; opacity: 0 }
  65% { stroke-dashoffset: 1; opacity: 0 }
  66% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) }
  88%, 100% { stroke-dashoffset: 0; opacity: 1 }
}
@keyframes bento-02-pop {
  0%, 60% { opacity: 1; transform: scale(1) }
  64%, 87% { opacity: 0; transform: scale(0.5) }
  91%, 100% { opacity: 1; transform: scale(1) }
}
@keyframes bento-02-ring {
  0%, 16%, 32%, 48% { opacity: 0.5; transform: scale(1) }
  8%, 15.9%, 24%, 31.9%, 40%, 47.9%, 56%, 100% { opacity: 0; transform: scale(3.2) }
}
@keyframes bento-02-note {
  0%, 60% { opacity: 1; transform: translateY(0) }
  64%, 90% { opacity: 0; transform: translateY(6px) }
  95%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-02-live {
  0% { opacity: 0.6; transform: scale(1) }
  70%, 100% { opacity: 0; transform: scale(2.6) }
}
@keyframes bento-02-beacon {
  0% { stroke: var(--brand); stroke-width: 0.35; stroke-opacity: 0.7 }
  70%, 100% { stroke: var(--brand); stroke-width: 6; stroke-opacity: 0 }
}
@keyframes bento-02-synced {
  0%, 100% { opacity: 1 }
  1.5%, 17.5% { opacity: 0 }
  19% { opacity: 1 }
}
@keyframes bento-02-syncing {
  0%, 1.5%, 17.5%, 100% { opacity: 0 }
  3%, 16% { opacity: 1 }
}
@keyframes bento-02-progress {
  0%, 100% { opacity: 0; transform: scaleX(0) }
  2% { opacity: 1; transform: scaleX(0) }
  16% { opacity: 1; transform: scaleX(1) }
  19% { opacity: 0; transform: scaleX(1) }
}
@keyframes bento-02-grow {
  0%, 58% { opacity: 1; transform: scaleY(1) }
  62% { opacity: 0; transform: scaleY(1) }
  63% { opacity: 0; transform: scaleY(0) }
  64% { opacity: 1; transform: scaleY(0); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  74%, 100% { opacity: 1; transform: scaleY(1) }
}
@keyframes bento-02-spike {
  0%, 58% { opacity: 1; transform: scaleY(1); background-color: var(--warning) }
  62% { opacity: 0; transform: scaleY(1); background-color: var(--warning) }
  63% { opacity: 0; transform: scaleY(0); background-color: var(--chart-1) }
  66% { opacity: 1; transform: scaleY(0); background-color: var(--chart-1); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  80% { transform: scaleY(1); background-color: var(--chart-1) }
  86%, 100% { opacity: 1; transform: scaleY(1); background-color: var(--warning) }
}
@keyframes bento-02-mark {
  0%, 58% { opacity: 1 }
  62%, 86% { opacity: 0 }
  90%, 100% { opacity: 1 }
}
`

/** bento-02's stage: the kit's MotionStage, carrying this section's keyframes. */
export function BentoStage({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <MotionStage label={label} keyframes={{ href: "bento-02-keyframes", css: KEYFRAMES }}>
      {children}
    </MotionStage>
  )
}

/**
 * Every word and figure `bento-02` sets: the claim, the words on the motion
 * switch, and four tiles about what Northwind watches — each a heading, one
 * line, and what its moving picture shows. The figures are a sample
 * workspace's, written once here; a picture that carries figures also
 * carries the sentence a screen reader hears instead.
 */

export const EYEBROW = "Monitoring"

export const HEADLINE = "Know the moment a number leaves its range"

export const LEDE =
  "Northwind watches every metric against its own history and tells the person who owns it, with the accounts behind the change."

/** The name of the toggle that holds every picture still: pressed, it holds them; pressed again, they move. */
export const MOTION_LABEL = "Pause motion"

export const THRESHOLD = {
  title: "Thresholds that explain themselves",
  body: "Each metric learns its usual range; a move outside it becomes an alert with the reason attached.",
  label: "Churned MRR, daily",
  range: "Usual range",
  /** Thousands of dollars a day, oldest first; the last three leave the range. */
  values: [2.1, 1.8, 2.4, 2.0, 1.6, 2.2, 2.6, 1.9, 2.3, 2.8, 2.1, 1.7, 2.5, 2.2, 2.9, 2.4, 3.0, 4.4, 6.3, 7.9],
  /** The band the metric usually stays in, in the same units. */
  band: [1.4, 3.4] as const,
  alert: { title: "Above its usual range", detail: "3 accounts, since 09:14", sent: "Sent to Finance" },
  caption:
    "Line chart of churned MRR over 20 days, inside its usual range of $1.4K to $3.4K a day until the last three days, when it climbs to $7.9K; an alert says it is above its usual range because of 3 accounts and was sent to Finance.",
}

export const LIVE = {
  title: "Live across every region",
  body: "See who is in a dashboard right now, and where they are working from.",
  live: "Live",
  label: "people in a dashboard now",
  caption: "World map of the 1,284 people in a Northwind dashboard now, most of them in London, 312, and New York, 268.",
  /** Where they are; the count the tile prints is the sum of these. */
  places: [
    { id: "london", label: "London", lat: 51.5, lng: -0.13, value: 312 },
    { id: "new-york", label: "New York", lat: 40.71, lng: -74.0, value: 268 },
    { id: "berlin", label: "Berlin", lat: 52.52, lng: 13.4, value: 140 },
    { id: "singapore", label: "Singapore", lat: 1.35, lng: 103.82, value: 118 },
    { id: "tokyo", label: "Tokyo", lat: 35.68, lng: 139.69, value: 100 },
    { id: "toronto", label: "Toronto", lat: 43.65, lng: -79.38, value: 96 },
    { id: "sydney", label: "Sydney", lat: -33.87, lng: 151.21, value: 90 },
    { id: "sao-paulo", label: "São Paulo", lat: -23.55, lng: -46.63, value: 84 },
    { id: "mumbai", label: "Mumbai", lat: 19.08, lng: 72.88, value: 76 },
  ],
}

export type SourceIcon = "billing" | "crm" | "product" | "support"

export const SYNCS = {
  title: "Every sync, checked",
  body: "Each source says when it last synced, and flags the one that stops.",
  syncing: "Syncing",
  sources: [
    { icon: "billing", name: "Billing", synced: "2 min ago" },
    { icon: "crm", name: "CRM", synced: "6 min ago" },
    { icon: "product", name: "Product events", synced: "1 min ago" },
    { icon: "support", name: "Support desk", synced: "9 min ago" },
  ] satisfies { icon: SourceIcon; name: string; synced: string }[],
}

export const ANOMALY = {
  title: "Anomalies, marked overnight",
  body: "A day far outside the pattern is marked before anyone opens the chart.",
  label: "Signups, last 14 days",
  /** Signups a day, oldest first; the last is the anomaly. */
  values: [42, 38, 45, 40, 44, 39, 47, 43, 41, 46, 44, 48, 45, 131],
  note: "+191% on Sep 3",
  days: ["Aug 21", "Sep 3"],
  caption: "Bar chart of daily signups over 14 days, steady between 38 and 48 until the last day, Sep 3, which reached 131, 191% above the day before; it is marked.",
}

import * as React from "react"
import { MailIcon, MousePointer2Icon } from "lucide-react"

import { cn } from "@/lib/utils"
import { avatarFor } from "@/lib/avatars"
import { getInitials } from "@/lib/format"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { AvatarGroup } from "@/components/ui/avatar-group"
import { Badge } from "@/components/ui/badge"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { buttonVariants } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

import { BentoStage } from "./bento-03.client"
import { COMMENTS, EYEBROW, HEADLINE, HISTORY, LEDE, MOTION_LABEL, PEOPLE, PRESENCE, SHARE, TOGETHER } from "./bento-03.data"

/** One tile: its heading and line on the frame, its picture on the sheet. Every picture here is decoration beside its words. */
function Tile({ title, body, className, children }: { title: string; body: string; className?: string; children: React.ReactNode }) {
  return (
    <li className={cn("flex min-w-0", className)}>
      <Card className="w-full">
        <CardHeader>
          <CardTitle>
            <h3>{title}</h3>
          </CardTitle>
          <CardDescription className="text-pretty">{body}</CardDescription>
        </CardHeader>
        <CardContent className="relative flex min-h-52 flex-col justify-center">
          <div aria-hidden="true" inert className="flex flex-1 flex-col justify-center">
            {children}
          </div>
        </CardContent>
      </Card>
    </li>
  )
}

/** A person's face from the kit's `avatarFor`, with their initials until it loads. */
function Face({ name, className }: { name: string; className?: string }) {
  return (
    <Avatar size="sm" className={cn("after:hidden", className)}>
      <AvatarImage src={avatarFor(name)} alt="" />
      <AvatarFallback>{getInitials(name)}</AvatarFallback>
    </Avatar>
  )
}

/** Two people in one dashboard: each pointer carries its owner's face, and one of them picks a week. */
function TogetherPicture() {
  const peak = Math.max(...TOGETHER.weeks)
  return (
    <div className="relative flex h-[26rem] flex-col rounded-lg bg-surface p-3 ring-1 ring-border">
      <div className="grid grid-cols-2 gap-2">
        {TOGETHER.kpis.map((kpi) => (
          <div key={kpi.label} className="rounded-md bg-card p-2.5 ring-1 ring-border">
            <span className="text-xs text-muted-foreground">{kpi.label}</span>
            <span className="block type-numeral text-lg">{kpi.value}</span>
          </div>
        ))}
      </div>
      <div className="mt-2 flex flex-1 flex-col rounded-md bg-card p-2.5 ring-1 ring-border">
        <span className="text-xs text-muted-foreground">{TOGETHER.chart}</span>
        <div className="mt-2 flex flex-1 items-end gap-1.5">
          {TOGETHER.weeks.map((week, index) => (
            <span
              key={index}
              style={{ height: `${(week / peak) * 100}%` }}
              className={cn(
                "flex-1 rounded-t-[3px]",
                index === TOGETHER.selected
                  ? "bg-(--chart-1) motion-safe:in-data-[playback=running]:animate-[bento-03-pick_12s_linear_infinite]"
                  : "bg-(--chart-1)/40"
              )}
            />
          ))}
        </div>
      </div>
      <span className="absolute top-[18%] left-[52%] rounded-md bg-foreground px-2 py-1 text-2xs font-medium text-background motion-safe:in-data-[playback=running]:animate-[bento-03-tip_12s_var(--ease-standard)_infinite]">
        {TOGETHER.tooltip}
      </span>
      <span
        style={{ left: "66%", top: "34%" }}
        className="absolute flex items-start motion-safe:in-data-[playback=running]:animate-[bento-03-dana_12s_var(--ease-emphasized)_infinite]"
      >
        <MousePointer2Icon className="size-4 fill-foreground text-background" />
        <span className="mt-3 -ml-0.5 flex items-center gap-1 rounded-full bg-foreground py-0.5 pr-2 pl-0.5 text-2xs font-medium text-background">
          <Face name={PEOPLE.dana} className="size-4" />
          {PEOPLE.dana.split(" ")[0]}
        </span>
      </span>
      <span
        style={{ left: "78%", top: "54%" }}
        className="absolute flex items-start motion-safe:in-data-[playback=running]:animate-[bento-03-leo_12s_var(--ease-emphasized)_infinite]"
      >
        <MousePointer2Icon className="size-4 fill-(--chart-2) text-background" />
        <span className="mt-3 -ml-0.5 flex items-center gap-1 rounded-full bg-card py-0.5 pr-2 pl-0.5 text-2xs font-medium ring-1 ring-border">
          <Face name={PEOPLE.leo} className="size-4" />
          {PEOPLE.leo.split(" ")[0]}
        </span>
      </span>
    </div>
  )
}

/** A question on a figure and its answer arriving after a moment of typing. */
function CommentsPicture() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-end gap-2">
        <Face name={PEOPLE.dana} />
        <Bubble variant="muted">
          <BubbleContent>{COMMENTS.question}</BubbleContent>
        </Bubble>
      </div>
      <div className="flex items-end justify-end gap-2">
        <div className="grid min-w-0 justify-items-end *:col-start-1 *:row-start-1">
          <Bubble align="end" className="max-w-full motion-safe:in-data-[playback=running]:animate-[bento-03-reply_12s_var(--ease-standard)_infinite]">
            <BubbleContent>{COMMENTS.answer}</BubbleContent>
          </Bubble>
          <span className="flex h-9 items-center gap-1 self-end rounded-xl bg-muted px-3 opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-03-typing_12s_linear_infinite]">
            {[0, 150, 300].map((delay) => (
              <span
                key={delay}
                style={{ animationDelay: `${delay}ms` }}
                className="size-1.5 rounded-full bg-muted-foreground motion-safe:in-data-[playback=running]:animate-[bento-03-dot_1.2s_ease-in-out_infinite]"
              />
            ))}
          </span>
        </div>
        <Face name={PEOPLE.leo} />
      </div>
    </div>
  )
}

/** An address typed into the invite field, one character at a time, and the person it names joining the list. */
function SharePicture() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <span className="flex h-8 min-w-0 flex-1 items-center gap-2 rounded-lg bg-card px-2.5 ring-1 ring-input">
          <MailIcon className="size-3.5 shrink-0 text-muted-foreground" />
          <span
            className="min-w-0 truncate font-mono text-xs"
            // The typing and the caret step once per character of this address.
            style={{ "--bento-03-chars": SHARE.email.length } as React.CSSProperties}
          >
            <span className="inline-block motion-safe:in-data-[playback=running]:animate-[bento-03-type_12s_steps(var(--bento-03-chars))_infinite]">{SHARE.email}</span>
            <span className="ml-px inline-block h-3.5 w-px bg-foreground align-middle motion-safe:in-data-[playback=running]:animate-[bento-03-caret-move_12s_steps(var(--bento-03-chars))_infinite,bento-03-caret_1s_step-end_infinite]" />
          </span>
        </span>
        <span className={buttonVariants({ size: "sm" })}>{SHARE.invite}</span>
      </div>
      <ul className="flex flex-col">
        {[...SHARE.members, SHARE.invited].map((member, index) => (
          <li
            key={member.name}
            className={cn(
              "flex h-10 items-center gap-2.5 border-b border-border text-sm last:border-b-0",
              index === SHARE.members.length && "motion-safe:in-data-[playback=running]:animate-[bento-03-invite_12s_var(--ease-standard)_infinite]"
            )}
          >
            <Face name={member.name} />
            <span className="min-w-0 flex-1 truncate">{member.name}</span>
            <span className="text-xs text-muted-foreground">{member.role}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

/** The faces of everyone reading the dashboard; the fourth arrives, and the count says so. */
function PresencePicture() {
  return (
    <div className="flex flex-col items-center gap-4">
      <AvatarGroup
        size="lg"
        users={PRESENCE.people.map((name) => ({ name, src: avatarFor(name) }))}
        className="[&>[data-slot=avatar]:last-child]:motion-safe:in-data-[playback=running]:animate-[bento-03-join_12s_var(--ease-standard)_infinite]"
      />
      <span className="grid text-sm text-muted-foreground tabular-nums *:col-start-1 *:row-start-1">
        <span className="motion-safe:in-data-[playback=running]:animate-[bento-03-after_12s_linear_infinite]">{PRESENCE.after}</span>
        <span className="opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-03-before_12s_linear_infinite]">{PRESENCE.before}</span>
      </span>
    </div>
  )
}

/** The versions of a dashboard, newest first, with a highlight walking back through them and home to the current one. */
function HistoryPicture() {
  return (
    <div className="relative">
      <span className="absolute inset-x-0 top-0 h-11 rounded-md bg-muted/60 motion-safe:in-data-[playback=running]:animate-[bento-03-scan_12s_var(--ease-emphasized)_infinite]" />
      <ul className="relative flex flex-col">
        {HISTORY.versions.map((version, index) => (
          <li key={version.version} className="flex h-11 items-center gap-2.5 px-2 text-sm">
            <span className="w-7 font-mono text-xs text-muted-foreground">{version.version}</span>
            <Face name={version.who} />
            <span className="min-w-0 flex-1 truncate">{version.who}</span>
            {index === 0 ? <Badge variant="secondary">{HISTORY.current}</Badge> : null}
            <span className="text-xs text-muted-foreground">{version.when}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

/**
 * The collaboration bento: five tiles about working on the numbers together,
 * the dashboard everyone is in standing two rows tall in the middle from
 * `lg` — two people's pointers moving over it, one picking a week — with a
 * comment answered, an invitation typed, a face arriving and a version history
 * on either side. Two columns on a tablet, the tall tile first across both;
 * one column on a phone.
 *
 * The pictures move only on the kit's MotionStage, which the island hands
 * this section's keyframes — while on screen, in a tab in front, and for a
 * reader who has not asked for less motion — and its Pause motion toggle
 * holds them still; still, each shows its final frame. Every picture here is
 * decoration beside the words that say what it shows, and every face is the
 * kit's `avatarFor(name)`. A server component; every word is in
 * `./bento-03.data`.
 */
export function Bento03() {
  const titleId = React.useId()

  return (
    <section
      data-section="bento-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background px-4 py-16 text-foreground md:px-6 md:py-24"
    >
      <div className="mx-auto max-w-7xl">
        <div className="grid gap-x-16 gap-y-5 lg:grid-cols-2 lg:items-end">
          <div>
            <p className="type-eyebrow">{EYEBROW}</p>
            <h2 id={titleId} className="type-display mt-4 text-3xl text-balance md:text-4xl">
              {HEADLINE}
            </h2>
          </div>
          <p className="text-base/7 text-pretty text-muted-foreground md:text-lg/8">{LEDE}</p>
        </div>

        <div className="mt-10 md:mt-12">
          <BentoStage label={MOTION_LABEL}>
            <ul className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Tile title={TOGETHER.title} body={TOGETHER.body} className="md:col-span-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 lg:row-start-1">
                <TogetherPicture />
              </Tile>
              <Tile title={COMMENTS.title} body={COMMENTS.body}>
                <CommentsPicture />
              </Tile>
              <Tile title={SHARE.title} body={SHARE.body}>
                <SharePicture />
              </Tile>
              <Tile title={PRESENCE.title} body={PRESENCE.body}>
                <PresencePicture />
              </Tile>
              <Tile title={HISTORY.title} body={HISTORY.body}>
                <HistoryPicture />
              </Tile>
            </ul>
          </BentoStage>
        </div>
      </div>
    </section>
  )
}

export default Bento03

"use client"

import * as React from "react"

import { MotionStage } from "@/components/ui/motion-stage"

/**
 * What bento-03's pictures move on. Every loop starts and ends on the picture
 * as it is drawn without motion — the final, informative frame — so a loop can
 * begin at any moment without a jump, and stopping it lands on the frame that
 * says the most. The tiles apply these through Tailwind, keyed to a running
 * stage; the kit's MotionStage decides when that is and hoists this stylesheet
 * into the head once, however many copies of the section a page holds, so the
 * section installs with its motion and nothing is added to your CSS.
 *
 * The invite field types its address one character a step, with the caret on
 * the typed edge: both step `steps(var(--bento-03-chars))` times and the caret
 * starts that many `ch` back, where the field sets `--bento-03-chars` from the
 * address's own length, so a different address never throws them out. The
 * step count sits on the animation itself, not in a keyframe, because a
 * keyframe's timing function does not take a custom property; the wipe that
 * clears the field stays linear by naming its own.
 */
const KEYFRAMES = `
@keyframes bento-03-dana {
  0%, 18% { left: 66%; top: 34% }
  24%, 40% { left: 24%; top: 10% }
  46%, 62% { left: 33%; top: 66% }
  68%, 100% { left: 66%; top: 34% }
}
@keyframes bento-03-leo {
  0%, 30% { left: 78%; top: 54% }
  36%, 60% { left: 70%; top: 12% }
  66%, 100% { left: 78%; top: 54% }
}
@keyframes bento-03-pick {
  0%, 18% { background-color: var(--chart-1) }
  22%, 66% { background-color: color-mix(in oklab, var(--chart-1) 40%, transparent) }
  70%, 100% { background-color: var(--chart-1) }
}
@keyframes bento-03-tip {
  0%, 17% { opacity: 1; transform: translateY(0) }
  20%, 69% { opacity: 0; transform: translateY(4px) }
  73%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-03-reply {
  0%, 54% { opacity: 1; transform: translateY(0) }
  58%, 81% { opacity: 0; transform: translateY(6px) }
  85%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-03-typing {
  0%, 58% { opacity: 0 }
  62%, 80% { opacity: 1 }
  83%, 100% { opacity: 0 }
}
@keyframes bento-03-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0) }
  30% { opacity: 1; transform: translateY(-3px) }
}
@keyframes bento-03-type {
  0%, 50% { clip-path: inset(0 0 0 0); animation-timing-function: linear }
  53%, 56% { clip-path: inset(0 100% 0 0) }
  74%, 100% { clip-path: inset(0 0 0 0) }
}
@keyframes bento-03-caret-move {
  0%, 50% { transform: translateX(0); animation-timing-function: linear }
  53%, 56% { transform: translateX(calc(var(--bento-03-chars) * -1ch)) }
  74%, 100% { transform: translateX(0) }
}
@keyframes bento-03-caret {
  0%, 100% { opacity: 1 }
  50% { opacity: 0 }
}
@keyframes bento-03-invite {
  0%, 50% { opacity: 1; transform: translateY(0) }
  53%, 76% { opacity: 0; transform: translateY(-6px) }
  80%, 100% { opacity: 1; transform: translateY(0) }
}
@keyframes bento-03-join {
  0%, 55% { opacity: 1; transform: scale(1) }
  60%, 80% { opacity: 0; transform: scale(0.6) }
  86%, 100% { opacity: 1; transform: scale(1) }
}
@keyframes bento-03-after {
  0%, 55% { opacity: 1 }
  57%, 86% { opacity: 0 }
  88%, 100% { opacity: 1 }
}
@keyframes bento-03-before {
  0%, 57%, 86%, 100% { opacity: 0 }
  59%, 84% { opacity: 1 }
}
@keyframes bento-03-scan {
  0%, 20% { transform: translateY(0) }
  26%, 44% { transform: translateY(44px) }
  50%, 68% { transform: translateY(88px) }
  74%, 100% { transform: translateY(0) }
}
`

/** bento-03's stage: the kit's MotionStage, carrying this section's keyframes. */
export function BentoStage({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <MotionStage label={label} keyframes={{ href: "bento-03-keyframes", css: KEYFRAMES }}>
      {children}
    </MotionStage>
  )
}

/**
 * Every word and figure `bento-03` sets: the claim, the words on the motion
 * switch, and five tiles about working on the numbers together — each a
 * heading, one line, and what its moving picture shows. The people are the
 * sample workspace's, drawn with the kit's `avatarFor(name)` faces, so change
 * a name and its face follows.
 */

export const EYEBROW = "Collaboration"

export const HEADLINE = "Work on the numbers together, in the same place"

export const LEDE =
  "Comments sit on the figure they are about, sharing is one field, and everyone sees who else is looking and what changed since they last did."

/** The name of the toggle that holds every picture still: pressed, it holds them; pressed again, they move. */
export const MOTION_LABEL = "Pause motion"

export const PEOPLE = {
  dana: "Dana Whitfield",
  leo: "Leo Park",
  priya: "Priya Raman",
  sam: "Sam Okafor",
}

export const TOGETHER = {
  title: "Everyone in the same dashboard",
  body: "See who else is looking, and what they have selected, as it happens.",
  kpis: [
    { label: "MRR", value: "$48.2K" },
    { label: "Churn", value: "2.1%" },
  ],
  chart: "New MRR by week",
  /** Thousands of dollars a week, oldest first; the sixth is the one selected. */
  weeks: [6.2, 7.8, 5.9, 8.4, 9.1, 12.4, 8.8, 10.2],
  selected: 5,
  tooltip: "$12.4K, week of Aug 10",
}

export const COMMENTS = {
  title: "Comments on the number itself",
  body: "Ask about a figure where it sits, and the answer stays with it.",
  question: "Why did churn jump on Monday?",
  answer: "Harbour cancelled three seats. Row 14 has the detail.",
}

export const SHARE = {
  title: "Share in one field",
  body: "Invite anyone by address and choose what they can do before they arrive.",
  field: "Invite by email",
  invite: "Invite",
  email: "priya@keystone.example",
  role: "Can view",
  members: [
    { name: "Dana Whitfield", role: "Owner" },
    { name: "Leo Park", role: "Can edit" },
  ],
  invited: { name: "Priya Raman", role: "Can view" },
}

export const PRESENCE = {
  title: "Who is here now",
  body: "Faces on every dashboard say who is reading it with you.",
  /** Everyone reading; the last one joins in the picture. */
  people: ["Dana Whitfield", "Leo Park", "Sam Okafor", "Priya Raman"],
  before: "3 viewing",
  after: "4 viewing",
}

export const HISTORY = {
  title: "Every version kept",
  body: "Go back to any earlier version of a dashboard and bring it back in one step.",
  current: "Current",
  versions: [
    { version: "v14", who: "Priya Raman", when: "Today, 09:12" },
    { version: "v13", who: "Leo Park", when: "Yesterday" },
    { version: "v12", who: "Dana Whitfield", when: "Aug 28" },
  ],
}

import * as React from "react"
import { ActivityIcon, BriefcaseIcon, CircleCheckIcon, CircleDashedIcon, LifeBuoyIcon, LoaderCircleIcon, ReceiptTextIcon, type LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LogoMark } from "@/components/ui/logo-mark"

import { BentoStage } from "./bento-04.client"
import { EYEBROW, FIELDS, FRESH, HEADLINE, LEDE, MATCH, MOTION_LABEL, PIPELINE, type SourceIcon } from "./bento-04.data"

/** One tile: its heading and line on the frame, its picture on the sheet. */
function Tile({ title, body, className, children }: { title: string; body: string; className?: string; children: React.ReactNode }) {
  return (
    <li className={cn("flex min-w-0", className)}>
      <Card className="w-full">
        <CardHeader>
          <CardTitle>
            <h3>{title}</h3>
          </CardTitle>
          <CardDescription className="text-pretty">{body}</CardDescription>
        </CardHeader>
        <CardContent className="relative flex min-h-52 flex-col justify-center">{children}</CardContent>
      </Card>
    </li>
  )
}

const SOURCE_ICONS: Record<SourceIcon, LucideIcon> = {
  billing: ReceiptTextIcon,
  crm: BriefcaseIcon,
  product: ActivityIcon,
  support: LifeBuoyIcon,
}

/** A dot running along one wire, left to right; the wires take turns. */
function Beam({ delay }: { delay: number }) {
  return (
    <span
      style={{ animationDelay: `${delay}s` }}
      className="absolute top-1/2 left-0 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-04-beam_2.4s_linear_infinite]"
    />
  )
}

/** Four sources wired to Northwind, a dot of data running down each wire, and the accounts it matched them into. */
function MatchPicture() {
  return (
    <div role="img" aria-label={MATCH.caption} className="grid grid-cols-[auto_minmax(1.5rem,1fr)_auto_minmax(1.5rem,1fr)_auto] items-center">
      <ul className="flex flex-col gap-3">
        {MATCH.sources.map((source) => {
          const Icon = SOURCE_ICONS[source.icon]
          return (
            <li key={source.name} className="flex h-9 items-center gap-2 rounded-lg bg-card pr-3 pl-2 text-sm ring-1 ring-border">
              <span className="flex size-6 items-center justify-center rounded-md bg-surface ring-1 ring-border">
                <Icon className="size-3.5" />
              </span>
              {source.name}
            </li>
          )
        })}
      </ul>
      {/* The wires: one from each source, joined on a bus at the hub's side. */}
      <div className="relative h-[180px]">
        {MATCH.sources.map((source, index) => (
          <span key={source.name} style={{ top: `${18 + index * 48}px` }} className="absolute inset-x-0 h-px bg-border">
            <Beam delay={index * 0.6} />
          </span>
        ))}
        <span className="absolute top-[18px] right-0 bottom-[18px] w-px bg-border" />
      </div>
      <span className="relative flex size-11 items-center justify-center rounded-full bg-card ring-1 ring-border motion-safe:in-data-[playback=running]:animate-[bento-04-hub_2.4s_ease-out_infinite]">
        <LogoMark name="Northwind" size="sm" className="[&>span]:sr-only" />
      </span>
      <div className="relative h-px bg-border">
        <Beam delay={1.2} />
      </div>
      <div className="flex flex-col rounded-lg bg-card px-3 py-2.5 ring-1 ring-border">
        <span className="type-numeral text-xl">{formatNumber(MATCH.accounts)}</span>
        <span className="text-xs text-muted-foreground">{MATCH.accountsLabel}</span>
        <span className="mt-1.5 max-w-32 text-xs text-pretty text-muted-foreground">{MATCH.matched}</span>
      </div>
    </div>
  )
}

const DONE = [
  "motion-safe:in-data-[playback=running]:animate-[bento-04-done-0_12s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-04-done-1_12s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-04-done-2_12s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-04-done-3_12s_linear_infinite]",
]

const SPIN = [
  "motion-safe:in-data-[playback=running]:animate-[bento-04-spin-0_12s_linear_infinite,bento-04-rotate_0.9s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-04-spin-1_12s_linear_infinite,bento-04-rotate_0.9s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-04-spin-2_12s_linear_infinite,bento-04-rotate_0.9s_linear_infinite]",
  "motion-safe:in-data-[playback=running]:animate-[bento-04-spin-3_12s_linear_infinite,bento-04-rotate_0.9s_linear_infinite]",
]

/** The four steps of a sync, each waiting, then turning, then done, one after another. Decoration. */
function PipelinePicture() {
  return (
    <div aria-hidden="true" inert className="flex flex-col gap-4">
      <ol className="flex flex-col">
        {PIPELINE.steps.map((step, index) => (
          <li key={step} className="relative flex h-10 items-center gap-3 text-sm before:absolute before:top-7 before:bottom-[-0.25rem] before:left-2.5 before:w-px before:bg-border last:before:hidden">
            <span className="grid size-5 shrink-0 *:col-start-1 *:row-start-1">
              <CircleDashedIcon className="size-5 text-muted-foreground" />
              <span className={cn("rounded-full bg-card", DONE[index])}>
                <CircleCheckIcon className="size-5 text-success" />
              </span>
              <LoaderCircleIcon className={cn("size-5 bg-card text-brand opacity-0", SPIN[index])} />
            </span>
            {step}
          </li>
        ))}
      </ol>
      <p className="border-t border-border pt-3 text-xs text-muted-foreground">{PIPELINE.done}</p>
    </div>
  )
}

/** Three billing and CRM fields, each wired to the Northwind field it becomes, one after another. Decoration. */
function FieldsPicture() {
  return (
    <ul aria-hidden="true" inert className="flex flex-col gap-3">
      {FIELDS.pairs.map((pair, index) => (
        <li key={pair.from} className="grid grid-cols-[minmax(0,1fr)_2rem_auto] items-center gap-2">
          <span className="truncate rounded-md bg-surface px-2 py-1.5 font-mono text-xs ring-1 ring-border">{pair.from}</span>
          <span
            style={{ animationDelay: `${index * 1}s` }}
            className="h-px origin-left bg-foreground/60 motion-safe:in-data-[playback=running]:animate-[bento-04-link_12s_var(--ease-standard)_infinite]"
          />
          <span
            style={{ animationDelay: `${index * 1}s` }}
            className="min-w-16 rounded-md bg-card px-2.5 py-1.5 text-center text-xs font-medium ring-1 ring-border motion-safe:in-data-[playback=running]:animate-[bento-04-land_12s_linear_infinite]"
          >
            {pair.to}
          </span>
        </li>
      ))}
    </ul>
  )
}

/** The ring that fills until the next sync, then says it synced and starts again. Decoration beside the words. */
function FreshPicture() {
  return (
    <div aria-hidden="true" inert className="flex items-center gap-5">
      <span className="relative flex size-24 shrink-0 items-center justify-center">
        <svg viewBox="0 0 100 100" className="absolute inset-0 -rotate-90">
          <circle cx={50} cy={50} r={42} fill="none" stroke="var(--muted)" strokeWidth={8} />
          <circle
            cx={50}
            cy={50}
            r={42}
            fill="none"
            stroke="var(--brand)"
            strokeWidth={8}
            strokeLinecap="round"
            pathLength={1}
            strokeDasharray="1 1"
            strokeDashoffset={0.25}
            className="motion-safe:in-data-[playback=running]:animate-[bento-04-countdown_12s_linear_infinite]"
          />
        </svg>
        <span className="relative text-xs font-medium text-success opacity-0 motion-safe:in-data-[playback=running]:animate-[bento-04-synced_12s_linear_infinite]">
          {FRESH.synced}
        </span>
      </span>
      <span className="flex flex-col gap-1">
        <span className="text-sm font-medium">{FRESH.next}</span>
        <span className="text-xs text-muted-foreground">{FRESH.last}</span>
      </span>
    </div>
  )
}

/**
 * The connections bento: how Northwind reads your tools, as four moving
 * pictures — the sources wired into one hub with data running down each wire
 * to the accounts it matched, a sync's four steps turning over one after
 * another, fields wired to the metric they become, and the ring that fills
 * until the next sync. The wiring runs the whole width across the top; the
 * other three sit under it, three across from `lg`.
 *
 * The pictures move only on the kit's MotionStage, which the island hands
 * this section's keyframes — while on screen, in a tab in front, and for a
 * reader who has not asked for less motion — and its Pause motion toggle
 * holds them still; still, each shows its final frame. The wiring carries
 * figures, so it is an image named by what it shows; the rest are decoration
 * beside words that say the same. A server component; every word and figure
 * is in `./bento-04.data`.
 */
export function Bento04() {
  const titleId = React.useId()

  return (
    <section
      data-section="bento-04"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background px-4 py-16 text-foreground md:px-6 md:py-24"
    >
      <div className="mx-auto max-w-7xl">
        <div className="max-w-3xl">
          <p className="type-eyebrow">{EYEBROW}</p>
          <h2 id={titleId} className="type-display mt-4 text-3xl text-balance md:text-4xl">
            {HEADLINE}
          </h2>
          <p className="mt-5 text-base/7 text-pretty text-muted-foreground md:text-lg/8">{LEDE}</p>
        </div>

        <div className="mt-10 md:mt-12">
          <BentoStage label={MOTION_LABEL}>
            <ul className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Tile title={MATCH.title} body={MATCH.body} className="md:col-span-2 lg:col-span-3">
                <div className="mx-auto w-full max-w-3xl">
                  <MatchPicture />
                </div>
              </Tile>
              <Tile title={PIPELINE.title} body={PIPELINE.body}>
                <PipelinePicture />
              </Tile>
              <Tile title={FIELDS.title} body={FIELDS.body}>
                <FieldsPicture />
              </Tile>
              <Tile title={FRESH.title} body={FRESH.body} className="md:col-span-2 lg:col-span-1">
                <FreshPicture />
              </Tile>
            </ul>
          </BentoStage>
        </div>
      </div>
    </section>
  )
}

export default Bento04