import { PiggyChatWorkspace } from '@/components/PiggyChat';
import { usePageTitle } from '@/lib/title';

export function Piggy() {
  usePageTitle('Piggy');
  return (
    <div className="flex flex-col gap-5">
      <header className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">Piggy</h1>
          <p className="mt-1 text-sm text-muted">Ask across the GPU book, then inspect the PIG records behind the answer.</p>
        </div>
        <div className="flex items-center gap-2 self-start rounded-full border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium sm:self-auto">
          <span className="h-2 w-2 rounded-full bg-positive" aria-hidden />
          Read-only workspace
        </div>
      </header>
      <div className="rounded-xl border border-border bg-surface-2/60 px-4 py-3 text-sm">
        <span className="font-medium">Inspection boundary.</span>{' '}
        <span className="text-muted">
          Piggy can query scoped PIG records, but this chat cannot create or update CRM data.
          Verify material terms against the cited records before acting.
        </span>
      </div>
      <PiggyChatWorkspace />
    </div>
  );
}
