<template>
  <div id="about-page" v-cloak>
    
    <header class="navbar navbar-dark bg-dark shadow-sm sticky-top">
      <div class="container-fluid position-relative d-flex justify-content-center align-items-center p-2">
        <RouterLink to="/" class="position-absolute start-0 ps-3 d-flex align-items-center text-decoration-none text-white">
          <img src="@/assets/logo.png" alt="Logo AccessiVue" width="40" height="40" class="d-block me-2"/>
        </RouterLink>

        <h1 class="navbar-brand mb-0 h1 d-none d-md-block">AccessiVue - Sobre el Projecte</h1>
        <h1 class="navbar-brand mb-0 h1 d-block d-md-none">AccessiVue</h1>

        <div class="position-absolute end-0 pe-3">
          <RouterLink to="/home" class="btn btn-sm btn-outline-light">
            <i class="bi bi-grid-fill me-1"></i>
            <span class="d-none d-sm-inline">Llibreria de components</span>
            <span class="d-inline d-sm-none">Llibreria</span>
          </RouterLink>
        </div>
      </div>
    </header>

    <main class="flex-grow-1 bg-light">
      <div class="container py-5">
        <div class="row justify-content-center">
          <div class="col-lg-9">
            
            <div class="card shadow-sm mb-5 border-2">
              <div class="card-body p-5">
                <h2 class="card-title mb-4 text-primary fw-bold">El Projecte AccessiVue</h2>
                <p class="lead">
                  AccessiVue és un Treball de Fi de Grau (TFG) desenvolupat per la <strong>Gemma Vallès</strong> per al Grau d'Enginyeria Informàtica.
                </p>
                <hr class="my-4">
                <p>
                  L'objectiu principal és proporcionar un <strong>repositori de components Vue.js accessibles i reutilitzables</strong>, 
                  dissenyats específicament per servir com a material de suport en l'assignatura de <em>Factors Humans i Computació</em>.
                </p>
                <p>
                  Molts estudiants s'enfronten a una corba d'aprenentatge elevada quan han d'implementar interfícies inclusives. 
                  AccessiVue neix per <strong>reduir aquesta barrera tècnica</strong>, permetent a l'alumnat integrar components de qualitat 
                  i centrar els seus esforços en el disseny de l'experiència d'usuari.
                </p>
              </div>
            </div>

            <div class="row g-4 mb-5">
              <div class="col-md-4">
                <div class="card h-100 border-2 shadow-sm text-center p-4">
                  <div class="mb-3 text-primary">
                    <span class="display-4">♿</span> 
                  </div>
                  <h3 class="fw-bold">Accessibilitat</h3>
                  <p class="text-muted small">
                    Tots els components compleixen amb les directrius <strong>WCAG 2.2 (Nivell AA)</strong>, garantint la navegació per teclat i compatibilitat amb lectors de pantalla.
                  </p>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card h-100 border-2 shadow-sm text-center p-4">
                  <div class="mb-3 text-success">
                    <span class="display-4">🚀</span>
                  </div>
                  <h3 class="fw-bold">Sense dependències </h3>
                  <p class="text-muted small">
                    Dissenyats per ser integrats directament sense configuracions complexes ni eines de compilació (Webpack/Vite), facilitant l'ús immediat.
                  </p>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card h-100 border-2 shadow-sm text-center p-4">
                  <div class="mb-3 text-warning">
                    <span class="display-4">🧩</span>
                  </div>
                  <h3 class="fw-bold">Disseny Modular</h3>
                  <p class="text-muted small">
                    Components com formularis, cercadors i taules CRUD altament personalitzables mitjançant <em>Props</em> i <em>Events</em>.
                  </p>
                </div>
              </div>
            </div>

            <div class="card shadow-sm mb-4 border-start border-4">
              <div class="card-body p-4">
                <h3 class="mb-3">Detalls Tècnics i Metodologia</h3>
                <div class="row">
                  <div class="col-md-6">
                    <h4 class="fw-bold text-uppercase text-muted small">Stack Tecnològic</h4>
                    <ul class="list-unstyled">
                      <li>Vue.js 3</li>
                      <li>Bootstrap 5 per als estils</li>
                      <li>Estructura basada en fitxers HTML únics</li>
                      <li>Desplegament automàtic a Netlify</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <h4 class="fw-bold text-uppercase text-muted small">Metodologia</h4>
                    <p class="small mb-0">
                      El desenvolupament ha seguit la metodologia <strong>Design Thinking</strong>, incloent-hi fases de recerca amb usuaris, definició d'arquetips (Personas) i validació mitjançant tests d'usabilitat (SUS).
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center mt-5">
              <RouterLink to="/home" class="btn btn-primary btn-lg px-5 shadow-sm rounded-pill">
                Explorar el Catàleg
              </RouterLink>
            </div>

          </div>
        </div>
      </div>
    </main>

    <footer class="bg-dark text-white text-center py-4 mt-auto">
      <div class="container">
        <p class="mb-1 small">Universitat de Barcelona - Enginyeria Informàtica</p>
        <p class="mb-0 text-white-50 small">&copy; 2026 Gemma Vallès. AccessiVue.</p>
      </div>
    </footer>

  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  document.title = "AccessiVue - Sobre el Projecte"
})
</script>

<style scoped>
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css";

#about-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  animation: fadeIn 0.6s ease-out;
}

.card {
  transition: transform 0.2s ease-in-out;
}

/* Efecte hover suau per les targetes de característiques */
.col-md-4 .card:hover {
  transform: translateY(-5px);
}

.navbar-brand {
   margin-right: 0 !important;
   font-weight: 600;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

[v-cloak] {
  display: none;
}
</style>