Chat Inline Component Card

import { ChatInlineComponentCard } from "@/components/chat/chat-inline-component-card"
import { ChatMessage } from "@/components/chat/chat-message"
import { OrbitalSurface } from "@/components/scene/orbital-surface"

const PALETTES = {
  delft: {
    ground: "oklch(0.376 0.087 261.9)",
    upper:
      "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.905 0.025 104.4) 0%, oklch(0.887 0.026 104.5 / 0.72) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.467 0.121 261.9) 0%, oklch(0.467 0.121 261.9 / 0.8) 55%, transparent 100%)",
    glow: "oklch(0.978 0.010 261.8)",
    form: "strong",
  },
} as const

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  body: "Can you suggest a soft blue backdrop for a feature card?",
  body2:
    "Orbital Surface adds a painted blue field with a soft highlight. Here’s a live preview—open it to explore the component.",
  label: "Orbital Surface",
  label2: "Backdrops",
} as const

export default function Demo() {
  return (
    <div className="grid w-full max-w-md place-items-center gap-4 p-6">
      <ChatMessage variant="mine">{COPY.body}</ChatMessage>
      <ChatMessage variant="theirs">{COPY.body2}</ChatMessage>
      <ChatInlineComponentCard
        name={COPY.label}
        category={COPY.label2}
        href="/browse/price-comparison-01"
        target="_top"
      >
        <OrbitalSurface palette={PALETTES["delft"]} className="h-128" />
      </ChatInlineComponentCard>
    </div>
  )
}