<!-- pages/join.vue -->
<template>
  <UContainer class="py-12">
    <UForm :state="form" @submit="handleSubmit">
      <!-- Step 1: Basic Info -->
      <UFormGroup label="Email" name="email">
        <UInput v-model="form.email" type="email" />
      </UFormGroup>

      <!-- Step 2: Choose Circle -->
      <URadioGroup
        v-model="form.circle"
        :options="circleOptions"
        name="circle" />

      <!-- Step 3: Choose Contribution -->
      <URadioGroup
        v-model="form.contribution"
        :options="contributionOptions"
        name="contribution" />

      <!-- Step 4: Helcim Checkout -->
      <div id="helcim-payment"></div>

      <UButton type="submit" block> Complete Membership </UButton>
    </UForm>
  </UContainer>
</template>

<script setup>
const form = reactive({
  email: "",
  name: "",
  circle: "community",
  contribution: "15",
});

// Load Helcim.js
onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://secure.helcim.app/helcim-pay.js";
  document.head.appendChild(script);
});
</script>
