<template>
  <div class="faq-page-container">
    <!-- Navbar -->
    <nav class="navbar">
      <div class="navbar-left">
        <img :src="logo" alt="EventAI Logo" class="logo" @click="$router.push('/mainPageVendor')" />
      </div>
      <div class="navbar-center">
        <h1>Ayuda y Preguntas Frecuentes</h1>
      </div>
      <div class="navbar-right">
        <button class="nav-button back" @click="$router.back()">
          <i class="bi bi-arrow-left"></i>
          Volver
        </button>
      </div>
    </nav>
    <!-- Main Content -->
    <div class="faq-main-content">
      <div class="faq-card">
        <h2 class="faq-title">Ayuda y Preguntas Frecuentes</h2>
        <div v-for="(faq, idx) in faqs" :key="idx" class="faq-item">
          <button class="faq-question" @click="toggle(idx)">
            <span>{{ faq.q }}</span>
            <i :class="opened[idx] ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></i>
          </button>
          <div v-if="opened[idx]" class="faq-answer">
            <p v-html="faq.a"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AyudaFAQ',
  data () {
    return {
      logo: require('../assets/LogoEventAiTransGran.png'),
      opened: [],
      faqs: [
        {
          q: '¿Qué puedo hacer en EventAI?',
          a: 'EventAI es una plataforma que conecta proveedores y clientes para la organización de eventos. Puedes buscar y contratar servicios como espacios, catering, mobiliario, decoración, música y fotografía, o bien ofrecer tus propios servicios si eres proveedor.'
        },
        {
          q: '¿Cómo me registro en EventAI?',
          a: 'Haz clic en "Registrarse" en la parte superior derecha, elige tu tipo de usuario (cliente o proveedor), completa el formulario y acepta los términos y condiciones.'
        },
        {
          q: '¿Qué tipos de usuario existen?',
          a: 'Puedes registrarte como Cliente Particular, Cliente Empresa, Proveedor Particular o Proveedor Empresa. Cada tipo tiene funcionalidades adaptadas a sus necesidades.'
        },
        {
          q: '¿Cómo puedo crear un servicio como proveedor?',
          a: 'Accede a tu panel de proveedor y haz clic en "Crear nuevo servicio". Elige el tipo de servicio, completa los datos requeridos y publícalo para que los clientes puedan verlo y contratarlo.'
        },
        {
          q: '¿Cómo se gestionan los pagos?',
          a: 'Los pagos se realizan de forma segura a través de la plataforma. EventAI utiliza pasarelas de pago protegidas y nunca almacena los datos completos de tu tarjeta.'
        },
        {
          q: '¿Cómo protege EventAI mis datos?',
          a: 'Cumplimos con la normativa RGPD y LOPDGDD. Tus datos personales se usan solo para la gestión de la plataforma y nunca se comparten con terceros sin tu consentimiento.'
        },
        {
          q: '¿Qué es la inteligencia artificial en EventAI?',
          a: 'Utilizamos IA para recomendar servicios, mejorar la experiencia de usuario y optimizar la gestión de eventos. La IA nunca toma decisiones finales sin intervención humana.'
        },
        {
          q: '¿Cómo contacto con soporte?',
          a: 'Puedes usar la página de <b>Contacto</b> en el menú principal para enviarnos tu consulta. Nuestro equipo te responderá lo antes posible.'
        },
        {
          q: '¿Puedo modificar mis datos de usuario?',
          a: 'Sí, desde tu perfil puedes actualizar tu información personal, cambiar tu contraseña y gestionar tus servicios.'
        },
        {
          q: '¿Qué hago si tengo un problema con un servicio contratado?',
          a: 'Contacta con el proveedor a través del chat interno o, si no se resuelve, ponte en contacto con el soporte de EventAI para que podamos ayudarte.'
        },
        {
          q: '¿Puedo valorar los servicios recibidos?',
          a: 'Sí, tras finalizar un evento puedes dejar una valoración y comentario sobre el servicio recibido para ayudar a otros usuarios.'
        }
      ]
    }
  },
  methods: {
    toggle (idx) {
      this.$set(this.opened, idx, !this.opened[idx])
    }
  }
}
</script>

<style scoped>
.faq-page-container {
  min-height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../assets/fondoPage4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: auto;
  margin-bottom: 2rem;
  backdrop-filter: blur(5px);
}
.navbar-left .logo {
  height: 80px;
  width: auto;
  cursor: pointer;
}
.navbar-center h1 {
  color: #800020;
  font-size: 2rem;
  margin: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}
.back {
  background-color: #2C3E50;
  color: white;
}
.back:hover {
  background-color: #1a252f;
  transform: translateY(-2px);
}
.faq-main-content {
  max-width: 700px;
  margin: 0 auto;
  padding-top: 140px;
  padding-bottom: 3rem;
}
.faq-card {
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 2.5rem 2rem;
  width: 100%;
}
.faq-title {
  text-align: center;
  color: #800020;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.faq-item {
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #eee;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  font-size: 1.08rem;
  font-weight: 600;
  color: #2C3E50;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: color 0.2s;
}
.faq-question:hover {
  color: #800020;
}
.faq-answer {
  padding: 0.2rem 0 0.7rem 0.2rem;
  color: #444;
  font-size: 0.98rem;
  line-height: 1.5;
}
.faq-question i {
  font-size: 1.2rem;
  margin-left: 0.5rem;
  color: #800020;
}
@media (max-width: 900px) {
  .faq-main-content {
    padding-top: 120px;
  }
}
</style>
