{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "freelance-work-for-hire-contract",
  "title": "Freelance Work For Hire Contract",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/freelance-work-for-hire-contract/FreelanceWorkForHireContract.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\nimport {\n  AlertCircle,\n  BadgeCheck,\n  Calendar,\n  Check,\n  CheckCircle2,\n  Clock,\n  Download,\n  Lock,\n  Pen,\n  PenTool,\n  Printer,\n  RotateCcw,\n  Scale,\n  ShieldAlert,\n  ShieldCheck,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\n\nexport interface FreelanceWorkForHireContractProps {\n  className?: string\n  initialSigned?: boolean\n  initialInitialsCompleted?: boolean\n}\n\nexport function FreelanceWorkForHireContract({\n  className,\n  initialSigned = false,\n  initialInitialsCompleted = false,\n}: FreelanceWorkForHireContractProps) {\n  const [initial1Completed, setInitial1Completed] = useState(initialInitialsCompleted || initialSigned)\n  const [initial2Completed, setInitial2Completed] = useState(initialInitialsCompleted || initialSigned)\n  const [isSigned, setIsSigned] = useState(initialSigned)\n  const [signerName] = useState('Elena Rostova')\n  const [signatureFont, setSignatureFont] = useState<'serif' | 'script' | 'sans'>('serif')\n  const [eConsentAgreed, setEConsentAgreed] = useState(true)\n  const [downloadSuccess, setDownloadSuccess] = useState(false)\n\n  const completedCount = (initial1Completed ? 1 : 0) + (initial2Completed ? 1 : 0) + (isSigned ? 1 : 0)\n  const canSign = initial1Completed && initial2Completed && eConsentAgreed && !isSigned\n\n  const toggleInitial1 = () => {\n    if (isSigned) return\n    setInitial1Completed((prev) => !prev)\n  }\n\n  const toggleInitial2 = () => {\n    if (isSigned) return\n    setInitial2Completed((prev) => !prev)\n  }\n\n  const signContract = () => {\n    if (!canSign) return\n    setIsSigned(true)\n  }\n\n  const resetWorkflow = () => {\n    setInitial1Completed(false)\n    setInitial2Completed(false)\n    setIsSigned(false)\n    setDownloadSuccess(false)\n  }\n\n  const handleDownload = () => {\n    setDownloadSuccess(true)\n    setTimeout(() => {\n      setDownloadSuccess(false)\n    }, 2500)\n  }\n\n  const handlePrint = () => {\n    if (typeof window !== 'undefined') {\n      window.print()\n    }\n  }\n\n  const scrollToInitial1 = () => {\n    const el = document.getElementById('react-initial-marker-ip')\n    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n  }\n\n  const scrollToInitial2 = () => {\n    const el = document.getElementById('react-initial-marker-kill-fee')\n    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n  }\n\n  const scrollToSignaturePad = () => {\n    const el = document.getElementById('react-signature-pad')\n    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })\n  }\n\n  return (\n    <div data-slot=\"freelance-work-for-hire-contract\" className={cn('bg-background text-foreground w-full', className)}>\n      <div className=\"mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8\">\n        {/* Top Agreement Header */}\n        <header className=\"border-border bg-card mb-6 rounded-xl border p-5 shadow-xs sm:p-6\">\n          <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"space-y-1.5\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"text-muted-foreground text-xs font-medium\">Contract Ref:</span>\n                <span className=\"text-foreground font-mono text-xs font-semibold tabular-nums\">#MSA-2026-4892</span>\n                <span className=\"text-muted-foreground text-xs\">&bull;</span>\n                <span className=\"text-muted-foreground text-xs font-medium\">Total Value:</span>\n                <span className=\"text-foreground font-mono text-xs font-bold tabular-nums\">$24,000.00 USD</span>\n                <span className=\"text-muted-foreground text-xs\">&bull;</span>\n                {isSigned ? (\n                  <Badge wrap className=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\">\n                    <BadgeCheck className=\"size-3.5\" />\n                    <span>Fully Executed &amp; Legally Binding</span>\n                  </Badge>\n                ) : initial1Completed && initial2Completed ? (\n                  <Badge wrap className=\"border-warning/30 bg-warning/10 text-warning gap-1.5 text-xs font-medium\">\n                    <PenTool className=\"size-3.5\" />\n                    <span>Ready for Signature</span>\n                  </Badge>\n                ) : (\n                  <Badge wrap className=\"border-warning/30 bg-warning/10 text-warning gap-1.5 text-xs font-medium\">\n                    <AlertCircle className=\"size-3.5\" />\n                    <span>\n                      Ready for Signature &bull; {(initial1Completed ? 0 : 1) + (initial2Completed ? 0 : 1)} Checkpoints\n                      Pending\n                    </span>\n                  </Badge>\n                )}\n              </div>\n              <h1 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl lg:text-3xl\">\n                Independent Contractor Agreement &amp; Work-for-Hire Assignment\n              </h1>\n              <div className=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs sm:text-sm\">\n                <span className=\"flex items-center gap-1.5\">\n                  <Scale className=\"text-primary size-3.5\" />\n                  <span>\n                    Governing Law: <strong>State of Delaware, US</strong>\n                  </span>\n                </span>\n                <span className=\"flex items-center gap-1.5\">\n                  <Calendar className=\"text-primary size-3.5\" />\n                  <span>\n                    Effective Date: <strong>September 01, 2026</strong>\n                  </span>\n                </span>\n                <span className=\"flex items-center gap-1.5\">\n                  <ShieldCheck className=\"text-success size-3.5\" />\n                  <span>Work-for-Hire (17 U.S.C. &sect; 101)</span>\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2.5\">\n              <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs shadow-xs\" onClick={handlePrint}>\n                <Printer className=\"size-4\" />\n                <span>Print</span>\n              </Button>\n              <Button\n                aria-label=\"Download attachment\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"gap-1.5 text-xs shadow-xs\"\n                onClick={handleDownload}\n              >\n                <Download className=\"size-4\" />\n                <span>{downloadSuccess ? 'Downloading PDF...' : 'Download Draft PDF'}</span>\n              </Button>\n              {!isSigned ? (\n                <Button size=\"sm\" className=\"gap-1.5 text-xs font-semibold shadow-xs\" onClick={scrollToSignaturePad}>\n                  <PenTool className=\"size-3.5\" />\n                  <span>Sign Contract</span>\n                </Button>\n              ) : (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"border-muted-foreground/30 gap-1.5 text-xs\"\n                  onClick={resetWorkflow}\n                >\n                  <RotateCcw className=\"size-3.5\" />\n                  <span>Reset Demo</span>\n                </Button>\n              )}\n            </div>\n          </div>\n        </header>\n\n        {/* 2-Column Agreement Layout */}\n        <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n          {/* Left Column: Contract Document Terms */}\n          <main className=\"space-y-6 lg:col-span-8\">\n            <div className=\"border-border bg-card rounded-xl border p-6 shadow-xs sm:p-8\">\n              {/* Document Header Banner */}\n              <div className=\"border-border border-b pb-6 text-center\">\n                <div className=\"border-primary/20 bg-primary/5 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold\">\n                  <Scale className=\"size-3.5\" />\n                  <span>MASTER SERVICES AGREEMENT (MSA) &bull; WORK-FOR-HIRE</span>\n                </div>\n                <h2 className=\"text-foreground mt-3 text-lg font-bold tracking-tight uppercase sm:text-xl\">\n                  Independent Contractor Master Services Agreement\n                </h2>\n                <p className=\"text-muted-foreground mt-1 text-xs\">\n                  Proprietary Rights Assignment &bull; Milestone Payment Schedule &bull; Kill Fee Terms\n                </p>\n              </div>\n\n              {/* Parties Comparison Matrix */}\n              <div className=\"my-6\">\n                <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  {/* Client Card */}\n                  <div className=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n                        The Client\n                      </span>\n                      <Badge wrap variant=\"outline\" className=\"font-mono text-xs\">\n                        Principal\n                      </Badge>\n                    </div>\n                    <div className=\"mt-2.5 flex items-center gap-3\">\n                      <Avatar className=\"border-border size-10 border\">\n                        <AvatarFallback className=\"bg-primary/10 text-primary font-bold\">UP</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p className=\"text-foreground text-sm font-bold\">UIPKGE Technologies Inc.</p>\n                        <p className=\"text-muted-foreground text-xs\">Delaware C-Corp &bull; File #6849201</p>\n                      </div>\n                    </div>\n                    <Separator className=\"my-3\" />\n                    <div className=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                      <p className=\"flex justify-between\">\n                        <span>Address:</span>\n                        <span className=\"text-foreground text-right font-sans\">\n                          548 Market St, Suite 29000, SF, CA 94104\n                        </span>\n                      </p>\n                      <p className=\"flex justify-between\">\n                        <span>Authorized Signer:</span>\n                        <span className=\"text-foreground font-sans font-semibold\">David Chen (CTO)</span>\n                      </p>\n                      <p className=\"flex justify-between\">\n                        <span>Billing Contact:</span>\n                        <span className=\"text-foreground font-sans\">legal@uipkge.dev</span>\n                      </p>\n                    </div>\n                  </div>\n\n                  {/* Contractor Card */}\n                  <div className=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">\n                        The Contractor\n                      </span>\n                      <Badge wrap variant=\"outline\" className=\"font-mono text-xs\">\n                        Independent Pro\n                      </Badge>\n                    </div>\n                    <div className=\"mt-2.5 flex items-center gap-3\">\n                      <Avatar className=\"border-border size-10 border\">\n                        <AvatarFallback className=\"bg-primary/10 text-primary font-bold\">ER</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p className=\"text-foreground text-sm font-bold\">Elena Rostova Design LLC</p>\n                        <p className=\"text-muted-foreground text-xs\">New York LLC &bull; EIN: XX-XXX4910</p>\n                      </div>\n                    </div>\n                    <Separator className=\"my-3\" />\n                    <div className=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                      <p className=\"flex justify-between\">\n                        <span>Address:</span>\n                        <span className=\"text-foreground text-right font-sans\">\n                          350 5th Avenue, Suite 4100, NY, NY 10118\n                        </span>\n                      </p>\n                      <p className=\"flex justify-between\">\n                        <span>Principal Signer:</span>\n                        <span className=\"text-foreground font-sans font-semibold\">\n                          Elena Rostova (Design Architect)\n                        </span>\n                      </p>\n                      <p className=\"flex justify-between\">\n                        <span>Direct Contact:</span>\n                        <span className=\"text-foreground font-sans\">elena@rostovadesign.io</span>\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              {/* Scope of Work Executive Summary Box */}\n              <div className=\"bg-muted/30 border-border mb-8 rounded-lg border p-4 sm:p-5\">\n                <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n                  <div>\n                    <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                      Statement of Work (SOW-01)\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Full-Stack Design System Component Architecture &amp; Documentation\n                    </h3>\n                  </div>\n                  <Badge wrap variant=\"secondary\" className=\"self-start font-mono text-xs sm:self-auto\">\n                    Fixed-Price Milestone\n                  </Badge>\n                </div>\n                <p className=\"text-muted-foreground mt-2 text-xs leading-relaxed sm:text-sm\">\n                  Contractor shall architect, code, test, and document a multi-framework component registry matching\n                  enterprise production craft standards, comprising OKLCH design tokens, 50 headless Vue &amp; React UI\n                  primitives, 50 composed application blocks, accessibility test suites, and interactive Astro live\n                  documentation.\n                </p>\n                <div className=\"mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n                  <div className=\"border-border/60 bg-card rounded-md border p-2.5\">\n                    <p className=\"text-muted-foreground text-xs font-medium\">Total Consideration</p>\n                    <p className=\"text-foreground mt-0.5 font-mono text-base font-bold tabular-nums sm:text-lg\">\n                      $24,000.00\n                    </p>\n                    <p className=\"text-muted-foreground text-xs\">100% Milestone-based</p>\n                  </div>\n                  <div className=\"border-border/60 bg-card rounded-md border p-2.5\">\n                    <p className=\"text-muted-foreground text-xs font-medium\">Payment Terms</p>\n                    <p className=\"text-foreground mt-0.5 text-xs font-bold sm:text-sm\">Net 15 Days</p>\n                    <p className=\"text-muted-foreground text-xs\">Upon acceptance</p>\n                  </div>\n                  <div className=\"border-border/60 bg-card rounded-md border p-2.5\">\n                    <p className=\"text-muted-foreground text-xs font-medium\">IP Ownership</p>\n                    <p className=\"text-foreground mt-0.5 text-xs font-bold sm:text-sm\">Work-for-Hire</p>\n                    <p className=\"text-muted-foreground text-xs\">17 U.S.C. &sect; 101</p>\n                  </div>\n                  <div className=\"border-border/60 bg-card rounded-md border p-2.5\">\n                    <p className=\"text-muted-foreground text-xs font-medium\">Kill Fee Baseline</p>\n                    <p className=\"text-foreground text-warning text-warning mt-0.5 font-mono text-base font-bold tabular-nums sm:text-lg\">\n                      25.0%\n                    </p>\n                    <p className=\"text-muted-foreground text-xs\">On uncompleted</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Legal Sections Stream */}\n              <div className=\"text-foreground/90 space-y-8 text-xs leading-relaxed sm:text-sm\">\n                {/* Section 1: Services & Deliverables Table */}\n                <section id=\"react-section-1\" className=\"space-y-4\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      01\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Services, Milestone Deliverables &amp; Acceptance\n                    </h3>\n                  </div>\n                  <p className=\"text-muted-foreground\">\n                    Contractor agrees to perform the services and provide the specific deliverables set forth in the\n                    milestone schedule below. Each deliverable shall undergo formal review by Client within seven (7)\n                    business days of submission.\n                  </p>\n\n                  {/* Itemized Deliverables Table */}\n                  <div className=\"border-border overflow-hidden rounded-lg border\">\n                    <div className=\"overflow-x-auto\">\n                      <Table>\n                        <TableHeader className=\"bg-muted/50\">\n                          <TableRow>\n                            <TableHead className=\"text-xs font-bold\">Milestone &amp; Scope</TableHead>\n                            <TableHead className=\"text-xs font-bold\">Target Date</TableHead>\n                            <TableHead className=\"text-right text-xs font-bold\">Consideration</TableHead>\n                            <TableHead className=\"text-right text-xs font-bold\">Status</TableHead>\n                          </TableRow>\n                        </TableHeader>\n                        <TableBody>\n                          <TableRow>\n                            <TableCell className=\"font-medium\">\n                              <div className=\"space-y-0.5\">\n                                <p className=\"text-foreground font-semibold\">\n                                  Milestone 1: Architectural Discovery &amp; Token Spec\n                                </p>\n                                <p className=\"text-muted-foreground text-xs\">\n                                  OKLCH token set, Tailwind v4 theme bindings, typography scale, and core utilities.\n                                </p>\n                              </div>\n                            </TableCell>\n                            <TableCell className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                              Sep 15, 2026\n                            </TableCell>\n                            <TableCell className=\"text-foreground text-right font-mono font-bold tabular-nums\">\n                              $6,000.00\n                              <span className=\"text-muted-foreground block text-xs font-normal\">25% (Deposit)</span>\n                            </TableCell>\n                            <TableCell className=\"text-right\">\n                              <Badge wrap className=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                                <Check className=\"mr-1 size-3\" /> Paid &amp; Settled\n                              </Badge>\n                            </TableCell>\n                          </TableRow>\n\n                          <TableRow>\n                            <TableCell className=\"font-medium\">\n                              <div className=\"space-y-0.5\">\n                                <p className=\"text-foreground font-semibold\">\n                                  Milestone 2: Core 50 UI Primitives in Vue &amp; React\n                                </p>\n                                <p className=\"text-muted-foreground text-xs\">\n                                  50 accessible headless primitives (Reka UI &amp; Radix mirror), CVA variants, and unit\n                                  test suites.\n                                </p>\n                              </div>\n                            </TableCell>\n                            <TableCell className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                              Oct 15, 2026\n                            </TableCell>\n                            <TableCell className=\"text-foreground text-right font-mono font-bold tabular-nums\">\n                              $10,000.00\n                              <span className=\"text-muted-foreground block text-xs font-normal\">41.67%</span>\n                            </TableCell>\n                            <TableCell className=\"text-right\">\n                              <Badge\n                                wrap\n                                variant=\"outline\"\n                                className=\"border-info/30 bg-info/10 text-info text-xs font-medium\"\n                              >\n                                <Clock className=\"mr-1 size-3\" /> Pending Review\n                              </Badge>\n                            </TableCell>\n                          </TableRow>\n\n                          <TableRow>\n                            <TableCell className=\"font-medium\">\n                              <div className=\"space-y-0.5\">\n                                <p className=\"text-foreground font-semibold\">\n                                  Milestone 3: 50 Composed Application Blocks &amp; Docs\n                                </p>\n                                <p className=\"text-muted-foreground text-xs\">\n                                  50 production application domain blocks, Astro documentation pages, story demos, and\n                                  manifests.\n                                </p>\n                              </div>\n                            </TableCell>\n                            <TableCell className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                              Nov 15, 2026\n                            </TableCell>\n                            <TableCell className=\"text-foreground text-right font-mono font-bold tabular-nums\">\n                              $8,000.00\n                              <span className=\"text-muted-foreground block text-xs font-normal\">33.33%</span>\n                            </TableCell>\n                            <TableCell className=\"text-right\">\n                              <Badge wrap variant=\"secondary\" className=\"text-muted-foreground text-xs font-medium\">\n                                Scheduled\n                              </Badge>\n                            </TableCell>\n                          </TableRow>\n                        </TableBody>\n                      </Table>\n                    </div>\n                  </div>\n                </section>\n\n                <Separator />\n\n                {/* Section 2: Intellectual Property Assignment & Work-for-Hire */}\n                <section id=\"react-section-2\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      02\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Intellectual Property Assignment &amp; Work-for-Hire Doctrine\n                    </h3>\n                  </div>\n                  <div className=\"text-muted-foreground space-y-2.5\">\n                    <p>\n                      <strong className=\"text-foreground\">2.1 Work-for-Hire Declaration:</strong> Contractor expressly\n                      acknowledges and agrees that all original works of authorship, user interface components, software\n                      architecture, codebases, design tokens, documentation, graphic assets, and associated inventions\n                      prepared, authored, or contributed by Contractor under this Agreement shall constitute a{' '}\n                      <strong className=\"text-foreground\">&ldquo;Work Made for Hire&rdquo;</strong> as defined under the\n                      United States Copyright Act (17 U.S.C. &sect; 101) for the benefit of Client.\n                    </p>\n                    <p>\n                      <strong className=\"text-foreground\">2.2 Absolute Assignment:</strong> To the extent that any\n                      Deliverable does not legally qualify as a work made for hire, Contractor hereby irrevocably,\n                      unconditionally, and perpetually transfers, assigns, and conveys to Client all worldwide right,\n                      title, and interest in and to all Intellectual Property Rights, including patents, copyrights,\n                      trade secrets, trademarks, and moral rights, effective immediately upon receipt of full payment\n                      for the applicable milestone.\n                    </p>\n                    <p>\n                      <strong className=\"text-foreground\">2.3 Pre-Existing IP &amp; Open-Source Carveout:</strong>{' '}\n                      Contractor retains sole ownership of pre-existing general toolchains and standard open-source\n                      libraries licensed under OSI-approved licenses (MIT/Apache-2.0) incorporated into the\n                      Deliverables, granting Client an irrevocable, perpetual, royalty-free, worldwide license to\n                      utilize, sub-license, and distribute such pre-existing materials.\n                    </p>\n                  </div>\n\n                  {/* Initial Checkpoint Marker 1 */}\n                  <div\n                    id=\"react-initial-marker-ip\"\n                    className={cn(\n                      'rounded-lg border p-4 transition-colors duration-200',\n                      initial1Completed\n                        ? 'border-success/40 bg-success/5'\n                        : 'border-warning/50 bg-warning/5 ring-warning/20 dark:bg-warning/10 ring-1',\n                    )}\n                  >\n                    <div className=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-center\">\n                      <div className=\"space-y-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                            Contractor Initial Checkpoint &bull; Section 2\n                          </span>\n                          {initial1Completed ? (\n                            <Badge wrap className=\"border-success/40 bg-success/10 text-success text-xs font-medium\">\n                              <Check className=\"mr-1 size-3\" /> Initialed\n                            </Badge>\n                          ) : (\n                            <Badge wrap className=\"border-warning/40 bg-warning/10 text-warning text-xs font-medium\">\n                              Action Required\n                            </Badge>\n                          )}\n                        </div>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Contractor hereby irrevocably assigns all right, title, and interest in deliverables upon\n                          receipt of full payment under 17 U.S.C. &sect; 101.\n                        </p>\n                      </div>\n\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={isSigned}\n                        variant={initial1Completed ? 'outline' : 'default'}\n                        className={cn(\n                          'shrink-0 gap-2 text-xs font-medium shadow-xs',\n                          initial1Completed\n                            ? 'border-success/40 text-success hover:bg-success/10 text-success'\n                            : 'bg-warning hover:bg-warning/90 bg-warning dark:hover:bg-warning text-white',\n                        )}\n                        onClick={toggleInitial1}\n                      >\n                        {initial1Completed ? (\n                          <>\n                            <span className=\"text-sm font-semibold italic\">ER</span>\n                            <span className=\"font-mono text-xs tabular-nums\">&bull; Elena Rostova [Initialed]</span>\n                          </>\n                        ) : (\n                          <>\n                            <Pen className=\"size-3.5\" />\n                            <span>Click to Initial [ER]</span>\n                          </>\n                        )}\n                      </Button>\n                    </div>\n                  </div>\n                </section>\n\n                <Separator />\n\n                {/* Section 3: Compensation & Invoicing */}\n                <section id=\"react-section-3\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      03\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Compensation, Invoicing &amp; Net 15 Terms\n                    </h3>\n                  </div>\n                  <div className=\"text-muted-foreground space-y-2.5\">\n                    <p>\n                      <strong className=\"text-foreground\">3.1 Aggregate Consideration:</strong> In full consideration\n                      for the timely and satisfactory completion of the Deliverables, Client shall pay Contractor an\n                      aggregate fixed fee of{' '}\n                      <strong className=\"text-foreground font-mono tabular-nums\">$24,000.00 USD</strong> according to\n                      the milestone schedule in Section 1.\n                    </p>\n                    <p>\n                      <strong className=\"text-foreground\">3.2 Invoicing &amp; Net 15 Terms:</strong> Contractor shall\n                      submit an electronic invoice upon delivery of each milestone. Client shall remit payment within{' '}\n                      <strong className=\"text-foreground\">fifteen (15) calendar days (Net 15)</strong> from the date of\n                      formal written acceptance via ACH direct deposit or international wire. Overdue undisputed\n                      balances shall accrue statutory interest at 1.5% per month.\n                    </p>\n                    <p>\n                      <strong className=\"text-foreground\">3.3 Taxes &amp; Independent Status:</strong> Contractor\n                      operates strictly as an independent contractor. Contractor is solely responsible for reporting and\n                      remitting all applicable federal, state, local, and self-employment taxes (IRS Form 1099-NEC). No\n                      employment benefits, healthcare, retirement, or worker&rsquo;s compensation coverage are provided.\n                    </p>\n                  </div>\n                </section>\n\n                <Separator />\n\n                {/* Section 4: Termination & Kill Fee */}\n                <section id=\"react-section-4\" className=\"space-y-3\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-bold\">\n                      04\n                    </span>\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">\n                      Termination &amp; 25% Kill Fee Policy\n                    </h3>\n                  </div>\n                  <div className=\"text-muted-foreground space-y-2.5\">\n                    <p>\n                      <strong className=\"text-foreground\">4.1 Convenience Termination:</strong> Either party may\n                      terminate this Agreement without cause upon providing{' '}\n                      <strong className=\"text-foreground\">fourteen (14) calendar days</strong> prior written notice to\n                      the other party.\n                    </p>\n                    <p>\n                      <strong className=\"text-foreground\">4.2 Kill Fee Entitlement:</strong> In the event Client elects\n                      to terminate this Agreement for convenience prior to final completion, Client shall promptly pay\n                      Contractor for: (a) all completed and accepted milestones in full, and (b) a{' '}\n                      <strong className=\"text-foreground text-warning font-semibold\">\n                        Kill Fee of twenty-five percent (25%)\n                      </strong>{' '}\n                      of the total remaining uncompleted milestone compensation to cover reserved contractor capacity\n                      and schedule reallocation.\n                    </p>\n                    <p>\n                      <strong className=\"text-foreground\">4.3 Immediate Handover:</strong> Upon termination, Contractor\n                      shall immediately deliver to Client all completed and partially completed work product, Git\n                      branches, design system source files, and credentials up to the termination effective date.\n                    </p>\n                  </div>\n\n                  {/* Initial Checkpoint Marker 2 */}\n                  <div\n                    id=\"react-initial-marker-kill-fee\"\n                    className={cn(\n                      'rounded-lg border p-4 transition-colors duration-200',\n                      initial2Completed\n                        ? 'border-success/40 bg-success/5'\n                        : 'border-warning/50 bg-warning/5 ring-warning/20 dark:bg-warning/10 ring-1',\n                    )}\n                  >\n                    <div className=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-center\">\n                      <div className=\"space-y-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                            Contractor Initial Checkpoint &bull; Section 4\n                          </span>\n                          {initial2Completed ? (\n                            <Badge wrap className=\"border-success/40 bg-success/10 text-success text-xs font-medium\">\n                              <Check className=\"mr-1 size-3\" /> Initialed\n                            </Badge>\n                          ) : (\n                            <Badge wrap className=\"border-warning/40 bg-warning/10 text-warning text-xs font-medium\">\n                              Action Required\n                            </Badge>\n                          )}\n                        </div>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Acknowledge the 14-day termination notice requirement and 25% kill fee clause on uncompleted\n                          milestones.\n                        </p>\n                      </div>\n\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={isSigned}\n                        variant={initial2Completed ? 'outline' : 'default'}\n                        className={cn(\n                          'shrink-0 gap-2 text-xs font-medium shadow-xs',\n                          initial2Completed\n                            ? 'border-success/40 text-success hover:bg-success/10 text-success'\n                            : 'bg-warning hover:bg-warning/90 bg-warning dark:hover:bg-warning text-white',\n                        )}\n                        onClick={toggleInitial2}\n                      >\n                        {initial2Completed ? (\n                          <>\n                            <span className=\"text-sm font-semibold italic\">ER</span>\n                            <span className=\"font-mono text-xs tabular-nums\">&bull; Elena Rostova [Initialed]</span>\n                          </>\n                        ) : (\n                          <>\n                            <Pen className=\"size-3.5\" />\n                            <span>Click to Initial [ER]</span>\n                          </>\n                        )}\n                      </Button>\n                    </div>\n                  </div>\n                </section>\n\n                <Separator />\n\n                {/* Execution & Signatures Section */}\n                <section className=\"space-y-4 pt-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <h3 className=\"text-foreground text-sm font-bold sm:text-base\">Execution &amp; Legal Signatures</h3>\n                    <span className=\"text-muted-foreground font-mono text-xs\">2 of 2 Parties Countersigned</span>\n                  </div>\n\n                  <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                    {/* Client Signature Block */}\n                    <div className=\"border-border bg-muted/20 rounded-lg border p-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <p className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                          Client Execution\n                        </p>\n                        <Badge\n                          wrap\n                          variant=\"outline\"\n                          className=\"border-success/40 bg-success/10 text-success font-mono text-xs\"\n                        >\n                          <Check className=\"mr-1 size-3\" /> Signed &amp; Verified\n                        </Badge>\n                      </div>\n                      <div className=\"border-border/60 bg-card my-3 rounded-md border p-3 text-center\">\n                        <p className=\"text-success text-success text-xl font-medium tracking-wide italic\">David Chen</p>\n                        <p className=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                          CTO &bull; UIPKGE Technologies Inc.\n                        </p>\n                      </div>\n                      <div className=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                        <p className=\"flex justify-between\">\n                          <span>Date Executed:</span>\n                          <span className=\"text-foreground font-semibold tabular-nums\">\n                            Aug 20, 2026 &bull; 14:22 EDT\n                          </span>\n                        </p>\n                        <p className=\"flex justify-between\">\n                          <span>Digital Cert:</span>\n                          <span className=\"text-foreground font-semibold\">CERT-UIP-2026-991A</span>\n                        </p>\n                      </div>\n                    </div>\n\n                    {/* Contractor Signature Block */}\n                    <div\n                      className={cn(\n                        'rounded-lg border p-4 transition-colors duration-200',\n                        isSigned ? 'border-success/40 bg-success/5' : 'border-border bg-muted/10 border-dashed',\n                      )}\n                    >\n                      <div className=\"flex items-center justify-between\">\n                        <p className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                          Contractor Execution\n                        </p>\n                        {isSigned ? (\n                          <Badge\n                            wrap\n                            className=\"border-success/40 bg-success/10 text-success font-mono text-xs font-medium\"\n                          >\n                            <Check className=\"mr-1 size-3\" /> Signed\n                          </Badge>\n                        ) : (\n                          <Badge\n                            wrap\n                            className=\"border-warning/40 bg-warning/10 text-warning font-mono text-xs font-medium\"\n                          >\n                            Pending Signature\n                          </Badge>\n                        )}\n                      </div>\n\n                      <div\n                        className={cn(\n                          'my-3 rounded-md border p-3 text-center transition-colors',\n                          isSigned\n                            ? 'bg-card border-success/40'\n                            : 'border-muted-foreground/30 bg-muted/20 border-dashed',\n                        )}\n                      >\n                        {isSigned ? (\n                          <>\n                            <p\n                              className={cn(\n                                'text-success text-xl font-medium tracking-wide',\n                                signatureFont === 'serif' && 'font-medium tracking-wide italic',\n                                signatureFont === 'script' && 'font-medium tracking-widest italic',\n                                signatureFont === 'sans' && 'font-semibold tracking-tight',\n                              )}\n                            >\n                              {signerName}\n                            </p>\n                            <p className=\"text-muted-foreground mt-0.5 font-mono text-xs\">\n                              Principal &bull; Elena Rostova Design LLC\n                            </p>\n                          </>\n                        ) : (\n                          <>\n                            <p className=\"text-muted-foreground text-xs italic\">\n                              Awaiting contractor electronic execution via sidebar\n                            </p>\n                            <p className=\"text-muted-foreground/80 mt-1 text-xs\">\n                              Complete both initials above to enable signing\n                            </p>\n                          </>\n                        )}\n                      </div>\n\n                      <div className=\"text-muted-foreground space-y-1 font-mono text-xs\">\n                        <p className=\"flex justify-between\">\n                          <span>Date Signed:</span>\n                          <span className=\"text-foreground font-semibold tabular-nums\">\n                            {isSigned ? 'Aug 21, 2026 • 11:15 EDT' : 'Pending'}\n                          </span>\n                        </p>\n                        <p className=\"flex justify-between\">\n                          <span>Audit Hash:</span>\n                          <span className=\"text-foreground font-semibold\">\n                            {isSigned ? 'SHA256:4b9a2...e781' : 'Unexecuted'}\n                          </span>\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </section>\n              </div>\n            </div>\n          </main>\n\n          {/* Right Column: Milestone & Payment Schedule + Signature Action Center */}\n          <aside className=\"space-y-5 lg:sticky lg:top-6 lg:col-span-4 lg:self-start\">\n            {/* Contractor Signer Profile Card */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2.5\">\n                    <Avatar className=\"border-border size-9 border\">\n                      <AvatarFallback className=\"bg-primary/10 text-primary text-xs font-bold\">ER</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <CardTitle className=\"text-sm font-semibold\">{signerName}</CardTitle>\n                      <CardDescription className=\"text-xs\">Principal Design Architect</CardDescription>\n                    </div>\n                  </div>\n                  <Badge wrap variant=\"outline\" className=\"border-primary/30 text-primary font-mono text-xs\">\n                    Contractor\n                  </Badge>\n                </div>\n              </CardHeader>\n              <CardContent className=\"text-muted-foreground space-y-2 p-4 pt-2 text-xs\">\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Entity:</span>\n                  <span className=\"text-foreground font-medium\">Elena Rostova Design LLC</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Tax Status:</span>\n                  <span className=\"text-foreground font-medium\">W-9 On File (EIN Verified)</span>\n                </div>\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Disbursement:</span>\n                  <span className=\"text-foreground font-mono tabular-nums\">ACH Direct Deposit (&bull;&bull;8842)</span>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Milestone & Payout Schedule Card */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"text-sm font-semibold\">Payment Milestones</CardTitle>\n                  <span className=\"text-foreground font-mono text-xs font-bold tabular-nums\">$24,000.00 USD</span>\n                </div>\n                <CardDescription className=\"text-xs\">Milestone-based disbursement on acceptance</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-3 p-4 pt-2 text-xs\">\n                {/* Milestone 1 */}\n                <div className=\"border-border/70 bg-muted/20 rounded-lg border p-3\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-foreground font-semibold\">1. Discovery &amp; Token Spec</span>\n                    <Badge wrap className=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                      Paid $6,000\n                    </Badge>\n                  </div>\n                  <div className=\"text-muted-foreground mt-1.5 flex items-center justify-between\">\n                    <span>Target: Sep 15, 2026</span>\n                    <span className=\"font-mono tabular-nums\">25% Allocation</span>\n                  </div>\n                </div>\n\n                {/* Milestone 2 */}\n                <div className=\"border-border/70 bg-muted/20 rounded-lg border p-3\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-foreground font-semibold\">2. Core 50 UI Primitives</span>\n                    <Badge wrap variant=\"outline\" className=\"border-info/30 bg-info/10 text-info text-xs font-medium\">\n                      Review $10,000\n                    </Badge>\n                  </div>\n                  <div className=\"text-muted-foreground mt-1.5 flex items-center justify-between\">\n                    <span>Target: Oct 15, 2026</span>\n                    <span className=\"font-mono tabular-nums\">41.67% Allocation</span>\n                  </div>\n                </div>\n\n                {/* Milestone 3 */}\n                <div className=\"border-border/70 bg-muted/20 rounded-lg border p-3\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-foreground font-semibold\">3. 50 Composed Blocks</span>\n                    <Badge wrap variant=\"secondary\" className=\"text-muted-foreground text-xs font-medium\">\n                      Due $8,000\n                    </Badge>\n                  </div>\n                  <div className=\"text-muted-foreground mt-1.5 flex items-center justify-between\">\n                    <span>Target: Nov 15, 2026</span>\n                    <span className=\"font-mono tabular-nums\">33.33% Final</span>\n                  </div>\n                </div>\n\n                {/* Progress Bar */}\n                <div className=\"space-y-1.5 pt-1\">\n                  <div className=\"flex justify-between text-xs\">\n                    <span className=\"text-muted-foreground\">Payment Progress</span>\n                    <span className=\"text-foreground font-mono font-medium tabular-nums\">$6,000 / $24,000 (25%)</span>\n                  </div>\n                  <div className=\"bg-muted flex h-2 w-full overflow-hidden rounded-full\">\n                    <div className=\"bg-success h-full w-[25%]\" title=\"Paid (25%)\" />\n                    <div className=\"bg-info/60 h-full w-[41.67%]\" title=\"In Review (41.67%)\" />\n                    <div className=\"bg-muted-foreground/20 h-full w-[33.33%]\" title=\"Scheduled (33.33%)\" />\n                  </div>\n                </div>\n\n                {/* Kill Fee Calculation Callout */}\n                <div className=\"border-warning/30 bg-warning/10 rounded-lg border p-3 text-xs\">\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"text-warning flex items-center gap-1.5 font-semibold\">\n                      <ShieldAlert className=\"text-warning size-3.5 shrink-0\" />\n                      <span>25% Kill Fee Protection</span>\n                    </div>\n                    <span className=\"text-warning text-warning font-mono font-bold tabular-nums\">$4,500.00</span>\n                  </div>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">\n                    Calculated as 25% of uncompleted milestones ($18,000.00) payable upon client convenience\n                    termination.\n                  </p>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Signature Action Checklist Card */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"text-sm font-semibold\">Execution Checklist</CardTitle>\n                  <Badge\n                    wrap\n                    variant={completedCount === 3 ? 'default' : 'secondary'}\n                    className=\"font-mono text-xs tabular-nums\"\n                  >\n                    {completedCount} / 3 Done\n                  </Badge>\n                </div>\n                <CardDescription className=\"text-xs\">\n                  Complete all mandatory checkpoints to finalize contract\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-2.5 p-4 pt-2\">\n                {/* Item 1: Initial Section 2 IP */}\n                <button\n                  type=\"button\"\n                  className=\"border-border/80 hover:bg-muted/40 flex w-full items-center justify-between rounded-lg border p-2.5 text-left text-xs transition-colors\"\n                  onClick={scrollToInitial1}\n                >\n                  <div className=\"flex items-center gap-2.5\">\n                    <div\n                      className={cn(\n                        'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n                        initial1Completed ? 'bg-success bg-success text-white' : 'bg-warning/20 text-warning',\n                      )}\n                    >\n                      {initial1Completed ? <Check className=\"size-3\" /> : <span>1</span>}\n                    </div>\n                    <div>\n                      <p className=\"text-foreground font-medium\">Initial Section 2 (IP Assignment)</p>\n                      <p className=\"text-muted-foreground text-xs\">17 U.S.C. &sect; 101 Work-for-Hire clause</p>\n                    </div>\n                  </div>\n                  <Badge\n                    wrap\n                    variant={initial1Completed ? 'outline' : 'secondary'}\n                    className={cn('text-xs', initial1Completed ? 'border-success/30 text-success' : 'text-warning')}\n                  >\n                    {initial1Completed ? 'Done' : 'Review'}\n                  </Badge>\n                </button>\n\n                {/* Item 2: Initial Section 4 Kill Fee */}\n                <button\n                  type=\"button\"\n                  className=\"border-border/80 hover:bg-muted/40 flex w-full items-center justify-between rounded-lg border p-2.5 text-left text-xs transition-colors\"\n                  onClick={scrollToInitial2}\n                >\n                  <div className=\"flex items-center gap-2.5\">\n                    <div\n                      className={cn(\n                        'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n                        initial2Completed ? 'bg-success bg-success text-white' : 'bg-warning/20 text-warning',\n                      )}\n                    >\n                      {initial2Completed ? <Check className=\"size-3\" /> : <span>2</span>}\n                    </div>\n                    <div>\n                      <p className=\"text-foreground font-medium\">Initial Section 4 (25% Kill Fee)</p>\n                      <p className=\"text-muted-foreground text-xs\">Termination protocol &amp; compensation</p>\n                    </div>\n                  </div>\n                  <Badge\n                    wrap\n                    variant={initial2Completed ? 'outline' : 'secondary'}\n                    className={cn('text-xs', initial2Completed ? 'border-success/30 text-success' : 'text-warning')}\n                  >\n                    {initial2Completed ? 'Done' : 'Review'}\n                  </Badge>\n                </button>\n\n                {/* Item 3: Full MSA Signature */}\n                <div\n                  className={cn(\n                    'flex items-center justify-between rounded-lg border p-2.5 text-xs',\n                    isSigned ? 'border-success/40 bg-success/5' : 'border-border/80 bg-card',\n                  )}\n                >\n                  <div className=\"flex items-center gap-2.5\">\n                    <div\n                      className={cn(\n                        'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n                        isSigned ? 'bg-success bg-success text-white' : 'bg-muted text-muted-foreground',\n                      )}\n                    >\n                      {isSigned ? <Check className=\"size-3\" /> : <span>3</span>}\n                    </div>\n                    <div>\n                      <p className=\"text-foreground font-medium\">Execute Agreement</p>\n                      <p className=\"text-muted-foreground text-xs\">Contractor e-signature</p>\n                    </div>\n                  </div>\n                  <Badge\n                    wrap\n                    variant={isSigned ? 'outline' : 'secondary'}\n                    className={cn('text-xs', isSigned ? 'border-success/30 text-success' : 'text-muted-foreground')}\n                  >\n                    {isSigned ? 'Executed' : 'Pending'}\n                  </Badge>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Interactive Signature Pad Card */}\n            <Card id=\"react-signature-pad\" className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <CardTitle className=\"text-sm font-semibold\">Contractor Signature Pad</CardTitle>\n                <CardDescription className=\"text-xs\">Adopt signature style &amp; execute contract</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-4 p-4 pt-2\">\n                {/* Style Selector */}\n                <div className=\"bg-muted/60 grid grid-cols-3 gap-1.5 rounded-lg p-1\">\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'rounded-md py-1 text-center text-xs font-medium transition-colors',\n                      signatureFont === 'serif'\n                        ? 'bg-card text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setSignatureFont('serif')}\n                  >\n                    Formal Serif\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'rounded-md py-1 text-center text-xs font-medium transition-colors',\n                      signatureFont === 'script'\n                        ? 'bg-card text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setSignatureFont('script')}\n                  >\n                    Script Elegance\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'rounded-md py-1 text-center text-xs font-medium transition-colors',\n                      signatureFont === 'sans'\n                        ? 'bg-card text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setSignatureFont('sans')}\n                  >\n                    Modern Sans\n                  </button>\n                </div>\n\n                {/* Preview Display Box */}\n                <div className=\"border-border bg-muted/20 relative rounded-lg border p-4 text-center\">\n                  <p className=\"text-muted-foreground text-xs font-medium\">Adopted Signature</p>\n                  <div className=\"my-2 flex min-h-[48px] items-center justify-center\">\n                    <span\n                      className={cn(\n                        'text-foreground text-2xl select-none',\n                        signatureFont === 'serif' && 'font-medium tracking-wide italic',\n                        signatureFont === 'script' && 'font-medium tracking-widest italic',\n                        signatureFont === 'sans' && 'font-semibold tracking-tight',\n                      )}\n                    >\n                      {signerName}\n                    </span>\n                  </div>\n                  <div className=\"text-muted-foreground flex items-center justify-center gap-1.5 font-mono text-xs\">\n                    <ShieldCheck className=\"text-success size-3.5\" />\n                    <span>256-Bit eIDAS &amp; U.S. ESIGN Compliant</span>\n                  </div>\n                </div>\n\n                {/* Consent Checkbox */}\n                <label className=\"text-muted-foreground flex cursor-pointer items-start gap-2.5 text-xs\">\n                  <input\n                    type=\"checkbox\"\n                    checked={eConsentAgreed}\n                    disabled={isSigned}\n                    onChange={(e) => setEConsentAgreed(e.target.checked)}\n                    className=\"text-primary focus:ring-ring border-border mt-0.5 size-4 rounded\"\n                  />\n                  <span>\n                    I agree to transact electronically and execute this Master Services Agreement (#MSA-2026-4892) as a\n                    legally binding instrument.\n                  </span>\n                </label>\n\n                {/* Main Execution Button */}\n                <div className=\"space-y-2 pt-2\">\n                  {!isSigned ? (\n                    <Button\n                      type=\"button\"\n                      className=\"w-full gap-2 text-sm font-semibold shadow-xs\"\n                      disabled={!canSign}\n                      onClick={signContract}\n                    >\n                      <PenTool className=\"size-4\" />\n                      <span>Sign &amp; Execute Agreement</span>\n                    </Button>\n                  ) : (\n                    <div className=\"border-success/30 bg-success/10 space-y-2 rounded-lg border p-3.5 text-center\">\n                      <div className=\"text-success flex items-center justify-center gap-1.5 text-xs font-semibold\">\n                        <CheckCircle2 className=\"size-4\" />\n                        <span>Contract Executed Successfully!</span>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        Countersigned MSA certificate dispatched to David Chen (CTO) and Elena Rostova.\n                      </p>\n                      <Button\n                        aria-label=\"Download attachment\"\n                        size=\"sm\"\n                        className=\"mt-2 w-full gap-1.5 text-xs shadow-xs\"\n                        onClick={handleDownload}\n                      >\n                        <Download className=\"size-3.5\" />\n                        <span>Download Executed Contract</span>\n                      </Button>\n                    </div>\n                  )}\n\n                  {!isSigned && !canSign && (\n                    <p className=\"text-muted-foreground text-center text-xs\">\n                      {!initial1Completed || !initial2Completed\n                        ? 'Please complete both section initial checkpoints above.'\n                        : 'Please check the electronic records consent box.'}\n                    </p>\n                  )}\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Audit Ledger Mini Card */}\n            <div className=\"border-border bg-card/60 text-muted-foreground space-y-1.5 rounded-lg border p-3 text-xs\">\n              <div className=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <Lock className=\"text-primary size-3.5\" />\n                <span>Tamper-Proof Audit Trail Ledger</span>\n              </div>\n              <p className=\"leading-relaxed\">\n                Every initial checkpoint and signature event is stamped with SHA-256 integrity hash, RFC 3161 timestamp,\n                and recorded in the permanent contract execution audit trail.\n              </p>\n            </div>\n          </aside>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default FreelanceWorkForHireContract\n",
      "type": "registry:block",
      "target": "~/components/blocks/FreelanceWorkForHireContract.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Independent contractor Master Services Agreement (MSA) with work-for-hire IP assignment, payment milestones, kill fee clauses, and electronic signature workflow.",
  "categories": [
    "legal",
    "finance",
    "app",
    "contracts"
  ]
}