<template>
  <Navbar />
  <div class="main">
    <!-- Section Accueil -->
    <section id="home" class="py-16 bg-gray-100/10">
      <div class="container mx-auto px-4">
        <h1 class="text-4xl font-bold mb-8 text-center">Union Étudiante Auvergne</h1>
        <p class="text-lg text-center">
          L'Union Étudiante Auvergne est le syndicat étudiant majoritaire de l'Université Clermont Auvergne.<br/>
          Nous sommes présent·es sur les différents campus de la fac pour informer, défendre et organiser la solidarité.<br/>
          Rejoins-nous !
        </p>
      </div>
    </section>

    <!-- Section Actions -->
    <section id="actions" class="py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">Nos Actions</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-gray-100/10 p-4 rounded shadow">
            <h3 class="text-xl font-bold mb-2">FECReD</h3>
            <p class="text-white">Le FECReD est le Festival Étudiant Contre le Racisme et les Discriminations, que nous organisons chaque année</p>
          </div>
          <div class="bg-gray-100/10 p-4 rounded shadow">
            <h3 class="text-xl font-bold mb-2">Bourse Aux Livres Solidaire</h3>
            <p class="text-white">La Bourse Aux Livres est une action à visée solidaire de partage de l'accès à la culture. Avant l'évènement, amène-nous tes manuels, romans ou BDs à <a href="#contact">notre local</a> ou sur une de nos tables de récupération, choisis entre un prix ou prix libre, et nous passons par tous les sites de la fac et te rendons l'argent de la vente et les livres restants à la fin de l'action.</p>
          </div>
          <div class="bg-gray-100/10 p-4 rounded shadow">
            <h3 class="text-xl font-bold mb-2">Conférences</h3>
            <p class="text-white">
              Nous organisons et participons régulièrement à des conférences sur divers thèmes reliés aux étudiant·es et à leurs combats.
              <br/>En 2025:
              <br/>· Résister en étudiant·es, l'exemple des Gergoviottes (1939-1945) en présence de chercheur·euses du GERME
              <br/>· Universités Israëliennes, Universités Palestiniennes par Ivar Ekeland
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Section Contact -->
    <section id="contact" class="py-16 bg-gray-100/10">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">Nous Contacter</h2>
        <p class="text-lg text-center">
          Tu peux nous contacter <a href="mailto:unionetudianteauvergne@gmail.com">par mail</a> (unionetudianteauvergne@gmail.com), en DM par <a href="#socials">nos réseaux sociaux</a> (Insta, Twitter...).
          <br/>Notre local à la fac de lettres (29 Bd Gergovia) est ouvert tous les jours de la semaine de midi à 14h.<br/>Tu peux te rendre sur place ou nous appeler au <b>04 73 34 66 31</b> sur cet horaire.
        </p>      
        <div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
          <img src="./assets/local.png" class="h-auto max-w-md mx-auto rounded-lg obect-center object-cover" />
        </div>
      </div>
    </section>

    <!-- Section Réseaux Sociaux -->
    <section id="socials" class="py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">Réseaux Sociaux</h2>
        <div class="flex justify-center space-x-4">
          <a href="https://www.instagram.com/unionetudianteauvergne" target="_blank" class="text-2xl"><font-awesome-icon :icon="['fab', 'fa-instagram']" /></a>
          <a href="https://x.com/UEAuvergne" target="_blank" class="text-2xl"><font-awesome-icon :icon="['fab', 'fa-twitter']" /></a>
          <a href="https://linktr.ee/unionetudianteauvergne" target="_blank" class="text-2xl"><font-awesome-icon :icon="['fab', 'fa-linktree']" /></a>
        </div>
      </div>
    </section>
  </div>

  <Footer />
</template>

<script setup lang="ts">
import Navbar from './components/Navbar.vue'
import Footer from './components/Footer.vue';
</script>
