<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ref, onMounted, nextTick } from 'vue';
import UserLayout from '../layouts/user/userlayout.vue';

const faqs = ref([
  {
    q: 'What is BetiX?',
    a: 'BetiX is an online gaming platform. Create an account, verify your email, deposit funds responsibly, and enjoy games. Always follow your local laws and our terms.'
  },
  {
    q: 'How do I secure my account?',
    a: 'Use a strong, unique password and enable two-factor authentication (2FA). We also email you when a new login is detected so you can react quickly if it was not you.'
  },
  {
    q: 'I did not receive an email. What should I do?',
    a: 'Check your spam folder and ensure your email address is correct. If you still have issues, try again in a few minutes or contact support at the address in the footer.'
  },
  {
    q: 'What are responsible gaming limits?',
    a: 'You can set optional limits for losses, wagers, session duration, and timeouts to help manage your play. Adjust these from the Responsible Gaming section in your account.'
  },
  {
    q: 'Why do I see “Too many requests” (429)?',
    a: 'Rate limiting protects the platform from abuse. If you hit this limit, wait a minute and try again. Avoid running automated scripts or rapidly refreshing pages.'
  },
  {
    q: 'Which browsers are supported?',
    a: 'We support the latest versions of Chrome, Firefox, Safari, and Edge. Enable cookies and JavaScript for the best experience.'
  },
  {
    q: 'How do I contact support?',
    a: 'You can reach us via the email address listed in the site footer or the Help/Support section of your account once logged in.'
  },
]);

const expanded = ref<Record<number, boolean>>({});

const toggle = (idx: number) => {
  expanded.value[idx] = !expanded.value[idx];
};

onMounted(() => {
  nextTick(() => {
    if (window.lucide) window.lucide.createIcons();
  });
});
</script>

<template>
  <UserLayout>
    <Head title="FAQ" />
    <section class="content">
      <div class="wrap">
        <div class="panel">
          <header class="page-head">
            <div class="title">Frequently Asked Questions</div>
            <p class="subtitle">Answers to common questions about accounts, security, and responsible gaming.</p>
          </header>

          <div class="grid">
            <div class="left">
              <div v-for="(item, idx) in faqs" :key="idx" class="faq-item" :class="{ open: expanded[idx] }">
                <button class="q" @click="toggle(idx)" :aria-expanded="expanded[idx] ? 'true' : 'false'" :aria-controls="'faq-'+idx">
                  <span class="q-text">{{ item.q }}</span>
                  <i data-lucide="chevron-down" class="chev" aria-hidden="true"></i>
                </button>
                <div class="a" :id="'faq-'+idx" v-show="expanded[idx]">
                  <p>{{ item.a }}</p>
                </div>
              </div>
            </div>
            <aside class="right">
              <div class="side-card">
                <div class="card-head">Need more help?</div>
                <p class="card-text">If your question isn’t listed here, reach out to our support team.</p>
                <ul class="help-list">
                  <li><i data-lucide="mail" class="icon"></i> Email: <a href="mailto:support@example.com">Contact Support</a></li>
                  <li><i data-lucide="shield" class="icon"></i> Read our <a href="/self-exclusion">Responsible Gaming</a> info</li>
                </ul>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </section>
  </UserLayout>
</template>

<style scoped>
.content { padding: 30px; }
.wrap { max-width: 1100px; margin: 0 auto; }
.panel { background: var(--bg-card, #0a0a0a); border: 1px solid var(--border, #151515); border-radius: 16px; overflow: hidden; }
.page-head { padding: 20px; border-bottom: 1px solid var(--border, #151515); }
.title { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 2px; text-transform: uppercase; }
.subtitle { color: #9aa0a6; margin-top: 6px; }

.grid { padding: 20px; display: grid; grid-template-columns: 1.6fr .8fr; gap: 22px; }
.left { display: flex; flex-direction: column; gap: 12px; }

.faq-item { border: 1px solid var(--border, #151515); background: #0a0a0a; border-radius: 14px; overflow: hidden; }
.q { width: 100%; text-align: left; background: transparent; color: #e6e6e6; padding: 16px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 800; }
.q:hover { background: rgba(255,255,255,0.02); }
.q-text { font-size: 14px; }
.chev { width: 18px; color: #aaa; transition: transform .2s ease; }
.faq-item.open .chev { transform: rotate(180deg); }
.a { padding: 0 18px 16px; color: #cfcfcf; font-size: 14px; line-height: 1.6; }

.side-card { border: 1px solid var(--border, #151515); background: #0a0a0a; border-radius: 14px; padding: 16px; position: sticky; top: 20px; }
.card-head { color: #fff; font-weight: 900; margin-bottom: 8px; }
.card-text { color: #9aa0a6; margin-bottom: 8px; }
.help-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.help-list a { color: var(--cyan, #00f2ff); text-decoration: none; }
.icon { width: 16px; color: #666; margin-right: 6px; vertical-align: -2px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; padding: 16px; }
  .side-card { position: static; }
}
</style>
