import CommunityForum from "@/components/community/CommunityForum";
import Head from "next/head";

const CommunityPage = () => {
  return (
    <>
      <Head>
        <title>Community Forum | Badagry Museum</title>
        <meta
          name="description"
          content="Connect with fellow visitors, share your experiences, and engage in meaningful discussions about Nigeria's slavery history and cultural heritage."
        />
        <meta
          name="keywords"
          content="Badagry Museum community, Nigeria history discussion, slavery heritage forum, cultural discussions, museum community"
        />

        {/* Open Graph / Facebook */}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://badagrymuseum.org/community" />
        <meta property="og:title" content="Community Forum | Badagry Museum" />
        <meta
          property="og:description"
          content="Connect with fellow visitors, share your experiences, and engage in meaningful discussions about Nigeria's slavery history and cultural heritage."
        />
        <meta
          property="og:image"
          content="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600"
        />

        {/* Twitter */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta
          property="twitter:url"
          content="https://badagrymuseum.org/community"
        />
        <meta
          property="twitter:title"
          content="Community Forum | Badagry Museum"
        />
        <meta
          property="twitter:description"
          content="Connect with fellow visitors, share your experiences, and engage in meaningful discussions about Nigeria's slavery history and cultural heritage."
        />
        <meta
          property="twitter:image"
          content="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=600"
        />
      </Head>
      <section className="py-16 bg-secondary">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h1 className="text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl font-heading">
              Join Our Community
            </h1>
            <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500">
              Connect with fellow visitors, share your experiences, and engage
              in meaningful discussions.
            </p>
          </div>

          <div className="mt-8">
            <CommunityForum />
          </div>

          <div className="mt-16 bg-white rounded-xl p-8 shadow-lg">
            <h3 className="text-2xl font-bold text-neutral-dark mb-6 font-heading text-center">
              Community Guidelines
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <h4 className="text-lg font-medium text-primary mb-4">
                  Respectful Communication
                </h4>
                <ul className="list-disc list-inside space-y-2 text-gray-600">
                  <li>Treat all community members with respect and dignity</li>
                  <li>Use appropriate language and avoid personal attacks</li>
                  <li>
                    Be mindful of cultural sensitivities when discussing
                    historical topics
                  </li>
                  <li>
                    Listen actively to different perspectives and experiences
                  </li>
                  <li>Provide constructive feedback rather than criticism</li>
                </ul>
              </div>
              <div>
                <h4 className="text-lg font-medium text-primary mb-4">
                  Content Expectations
                </h4>
                <ul className="list-disc list-inside space-y-2 text-gray-600">
                  <li>
                    Share accurate historical information and cite sources when
                    possible
                  </li>
                  <li>
                    Keep discussions relevant to Nigerian history and heritage
                  </li>
                  <li>
                    Respect intellectual property and give credit to original
                    creators
                  </li>
                  <li>Avoid commercial promotions or spam content</li>
                  <li>Report inappropriate content to moderators</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default CommunityPage;
