---
import MainLayout from '../layouts/MainLayout.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import SplashScreen from '../components/SplashScreen.astro';
import AboutSection from '../components/AboutSection.astro';
import CompetitionsSection from '../components/CompetitionsSection.astro';
import PartnersSection from '../components/PartnersSection.astro';
---

<MainLayout title="Club Conjure - Laboratoire de médias interactifs">
  <Navigation />

  <main>
    <SplashScreen startYear={2009} endYear="current" />

    <AboutSection />

    <!-- Activities Section -->
    <section class="section" id="activites">
      <div class="full-height full-width columns is-full sub-section">
        <div class="bg-img gala-img full-height full-width"></div>
        <div class="headline">
          <h2>Gala Conjure</h2>
          <p>
            Le gala est une activité annuelle permettant aux membres du club de présenter sur quoi ils ont
            travaillé durant l'année aux différentes compagnies du domaine. L'événement se présente sous forme de
            5 à 8 dans les alentours du début du mois d'octobre. Tous les gens du domaine du jeu vidéo sont
            invités à venir voir les efforts mis par la relève.
          </p>
          <a href="mailto:conjure@ens.etsmtl.ca"
            ><button class="button is-gala-btn is-info is-outlined is-medium"
              >En savoir plus, contactez-nous</button
            ></a
          >
        </div>
      </div>
      <div class="full-height full-width is-full columns animation-inversed sub-section">
        <div class="column full-height no-spacing">
          <div class="bg-img mtlgj-img full-height full-width"></div>
          <div class="headline is-headline-inversed">
            <h2>Montréal Game Jam</h2>
            <p>
              Le Montréal Game Jam est le chapitre montréalais pour le Global Game Jam. Cet événement
              international donne comme défi aux participants de réaliser un prototype de jeu basé sur une
              thématique spécifique pendant une période de 48 heures.
            </p>
            <button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium"
              >En savoir plus</button
            >
          </div>
        </div>
        <div class="content column is-one-quarter-fullhd is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
          <img alt="Montreal Game Jam Logo" src="/img/MTLGJ-Logo.jpg" />
          <p>
            L'organisation du Montreal Game Jam est constituée de l'union de multiples universités et
            professionnels de Montréal dont le mandat commun est de promouvoir l'industrie du jeu vidéo.
          </p>
          <p>
            Nous rassemblons étudiants et professionnels pour stimuler la création et l'expérimentation de
            nouvelles idées et concepts. Nous voulons renforcer la collaboration avec la communauté du jeu et
            ainsi offrir la possibilité de créer de nouveaux liens à travers cet événement. C'est en supportant
            le développement de cette communauté que nous pourrons renforcer l'expertise générale. Considérant la
            forte présence médiatique, nos partenaires pourront ainsi démontrer leur intérêt à promouvoir la
            culture du jeu. C'est le temps de découvrir de nouveaux talents, de cultiver de nouvelles idées et de
            former de nouveaux liens.
          </p>
          <p>
            Que les participants soient à l'université ou de l'industrie, l'événement offre la possibilité de
            briser cette barrière et ainsi collaborer. Nous voulons surtout que vous ayez du plaisir à accomplir
            ce défi et réaliser ce qui vous passionne!
          </p>
          <p>
            Plus d'information sur le site du <a href="http://mtlgj.org/lang/fr/index.html">Montreal Game Jam</a>
          </p>
          <div>
            <button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">Fermer</button>
          </div>
        </div>
      </div>
    </section>

    <CompetitionsSection />
    <PartnersSection />
  </main>

  <Footer />
</MainLayout>

<script>
  import { animateNumbers, setupActivityButtons } from '../scripts/app';

  // Animate year numbers
  document.querySelectorAll('.year-animated').forEach((item) => {
    animateNumbers(item as HTMLElement);
  });

  // Setup activity buttons
  setupActivityButtons();
</script>
