Use Cases Tabs Section

import type { CSSProperties } from "react"
import { CircleCheck } from "lucide-react"

import { UseCaseTabs } from "@/components/ui/use-case-tabs"


const fonts =
  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&family=Geist:wght@400..600&family=Geist+Mono:wght@400..500&display=swap');"

const settings = {
  label: "Use cases",
  title: "One workspace, every team.",
  background: "#f7f5f0",
  card: "#ffffff",
  text: "#141a2e",
  muted: "#4a5166",
  primary: "#a8803a",
  primaryText: "#ffffff",
}

// Midnight by day as theme tokens: warm paper, night-blue ink, deep gold with white text on it,
// Fraunces for headings, Geist for text, Geist Mono for figures. The component itself only reads the tokens.
function day(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.background,
    foreground: s.text,
    card: s.card,
    primary: s.primary,
    "primary-foreground": s.primaryText,
    "muted-foreground": s.muted,
    ring: s.primary,
  }
  return {
    ...Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])),
    "--font-display": "Fraunces, ui-serif, Georgia, serif",
    "--font-sans": "Geist, ui-sans-serif, system-ui, sans-serif",
    "--font-mono": "'Geist Mono', ui-monospace, Menlo, monospace",
  } as CSSProperties
}

const items = [
  {
    key: "marketing",
    label: "Marketing",
    task: "Turn the release notes into a launch post, three social posts and an email.",
    results: [
      { value: "5", label: "drafts ready" },
      { value: "2h", label: "saved this week" },
      { value: "1", label: "review round" },
    ],
    brief: "The launch post is ready for review, with the changelog linked under every claim.",
  },
  {
    key: "sales",
    label: "Sales",
    task: "Prepare a one-page brief for each meeting on tomorrow's calendar.",
    results: [
      { value: "7", label: "briefs" },
      { value: "31", label: "sources read" },
      { value: "0", label: "meetings missed" },
    ],
    brief: "Two accounts opened new offices this month; both are in the briefs.",
  },
  {
    key: "support",
    label: "Support",
    task: "Group today's tickets by issue and draft replies for the top three.",
    results: [
      { value: "148", label: "tickets" },
      { value: "6", label: "issues" },
      { value: "3", label: "replies drafted" },
    ],
    brief: "Most of today's tickets come from one checkout bug on Safari.",
  },
  {
    key: "engineering",
    label: "Engineering",
    task: "Summarise what changed in the API this sprint and flag anything breaking.",
    results: [
      { value: "42", label: "pull requests" },
      { value: "2", label: "breaking" },
      { value: "1", label: "summary" },
    ],
    brief: "Two endpoints change their response shape; clients on v1 need an update.",
  },
]

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div
      className="flex min-h-svh w-full justify-center px-6 py-16"
      style={{ ...day(s), fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif", background: s.background, color: s.text } as CSSProperties}
    >
      <style>{fonts}</style>
      <div className="w-full max-w-[1120px]">
        <p className="flex items-center gap-2 text-[12px] leading-4 tracking-[0.16em] uppercase justify-center" style={{ fontFamily: "var(--font-mono)", color: "#8a6a2e" }}>
          <svg viewBox="-6 -6 12 12" className="size-2.5" aria-hidden="true">
            <path d="M0 -6Q0 0 6 0Q0 0 0 6Q0 0 -6 0Q0 0 0 -6Z" fill="currentColor" />
          </svg>
          {s.label}
        </p>
        <h2
          className="mt-5 text-[40px] leading-[1.04] font-[350] tracking-[-0.02em] text-balance md:text-[56px] text-center"
          style={{ fontFamily: "var(--font-display)", fontVariationSettings: '"SOFT" 50' }}
        >
          {s.title}
        </h2>
        <UseCaseTabs
          items={items}
          labels={{ task: "The request", brief: "The result" }}
          briefIcon={<CircleCheck strokeWidth={1.75} aria-hidden="true" />}
          className="mt-10"
        />
      </div>
    </div>
  )
}