<script setup>
import Card from '@/components/ui/Card.vue';
import CardContent from '@/components/ui/CardContent.vue';
import { Code } from 'lucide-vue-next';

const contributionItems = [
  {
    title: "Code Contributions",
    description: "We welcome contributions to the core platform and modules. Fork the repository, make your changes, and submit a pull request.",
    points: [
      "Follow the existing code style and conventions",
      "Write tests for new features",
      "Update documentation as needed",
      "Ensure all tests pass before submitting",
    ],
  },
  {
    title: "Documentation",
    description: "Help improve our documentation by fixing errors, adding examples, or writing guides. Clear documentation makes the platform more accessible to everyone.",
  },
  {
    title: "Bug Reports",
    description: "Found a bug? Report it on our issue tracker with detailed steps to reproduce, your system information, and any relevant logs.",
  },
  {
    title: "Feature Requests",
    description: "Have an idea for a new feature? Open an issue describing the feature, its use case, and how it fits with the project's goals of decentralization and privacy.",
  },
  {
    title: "Testing",
    description: "Test beta releases, provide feedback, and help us identify issues before they reach stable releases.",
  },
]
</script>

<template>
    <section class="">
    <div class="container py-24">
      <div class="max-w-3xl mx-auto">
        <div class="flex items-center gap-3 mb-8">
          <Code class="h-8 w-8 text-primary" />
          <h2 class="text-3xl md:text-4xl font-bold">How to Contribute</h2>
        </div>

        <div class="space-y-6">
          <Card v-for="(item, index) in contributionItems" :key="index">
            <CardContent class="pt-6">
              <h3 class="text-xl font-bold mb-3">{{ item.title }}</h3>
              <p class="text-muted-foreground leading-relaxed mb-4" v-if="item.description">{{ item.description }}</p>
              <ul class="space-y-2 text-muted-foreground text-sm" v-if="item.points">
                <li class="flex gap-2" v-for="(point, i) in item.points" :key="i">
                  <span class="text-primary">•</span>
                  <span>{{ point }}</span>
                </li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  </section>
</template>