import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Star, GitFork, Users, Heart } from "lucide-react"

export default function Community() {
  return (
    <section id="community" className="py-20 px-4 bg-black">
      <div className="container mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">Join the Open-Source Community</h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
            Meetingnotes is built by the community for the community. Star us on GitHub, contribute features, or report
            issues.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 mb-12">
          <Card className="bg-gray-900/50 border-gray-800 text-center">
            <CardContent className="p-8">
              <Star className="w-12 h-12 text-yellow-400 mx-auto mb-4" />
              <h3 className="text-2xl font-bold mb-2">1.2k</h3>
              <p className="text-gray-300">GitHub Stars</p>
            </CardContent>
          </Card>

          <Card className="bg-gray-900/50 border-gray-800 text-center">
            <CardContent className="p-8">
              <GitFork className="w-12 h-12 text-blue-400 mx-auto mb-4" />
              <h3 className="text-2xl font-bold mb-2">180</h3>
              <p className="text-gray-300">Forks</p>
            </CardContent>
          </Card>

          <Card className="bg-gray-900/50 border-gray-800 text-center">
            <CardContent className="p-8">
              <Users className="w-12 h-12 text-green-400 mx-auto mb-4" />
              <h3 className="text-2xl font-bold mb-2">50+</h3>
              <p className="text-gray-300">Contributors</p>
            </CardContent>
          </Card>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
          <Button size="lg" className="bg-gray-800 hover:bg-gray-700 border border-gray-600">
            <Star className="w-5 h-5 mr-2" />
            Star on GitHub
          </Button>
          <Button size="lg" className="bg-blue-600 hover:bg-blue-700">
            <GitFork className="w-5 h-5 mr-2" />
            Fork & Contribute
          </Button>
        </div>

        <div className="bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-xl p-8 border border-purple-600/30 text-center">
          <Heart className="w-12 h-12 text-pink-400 mx-auto mb-4" />
          <h3 className="text-2xl font-bold mb-4">Help Build the Future</h3>
          <p className="text-gray-300 mb-4">
            Add integrations, templates, or custom models! Every contribution makes Meetingnotes better for everyone.
          </p>
          <blockquote className="text-lg font-medium text-gray-200 mb-4">
            "As an open-source project, Meetingnotes is transparent and customizable—perfect for privacy-focused users."
          </blockquote>
          <cite className="text-purple-400 font-semibold">– Developer & Contributor</cite>
        </div>
      </div>
    </section>
  )
}