<script setup lang="ts">
import { ref } from 'vue'
import { ChevronDown } from 'lucide-vue-next'

interface FaqItem {
  question: string
  answer: string
}

const faqs: FaqItem[] = [
  {
    question: 'Do I need to open any firewall ports?',
    answer: 'No. All connections are outbound from your server to Corrosion\'s cloud. No inbound ports required.',
  },
  {
    question: 'Does Corrosion replace my hosting panel (AMP / Pterodactyl)?',
    answer: 'No. Corrosion integrates with them via API or companion agent. Your existing panel remains intact.',
  },
  {
    question: 'What happens if Corrosion goes offline?',
    answer: 'Your Rust server continues running normally. Corrosion does not proxy gameplay traffic.',
  },
  {
    question: 'Is my data shared with other servers?',
    answer: 'No. All data is isolated by license ID. Multi-tenant database queries are scoped per license.',
  },
  {
    question: 'What if a wipe fails?',
    answer: 'Corrosion can automatically retry and optionally roll back using the pre-wipe backup.',
  },
  {
    question: 'Does this work on bare metal?',
    answer: 'Yes. Use the Companion Agent — no SSH required after initial setup.',
  },
  {
    question: 'Can I manage multiple admins?',
    answer: 'Yes. Multi-Admin Role-Based Access Control is built in. Grant granular permissions per team member.',
  },
  {
    question: 'Is this beginner friendly?',
    answer: 'Yes. If you can install a uMod plugin, you can use Corrosion.',
  },
  {
    question: 'Does this replace Tebex?',
    answer: 'Corrosion includes an optional integrated store (Phase 5 roadmap), but does not require Tebex.',
  },
  {
    question: 'How is licensing handled?',
    answer: 'One license per server. License validation occurs on plugin startup and periodically.',
  },
]

const openIndex = ref<number | null>(null)

function toggle(index: number) {
  openIndex.value = openIndex.value === index ? null : index
}
</script>

<template>
  <div>
    <!-- Header -->
    <section class="pt-20 pb-12">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Frequently Asked Questions</h1>
        <p class="text-lg text-neutral-400">Everything you need to know about Corrosion.</p>
      </div>
    </section>

    <!-- FAQ Accordion -->
    <section class="pb-20">
      <div class="max-w-3xl mx-auto px-6">
        <div class="space-y-3">
          <div
            v-for="(faq, index) in faqs"
            :key="index"
            class="bg-neutral-900 border rounded-xl overflow-hidden transition-colors"
            :class="openIndex === index ? 'border-oxide-500/30' : 'border-neutral-800'"
          >
            <button
              @click="toggle(index)"
              class="w-full flex items-center justify-between p-6 text-left"
            >
              <span class="text-neutral-100 font-medium pr-4">{{ faq.question }}</span>
              <ChevronDown
                class="w-5 h-5 text-neutral-500 shrink-0 transition-transform duration-200"
                :class="{ 'rotate-180': openIndex === index }"
              />
            </button>
            <div
              v-if="openIndex === index"
              class="px-6 pb-6 -mt-2"
            >
              <p class="text-neutral-400 leading-relaxed">{{ faq.answer }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
