---
export const prerender = true;

import BaseLayout from '../layouts/BaseLayout.astro';
import ColJournal from '../components/astro/ColJournal.astro';
import ColCentre from '../components/astro/ColCentre.astro';
import ColInsta from '../components/astro/ColInsta.astro';
import SwipeContainer from '../components/vue/SwipeContainer.vue';
import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
import MobileTabBar from '../components/astro/MobileTabBar.astro';
import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
---
<BaseLayout title="trans-former.fr">
  <HamburgerMenu />
  <MobileTabBar />
  <PopupOnboarding />

  <!-- Desktop : grid 3 colonnes -->
  <div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-screen overflow-hidden">
    <aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside>
    <main class="overflow-hidden"><ColCentre /></main>
    <aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
  </div>

  <!-- Mobile : SwipeContainer Vue island - decale de 44px pour la tabbar -->
  <div class="md:hidden overflow-hidden" style="height: calc(100dvh - 44px); margin-top: 44px;">
    <SwipeContainer client:load>
      <ColJournal slot="left" />
      <ColCentre slot="center" />
      <ColInsta slot="right" />
    </SwipeContainer>
  </div>
</BaseLayout>