<script setup lang="ts">
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import AppHeader from './components/AppHeader.vue';
import HeroSection from './components/HeroSection.vue';
import ProblemSection from './components/ProblemSection.vue';
import FeaturesSection from './components/FeaturesSection.vue';
import ShowcaseSection from './components/ShowcaseSection.vue';
import WorkspaceShowcase from './components/WorkspaceShowcase.vue';
import DownloadSection from './components/DownloadSection.vue';
import RemoteGitSection from './components/RemoteGitSection.vue';
import WorkGroupsSection from './components/WorkGroupsSection.vue';
import HowItWorksSection from './components/HowItWorksSection.vue';
import SecuritySection from './components/SecuritySection.vue';
import FaqSection from './components/FaqSection.vue';
import FinalCta from './components/FinalCta.vue';
import AppFooter from './components/AppFooter.vue';

const { locale } = useI18n();

// Tient l'attribut <html lang> synchronisé avec la langue active.
watch(
  locale,
  (l) => {
    document.documentElement.lang = l;
  },
  { immediate: true },
);

// Grain de fond + halo emerald (décoratifs) : portés tels quels du design.
const grainStyle = {
  position: 'fixed',
  inset: '0',
  zIndex: 0,
  pointerEvents: 'none',
  backgroundImage: 'radial-gradient(rgba(255,255,255,.025) 1px,transparent 1.4px)',
  backgroundSize: '34px 34px',
  WebkitMaskImage: 'radial-gradient(ellipse 120% 70% at 50% -4%,#000,transparent 70%)',
  maskImage: 'radial-gradient(ellipse 120% 70% at 50% -4%,#000,transparent 70%)',
} as const;

const glowStyle = {
  position: 'fixed',
  top: '-26%',
  left: '50%',
  transform: 'translateX(-50%)',
  width: '1100px',
  height: '680px',
  zIndex: 0,
  pointerEvents: 'none',
  background: 'radial-gradient(50% 50% at 50% 50%,rgba(16,185,129,.12),transparent 64%)',
  filter: 'blur(18px)',
} as const;
</script>

<template>
  <div class="relative overflow-x-hidden">
    <div aria-hidden="true" :style="grainStyle"></div>
    <div aria-hidden="true" :style="glowStyle"></div>

    <AppHeader />

    <main id="top" class="relative z-[1]">
      <HeroSection />
      <ProblemSection />
      <FeaturesSection />
      <ShowcaseSection />
      <WorkspaceShowcase />
      <DownloadSection />
      <RemoteGitSection />
      <WorkGroupsSection />
      <HowItWorksSection />
      <SecuritySection />
      <FaqSection />
      <FinalCta />
    </main>

    <AppFooter />
  </div>
</template>
