{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "privacy-policy-generator",
  "title": "Privacy Policy Generator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/privacy-policy-generator/PrivacyPolicyGenerator.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  ShieldCheck,\n  Copy,\n  Check,\n  Download,\n  Building2,\n  Mail,\n  Cookie,\n  CreditCard,\n  BarChart3,\n  Bug,\n  Server,\n  Scale,\n  Code2,\n  FileCode,\n  Sliders,\n  CheckCircle2,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\n\nexport interface PrivacyPolicyGeneratorProps {\n  className?: string\n  initialCompanyName?: string\n  initialContactEmail?: string\n  initialWebsiteUrl?: string\n  initialEffectiveDate?: string\n  onExportMarkdown?: (content: string) => void\n  onExportHtml?: (content: string) => void\n}\n\ninterface ProcessorMeta {\n  id: string\n  name: string\n  category: 'Analytics' | 'Payment' | 'Telemetry' | 'Infrastructure'\n  description: string\n  purpose: string\n  dataCollected: string\n  location: string\n}\n\nconst ALL_PROCESSORS: ProcessorMeta[] = [\n  {\n    id: 'ga4',\n    name: 'Google Analytics 4',\n    category: 'Analytics',\n    description: 'Traffic telemetry, session counts, anonymized IP',\n    purpose: 'Audience engagement & web traffic analytics',\n    dataCollected: 'Anonymized IP, browser type, referral URLs, screen resolution',\n    location: 'United States (Google LLC)',\n  },\n  {\n    id: 'posthog',\n    name: 'PostHog Cloud',\n    category: 'Analytics',\n    description: 'Product telemetry, session recording, feature flags',\n    purpose: 'User journey tracking and product telemetry',\n    dataCollected: 'Interaction events, UI clickstreams, feature flag evaluation data',\n    location: 'United States / EU (PostHog, Inc.)',\n  },\n  {\n    id: 'plausible',\n    name: 'Plausible Analytics',\n    category: 'Analytics',\n    description: 'Privacy-first cookieless analytics',\n    purpose: 'Aggregated website traffic metrics without personal identification',\n    dataCollected: 'Page views, referrers, operating system name (no persistent cookies)',\n    location: 'European Union (Estonia)',\n  },\n  {\n    id: 'stripe',\n    name: 'Stripe, Inc.',\n    category: 'Payment',\n    description: 'PCI-DSS Level 1 tokenized billing and transactions',\n    purpose: 'Payment gateway execution, fraud screening, and subscription billing',\n    dataCollected: 'Card token, last 4 digits, billing address, customer ID',\n    location: 'United States / Global (Stripe, Inc.)',\n  },\n  {\n    id: 'paddle',\n    name: 'Paddle',\n    category: 'Payment',\n    description: 'Merchant of record, checkout & tax compliance',\n    purpose: 'International checkout, VAT/sales tax management, and receipt delivery',\n    dataCollected: 'Customer billing details, invoice records, transaction totals',\n    location: 'United Kingdom / Global (Paddle.com Market Ltd.)',\n  },\n  {\n    id: 'sentry',\n    name: 'Sentry',\n    category: 'Telemetry',\n    description: 'Application exceptions, crash stack traces, release health',\n    purpose: 'Crash diagnosis, real-time error telemetry, and performance tracking',\n    dataCollected: 'Error stack traces, browser environment, client runtime exceptions',\n    location: 'United States (Functional Software, Inc.)',\n  },\n  {\n    id: 'datadog',\n    name: 'Datadog',\n    category: 'Telemetry',\n    description: 'APM performance telemetry, log indexing',\n    purpose: 'Edge latency monitoring, API endpoint tracing, system uptime auditing',\n    dataCollected: 'Server request metrics, response latencies, infrastructure logs',\n    location: 'United States (Datadog, Inc.)',\n  },\n  {\n    id: 'cloudflare',\n    name: 'Cloudflare Pages',\n    category: 'Infrastructure',\n    description: 'Global CDN routing, edge caching, and DDoS mitigation',\n    purpose: 'Edge website delivery, SSL/TLS encryption, and automated bot mitigation',\n    dataCollected: 'Connecting IP address (for DDoS protection), HTTP request headers',\n    location: 'Global Anycast Edge Network (Cloudflare, Inc.)',\n  },\n  {\n    id: 'aws',\n    name: 'AWS S3',\n    category: 'Infrastructure',\n    description: 'Encrypted cloud object storage for assets and files',\n    purpose: 'Scalable cloud object storage for media assets and encrypted backups',\n    dataCollected: 'Uploaded user media assets, encrypted data archives',\n    location: 'United States & EU Regions (Amazon Web Services, Inc.)',\n  },\n]\n\nexport function PrivacyPolicyGenerator({\n  className,\n  initialCompanyName = 'UIPKGE Technologies Inc.',\n  initialContactEmail = 'privacy@uipkge.dev',\n  initialWebsiteUrl = 'https://uipkge.dev',\n  initialEffectiveDate = 'August 21, 2026',\n  onExportMarkdown,\n  onExportHtml,\n}: PrivacyPolicyGeneratorProps) {\n  // Configuration State\n  const [companyName, setCompanyName] = React.useState(initialCompanyName)\n  const [contactEmail, setContactEmail] = React.useState(initialContactEmail)\n  const [websiteUrl, setWebsiteUrl] = React.useState(initialWebsiteUrl)\n  const [effectiveDate, setEffectiveDate] = React.useState(initialEffectiveDate)\n\n  // Jurisdictions & Legal Regulations\n  const [jurisdictions, setJurisdictions] = React.useState({\n    gdpr: true,\n    ccpa: true,\n    pipeda: false,\n    lgpd: false,\n  })\n\n  // Third-Party Data Processors\n  const [processors, setProcessors] = React.useState<Record<string, boolean>>({\n    ga4: true,\n    posthog: false,\n    plausible: true,\n    stripe: true,\n    paddle: false,\n    sentry: true,\n    datadog: false,\n    cloudflare: true,\n    aws: true,\n  })\n\n  // Cookie Tracking Switch\n  const [cookieTracking, setCookieTracking] = React.useState(true)\n\n  // Copy feedback states\n  const [copiedMd, setCopiedMd] = React.useState(false)\n  const [copiedHtml, setCopiedHtml] = React.useState(false)\n\n  const activeProcessorsList = React.useMemo(() => {\n    return ALL_PROCESSORS.filter((p) => processors[p.id])\n  }, [processors])\n\n  const activeJurisdictionsCount = React.useMemo(() => {\n    let count = 0\n    if (jurisdictions.gdpr) count++\n    if (jurisdictions.ccpa) count++\n    if (jurisdictions.pipeda) count++\n    if (jurisdictions.lgpd) count++\n    return count\n  }, [jurisdictions])\n\n  const generateMarkdown = React.useCallback((): string => {\n    const company = companyName.trim() || 'Our Company'\n    const email = contactEmail.trim() || 'privacy@example.com'\n    const website = websiteUrl.trim() || 'https://example.com'\n    const date = effectiveDate.trim() || 'August 21, 2026'\n\n    let md = `# Privacy Policy for ${company}\\n\\n`\n    md += `**Effective Date:** ${date}  \\n`\n    md += `**Last Updated:** ${date}  \\n`\n    md += `**Website:** [${website}](${website})\\n\\n`\n    md += `---\\n\\n`\n\n    md += `## 1. Introduction & Overview\\n\\n`\n    md += `${company} (\"we\", \"our\", or \"us\") respects your privacy and is committed to protecting your personal information. This Privacy Policy details our practices concerning the collection, use, storage, and disclosure of personal data when you visit [${website}](${website}) (the \"Website\") or use our services.\\n\\n`\n    md += `By accessing or using our Website, you consent to the data collection and processing methods outlined in this policy.\\n\\n`\n\n    md += `## 2. Personal Information We Collect\\n\\n`\n    md += `We collect information necessary to operate our platform, maintain security, and fulfill legal requirements:\\n\\n`\n    md += `- **Direct Inquiries & Communication:** When you reach out to us at ${email}, we retain your contact details and message contents.\\n`\n    if (processors.stripe || processors.paddle) {\n      md += `- **Payment & Billing Data:** For paid services, payment transactions are processed securely through PCI-DSS Level 1 compliant processors. We do not store complete raw credit card numbers on our servers.\\n`\n    }\n    if (processors.ga4 || processors.posthog || processors.plausible || processors.sentry || processors.datadog) {\n      md += `- **Telemetry & Usage Information:** Diagnostic telemetry, operating system details, browser version, and aggregated usage metrics are collected to maintain service reliability.\\n`\n    }\n    md += `\\n`\n\n    md += `## 3. Third-Party Sub-Processors & Data Sharing\\n\\n`\n    if (activeProcessorsList.length > 0) {\n      md += `We partner with trusted third-party sub-processors to power our application infrastructure. Each partner operates under a Data Processing Agreement (DPA) adhering to standard contractual clauses:\\n\\n`\n      md += `| Sub-Processor | Category | Purpose | Processing Location |\\n`\n      md += `| :--- | :--- | :--- | :--- |\\n`\n      for (const p of activeProcessorsList) {\n        md += `| **${p.name}** | ${p.category} | ${p.purpose} | ${p.location} |\\n`\n      }\n      md += `\\n`\n    } else {\n      md += `We do not share your personal information with external commercial sub-processors.\\n\\n`\n    }\n\n    md += `## 4. Cookies & Tracking Technologies\\n\\n`\n    if (cookieTracking) {\n      md += `We use cookies and equivalent browser storage mechanisms to ensure core site navigation and analyze traffic:\\n\\n`\n      md += `- **Strictly Necessary Cookies:** Essential for page routing, authentication tokens, and user preference persistence.\\n`\n      if (processors.ga4 || processors.posthog) {\n        md += `- **Performance & Analytics Cookies:** Help us analyze traffic patterns to optimize layout performance.\\n`\n      }\n      md += `\\nYou may configure your browser to reject cookies. However, disabling certain necessary cookies may affect website functionality.\\n\\n`\n    } else {\n      md += `**Zero-Tracking Cookies Guarantee:** This website operates on a privacy-first basis and does not place tracking cookies, advertising beacons, or third-party marketing identifiers on your device.\\n\\n`\n    }\n\n    md += `## 5. Compliance & Statutory Privacy Rights\\n\\n`\n    if (jurisdictions.gdpr) {\n      md += `### 5.1 European Union (GDPR - Regulation EU 2016/679)\\n\\n`\n      md += `If you reside in the European Economic Area (EEA), you possess specific rights under the GDPR:\\n`\n      md += `- **Right of Access (Art. 15):** Request confirmation and a portable copy of personal records held.\\n`\n      md += `- **Right to Rectification (Art. 16):** Update or rectify inaccurate or incomplete personal records.\\n`\n      md += `- **Right to Erasure (Art. 17):** Request permanent erasure of personal data under statutory conditions.\\n`\n      md += `- **Right to Data Portability (Art. 20):** Receive your personal data in a structured, machine-readable format.\\n`\n      md += `- **Supervisory Authority:** You have the statutory right to lodge a complaint with an EU Data Protection Authority.\\n\\n`\n    }\n    if (jurisdictions.ccpa) {\n      md += `### 5.2 California Privacy Rights (CCPA / CPRA)\\n\\n`\n      md += `Under the California Consumer Privacy Act and California Privacy Rights Act, California consumers have the right to:\\n`\n      md += `- **Know and Access:** Request details regarding personal data categories collected over the past 12 months.\\n`\n      md += `- **Delete Personal Information:** Request deletion of personal data collected directly from you.\\n`\n      md += `- **Do Not Sell or Share My Information:** ${company} does not sell, rent, or trade your personal data to third-party brokers.\\n`\n      md += `- **Non-Discrimination:** You will not receive discriminatory pricing or service degradation for exercising your privacy rights.\\n\\n`\n    }\n    if (jurisdictions.pipeda) {\n      md += `### 5.3 Canadian Privacy Rights (PIPEDA)\\n\\n`\n      md += `In compliance with Canada's Personal Information Protection and Electronic Documents Act (PIPEDA), we adhere to the 10 Fair Information Principles ensuring accountability and purpose limitation. Complaints may be directed to the Office of the Privacy Commissioner of Canada (OPC).\\n\\n`\n    }\n    if (jurisdictions.lgpd) {\n      md += `### 5.4 Brazilian Privacy Rights (LGPD - Law No. 13.709/2018)\\n\\n`\n      md += `Under the Brazilian General Data Protection Law (LGPD), Brazilian data subjects may request confirmation of processing, anonymization of non-essential records, and revocation of consent. Oversight is provided by the ANPD.\\n\\n`\n    }\n    if (!jurisdictions.gdpr && !jurisdictions.ccpa && !jurisdictions.pipeda && !jurisdictions.lgpd) {\n      md += `We honor international data privacy best practices. You may request access to, correction of, or deletion of your personal records at any time.\\n\\n`\n    }\n\n    md += `## 6. Data Security & Storage\\n\\n`\n    md += `We implement defense-in-depth technical safeguards including TLS 1.3 encryption for data in transit, AES-256 encryption for data at rest, and strict role-based access control (RBAC). Data is retained only for the duration required to fulfill contractual and legal compliance duties.\\n\\n`\n\n    md += `## 7. Contact Information & Privacy Inquiries\\n\\n`\n    md += `If you have questions, inquiries, or wish to exercise your statutory rights, contact our Data Protection representative:\\n\\n`\n    md += `- **Entity:** ${company}\\n`\n    md += `- **Privacy Email:** [${email}](mailto:${email})\\n`\n    md += `- **Website:** [${website}](${website})\\n`\n\n    return md\n  }, [\n    companyName,\n    contactEmail,\n    websiteUrl,\n    effectiveDate,\n    jurisdictions,\n    processors,\n    cookieTracking,\n    activeProcessorsList,\n  ])\n\n  const generateHtml = React.useCallback((): string => {\n    const company = companyName.trim() || 'Our Company'\n    const email = contactEmail.trim() || 'privacy@example.com'\n    const website = websiteUrl.trim() || 'https://example.com'\n    const date = effectiveDate.trim() || 'August 21, 2026'\n\n    let html = `<!DOCTYPE html>\\n<html lang=\"en\">\\n<head>\\n  <meta charset=\"UTF-8\" />\\n  <title>Privacy Policy - ${company}</title>\\n  <style>\\n    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; max-width: 800px; margin: 40px auto; padding: 0 20px; color: #1e293b; }\\n    h1 { font-size: 2rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; }\\n    h2 { font-size: 1.35rem; margin-top: 2rem; }\\n    h3 { font-size: 1.1rem; }\\n    table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.9rem; }\\n    th, td { border: 1px solid #cbd5e1; padding: 8px 12px; text-align: left; }\\n    th { background: #f8fafc; }\\n    .meta { color: #64748b; font-size: 0.9rem; margin-bottom: 24px; }\\n    a { color: #2563eb; text-decoration: underline; }\\n  </style>\\n</head>\\n<body>\\n`\n    html += `  <h1>Privacy Policy</h1>\\n`\n    html += `  <div class=\"meta\">\\n`\n    html += `    <strong>Effective Date:</strong> ${date} &bull; <strong>Organization:</strong> ${company} &bull; <strong>Website:</strong> <a href=\"${website}\">${website}</a>\\n`\n    html += `  </div>\\n\\n`\n\n    html += `  <h2>1. Introduction &amp; Overview</h2>\\n`\n    html += `  <p>${company} (\"we\", \"our\", or \"us\") respects your privacy and is committed to protecting your personal information. This Privacy Policy details our practices concerning the collection, use, storage, and disclosure of personal data when you visit <a href=\"${website}\">${website}</a> (the \"Website\") or use our services.</p>\\n\\n`\n\n    html += `  <h2>2. Personal Information We Collect</h2>\\n`\n    html += `  <p>We collect information necessary to operate our platform, maintain security, and fulfill legal requirements:</p>\\n`\n    html += `  <ul>\\n`\n    html += `    <li><strong>Direct Inquiries &amp; Communication:</strong> When you reach out to us at ${email}, we retain your contact details and message records.</li>\\n`\n    if (processors.stripe || processors.paddle) {\n      html += `    <li><strong>Payment &amp; Billing Data:</strong> Payment transactions are processed securely through PCI-DSS Level 1 compliant processors. Complete raw credit card numbers are never stored on our servers.</li>\\n`\n    }\n    if (processors.ga4 || processors.posthog || processors.plausible || processors.sentry || processors.datadog) {\n      html += `    <li><strong>Telemetry &amp; Usage Information:</strong> Diagnostic telemetry, operating system details, browser version, and aggregated usage metrics are collected to maintain service reliability.</li>\\n`\n    }\n    html += `  </ul>\\n\\n`\n\n    html += `  <h2>3. Third-Party Sub-Processors &amp; Data Sharing</h2>\\n`\n    if (activeProcessorsList.length > 0) {\n      html += `  <p>We partner with trusted third-party sub-processors to power our application infrastructure under strict Data Processing Agreements (DPAs):</p>\\n`\n      html += `  <table>\\n    <thead>\\n      <tr>\\n        <th>Sub-Processor</th>\\n        <th>Category</th>\\n        <th>Purpose</th>\\n        <th>Processing Location</th>\\n      </tr>\\n    </thead>\\n    <tbody>\\n`\n      for (const p of activeProcessorsList) {\n        html += `      <tr>\\n        <td><strong>${p.name}</strong></td>\\n        <td>${p.category}</td>\\n        <td>${p.purpose}</td>\\n        <td>${p.location}</td>\\n      </tr>\\n`\n      }\n      html += `    </tbody>\\n  </table>\\n\\n`\n    } else {\n      html += `  <p>We do not share your personal information with external commercial sub-processors.</p>\\n\\n`\n    }\n\n    html += `  <h2>4. Cookies &amp; Tracking Technologies</h2>\\n`\n    if (cookieTracking) {\n      html += `  <p>We use cookies and equivalent browser storage mechanisms to ensure core site navigation and analyze traffic:</p>\\n`\n      html += `  <ul>\\n    <li><strong>Strictly Necessary Cookies:</strong> Essential for page routing, authentication tokens, and user preference persistence.</li>\\n`\n      if (processors.ga4 || processors.posthog) {\n        html += `    <li><strong>Performance &amp; Analytics Cookies:</strong> Help us analyze traffic patterns to optimize layout performance.</li>\\n`\n      }\n      html += `  </ul>\\n`\n      html += `  <p>You may configure your browser to reject cookies. However, disabling certain necessary cookies may affect website functionality.</p>\\n\\n`\n    } else {\n      html += `  <p><strong>Zero-Tracking Cookies Guarantee:</strong> This website operates on a privacy-first basis and does not place tracking cookies, advertising beacons, or third-party marketing identifiers on your device.</p>\\n\\n`\n    }\n\n    html += `  <h2>5. Compliance &amp; Statutory Privacy Rights</h2>\\n`\n    if (jurisdictions.gdpr) {\n      html += `  <h3>5.1 European Union (GDPR - Regulation EU 2016/679)</h3>\\n`\n      html += `  <p>If you reside in the European Economic Area (EEA), you possess rights under the GDPR including Right of Access (Art. 15), Right to Rectification (Art. 16), Right to Erasure (Art. 17), and Right to Data Portability (Art. 20). You may also lodge a complaint with your local EU Data Protection Authority.</p>\\n`\n    }\n    if (jurisdictions.ccpa) {\n      html += `  <h3>5.2 California Privacy Rights (CCPA / CPRA)</h3>\\n`\n      html += `  <p>Under the California Consumer Privacy Act (CCPA/CPRA), California residents may request details regarding personal data collected, request erasure of personal data, and are guaranteed that ${company} does not sell personal data to third parties.</p>\\n`\n    }\n    if (jurisdictions.pipeda) {\n      html += `  <h3>5.3 Canadian Privacy Rights (PIPEDA)</h3>\\n`\n      html += `  <p>In compliance with Canada's PIPEDA, we adhere to the 10 Fair Information Principles ensuring accountability, consent, and purpose limitation.</p>\\n`\n    }\n    if (jurisdictions.lgpd) {\n      html += `  <h3>5.4 Brazilian Privacy Rights (LGPD)</h3>\\n`\n      html += `  <p>Under the Brazilian General Data Protection Law (LGPD), Brazilian data subjects may request confirmation of processing, anonymization of non-essential records, and revocation of consent.</p>\\n`\n    }\n    if (!jurisdictions.gdpr && !jurisdictions.ccpa && !jurisdictions.pipeda && !jurisdictions.lgpd) {\n      html += `  <p>We honor international data privacy best practices. You may request access to, correction of, or deletion of your personal records at any time.</p>\\n`\n    }\n\n    html += `\\n  <h2>6. Data Security &amp; Storage</h2>\\n`\n    html += `  <p>We implement defense-in-depth technical safeguards including TLS 1.3 encryption for data in transit, AES-256 encryption for data at rest, and strict role-based access control (RBAC).</p>\\n\\n`\n\n    html += `  <h2>7. Contact Information &amp; Privacy Inquiries</h2>\\n`\n    html += `  <p>For any questions or statutory inquiries, contact our Data Protection team at <a href=\"mailto:${email}\">${email}</a>.</p>\\n`\n\n    html += `</body>\\n</html>`\n    return html\n  }, [\n    companyName,\n    contactEmail,\n    websiteUrl,\n    effectiveDate,\n    jurisdictions,\n    processors,\n    cookieTracking,\n    activeProcessorsList,\n  ])\n\n  const downloadPolicy = (format: 'md' | 'html') => {\n    const content = format === 'md' ? generateMarkdown() : generateHtml()\n    const mimeType = format === 'md' ? 'text/markdown;charset=utf-8' : 'text/html;charset=utf-8'\n    const ext = format === 'md' ? 'md' : 'html'\n    const safeName = (companyName.trim() || 'uipkge')\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/(^-|-$)/g, '')\n    const filename = `${safeName}-privacy-policy.${ext}`\n\n    const blob = new Blob([content], { type: mimeType })\n    const url = URL.createObjectURL(blob)\n    const link = document.createElement('a')\n    link.href = url\n    link.download = filename\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n    URL.revokeObjectURL(url)\n\n    if (format === 'md') onExportMarkdown?.(content)\n    else onExportHtml?.(content)\n  }\n\n  const copyPolicy = async (format: 'md' | 'html') => {\n    const content = format === 'md' ? generateMarkdown() : generateHtml()\n    try {\n      if (navigator.clipboard && window.isSecureContext) {\n        await navigator.clipboard.writeText(content)\n      } else {\n        const textarea = document.createElement('textarea')\n        textarea.value = content\n        textarea.style.position = 'fixed'\n        textarea.style.opacity = '0'\n        document.body.appendChild(textarea)\n        textarea.focus()\n        textarea.select()\n        document.execCommand('copy')\n        document.body.removeChild(textarea)\n      }\n\n      if (format === 'md') {\n        setCopiedMd(true)\n        setTimeout(() => setCopiedMd(false), 2000)\n        onExportMarkdown?.(content)\n      } else {\n        setCopiedHtml(true)\n        setTimeout(() => setCopiedHtml(false), 2000)\n        onExportHtml?.(content)\n      }\n    } catch (err) {\n      console.error('Failed to copy policy:', err)\n    }\n  }\n\n  return (\n    <div data-slot=\"privacy-policy-generator\" className={cn('mx-auto w-full max-w-7xl space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"border-border flex flex-col gap-4 border-b pb-5 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            <div className=\"bg-primary/10 text-primary border-primary/20 flex size-8 items-center justify-center rounded-md border\">\n              <ShieldCheck className=\"size-4\" aria-hidden=\"true\" />\n            </div>\n            <h1 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n              Website Privacy Policy &amp; Compliance Generator\n            </h1>\n            <Badge variant=\"outline\" className=\"gap-1 px-2 py-0.5 font-mono text-xs\">\n              <Scale className=\"size-3\" aria-hidden=\"true\" />\n              {activeJurisdictionsCount} Jurisdictions\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-xs sm:text-sm\">\n            Generate compliant privacy disclosures tailored to your tech stack and analytics tools.\n          </p>\n        </div>\n\n        {/* Quick Export Actions in Header */}\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <Button\n            aria-label=\"Download attachment\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"gap-1.5 text-xs\"\n            onClick={() => downloadPolicy('md')}\n          >\n            <Download className=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Export (.md)</span>\n          </Button>\n          <Button size=\"sm\" className=\"gap-1.5 text-xs font-semibold\" onClick={() => downloadPolicy('html')}>\n            <FileCode className=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Export (.html)</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* 2-Column Builder Workspace */}\n      <div className=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n        {/* Left Column: Policy Configuration Sidebar (40% / 5 cols) */}\n        <div className=\"space-y-6 lg:col-span-5\">\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <Sliders className=\"text-primary size-4\" aria-hidden=\"true\" />\n                  <CardTitle className=\"text-base font-semibold\">Policy Configuration</CardTitle>\n                </div>\n                <Badge variant=\"secondary\" className=\"text-xs\">\n                  {activeProcessorsList.length} Sub-Processors\n                </Badge>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Configure company identity, applicable legal regulations, and active data processors.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-6\">\n              {/* 1. Organization & Contact Details */}\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center gap-2\">\n                  <Building2 className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                  <span className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                    Entity &amp; Contact Information\n                  </span>\n                </div>\n\n                <div className=\"space-y-3\">\n                  <div className=\"space-y-1.5\">\n                    <label htmlFor=\"company-name-react\" className=\"text-foreground text-xs font-medium\">\n                      Company / App Name <span className=\"text-destructive\">*</span>\n                    </label>\n                    <Input\n                      id=\"company-name-react\"\n                      value={companyName}\n                      onChange={(e) => setCompanyName(e.target.value)}\n                      placeholder=\"e.g. UIPKGE Technologies Inc.\"\n                      size=\"middle\"\n                    />\n                  </div>\n\n                  <div className=\"space-y-1.5\">\n                    <label htmlFor=\"contact-email-react\" className=\"text-foreground text-xs font-medium\">\n                      Contact &amp; DPO Email <span className=\"text-destructive\">*</span>\n                    </label>\n                    <Input\n                      id=\"contact-email-react\"\n                      type=\"email\"\n                      value={contactEmail}\n                      onChange={(e) => setContactEmail(e.target.value)}\n                      placeholder=\"e.g. privacy@uipkge.dev\"\n                      size=\"middle\"\n                    />\n                  </div>\n\n                  <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                    <div className=\"space-y-1.5\">\n                      <label htmlFor=\"website-url-react\" className=\"text-foreground text-xs font-medium\">\n                        Website URL\n                      </label>\n                      <Input\n                        id=\"website-url-react\"\n                        value={websiteUrl}\n                        onChange={(e) => setWebsiteUrl(e.target.value)}\n                        placeholder=\"https://uipkge.dev\"\n                        size=\"middle\"\n                      />\n                    </div>\n                    <div className=\"space-y-1.5\">\n                      <label htmlFor=\"effective-date-react\" className=\"text-foreground text-xs font-medium\">\n                        Effective Date\n                      </label>\n                      <Input\n                        id=\"effective-date-react\"\n                        value={effectiveDate}\n                        onChange={(e) => setEffectiveDate(e.target.value)}\n                        placeholder=\"August 21, 2026\"\n                        size=\"middle\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              {/* 2. Jurisdiction & Legal Regulations */}\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Scale className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                    <span className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                      Jurisdiction &amp; Regulations\n                    </span>\n                  </div>\n                  <span className=\"text-muted-foreground text-xs\">{activeJurisdictionsCount} selected</span>\n                </div>\n                <p className=\"text-muted-foreground text-xs\">\n                  Select applicable privacy frameworks to automatically insert required consumer rights clauses.\n                </p>\n\n                <div className=\"space-y-2.5 pt-1\">\n                  {/* GDPR */}\n                  <div className=\"border-border bg-muted/20 hover:bg-muted/40 flex items-start gap-3 rounded-lg border p-3 transition-colors\">\n                    <Checkbox\n                      id=\"jur-gdpr-react\"\n                      checked={jurisdictions.gdpr}\n                      onCheckedChange={(checked) => setJurisdictions((prev) => ({ ...prev, gdpr: Boolean(checked) }))}\n                      className=\"mt-0.5\"\n                    />\n                    <div className=\"space-y-0.5\">\n                      <label\n                        htmlFor=\"jur-gdpr-react\"\n                        className=\"text-foreground cursor-pointer text-xs font-semibold select-none\"\n                      >\n                        GDPR (EU)\n                      </label>\n                      <p className=\"text-muted-foreground text-xs leading-normal\">\n                        General Data Protection Regulation (Articles 13, 14, 15&ndash;22, DPO and supervisory authority\n                        clauses).\n                      </p>\n                    </div>\n                  </div>\n\n                  {/* CCPA / CPRA */}\n                  <div className=\"border-border bg-muted/20 hover:bg-muted/40 flex items-start gap-3 rounded-lg border p-3 transition-colors\">\n                    <Checkbox\n                      id=\"jur-ccpa-react\"\n                      checked={jurisdictions.ccpa}\n                      onCheckedChange={(checked) => setJurisdictions((prev) => ({ ...prev, ccpa: Boolean(checked) }))}\n                      className=\"mt-0.5\"\n                    />\n                    <div className=\"space-y-0.5\">\n                      <label\n                        htmlFor=\"jur-ccpa-react\"\n                        className=\"text-foreground cursor-pointer text-xs font-semibold select-none\"\n                      >\n                        CCPA / CPRA (California)\n                      </label>\n                      <p className=\"text-muted-foreground text-xs leading-normal\">\n                        California Consumer Privacy Act (Right to Know, Delete, Correct, and &ldquo;Do Not Sell My\n                        Info&rdquo;).\n                      </p>\n                    </div>\n                  </div>\n\n                  {/* PIPEDA */}\n                  <div className=\"border-border bg-muted/20 hover:bg-muted/40 flex items-start gap-3 rounded-lg border p-3 transition-colors\">\n                    <Checkbox\n                      id=\"jur-pipeda-react\"\n                      checked={jurisdictions.pipeda}\n                      onCheckedChange={(checked) => setJurisdictions((prev) => ({ ...prev, pipeda: Boolean(checked) }))}\n                      className=\"mt-0.5\"\n                    />\n                    <div className=\"space-y-0.5\">\n                      <label\n                        htmlFor=\"jur-pipeda-react\"\n                        className=\"text-foreground cursor-pointer text-xs font-semibold select-none\"\n                      >\n                        PIPEDA (Canada)\n                      </label>\n                      <p className=\"text-muted-foreground text-xs leading-normal\">\n                        Personal Information Protection and Electronic Documents Act (10 Fair Information Principles).\n                      </p>\n                    </div>\n                  </div>\n\n                  {/* LGPD */}\n                  <div className=\"border-border bg-muted/20 hover:bg-muted/40 flex items-start gap-3 rounded-lg border p-3 transition-colors\">\n                    <Checkbox\n                      id=\"jur-lgpd-react\"\n                      checked={jurisdictions.lgpd}\n                      onCheckedChange={(checked) => setJurisdictions((prev) => ({ ...prev, lgpd: Boolean(checked) }))}\n                      className=\"mt-0.5\"\n                    />\n                    <div className=\"space-y-0.5\">\n                      <label\n                        htmlFor=\"jur-lgpd-react\"\n                        className=\"text-foreground cursor-pointer text-xs font-semibold select-none\"\n                      >\n                        LGPD (Brazil)\n                      </label>\n                      <p className=\"text-muted-foreground text-xs leading-normal\">\n                        Lei Geral de Prote&ccedil;&atilde;o de Dados (Law No. 13.709/2018, ANPD compliance rights).\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              {/* 3. Third-Party Data Processors */}\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Server className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                    <span className=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                      Third-Party Processors\n                    </span>\n                  </div>\n                  <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                    {activeProcessorsList.length}/{ALL_PROCESSORS.length} Active\n                  </Badge>\n                </div>\n\n                {/* Category: Analytics */}\n                <div className=\"space-y-2\">\n                  <div className=\"text-foreground flex items-center gap-1.5 text-xs font-medium\">\n                    <BarChart3 className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                    <span>Analytics &amp; Metrics</span>\n                  </div>\n                  <div className=\"divide-border/60 border-border bg-card divide-y rounded-lg border\">\n                    {/* GA4 */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Google Analytics 4</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Traffic telemetry, visitor trends &amp; IP masking\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.ga4}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, ga4: checked }))}\n                        aria-label=\"Google Analytics 4\"\n                      />\n                    </div>\n                    {/* PostHog */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">PostHog Cloud</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Product telemetry, event tracking &amp; session replay\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.posthog}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, posthog: checked }))}\n                        aria-label=\"PostHog Cloud\"\n                      />\n                    </div>\n                    {/* Plausible */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Plausible Analytics</p>\n                        <p className=\"text-muted-foreground text-xs\">Privacy-first cookieless analytics in EU</p>\n                      </div>\n                      <Switch\n                        checked={processors.plausible}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, plausible: checked }))}\n                        aria-label=\"Plausible Analytics\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Category: Payment Processing */}\n                <div className=\"space-y-2\">\n                  <div className=\"text-foreground flex items-center gap-1.5 text-xs font-medium\">\n                    <CreditCard className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                    <span>Payment Processing</span>\n                  </div>\n                  <div className=\"divide-border/60 border-border bg-card divide-y rounded-lg border\">\n                    {/* Stripe */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Stripe</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          PCI-DSS Level 1 tokenized billing and transactions\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.stripe}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, stripe: checked }))}\n                        aria-label=\"Stripe\"\n                      />\n                    </div>\n                    {/* Paddle */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Paddle</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Merchant of record, checkout &amp; global tax handling\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.paddle}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, paddle: checked }))}\n                        aria-label=\"Paddle\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Category: Error Logging & Telemetry */}\n                <div className=\"space-y-2\">\n                  <div className=\"text-foreground flex items-center gap-1.5 text-xs font-medium\">\n                    <Bug className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                    <span>Error Logging &amp; Telemetry</span>\n                  </div>\n                  <div className=\"divide-border/60 border-border bg-card divide-y rounded-lg border\">\n                    {/* Sentry */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Sentry</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Application exceptions, crash tracing &amp; stack traces\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.sentry}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, sentry: checked }))}\n                        aria-label=\"Sentry\"\n                      />\n                    </div>\n                    {/* Datadog */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Datadog</p>\n                        <p className=\"text-muted-foreground text-xs\">APM performance telemetry &amp; log aggregation</p>\n                      </div>\n                      <Switch\n                        checked={processors.datadog}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, datadog: checked }))}\n                        aria-label=\"Datadog\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Category: Infrastructure & Hosting */}\n                <div className=\"space-y-2\">\n                  <div className=\"text-foreground flex items-center gap-1.5 text-xs font-medium\">\n                    <Server className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                    <span>Infrastructure &amp; Hosting</span>\n                  </div>\n                  <div className=\"divide-border/60 border-border bg-card divide-y rounded-lg border\">\n                    {/* Cloudflare */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">Cloudflare Pages</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Global CDN edge routing, caching &amp; DDoS mitigation\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.cloudflare}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, cloudflare: checked }))}\n                        aria-label=\"Cloudflare Pages\"\n                      />\n                    </div>\n                    {/* AWS S3 */}\n                    <div className=\"flex items-center justify-between gap-3 p-2.5\">\n                      <div className=\"space-y-0.5\">\n                        <p className=\"text-foreground text-xs font-medium\">AWS S3</p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          Encrypted cloud object storage for assets and media\n                        </p>\n                      </div>\n                      <Switch\n                        checked={processors.aws}\n                        onCheckedChange={(checked) => setProcessors((prev) => ({ ...prev, aws: checked }))}\n                        aria-label=\"AWS S3\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              {/* 4. Cookie Tracking Disclosure Switch */}\n              <div className=\"border-border bg-muted/20 flex items-center justify-between gap-4 rounded-lg border p-3.5\">\n                <div className=\"space-y-0.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <Cookie className=\"text-primary size-4\" aria-hidden=\"true\" />\n                    <p className=\"text-foreground text-xs font-semibold\">Cookie Tracking Disclosure</p>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-normal\">\n                    Enable if using session cookies, analytics tags, or local storage. When disabled, generates a strict\n                    cookieless guarantee.\n                  </p>\n                </div>\n                <Switch\n                  checked={cookieTracking}\n                  onCheckedChange={setCookieTracking}\n                  aria-label=\"Cookie Tracking Disclosure\"\n                />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Right Column: Live Policy Document Preview (60% / 7 cols) */}\n        <div className=\"space-y-5 lg:sticky lg:top-6 lg:col-span-7\">\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"relative flex size-2\">\n                      <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                      <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n                    </span>\n                    <CardTitle className=\"text-base font-semibold\">Live Policy Document Preview</CardTitle>\n                  </div>\n                  <CardDescription className=\"text-xs\">\n                    Real-time generated legal disclosures tailored to your chosen configuration.\n                  </CardDescription>\n                </div>\n\n                {/* Copy Actions Bar */}\n                <div className=\"flex items-center gap-2\">\n                  <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\" onClick={() => copyPolicy('md')}>\n                    {copiedMd ? (\n                      <Check className=\"text-success size-3.5\" aria-hidden=\"true\" />\n                    ) : (\n                      <Copy className=\"size-3.5\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedMd ? 'Copied MD!' : 'Copy Markdown'}</span>\n                  </Button>\n\n                  <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\" onClick={() => copyPolicy('html')}>\n                    {copiedHtml ? (\n                      <Check className=\"text-success size-3.5\" aria-hidden=\"true\" />\n                    ) : (\n                      <Code2 className=\"size-3.5\" aria-hidden=\"true\" />\n                    )}\n                    <span>{copiedHtml ? 'Copied HTML!' : 'Copy HTML'}</span>\n                  </Button>\n                </div>\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4\">\n              {/* Formatted Document Canvas */}\n              <div className=\"border-border/80 bg-background/50 text-foreground/90 max-h-[720px] space-y-6 overflow-y-auto rounded-lg border p-5 text-sm leading-relaxed sm:p-6\">\n                {/* Document Header Block */}\n                <div className=\"border-border space-y-2 border-b pb-5\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                    <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                      Official Disclosure\n                    </Badge>\n                    <span className=\"text-muted-foreground text-xs\">\n                      Last updated: {effectiveDate || 'August 21, 2026'}\n                    </span>\n                  </div>\n                  <h2 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                    Privacy Policy for {companyName || 'UIPKGE Technologies Inc.'}\n                  </h2>\n                  <div className=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs\">\n                    <span>\n                      <strong>Effective Date:</strong> {effectiveDate || 'August 21, 2026'}\n                    </span>\n                    <span>&bull;</span>\n                    <span>\n                      <strong>Website:</strong> {websiteUrl || 'https://uipkge.dev'}\n                    </span>\n                    <span>&bull;</span>\n                    <span>\n                      <strong>Contact:</strong> {contactEmail || 'privacy@uipkge.dev'}\n                    </span>\n                  </div>\n                </div>\n\n                {/* 1. Introduction & Overview */}\n                <section className=\"space-y-2.5\">\n                  <h3 className=\"text-foreground text-base font-semibold\">1. Introduction &amp; Scope</h3>\n                  <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                    {companyName || 'UIPKGE Technologies Inc.'} (&ldquo;we&rdquo;, &ldquo;our&rdquo;, or\n                    &ldquo;us&rdquo;) is dedicated to safeguarding your personal data and ensuring transparent privacy\n                    practices. This Privacy Policy governs your use of{' '}\n                    <a href={websiteUrl || 'https://uipkge.dev'} className=\"text-primary underline\">\n                      {websiteUrl || 'https://uipkge.dev'}\n                    </a>{' '}\n                    (the &ldquo;Website&rdquo;) and all associated services and developer APIs.\n                  </p>\n                  <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                    By accessing our Website, you acknowledge that you have read, understood, and agreed to the\n                    practices described in this policy.\n                  </p>\n\n                  {/* Core Commitments Callout */}\n                  <div className=\"border-primary/20 bg-primary/5 rounded-lg border p-3.5\">\n                    <div className=\"flex items-start gap-3\">\n                      <ShieldCheck className=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                      <div className=\"space-y-1 text-xs sm:text-sm\">\n                        <p className=\"text-foreground font-semibold\">Core Privacy Commitments</p>\n                        <ul className=\"text-muted-foreground space-y-1 text-xs\">\n                          <li className=\"flex items-center gap-1.5\">\n                            <CheckCircle2 className=\"text-primary size-3.5 shrink-0\" aria-hidden=\"true\" />\n                            <span>We never sell or rent your personal information to third-party data brokers.</span>\n                          </li>\n                          <li className=\"flex items-center gap-1.5\">\n                            <CheckCircle2 className=\"text-primary size-3.5 shrink-0\" aria-hidden=\"true\" />\n                            <span>Industry-standard encryption: TLS 1.3 in transit and AES-256 at rest.</span>\n                          </li>\n                          <li className=\"flex items-center gap-1.5\">\n                            <CheckCircle2 className=\"text-primary size-3.5 shrink-0\" aria-hidden=\"true\" />\n                            <span>Guaranteed rights to data access, export portability, and permanent erasure.</span>\n                          </li>\n                        </ul>\n                      </div>\n                    </div>\n                  </div>\n                </section>\n\n                {/* 2. Personal Information We Collect */}\n                <section className=\"space-y-2.5\">\n                  <h3 className=\"text-foreground text-base font-semibold\">2. Personal Information We Collect</h3>\n                  <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                    We gather only the minimum information necessary to operate our platform securely:\n                  </p>\n\n                  <div className=\"space-y-2\">\n                    <div className=\"border-border bg-card rounded-md border p-3\">\n                      <p className=\"text-foreground text-xs font-semibold\">Account &amp; Inquiries</p>\n                      <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                        When contacting us via {contactEmail || 'privacy@uipkge.dev'} or registering a workspace, we\n                        collect names, email addresses, and communication logs.\n                      </p>\n                    </div>\n\n                    {(processors.stripe || processors.paddle) && (\n                      <div className=\"border-border bg-card rounded-md border p-3\">\n                        <p className=\"text-foreground text-xs font-semibold\">Billing &amp; Payment Data</p>\n                        <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                          Payment processing is handled via tokenized PCI-DSS Level 1 compliant gateways (\n                          {[processors.stripe ? 'Stripe' : '', processors.paddle ? 'Paddle' : '']\n                            .filter(Boolean)\n                            .join(', ')}\n                          ). Raw credit card numbers are never stored on our infrastructure.\n                        </p>\n                      </div>\n                    )}\n\n                    {(processors.ga4 ||\n                      processors.posthog ||\n                      processors.plausible ||\n                      processors.sentry ||\n                      processors.datadog) && (\n                      <div className=\"border-border bg-card rounded-md border p-3\">\n                        <p className=\"text-foreground text-xs font-semibold\">Telemetry &amp; System Health</p>\n                        <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                          Aggregated telemetry, client user-agents, IP addresses, and error stack traces to guarantee\n                          uptime and API responsiveness.\n                        </p>\n                      </div>\n                    )}\n                  </div>\n                </section>\n\n                {/* 3. Third-Party Sub-Processors */}\n                <section className=\"space-y-2.5\">\n                  <div className=\"flex items-center justify-between\">\n                    <h3 className=\"text-foreground text-base font-semibold\">3. Third-Party Sub-Processors</h3>\n                    <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                      {activeProcessorsList.length} Disclosed\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                    To operate our platform efficiently, we engage vetted sub-processors governed by strict Data\n                    Processing Agreements (DPAs):\n                  </p>\n\n                  {activeProcessorsList.length > 0 ? (\n                    <div className=\"border-border overflow-hidden rounded-lg border\">\n                      <div className=\"overflow-x-auto\">\n                        <table className=\"w-full text-left text-xs\">\n                          <thead className=\"bg-muted/50 border-border border-b font-semibold\">\n                            <tr>\n                              <th scope=\"col\" className=\"px-3.5 py-2.5\">\n                                Sub-Processor\n                              </th>\n                              <th scope=\"col\" className=\"px-3.5 py-2.5\">\n                                Category\n                              </th>\n                              <th scope=\"col\" className=\"px-3.5 py-2.5\">\n                                Purpose\n                              </th>\n                              <th scope=\"col\" className=\"px-3.5 py-2.5\">\n                                Processing Location\n                              </th>\n                            </tr>\n                          </thead>\n                          <tbody className=\"divide-border divide-y\">\n                            {activeProcessorsList.map((proc) => (\n                              <tr key={proc.id} className=\"hover:bg-muted/20 transition-colors\">\n                                <td className=\"text-foreground px-3.5 py-2.5 font-medium whitespace-nowrap\">\n                                  {proc.name}\n                                </td>\n                                <td className=\"text-muted-foreground px-3.5 py-2.5\">\n                                  <Badge variant=\"outline\" className=\"px-1.5 py-0 text-xs\">\n                                    {proc.category}\n                                  </Badge>\n                                </td>\n                                <td className=\"text-muted-foreground px-3.5 py-2.5\">{proc.purpose}</td>\n                                <td className=\"text-muted-foreground px-3.5 py-2.5 whitespace-nowrap\">\n                                  {proc.location}\n                                </td>\n                              </tr>\n                            ))}\n                          </tbody>\n                        </table>\n                      </div>\n                    </div>\n                  ) : (\n                    <div className=\"border-border bg-muted/20 text-muted-foreground rounded-lg border p-4 text-center text-xs\">\n                      No external third-party sub-processors are currently enabled.\n                    </div>\n                  )}\n                </section>\n\n                {/* 4. Cookies & Tracking Technologies */}\n                <section className=\"space-y-2.5\">\n                  <h3 className=\"text-foreground text-base font-semibold\">4. Cookies &amp; Tracking Technologies</h3>\n                  {cookieTracking ? (\n                    <div className=\"space-y-2\">\n                      <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                        We use cookies and local storage tokens to provide essential authentication and analyze site\n                        traffic patterns:\n                      </p>\n                      <ul className=\"text-muted-foreground list-disc space-y-1 pl-5 text-xs sm:text-sm\">\n                        <li>\n                          <strong className=\"text-foreground font-medium\">Strictly Necessary Cookies:</strong> Session\n                          tokens, theme preference states, and security anti-CSRF verification.\n                        </li>\n                        {(processors.ga4 || processors.posthog) && (\n                          <li>\n                            <strong className=\"text-foreground font-medium\">Analytics Cookies:</strong> Aggregated\n                            interaction counters to assess documentation usability and improve performance.\n                          </li>\n                        )}\n                      </ul>\n                      <p className=\"text-muted-foreground text-xs\">\n                        You can configure your browser to block or alert you about cookies. Disabling strictly necessary\n                        cookies may degrade website functionality.\n                      </p>\n                    </div>\n                  ) : (\n                    <div className=\"border-success/30 bg-success/5 rounded-lg border p-3.5\">\n                      <div className=\"flex items-start gap-2.5\">\n                        <CheckCircle2 className=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                        <div>\n                          <p className=\"text-foreground text-success text-xs font-semibold\">\n                            Zero-Tracking Cookies Guarantee\n                          </p>\n                          <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                            This website operates on a 100% cookieless privacy architecture. We do not store persistent\n                            tracking cookies, cross-site beacons, or marketing identifiers on your device.\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </section>\n\n                {/* 5. Statutory Compliance & User Rights */}\n                <section className=\"space-y-3\">\n                  <h3 className=\"text-foreground text-base font-semibold\">\n                    5. Statutory Compliance &amp; Your Privacy Rights\n                  </h3>\n\n                  {/* GDPR Clause */}\n                  {jurisdictions.gdpr && (\n                    <div className=\"border-border bg-card space-y-2 rounded-lg border p-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <h4 className=\"text-foreground text-xs font-semibold\">\n                          5.1 European Union (GDPR - EU 2016/679)\n                        </h4>\n                        <Badge variant=\"outline\" className=\"text-xs\">\n                          EU / EEA\n                        </Badge>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        If you reside in the European Economic Area, you possess statutory rights under GDPR Articles\n                        15&ndash;22:\n                      </p>\n                      <ul className=\"text-muted-foreground grid grid-cols-1 gap-1.5 text-xs sm:grid-cols-2\">\n                        <li className=\"flex items-center gap-1.5\">\n                          <CheckCircle2 className=\"text-primary size-3 shrink-0\" aria-hidden=\"true\" />\n                          <span>\n                            <strong>Access (Art. 15):</strong> Obtain copy of personal data.\n                          </span>\n                        </li>\n                        <li className=\"flex items-center gap-1.5\">\n                          <CheckCircle2 className=\"text-primary size-3 shrink-0\" aria-hidden=\"true\" />\n                          <span>\n                            <strong>Rectification (Art. 16):</strong> Correct inaccurate records.\n                          </span>\n                        </li>\n                        <li className=\"flex items-center gap-1.5\">\n                          <CheckCircle2 className=\"text-primary size-3 shrink-0\" aria-hidden=\"true\" />\n                          <span>\n                            <strong>Erasure (Art. 17):</strong> Request deletion of data.\n                          </span>\n                        </li>\n                        <li className=\"flex items-center gap-1.5\">\n                          <CheckCircle2 className=\"text-primary size-3 shrink-0\" aria-hidden=\"true\" />\n                          <span>\n                            <strong>Portability (Art. 20):</strong> Export data in JSON format.\n                          </span>\n                        </li>\n                      </ul>\n                      <p className=\"text-muted-foreground pt-1 text-xs\">\n                        You also have the statutory right to lodge a formal complaint with your local EU Supervisory\n                        Authority.\n                      </p>\n                    </div>\n                  )}\n\n                  {/* CCPA / CPRA Clause */}\n                  {jurisdictions.ccpa && (\n                    <div className=\"border-border bg-card space-y-2 rounded-lg border p-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <h4 className=\"text-foreground text-xs font-semibold\">\n                          5.2 California Privacy Rights (CCPA / CPRA)\n                        </h4>\n                        <Badge variant=\"outline\" className=\"text-xs\">\n                          California\n                        </Badge>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        California residents are entitled to notice at collection and the following statutory\n                        protections:\n                      </p>\n                      <ul className=\"text-muted-foreground space-y-1 text-xs\">\n                        <li>\n                          &bull; <strong>Right to Know &amp; Access:</strong> Request categories and specific pieces of\n                          data collected in the past 12 months.\n                        </li>\n                        <li>\n                          &bull; <strong>Right to Delete:</strong> Request deletion of personal records collected from\n                          you.\n                        </li>\n                        <li>\n                          &bull; <strong>Zero Data Selling:</strong> We do not sell or share personal information with\n                          third-party data brokers.\n                        </li>\n                        <li>\n                          &bull; <strong>Non-Discrimination:</strong> We do not alter service availability or pricing\n                          when you exercise privacy rights.\n                        </li>\n                      </ul>\n                    </div>\n                  )}\n\n                  {/* PIPEDA Clause */}\n                  {jurisdictions.pipeda && (\n                    <div className=\"border-border bg-card space-y-2 rounded-lg border p-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <h4 className=\"text-foreground text-xs font-semibold\">5.3 Canadian Privacy Rights (PIPEDA)</h4>\n                        <Badge variant=\"outline\" className=\"text-xs\">\n                          Canada\n                        </Badge>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        In compliance with Canada&rsquo;s PIPEDA, we adhere to the 10 Fair Information Principles\n                        ensuring accountability, consent, purpose limitation, and safeguard standards. Inquiries can be\n                        escalated to the Office of the Privacy Commissioner of Canada (OPC).\n                      </p>\n                    </div>\n                  )}\n\n                  {/* LGPD Clause */}\n                  {jurisdictions.lgpd && (\n                    <div className=\"border-border bg-card space-y-2 rounded-lg border p-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <h4 className=\"text-foreground text-xs font-semibold\">5.4 Brazilian Privacy Rights (LGPD)</h4>\n                        <Badge variant=\"outline\" className=\"text-xs\">\n                          Brazil\n                        </Badge>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        Under Law No. 13.709/2018 (LGPD), Brazilian data subjects may confirm processing activities,\n                        request anonymization or blocking of non-compliant data, and revoke consent through our Data\n                        Protection Officer.\n                      </p>\n                    </div>\n                  )}\n\n                  {/* Generic fallback if no checkboxes selected */}\n                  {!jurisdictions.gdpr && !jurisdictions.ccpa && !jurisdictions.pipeda && !jurisdictions.lgpd && (\n                    <div className=\"border-border bg-muted/20 text-muted-foreground rounded-lg border p-4 text-xs\">\n                      We adhere to global privacy principles. You may request access to, correction of, or erasure of\n                      your personal data at any time by contacting our team.\n                    </div>\n                  )}\n                </section>\n\n                {/* 6. Data Security & Storage */}\n                <section className=\"space-y-2.5\">\n                  <h3 className=\"text-foreground text-base font-semibold\">6. Data Security &amp; Storage</h3>\n                  <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                    We enforce technical and organizational safeguards including TLS 1.3 encryption in transit, AES-256\n                    encryption at rest, segmented cloud VPC environments, and strict least-privilege role-based access\n                    controls (RBAC). Data is retained only for as long as necessary to fulfill operational commitments\n                    or statutory legal obligations.\n                  </p>\n                </section>\n\n                {/* 7. Contact Information & Data Protection Officer */}\n                <section className=\"border-border space-y-2.5 border-t pt-5\">\n                  <h3 className=\"text-foreground text-base font-semibold\">\n                    7. Contact Information &amp; Data Protection\n                  </h3>\n                  <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                    To submit a data request, exercise your statutory privacy rights, or ask questions regarding this\n                    policy, please contact:\n                  </p>\n                  <div className=\"border-border bg-card rounded-lg border p-4\">\n                    <p className=\"text-foreground text-xs font-semibold sm:text-sm\">\n                      {companyName || 'UIPKGE Technologies Inc.'}\n                    </p>\n                    <p className=\"text-muted-foreground mt-0.5 text-xs\">Attn: Privacy &amp; Data Protection Officer</p>\n                    <div className=\"mt-2 flex items-center gap-2\">\n                      <Mail className=\"text-primary size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      <a\n                        href={`mailto:${contactEmail || 'privacy@uipkge.dev'}`}\n                        className=\"text-primary inline-flex min-h-6 items-center text-xs font-medium hover:underline\"\n                      >\n                        {contactEmail || 'privacy@uipkge.dev'}\n                      </a>\n                    </div>\n                  </div>\n                </section>\n              </div>\n            </CardContent>\n\n            <CardFooter className=\"border-border flex flex-wrap items-center justify-between gap-3 border-t p-4 text-xs\">\n              <div className=\"text-muted-foreground flex items-center gap-2\">\n                <ShieldCheck className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                <span>\n                  Generated for <strong>{companyName || 'UIPKGE Technologies Inc.'}</strong>\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                  {activeProcessorsList.length} Processors\n                </Badge>\n                <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n                  {activeJurisdictionsCount} Jurisdictions\n                </Badge>\n              </div>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PrivacyPolicyGenerator.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/checkbox.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/switch.json"
  ],
  "description": "Customizable website privacy policy builder with third-party tracking disclosures, CCPA, and GDPR compliance clauses.",
  "categories": [
    "legal",
    "marketing",
    "app",
    "form"
  ]
}