import type { Metadata } from 'next';
import { Github, ExternalLink, Code, Heart, MessageCircle } from 'lucide-react';

export const metadata: Metadata = {
  title: 'Community - P2NS',
  description: 'Contribute to P2NS, get support, and join the Discord community.',
  keywords: ['P2NS community', 'contribute', 'open source', 'Discord', 'support', 'contributing'],
  authors: [{ name: 'Raven Scott' }],
  openGraph: {
    title: 'Community - P2NS',
    description: 'Contribute to P2NS, get support, and join the Discord community.',
    url: 'https://p2ns.space/community',
    siteName: 'P2NS',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Community - P2NS',
    description: 'Contribute to P2NS, get support, and join the Discord community.',
  },
  alternates: {
    canonical: 'https://p2ns.space/community',
  },
};

export default function CommunityPage() {
  return (
    <div className="min-h-screen">
      <section className="py-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
            Community
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300">
            Join the P2NS community and help build the future of decentralized DNS
          </p>
        </div>
      </section>

      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-12">
            <div>
              <div className="flex items-center space-x-3 mb-4">
                <Github className="h-8 w-8 text-gray-900 dark:text-white" />
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Repository</h2>
              </div>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                P2NS is open source and available on Git. Check out the code, report issues, and contribute.
              </p>
              <a
                href="https://git.ssh.surf/snxraven/p2ns"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center space-x-2 px-6 py-3 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
              >
                <Github className="h-5 w-5" />
                <span>View Repository</span>
                <ExternalLink className="h-4 w-4" />
              </a>
            </div>

            <div>
              <div className="flex items-center space-x-3 mb-4">
                <MessageCircle className="h-8 w-8 text-gray-900 dark:text-white" />
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Holesail Discord</h2>
              </div>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Join the Holesail Discord server to connect with the community, get help, share ideas, and stay updated on the latest developments.
              </p>
              <a
                href="https://discord.gg/3gFegYtNbN"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center space-x-2 px-6 py-3 bg-indigo-600 dark:bg-indigo-500 text-white rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors"
              >
                <MessageCircle className="h-5 w-5" />
                <span>Join Discord Server</span>
                <ExternalLink className="h-4 w-4" />
              </a>
            </div>

            <div>
              <div className="flex items-center space-x-3 mb-4">
                <Code className="h-8 w-8 text-gray-900 dark:text-white" />
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Contributing</h2>
              </div>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Contributions are welcome! Here's how you can help:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-gray-600 dark:text-gray-300 mb-6">
                <li>Report bugs and issues</li>
                <li>Suggest new features</li>
                <li>Submit pull requests</li>
                <li>Improve documentation</li>
                <li>Test on different platforms</li>
              </ul>
              <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Contribution Guidelines</h3>
                <ol className="list-decimal pl-6 space-y-2 text-gray-600 dark:text-gray-300">
                  <li>Must be a member of Discord-Linux <a href="https://join.discord-linux.com" className="text-blue-600 dark:text-blue-400 hover:underline">Join Now</a></li>
                  <li>Run /register-git command to register an account.</li>
                  <li>Fork the repository</li>
                  <li>Create a branch for your changes</li>
                  <li>Make your changes and test thoroughly</li>
                  <li>Submit a pull request with a clear description</li>
                  <li>Focus on stability and cross-platform compatibility</li>
                </ol>
              </div>
            </div>

            <div>
              <div className="flex items-center space-x-3 mb-4">
                <Heart className="h-8 w-8 text-gray-900 dark:text-white" />
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Support</h2>
              </div>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Need help? Here are some resources:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-gray-600 dark:text-gray-300">
                <li>Check the <a href="/docs/troubleshooting" className="text-blue-600 dark:text-blue-400 hover:underline">Troubleshooting</a> guide</li>
                <li>Review the <a href="/docs" className="text-blue-600 dark:text-blue-400 hover:underline">Documentation</a></li>
                <li>Open an issue on the repository</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}