{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pdp-coa-band",
  "type": "registry:block",
  "title": "Lab results band",
  "description": "Full width lab results band: a third-party test report as letterhead beside the case for testing every batch.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "pdp",
    "supplements",
    "wellness"
  ],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/button.json"
  ],
  "files": [
    {
      "path": "pdp/pdp-coa-band.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { Check, Download, FlaskConical, X } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { Button } from \"@/components/storekit/ui/button\"\n\n/* A lab results band: a third-party test report styled as letterhead next\n   to the case for testing every batch. Result rows enter in sequence. */\n\ntype Result = { analyte: string; spec: string; result: string; pass?: boolean }\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\nconst DEFAULT_RESULTS: Result[] = [\n  { analyte: \"Label claim\", spec: \"Matches label\", result: \"Matches\", pass: true },\n  { analyte: \"Lead\", spec: \"< 0.5 mcg\", result: \"ND\", pass: true },\n  { analyte: \"Arsenic\", spec: \"< 10 mcg\", result: \"1.2 mcg\", pass: true },\n  { analyte: \"Pesticides\", spec: \"None detected\", result: \"ND\", pass: true },\n  { analyte: \"Microbials\", spec: \"Within limits\", result: \"Pass\", pass: true },\n]\n\nexport function PdpCoaBand({\n  product = \"Daily Greens\",\n  lab = \"Independent third-party lab\",\n  lot = \"DG-2409-117\",\n  date = \"2026-09-14\",\n  method = \"ICP-MS, micro panel\",\n  results = DEFAULT_RESULTS,\n  headline = \"Every batch, tested\",\n  bullets = [\"Tested by a third-party lab, not by us\", \"Heavy metals, pesticides and microbials on every batch\", \"The batch code on your pouch matches the report\"],\n  coaHref,\n  className,\n}: {\n  product?: string\n  lab?: string\n  lot?: string\n  date?: string\n  method?: string\n  results?: Result[]\n  headline?: string\n  bullets?: string[]\n  coaHref?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const rise = (i: number) => ({\n    initial: { opacity: 0, y: reduce ? 0 : 8 },\n    whileInView: { opacity: 1, y: 0 },\n    viewport: { once: true, amount: 0 },\n    transition: { duration: reduce ? 0 : 0.5, ease: EASE, delay: reduce ? 0 : 0.15 + i * 0.05 },\n  })\n\n  return (\n    <section data-sk-section=\"pdp\" data-sk-variant=\"pdp-coa-band\" className={cn(\"w-full overflow-hidden border-y border-sk-line bg-sk-surface py-16 sm:py-24\", className)}>\n      <div className=\"mx-auto grid max-w-6xl items-center gap-10 px-4 sm:px-8 md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] md:gap-16\">\n        <motion.article\n          initial={{ opacity: 0, y: reduce ? 0 : 8 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true, amount: 0.2 }}\n          transition={{ duration: reduce ? 0 : 0.5, ease: EASE }}\n          className=\"min-w-0 rounded-sk-card border border-sk-line bg-sk-card p-4 sm:p-6\"\n          aria-label={`Lab results for ${product}`}\n        >\n          <header className=\"flex items-start justify-between gap-4 border-b border-sk-line pb-4\">\n            <div className=\"flex min-w-0 flex-col gap-1\">\n              <span className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">Lab results</span>\n              <span className=\"font-sk-display text-lg font-semibold tracking-[-0.02em] text-sk-ink\">{product}</span>\n              <span className=\"text-[13px] text-sk-muted\">{lab}</span>\n            </div>\n            <FlaskConical size={20} className=\"mt-1 shrink-0 text-sk-accent\" aria-hidden />\n          </header>\n          <dl className=\"grid grid-cols-2 gap-3 border-b border-sk-line py-4 font-sk-mono sm:grid-cols-3 text-[11px] uppercase tracking-[0.08em]\">\n            {[\n              [\"Batch\", lot],\n              [\"Date\", date],\n              [\"Method\", method],\n            ].map(([k, v], i) => (\n              <div key={k} className={cn(\"flex min-w-0 flex-col gap-1\", i === 2 && \"col-span-2 sm:col-span-1\")}>\n                <dt className=\"text-sk-muted\">{k}</dt>\n                <dd className=\"break-words normal-case tracking-normal text-sk-ink\">{v}</dd>\n              </div>\n            ))}\n          </dl>\n          <div className=\"-mx-1 min-w-0 overflow-x-auto\">\n            <table className=\"w-full text-left text-[13px]\">\n              <thead>\n                <tr className=\"font-sk-mono text-[11px] uppercase tracking-[0.08em] text-sk-muted\">\n                  <th className=\"px-1 py-3 font-normal\">Test</th>\n                  <th className=\"px-1 py-3 font-normal\">Spec</th>\n                  <th className=\"px-1 py-3 font-normal\">Result</th>\n                  <th className=\"px-1 py-3 text-right font-normal\">\n                    <span className=\"sr-only sm:not-sr-only\">Status</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {results.map((r, i) => (\n                  <motion.tr\n                    key={r.analyte}\n                    variants={{ hidden: { opacity: 0, y: reduce ? 0 : 8 }, shown: { opacity: 1, y: 0 } }}\n                    initial=\"hidden\"\n                    whileInView=\"shown\"\n                    viewport={{ once: true, amount: 0 }}\n                    transition={{ duration: reduce ? 0 : 0.45, ease: EASE, delay: reduce ? 0 : 0.15 + i * 0.05 }}\n                    className=\"border-t border-sk-line\"\n                  >\n                    <td className=\"px-1 py-2.5 text-sk-ink\">{r.analyte}</td>\n                    <td className=\"px-1 py-2.5 font-sk-mono text-sk-muted\">{r.spec}</td>\n                    <td className=\"px-1 py-2.5 font-sk-mono text-sk-ink\">{r.result}</td>\n                    <td className=\"px-1 py-2.5 text-right\">\n                      <span\n                        className={cn(\n                          \"inline-flex items-center gap-1 rounded-sk-chip px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em]\",\n                          r.pass === false ? \"bg-sk-sale/[0.12] text-sk-sale\" : \"bg-sk-savings/[0.12] text-sk-savings\"\n                        )}\n                      >\n                        {r.pass === false ? <X size={11} strokeWidth={3} aria-hidden /> : <Check size={11} strokeWidth={3} aria-hidden />}\n                        <span className=\"sr-only sm:not-sr-only\">{r.pass === false ? \"Fail\" : \"Pass\"}</span>\n                      </span>\n                    </td>\n                  </motion.tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </motion.article>\n\n        <div className=\"flex min-w-0 flex-col gap-5\">\n          <motion.span {...rise(0)} className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">\n            Third-party tested\n          </motion.span>\n          <motion.h2 {...rise(1)} className=\"font-sk-display text-3xl font-semibold leading-[1.1] tracking-[-0.02em] text-sk-ink sm:text-4xl\">\n            {headline}\n          </motion.h2>\n          <ul className=\"flex flex-col gap-3\">\n            {bullets.map((b, i) => (\n              <motion.li key={b} {...rise(i + 2)} className=\"flex items-start gap-3 text-[15px] leading-[1.5] text-sk-muted\">\n                <span className=\"mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-sk-accent/[0.12] text-sk-accent\">\n                  <Check size={12} strokeWidth={3} aria-hidden />\n                </span>\n                {b}\n              </motion.li>\n            ))}\n          </ul>\n          <motion.div {...rise(bullets.length + 2)}>\n            {coaHref ? (\n              <a\n                href={coaHref}\n                download\n                className=\"sk-btn inline-flex h-11 items-center gap-2 rounded-sk-btn border border-sk-line px-5 text-sm font-medium text-sk-ink outline-none transition-colors duration-200 hover:bg-sk-ink/[0.04] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n              >\n                <Download size={16} aria-hidden /> Download lab report\n              </a>\n            ) : (\n              <Button variant=\"outline\">\n                <Download size={16} aria-hidden /> Download lab report\n              </Button>\n            )}\n          </motion.div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/pdp/pdp-coa-band.tsx"
    }
  ],
  "meta": {
    "section": "pdp",
    "variant": "coa",
    "niche": [
      "supplements",
      "wellness"
    ],
    "commerce": [
      "trust"
    ],
    "previewHeight": 640
  }
}