<script setup>
import { Head, Link } from '@inertiajs/vue3';
import Layout from '@/Layouts/Layout.vue';

</script>

<template>
    <Head title="Home"/>
    <Layout>
        <template #content>
            <div class=" text-gray-900">

    <div class="relative w-full max-h-[calc(100vh+1rem)] flex items-center overflow-hidden">
        <img src="/img/sarasin.png" class="h-full laptop:pb-96 object-cover" alt="Image de présentation du groupe scout" />
        <!-- Gradient doux : du transparent en haut vers un noir très léger en bas -->
        <div class="absolute top-0 bottom-0 right-0 left-0 inset-0 flex items-center justify-center bg-gradient-to-b from-transparent via-gray-200 via-[90%] to-gray-200">
        <h1 class="text-center text-white laptop:text-[260px] text-7xl laptop:leading-[180px] font-extrabold drop-shadow-lg transition duration-500 hover:scale-105">
            Scout Baslac
        </h1>
        </div>
    </div>

    <!-- Contenu principal avec animation et grilles -->
    <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-4 pb-12 space-y-12">
      <!-- Carte "Qui sommes-nous ?" -->
      <transition name="fade" mode="out-in">
        <div class="bg-gray-100 shadow-xl rounded-lg overflow-hidden transform transition duration-200 hover:scale-105">
          <div class="flex flex-col lg:flex-row">
            <!-- Partie Image -->
            <div class="lg:w-1/2 relative max-h-56 hover:p-trans-in p-trans-out duration-200 overflow-hidden">
              <!-- Image d'illustration, à personnaliser -->
               <div class="">
                <img src="/img/present.jpeg" alt="Illustration du groupe scout" class="h-full ">
               </div>
              <!-- Overlay pour assombrir l'image et améliorer la lisibilité -->
              <div class="absolute inset-0 bg-black opacity-30"></div>
            </div>
            <!-- Partie Texte -->
            <div class="lg:w-1/2 p-8 flex flex-col justify-center">
              <h2 class="text-3xl lg:text-5xl font-semibold mb-4 border-b border-gray-300 pb-2">
                Qui sommes-nous ?
              </h2>
              <p class="mb-4 leading-relaxed">
                Le Groupement scout du Bas-Lac, fort de près de trente ans d’histoire et d’une tradition remontant à 1920 sur Saint-Blaise, incarne l’esprit du scoutisme, le respect de la nature et le vivre-ensemble.
              </p>
              <p class="mb-4 leading-relaxed">
                Nos activités, mêlant jeux de piste, ateliers manuels et aventures en pleine nature, favorisent l’épanouissement, l’autonomie et la création de liens forts entre tous les participants.
              </p>
              <p class="font-bold text-lg">
                Rejoignez-nous et vivez une aventure inoubliable !
              </p>
            </div>
          </div>
        </div>
      </transition>

      <!-- Carte "Nos groupes par âge" -->
      <transition name="fade" mode="out-in">
        <div class="bg-gray-100 shadow-lg rounded-lg p-8 transform transition duration-200 hover:scale-105">
          <h2 class="text-3xl lg:text-5xl font-semibold border-b border-gray-300 pb-3 mb-6">
            Nos groupes par âge
          </h2>
          <p class="mb-6">Notre groupe se décline en plusieurs tranches d'âge (7 à 25 ans) afin d'adapter les activités à chaque étape de développement.</p>
          <div class="space-y-6">
            <!-- Carte interne pour chaque groupe -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition">
                <p class="text-xl font-bold">Les louvetaux</p>
                <p class="text-sm mt-2">
                  Dès 7 ans, les louveteaux découvrent le scoutisme en jouant et en réalisant des activités adaptées, tout en s’initiant aux valeurs du groupe.
                </p>
              </div>
              <div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition">
                <p class="text-xl font-bold">Les éclaireurs</p>
                <p class="text-sm mt-2">
                  À partir de 11 ans, les éclaireurs se forment en patrouilles pour apprendre l’autonomie, la gestion de projets et s’initier à diverses compétences pratiques.
                </p>
              </div>
              <div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition">
                <p class="text-xl font-bold">Les pionniers</p>
                <p class="text-sm mt-2">
                  Les pionniers, sortis de l’école obligatoire, forment un poste autonome et s’engagent dans la planification et l’organisation de projets collectifs.
                </p>
              </div>
              <div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition">
                <p class="text-xl font-bold">Les responsables</p>
                <p class="text-sm mt-2">
                  À partir de 17 ans, les responsables, ou routiers, prennent en charge l’encadrement des plus jeunes et participent activement à la vie du groupe.
                </p>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <!-- Carte "Information pratique" avec carte interactive -->
      <transition name="fade" mode="out-in">
        <div class="bg-gray-100 shadow-lg rounded-lg p-8 transform transition duration-200 hover:scale-105">
          <h2 class="text-3xl lg:text-5xl font-semibold border-b border-gray-300 pb-3 mb-6">
            Information pratique
          </h2>
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div class="space-y-6">
              <div class="space-y-2">
                <p class="text-xl font-bold">Séance</p>
                <p class="text-sm">
                  Nos séances se déroulent de 14h00 à 16h30 chaque samedi hors vacances scolaires, avec des activités organisées sur place et parfois en extérieur.
                </p>
              </div>
              <div class="space-y-2">
                <p class="text-xl font-bold">Organigramme</p>
                <p class="text-sm">
                  Après adhésion, vous recevrez un organigramme complet des responsables. Pour toute demande de contact, merci d'utiliser notre formulaire dédié.
                </p>
              </div>
              <div class="space-y-2">
                <p class="text-xl font-bold">Camps et activités spéciales</p>
                <p class="text-sm">
                  Les informations sur nos camps et sorties spéciales sont envoyées par email et ne figurent pas sur cette page.
                </p>
              </div>
              <div class="space-y-2">
                <p class="text-xl font-bold">Nos locaux</p>
                <p class="text-sm">
                  Nos séances se déroulent dans un chalet situé en lisière de la forêt, construit par des scouts et utilisé depuis 20 ans pour accueillir nos activités.
                </p>
              </div>
            </div>
            <!-- Carte interactive (iframe) -->
            <div>
              <iframe
                class="w-full h-80 border rounded"
                loading="lazy"
                src="https://map.geo.admin.ch/embed.html?lang=fr&topic=ech&bgLayer=ch.swisstopo.pixelkarte-farbe&layers=ch.swisstopo.zeitreihen,ch.bfs.gebaeude_wohnungs_register,ch.bav.haltestellen-oev,ch.swisstopo.swisstlm3d-wanderwege,ch.astra.wanderland-sperrungen_umleitungen,KML%7C%7Chttps:%2F%2Fpublic.geo.admin.ch%2Fapi%2Fkml%2Ffiles%2F8zAxcXdzRvCxIN1CAhXGMA&layers_opacity=1,1,1,0.8,0.8,1&layers_visibility=false,false,false,false,false,true&layers_timestamp=18641231,,,,,&E=2564876.26&N=1207554.44&zoom=9"
                allow="geolocation"
                frameborder="0"
              ></iframe>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
        </template>
    </Layout>
</template>