fix: use private helcimApiToken for all server-side Helcim API calls

app/pages/series/[id].vue

@@ -50,12 +50,15 @@
       </div>
 
       <!-- PASS PURCHASE -->
-      <div v-if="series.passPrice" class="section">
-        <DashedBox>
-          <div class="section-label">Series Pass</div>
-          <p>Get access to all sessions in this series with a single pass.</p>
-          <div class="pass-price">${{ series.passPrice }}</div>
-        </DashedBox>
+      <div v-if="series.tickets?.enabled" class="section">
+        <SeriesPassPurchase
+          :series-id="series.id"
+          :series-info="{ id: series.id, title: series.title, totalEvents: series.totalEvents || series.events?.length || 0, type: series.type }"
+          :series-events="series.events || []"
+          :user-email="memberData?.email"
+          :user-name="memberData?.name"
+          @purchase-success="handlePurchaseSuccess"
+        />
       </div>
 
       <!-- QUESTIONS -->
@@ -70,6 +73,7 @@
 
 <script setup>
 const route = useRoute()
+const { memberData } = useAuth()
 
 const { data: series, pending, error } = await useFetch(`/api/series/${route.params.id}`)
 
@@ -96,6 +100,10 @@ const getEventStatus = (event) => {
   return 'Completed'
 }
 
+const handlePurchaseSuccess = () => {
+  refreshNuxtData()
+}
+
 useHead(() => ({
   title: series.value ? `${series.value.title} - Event Series - Ghost Guild` : 'Event Series - Ghost Guild',
   meta: [{ name: 'description', content: series.value?.description || 'Multi-event series' }],
@@ -152,13 +160,5 @@ useHead(() => ({
 .event-title-link:hover { color: var(--candle); }
 .event-status { font-size: 10px; color: var(--text-faint); margin-left: 8px; }
 
-.pass-price {
-  font-family: 'Brygada 1918', serif;
-  font-size: 22px;
-  font-weight: 600;
-  color: var(--candle);
-  margin-top: 8px;
-}
-
 .empty { font-size: 12px; color: var(--text-faint); }
 </style>