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

      <!-- 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>
import { reactive, onMounted } from 'vue';

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

const circleOptions = [
  { value: 'community', label: 'Community Circle - $15/month' },
  { value: 'support', label: 'Support Circle - $25/month' },
  { value: 'sustaining', label: 'Sustaining Circle - $50/month' }
];

const contributionOptions = [
  { value: '15', label: '$15/month' },
  { value: '25', label: '$25/month' },
  { value: '50', label: '$50/month' },
  { value: 'custom', label: 'Custom amount' }
];

const handleSubmit = () => {
  console.log('Form submitted:', form);
};

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