<template>
  <div class="contact-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>Contacto</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="contact-main-content">
      <div class="contact-columns">
        <!-- Columna Izquierda: Info de contacto y redes sociales -->
        <div class="contact-info-col">
          <h2>Estamos aquí para ayudarte</h2>
          <ul class="contact-info-list">
            <li><i class="bi bi-geo-alt-fill"></i> Dirección: Calle Example 123, 28001 Madrid</li>
            <li><i class="bi bi-telephone-fill"></i> Teléfono: +34 912 345 678</li>
            <li><i class="bi bi-envelope-fill"></i> Email: info@eventai.com</li>
            <li><i class="bi bi-clock-fill"></i> Horario: Lunes a Viernes, 9:00 - 18:00</li>
          </ul>
          <h3>Síguenos en redes sociales</h3>
          <div class="social-icons">
            <a href="#" class="social-icon facebook" title="Facebook"><i class="bi bi-facebook"></i></a>
            <a href="#" class="social-icon twitter" title="Twitter/X"><i class="bi bi-twitter"></i></a>
            <a href="#" class="social-icon instagram" title="Instagram"><i class="bi bi-instagram"></i></a>
            <a href="#" class="social-icon linkedin" title="LinkedIn"><i class="bi bi-linkedin"></i></a>
            <strong class="strong">@EventAI</strong>
          </div>
        </div>
        <!-- Columna Derecha: Formulario -->
        <div class="contact-form-col">
          <form @submit.prevent="handleSubmit" class="contact-form">
            <div class="form-group">
              <label for="name">Nombre</label>
              <input type="text" id="name" v-model="name" required placeholder="Tu nombre" />
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" v-model="email" required disabled />
            </div>
            <div class="form-group">
              <label for="subject">Asunto</label>
              <input type="text" id="subject" v-model="subject" required placeholder="Motivo de contacto" />
            </div>
            <div class="form-group">
              <label for="message">Mensaje</label>
              <textarea id="message" v-model="message" required placeholder="Escribe tu mensaje..." rows="5"></textarea>
            </div>
            <button type="submit" class="send-btn">Enviar</button>
            <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
            <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contacto',
  data () {
    return {
      logo: require('../assets/LogoEventAiTransGran.png'),
      name: '',
      email: '',
      subject: '',
      message: '',
      successMessage: '',
      errorMessage: ''
    }
  },
  mounted () {
    // Obtener email del usuario desde localStorage
    try {
      const user = JSON.parse(localStorage.getItem('user'))
      if (user && user.email) {
        this.email = user.email
        if (user.full_name) this.name = user.full_name
      }
    } catch (e) {
      this.email = ''
    }
  },
  methods: {
    handleSubmit () {
      this.successMessage = ''
      this.errorMessage = ''
      if (!this.name || !this.email || !this.subject || !this.message) {
        this.errorMessage = 'Por favor, rellena todos los campos.'
        return
      }
      // Aquí iría la lógica real de envío (API, email, etc.)
      // Simulamos éxito
      setTimeout(() => {
        this.successMessage = '¡Mensaje enviado correctamente! Nos pondremos en contacto contigo pronto.'
        this.subject = ''
        this.message = ''
      }, 800)
    }
  }
}
</script>

<style scoped>
.strong {
  color: #800020;
  font-size: 1.2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}
.contact-page-container {
  min-height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../assets/fondoPage9.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);
}
.contact-main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 140px;
  padding-bottom: 3rem;
}
.contact-columns {
  display: flex;
  gap: 2.5rem;
  background: rgba(255,255,255,0.85);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 2.5rem 2rem;
}
.contact-info-col {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  min-width: 270px;
}
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.08rem;
  color: #2C3E50;
  margin-bottom: 0.7rem;
}
.contact-info-list i {
  color: #800020;
  font-size: 1.3rem;
}
.social-icons {
  display: flex;
  gap: 1.5rem;
  margin-top: 0;
  justify-content: center;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 1.5rem;
  background: #fff;
  color: #800020;
  border: 1.5px solid #800020;
  transition: background 0.2s, color 0.2s;
}
.social-icon.facebook:hover {
  background: #1877f3;
  color: #fff;
  border-color: #1877f3;
}
.social-icon.twitter:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}
.social-icon.instagram:hover {
  background: #e4405f;
  color: #fff;
  border-color: #e4405f;
}
.social-icon.linkedin:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}
.contact-form-col {
  flex: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 320px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
label {
  font-weight: 500;
  color: #2C3E50;
  margin-bottom: 0.1rem;
}
input, textarea {
  border: 1.5px solid #ccc;
  border-radius: 6px;
  padding: 0.7rem;
  font-size: 1rem;
  background: #f7f7f7;
  transition: border-color 0.2s;
}
input:focus, textarea:focus {
  border-color: #800020;
  outline: none;
}
input[disabled] {
  background: #ececec;
  color: #888;
  cursor: not-allowed;
}
.send-btn {
  background: #800020;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.2s;
}
.send-btn:hover {
  background: #600018;
}
.success-message {
  color: #218838;
  font-size: 0.97rem;
  margin-top: 0.5rem;
  text-align: center;
}
.error-message {
  color: #c82333;
  font-size: 0.97rem;
  margin-top: 0.5rem;
  text-align: center;
}
@media (max-width: 900px) {
  .contact-columns {
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 0.5rem;
  }
  .contact-info-col, .contact-form-col {
    min-width: 0;
    padding: 0;
  }
  .contact-main-content {
    padding-top: 120px;
  }
}
</style>
