<script setup>
import Card from "@/components/ui/Card.vue"
import CardContent from "@/components/ui/CardContent.vue"
import Button from "@/components/ui/Button.vue"
import { Github, MessageCircle, Bug, Code, Lightbulb, Calendar, Heart, Wallet } from "lucide-vue-next"
import CommunityHero from "@/components/sections/community/CommunityHero.vue"
import CommunityProjectSupport from "@/components/sections/community/CommunityProjectSupport.vue"
import CommunityDevRoadMap from "@/components/sections/community/CommunityDevRoadMap.vue"
import CommunityHowToContribute from "@/components/sections/community/CommunityHowToContribute.vue"
import CommunityUpdates from "@/components/sections/community/CommunityUpdates.vue"
import UnderConstruction from "@/components/sections/UnderConstruction.vue"

const currentYear = new Date().getFullYear()

// Contribution Guide items
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.",
  },
]

// Roadmap items
const roadmap = [
  {
    title: "Q1 2025 - In Progress",
    dotColor: "bg-primary",
    tasks: [
      "Mobile iOS app development",
      "Improved NAT traversal for restrictive networks",
      "Group video calling module",
      "Enhanced content discovery algorithms",
    ],
  },
  {
    title: "Q2 2025 - Planned",
    dotColor: "bg-muted-foreground",
    tasks: [
      "Distributed storage for larger media files",
      "Advanced reputation and trust metrics",
      "Built-in Tor integration for enhanced anonymity",
      "Marketplace module for P2P commerce",
    ],
  },
  {
    title: "Q3-Q4 2025 - Future",
    dotColor: "bg-muted-foreground",
    tasks: [
      "Cross-platform desktop synchronization",
      "Blockchain integration for identity verification (optional)",
      "Plugin ecosystem marketplace",
      "Advanced analytics dashboard for users",
    ],
  },
]

// Recent updates
const updates = [
  {
    title: "v1.2.0 Released",
    date: "Dec 1, 2024",
    description: "Major update with group Waves, improved encryption performance, and enhanced NAT traversal. See full release notes on the downloads page.",
  },
  {
    title: "Community Milestone: 10K Users",
    date: "Nov 25, 2024",
    description: "We've reached 10,000 active users on the network! Thank you to everyone who's joined the movement for decentralized social media.",
  },
  {
    title: "New Documentation Portal",
    date: "Nov 15, 2024",
    description: "Launched comprehensive documentation with guides for developers, API references, and security best practices.",
  },
]
</script>

<template>
  <div class="flex flex-col">
    <section class="border-b border-border">
      <div class="container mx-auto">
        <CommunityHero />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <CommunityProjectSupport />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <CommunityDevRoadMap />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <CommunityHowToContribute />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <CommunityUpdates />
      </div>
    </section>

    <section class="">
      <div class="container mx-auto">
        <UnderConstruction />
      </div>
    </section>
  </div>
</template>
