<template>
  <div class="section-padding">
    <div class="container-content">
      <div class="mx-auto max-w-3xl">
        <!-- Header -->
        <div class="text-center mb-12">
          <div class="decision-icon mx-auto mb-6">
            <div class="i-lucide-gavel h-10 w-10" />
          </div>
          <h1 class="font-display text-4xl font-bold text-white mb-4">Plateforme Décision</h1>
          <p class="text-lg text-white/60 leading-relaxed">
            Se donner les moyens de la décision collective.
          </p>
        </div>

        <!-- Features -->
        <div class="grid gap-4 sm:grid-cols-2 mb-12">
          <div v-for="feature in features" :key="feature.title" class="feature-card">
            <div class="feature-icon">
              <div :class="`i-lucide-${feature.icon} h-5 w-5`" />
            </div>
            <h3 class="font-display font-semibold text-white mb-1">{{ feature.title }}</h3>
            <p class="text-sm text-white/50 leading-relaxed">{{ feature.text }}</p>
          </div>
        </div>

        <!-- CTA -->
        <div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
          <UiBaseButton :href="decisionUrl" target="_blank">
            <div class="i-lucide-external-link mr-2 h-4 w-4" />
            Ouvrir Glibredecision
          </UiBaseButton>
          <UiBaseButton variant="ghost" to="/">
            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
            Retour à l'accueil
          </UiBaseButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({ title: 'Décision collective' })

const appConfig = useAppConfig()
const decisionUrl = (appConfig.libredecision as { url: string }).url

const features = [
  {
    icon: 'vote',
    title: 'Décisions on-chain',
    text: 'Des décisions transparentes et vérifiables, inscrites sur la blockchain.',
  },
  {
    icon: 'scroll-text',
    title: 'Les Mandats',
    text: 'Formaliser et suivre les mandats confiés aux personnes désignées.',
  },
  {
    icon: 'scroll-text',
    title: 'Documents de référence',
    text: 'Les textes fondateurs et documents qui encadrent la prise de décision.',
  },
  {
    icon: 'git-branch',
    title: 'Les Protocoles',
    text: 'Les règles et processus qui structurent la décision collective.',
  },
]
</script>

<style scoped>
.decision-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: hsl(var(--color-primary) / 0.1);
  border: 1px solid hsl(var(--color-primary) / 0.2);
  color: hsl(var(--color-primary));
}

.feature-card {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  margin-bottom: 0.75rem;
}
</style>
