<template>
  <footer class="bg-gray-100 border-t border-gray-200 mt-auto">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
      <div class="flex flex-col items-center gap-2">
        <p class="text-center text-sm text-gray-600">
          Created for New Life Christian Church by Joshua Ryder with AI assistance
        </p>
        <button
          @click="showTermsModal = true"
          class="text-xs text-gray-500 hover:text-blue-600 hover:underline"
        >
          Terms of Use & Privacy Policy
        </button>
      </div>
    </div>

    <TermsModal v-model="showTermsModal" />
  </footer>
</template>

<script setup lang="ts">
const showTermsModal = ref(false)
</script>
