try pro gate pdf button feature

app/src/components/Hero.astro

@@ -185,20 +185,113 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     )} -->
     <div class="meta-container-cell meta-container-cell--pdf">
       <h3>PDF</h3>
-      <p>
-        <a
-          class="button"
-          href={`/${pdfFilename}`}
-          download={pdfFilename}
-          aria-label={`Download PDF ${pdfFilename}`}
-        >
-          Download PDF
-        </a>
-      </p>
+      <div id="pdf-download-container">
+        <p class="pdf-loading">Checking access...</p>
+        <p class="pdf-pro-only" style="display: none;">
+          <a
+            class="button"
+            href={`/${pdfFilename}`}
+            download={pdfFilename}
+            aria-label={`Download PDF ${pdfFilename}`}
+          >
+            Download PDF
+          </a>
+          <span class="pro-badge">PRO</span>
+        </p>
+        <p class="pdf-locked" style="display: none;">
+          <span class="locked-message">🔒 PDF available for Pro users only</span>
+        </p>
+      </div>
     </div>
   </div>
 </header>
 
+<script>
+  // PDF access control for Pro users only
+  
+  const FALLBACK_TIMEOUT_MS = 3000;
+  let userPlanChecked = false;
+
+  /**
+   * Check if user has Pro access
+   * Isolated logic for Pro user verification
+   * Expected plan structure: { user: "pro", org: "enterprise" }
+   */
+  function isProUser(plan: any): boolean {
+    if (!plan) return false;
+    
+    // Check if user property is "pro"
+    return plan.user === "pro";
+  }
+
+  /**
+   * Update UI based on user's Pro status
+   */
+  function updatePdfAccess(isPro: boolean) {
+    const loadingEl = document.querySelector(".pdf-loading") as HTMLElement;
+    const proOnlyEl = document.querySelector(".pdf-pro-only") as HTMLElement;
+    const lockedEl = document.querySelector(".pdf-locked") as HTMLElement;
+    
+    // Hide loading state
+    if (loadingEl) loadingEl.style.display = "none";
+    
+    // Show appropriate state
+    if (isPro) {
+      if (proOnlyEl) proOnlyEl.style.display = "block";
+    } else {
+      if (lockedEl) lockedEl.style.display = "block";
+    }
+  }
+
+  /**
+   * Handle user plan response
+   */
+  function handleUserPlan(plan: any) {
+    userPlanChecked = true;
+    const isPro = isProUser(plan);
+    updatePdfAccess(isPro);
+    
+    // Optional: log for debugging
+    console.log("[PDF Access]", { plan, isPro });
+  }
+
+  /**
+   * Fallback behavior when no parent window responds
+   * Change this to test different scenarios locally
+   */
+  function handleFallback() {
+    // Default to Pro access in development/standalone mode
+    handleUserPlan({ user: "pro" });
+    
+    // Uncomment to test locked state:
+    // handleUserPlan({ user: "free" });
+    // handleUserPlan(null);
+  }
+
+  // Listen for messages from parent window (Hugging Face Spaces)
+  window.addEventListener("message", (event) => {
+    if (event.data.type === "USER_PLAN") {
+      handleUserPlan(event.data.plan);
+    }
+  });
+
+  // Request user plan on page load
+  if (window.parent && window.parent !== window) {
+    // We're in an iframe, request user plan
+    window.parent.postMessage({ type: "USER_PLAN_REQUEST" }, "*");
+    
+    // Fallback if no response after timeout
+    setTimeout(() => {
+      if (!userPlanChecked) {
+        handleFallback();
+      }
+    }, FALLBACK_TIMEOUT_MS);
+  } else {
+    // Not in iframe (local development), use fallback immediately
+    handleFallback();
+  }
+</script>
+
 <style>
   /* Hero (full-width) */
   .hero {
@@ -308,4 +401,61 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
       display: none !important;
     }
   }
+
+  /* PDF access control styles */
+  .pdf-loading {
+    color: var(--muted-color);
+    font-size: 0.9em;
+  }
+
+  .pdf-pro-only {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .pro-badge {
+    display: inline-block;
+    transform: skewX(-12deg);
+    border: 1px solid rgba(229, 231, 235, 0.5);
+    background: linear-gradient(to bottom right, #f9a8d4, #86efac, #fde047);
+    color: black;
+    padding: 4px 10px;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.1), 
+                0 4px 6px -4px rgba(34, 197, 94, 0.1);
+  }
+
+  /* Dark mode pro badge */
+  :global(.dark) .pro-badge,
+  :global([data-theme="dark"]) .pro-badge {
+    background: linear-gradient(to bottom right, #ec4899, #22c55e, #eab308);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.2), 
+                0 4px 6px -4px rgba(34, 197, 94, 0.2);
+  }
+
+  .pdf-locked {
+    display: flex;
+    align-items: center;
+  }
+
+  .locked-message {
+    color: var(--muted-color);
+    font-size: 0.85em;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  @media (max-width: 768px) {
+    .pdf-pro-only {
+      justify-content: flex-end;
+    }
+  }
 </style>