<template>
  <div class="min-h-screen bg-white">
    <!-- Section héro -->
    <section class="py-20 px-4">
      <div class="max-w-4xl mx-auto text-center">
        <h1 class="text-5xl font-bold text-black mb-6">
          Patois Franco-Provençal
        </h1>
        <p class="text-xl mb-8 leading-relaxed" style="color: #6b7280">
          Découvrez, apprenez et préservez notre patrimoine linguistique régional.
          Une collection de textes traditionnels traduits et annotés pour transmettre
          la richesse de notre langue ancestrale.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <router-link to="/textes" class="btn-primary">
            Explorer les textes
          </router-link>
          <router-link to="/au-hasard" class="btn-secondary">
            Texte au hasard
          </router-link>
        </div>
      </div>
    </section>

    <!-- Section présentation -->
    <section class="py-16 bg-gray-50">
      <div class="max-w-6xl mx-auto px-4">
        <div class="grid md:grid-cols-3 gap-8">
          <div class="text-center">
            <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
              <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C20.832 18.477 19.246 18 17.5 18c-1.746 0-3.332.477-4.5 1.253" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold mb-2">Textes Authentiques</h3>
            <p style="color: #6b7280">
              Collection de textes traditionnels et contemporains en patois franco-provençal
            </p>
          </div>

          <div class="text-center">
            <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
              <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold mb-2">Audio Intégré</h3>
            <p style="color: #6b7280">
              Écoutez la prononciation authentique avec nos enregistrements audio
            </p>
          </div>

          <div class="text-center">
            <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
              <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold mb-2">Recherche Avancée</h3>
            <p style="color: #6b7280">
              Trouvez facilement des textes par mot-clé, auteur ou thématique
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Section statistiques -->
    <section class="py-16">
      <div class="max-w-4xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold mb-12">Notre Collection</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
          <div>
            <div class="text-4xl font-bold text-black mb-2">{{ stats.totalTexts }}</div>
            <div style="color: #6b7280">Textes</div>
          </div>
          <div>
            <div class="text-4xl font-bold text-black mb-2">{{ stats.withAudio }}</div>
            <div style="color: #6b7280">Avec Audio</div>
          </div>
          <div>
            <div class="text-4xl font-bold text-black mb-2">{{ stats.authors }}</div>
            <div style="color: #6b7280">Auteurs</div>
          </div>
          <div>
            <div class="text-4xl font-bold text-black mb-2">{{ stats.categories }}</div>
            <div style="color: #6b7280">Catégories</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section récents -->
    <section class="py-16 bg-gray-50">
      <div class="max-w-6xl mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">Textes Récents</h2>
          <p style="color: #6b7280">Découvrez nos derniers ajouts à la collection</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6">
          <div
            v-for="text in recentTexts"
            :key="text.id"
            class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
            @click="$router.push(`/texte/${text.id}`)"
          >
            <h3 class="font-semibold mb-2">{{ text.titre_fr }}</h3>
            <p class="text-sm mb-3" style="color: #6b7280">{{ text.titre_pt }}</p>
            <div class="flex justify-between items-center text-xs text-gray-500">
              <span>{{ text.auteur }}</span>
              <span v-if="text.hasAudio" class="flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v6.114A4.369 4.369 0 005 11c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.369 4.369 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
                </svg>
                Audio
              </span>
            </div>
          </div>
        </div>

        <div class="text-center mt-8">
          <router-link to="/textes" class="btn-secondary">
            Voir tous les textes
          </router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { textService } from '../services/textService.js'

export default {
  name: 'Home',
  setup() {
    const stats = ref({
      totalTexts: 0,
      withAudio: 0,
      authors: 0,
      categories: 0
    })

    const recentTexts = ref([])

    // Fonction pour charger les statistiques et textes récents
    const loadData = async () => {
      try {
        // Charger les statistiques
        const statsData = await textService.getStats()
        stats.value = statsData

        // Charger les textes récents (tous les textes pour l'instant)
        const allTexts = await textService.loadAllTexts()
        recentTexts.value = allTexts.slice(0, 3) // Limiter à 3 textes récents

      } catch (error) {
        console.error('Erreur lors du chargement des données:', error)
      }
    }

    onMounted(() => {
      loadData()
    })

    return {
      stats,
      recentTexts
    }
  }
}
</script>
