Cascade Card

import { CascadeCard } from "@/components/card/cascade-card"
import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  warm: {
    title: "Field notes, issue twelve",
    body: "Color thresholds, the pacing of sections, and the three rules we broke on purpose.",
  },
  cool: {
    title: "Field notes, issue thirteen",
    body: "Night grounds, quiet type, and why the cool finish falls from the floor.",
  },
} as const

// The two finishes side by side: warm falls from the top, cool from the bottom.
export default function CascadeCardDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-6 sm:grid-cols-2">
      {(["warm", "cool"] as const).map((variant) => (
        <CascadeCard key={variant} variant={variant}>
          <CardHeader>
            <CardTitle>{COPY[variant].title}</CardTitle>
            <CardDescription>{COPY[variant].body}</CardDescription>
          </CardHeader>
        </CascadeCard>
      ))}
    </div>
  )
}