{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-proof",
  "type": "registry:block",
  "title": "Proof footer",
  "description": "Inverse color band that reprises testing, ingredients, dispatch, and guarantee, then ends on a clipped wordmark.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "footer",
    "any"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "footer/footer-proof.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { BadgeCheck, FileCheck2, PackageCheck, ShieldCheck } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Inverted band footer (ink fill, paper text: dark on light brands, light on\n   dark brands) that reprises the store's trust claims before the link columns,\n   then ends on an oversized wordmark clipped by the bottom edge. Trust points\n   read as a quiet ledger, not a stat banner. The only client code shrinks the\n   wordmark when a wide display face would overflow the width. */\n\ntype Point = { title: string; note: string; icon?: \"tested\" | \"ingredients\" | \"dispatch\" | \"guarantee\" }\ntype Column = { title: string; links: { label: string; href: string }[] }\n\nconst ring =\n  \"outline-none focus-visible:ring-2 focus-visible:ring-sk-paper focus-visible:ring-offset-2 focus-visible:ring-offset-sk-ink\"\n\nconst ICONS = { tested: BadgeCheck, ingredients: FileCheck2, dispatch: PackageCheck, guarantee: ShieldCheck }\n\nexport function FooterProof({\n  brandName = \"Morrow\",\n  points = [\n    { title: \"Third-party tested\", note: \"Results published for every batch\", icon: \"tested\" },\n    { title: \"Clean ingredients\", note: \"No fillers, no artificial colors\", icon: \"ingredients\" },\n    { title: \"24h dispatch\", note: \"Orders before 2pm, same day\", icon: \"dispatch\" },\n    { title: \"30-day guarantee\", note: \"Even if the pouch is empty\", icon: \"guarantee\" },\n  ],\n  columns = [\n    { title: \"Shop\", links: [{ label: \"All products\", href: \"#shop\" }, { label: \"Powders\", href: \"#powders\" }, { label: \"Drinks\", href: \"#drinks\" }] },\n    { title: \"Proof\", links: [{ label: \"Lab results\", href: \"#lab-results\" }, { label: \"Ingredients\", href: \"#ingredients\" }, { label: \"Quality\", href: \"#quality\" }] },\n    { title: \"Support\", links: [{ label: \"Shipping\", href: \"#shipping\" }, { label: \"Returns\", href: \"#returns\" }, { label: \"Contact\", href: \"#contact\" }] },\n  ],\n  legal = \"These statements have not been evaluated by the FDA. This product is not intended to diagnose, treat, cure, or prevent any disease.\",\n  className,\n}: {\n  brandName?: string\n  points?: Point[]\n  columns?: Column[]\n  legal?: string\n  className?: string\n}) {\n  return (\n    <footer data-sk-section=\"footer\" data-sk-variant=\"footer-proof\" className={cn(\"relative overflow-hidden bg-sk-ink text-sk-paper\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 pt-14 sm:px-8\">\n        <ul className=\"grid grid-cols-1 gap-px overflow-hidden rounded-sk-card border border-sk-paper/10 bg-sk-paper/10 sm:grid-cols-2 lg:grid-cols-4\">\n          {points.map((p) => {\n            const Icon = ICONS[p.icon ?? \"tested\"]\n            return (\n              <li key={p.title} className=\"flex items-start gap-3 bg-sk-ink p-5\">\n                <Icon size={18} aria-hidden className=\"mt-0.5 shrink-0 text-sk-paper/60\" />\n                <div>\n                  <p className=\"text-[15px] font-semibold\">{p.title}</p>\n                  <p className=\"mt-1 text-[13px] leading-[1.5] text-sk-paper/60\">{p.note}</p>\n                </div>\n              </li>\n            )\n          })}\n        </ul>\n\n        <div className=\"grid grid-cols-2 gap-x-6 gap-y-10 py-14 sm:grid-cols-3 md:grid-cols-[1.5fr_1fr_1fr_1fr]\">\n          <div className=\"col-span-2 max-w-xs sm:col-span-3 md:col-span-1\">\n            <p className=\"font-sk-display text-xl font-semibold leading-[1.1] tracking-[-0.02em] text-balance\">Every batch tested. Every result published.</p>\n            <p className=\"mt-3 text-[13px] leading-[1.5] text-sk-paper/60\">{legal}</p>\n          </div>\n          {columns.map((c) => (\n            <nav key={c.title} aria-label={c.title}>\n              <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-paper/50\">{c.title}</p>\n              <ul className=\"mt-3 grid\">\n                {c.links.map((l) => (\n                  <li key={l.href}>\n                    <a href={l.href} className={cn(\"inline-flex min-h-10 items-center rounded-sk-btn text-[13px] text-sk-paper/70 transition-colors duration-200 hover:text-sk-paper\", ring)}>\n                      {l.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </nav>\n          ))}\n        </div>\n\n        <div className=\"flex flex-wrap items-center justify-between gap-2 border-t border-sk-paper/10 py-5 text-[13px] text-sk-paper/50\">\n          <p>&copy; {new Date().getFullYear()} {brandName}</p>\n          <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em]\">Made in the USA</p>\n        </div>\n      </div>\n\n      <Wordmark name={brandName} />\n    </footer>\n  )\n}\n\n/** Oversized wordmark sized by container width, then shrunk to fit if the\n    style pack's display face is wider than the estimate. */\nfunction Wordmark({ name }: { name: string }) {\n  const box = useRef<HTMLDivElement>(null)\n  const text = useRef<HTMLSpanElement>(null)\n  useEffect(() => {\n    const b = box.current\n    const t = text.current\n    if (!b || !t) return\n    const fit = () => {\n      t.style.transform = \"\"\n      const avail = b.clientWidth - 16\n      const w = t.scrollWidth\n      if (w > avail && w > 0) t.style.transform = `scale(${avail / w})`\n    }\n    fit()\n    const ro = new ResizeObserver(fit)\n    ro.observe(b)\n    document.fonts?.ready.then(fit).catch(() => {})\n    return () => ro.disconnect()\n  }, [name])\n  return (\n    <div ref={box} aria-hidden className=\"pointer-events-none flex select-none justify-center overflow-hidden px-2 [container-type:inline-size]\">\n      <span\n        ref={text}\n        className=\"-mb-[0.18em] block origin-bottom whitespace-nowrap font-sk-display font-semibold leading-[0.8] text-sk-paper/10\"\n        // Inline tracking beats the style pack's display tracking.\n        style={{ fontSize: `min(240px, calc(100cqw / ${Math.max(4, name.length * 0.55).toFixed(2)}))`, letterSpacing: \"-0.04em\" }}\n      >\n        {name}\n      </span>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/footer/footer-proof.tsx"
    }
  ],
  "meta": {
    "section": "footer",
    "variant": "proof",
    "niche": [
      "any"
    ],
    "commerce": [
      "trust"
    ],
    "previewHeight": 720
  }
}