<script setup>
import { RouterLink } from 'vue-router'
import Button from '@/components/ui/Button.vue'
</script>

<template>
  <section class="container py-24">
    <div class="max-w-4xl mx-auto text-center space-y-8">
      <h2 class="text-4xl md:text-5xl font-bold text-balance">
        Explore the Ecosystem
      </h2>

      <p class="text-xl text-muted-foreground leading-relaxed">
        Use community applications, discover decentralized experiences,
        or build entirely new systems on top of NoSys.
      </p>

      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <RouterLink to="/downloads">
          <Button size="lg" class="bg-amber-400 hover:bg-amber-500 text-black px-8">
            Download NoSys
          </Button>
        </RouterLink>

        <RouterLink to="/documentation">
          <Button size="lg" variant="outline" class="px-8">
            Explore Documentation
          </Button>
        </RouterLink>
      </div>
    </div>
  </section>
</template>