<template>
  <!-- Modal Overlay -->
  <Teleport to="body">
    <Transition name="modal">
      <div
        v-if="modelValue"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
        @click.self="closeModal"
      >
        <!-- Modal Content -->
        <div
          class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"
          @click.stop
        >
          <!-- Modal Header -->
          <div class="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 sticky top-0 bg-white rounded-t-lg">
            <h2 class="text-xl sm:text-2xl font-bold text-gray-900">Terms of Use & Privacy Policy</h2>
            <button
              @click="closeModal"
              class="text-gray-400 hover:text-gray-600 transition-colors p-1"
              aria-label="Close modal"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <!-- Modal Body (Scrollable) -->
          <div class="overflow-y-auto p-4 sm:p-6 flex-1">
            <!-- AI Disclaimer Section -->
            <section class="mb-6 p-4 sm:p-6 bg-yellow-50 border-l-4 border-yellow-400 rounded">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 flex items-center">
                <span class="mr-2">⚠️</span> Important: AI-Generated Content Disclaimer
              </h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p class="font-semibold">
                  This website and application were created with artificial intelligence (AI) assistance.
                </p>
                <p>
                  <strong>Please be aware:</strong> AI technology, while powerful, is not perfect and can make mistakes.
                  This includes but is not limited to:
                </p>
                <ul class="list-disc list-inside ml-4 space-y-1">
                  <li>Errors in code or functionality</li>
                  <li>Unexpected behavior or bugs</li>
                  <li>Security vulnerabilities</li>
                  <li>Data processing or storage issues</li>
                  <li>Incorrect information display</li>
                </ul>
                <p class="font-semibold text-red-700 mt-3">
                  Users should not rely on this system as the sole repository for important information.
                  Always maintain backup copies of your sermon notes and important data.
                </p>
              </div>
            </section>

            <!-- Terms of Use -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Terms of Use</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p>
                  By accessing and using this website (the "Service"), you accept and agree to be bound by the
                  terms and provisions of this agreement.
                </p>

                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Purpose</h4>
                <p>
                  This Service is provided by New Life Christian Church (the "Church") to assist members and
                  attendees in viewing sermon information and taking personal notes during services. The Service
                  is provided as-is for informational and organizational purposes only.
                </p>

                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Use at Your Own Risk</h4>
                <p>
                  You acknowledge and agree that your use of this Service is at your sole risk. The Service
                  is provided on an "AS IS" and "AS AVAILABLE" basis without warranties of any kind, either
                  express or implied.
                </p>
              </div>
            </section>

            <!-- Limitation of Liability -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Limitation of Liability</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p class="font-semibold">
                  TO THE FULLEST EXTENT PERMITTED BY LAW, NEW LIFE CHRISTIAN CHURCH, ITS STAFF, VOLUNTEERS,
                  CONTRACTORS, AND AFFILIATES SHALL NOT BE LIABLE FOR ANY DAMAGES OF ANY KIND ARISING FROM
                  THE USE OF THIS SERVICE.
                </p>
                <p>This includes but is not limited to:</p>
                <ul class="list-disc list-inside ml-4 space-y-1">
                  <li>Loss of data, including sermon notes or personal information</li>
                  <li>Service interruptions or downtime</li>
                  <li>Errors, bugs, or technical malfunctions</li>
                  <li>Security breaches or unauthorized access</li>
                  <li>Inaccurate or incomplete information</li>
                  <li>Any indirect, incidental, special, consequential, or punitive damages</li>
                </ul>
                <p class="mt-3">
                  The Church makes no guarantee regarding the availability, reliability, or accuracy of the
                  Service and reserves the right to modify, suspend, or discontinue the Service at any time
                  without notice.
                </p>
              </div>
            </section>

            <!-- Data & Privacy -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Privacy & Data</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Information We Collect</h4>
                <p>When you register for an account, we collect:</p>
                <ul class="list-disc list-inside ml-4 space-y-1">
                  <li>Username and password (password is encrypted)</li>
                  <li>Email address</li>
                  <li>First and last name</li>
                  <li>Your sermon notes and related content</li>
                </ul>

                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">How We Use Your Information</h4>
                <p>Your information is used to:</p>
                <ul class="list-disc list-inside ml-4 space-y-1">
                  <li>Provide access to the Service</li>
                  <li>Store and manage your sermon notes</li>
                  <li>Send you sermon notes via email when requested</li>
                  <li>Authenticate your account</li>
                </ul>

                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Data Retention</h4>
                <p>
                  Your notes are stored in our database and are associated with your account.
                  <strong class="text-red-700">Important:</strong> If a sermon is deleted by an administrator,
                  all associated user notes for that sermon are permanently deleted. We recommend regularly
                  downloading or emailing your notes to maintain personal backups.
                </p>

                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Data Security</h4>
                <p>
                  While we implement security measures to protect your data, no system is completely secure.
                  Given that this system was created with AI assistance, there may be unknown vulnerabilities.
                  The Church cannot guarantee the security of your information.
                </p>

                <h4 class="text-base sm:text-lg font-semibold text-gray-900 mt-4 mb-2">Third-Party Services</h4>
                <p>
                  When you email your notes, we use third-party email service providers to deliver your messages.
                  Your email address and content are transmitted through these services.
                </p>
              </div>
            </section>

            <!-- User Responsibilities -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">User Responsibilities</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p>As a user of this Service, you agree to:</p>
                <ul class="list-disc list-inside ml-4 space-y-1">
                  <li>Maintain the confidentiality of your account credentials</li>
                  <li>Use the Service only for its intended purpose</li>
                  <li>Maintain your own backups of important notes and information</li>
                  <li>Not attempt to compromise the security of the Service</li>
                  <li>Not use the Service for any unlawful purpose</li>
                  <li>Accept sole responsibility for any content you create or upload</li>
                </ul>
              </div>
            </section>

            <!-- Account Termination -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Account Termination</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p>
                  The Church reserves the right to terminate or suspend your account at any time, with or
                  without notice, for any reason, including violation of these terms or at the Church's sole
                  discretion.
                </p>
              </div>
            </section>

            <!-- Changes to Terms -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Changes to These Terms</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p>
                  The Church reserves the right to modify these terms at any time. Continued use of the
                  Service after changes constitutes acceptance of the modified terms.
                </p>
              </div>
            </section>

            <!-- Contact -->
            <section class="mb-6">
              <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3">Contact Information</h3>
              <div class="space-y-3 text-sm sm:text-base text-gray-700">
                <p>
                  If you have questions about these terms or the Service, please contact New Life Christian
                  Church through our regular church communication channels.
                </p>
              </div>
            </section>

            <!-- Acceptance -->
            <section class="mb-6 p-4 sm:p-6 bg-gray-50 border rounded">
              <p class="text-sm sm:text-base text-gray-700">
                <strong>By using this Service, you acknowledge that you have read, understood, and agree to
                be bound by these Terms of Use and Privacy Policy, including the AI-generated content disclaimer.</strong>
              </p>
              <p class="text-xs sm:text-sm text-gray-600 mt-3">
                Last Updated: November 7, 2025
              </p>
            </section>
          </div>

          <!-- Modal Footer -->
          <div class="border-t border-gray-200 p-4 sm:p-6 bg-gray-50 rounded-b-lg">
            <button
              @click="closeModal"
              class="w-full sm:w-auto px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium transition-colors"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const closeModal = () => {
  emit('update:modelValue', false)
}

// Close on escape key
onMounted(() => {
  const handleEscape = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && props.modelValue) {
      closeModal()
    }
  }
  window.addEventListener('keydown', handleEscape)

  onUnmounted(() => {
    window.removeEventListener('keydown', handleEscape)
  })
})

// Prevent body scroll when modal is open
watch(() => props.modelValue, (isOpen) => {
  if (isOpen) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
})
</script>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active .bg-white,
.modal-leave-active .bg-white {
  transition: transform 0.3s ease;
}

.modal-enter-from .bg-white,
.modal-leave-to .bg-white {
  transform: scale(0.9);
}
</style>
