import { Metadata } from 'next'
import { WebPageJsonLd } from 'next-seo'
import { appConfig } from '@/lib/config'

// Define metadata for the page
export const metadata: Metadata = {
  title: '🎉 Join Us This Weekend - Special Community Event',
  description: '🌟 Join our amazing community this weekend for an unforgettable experience of learning, sharing, and networking!',
  openGraph: {
    title: '🎉 Join Us This Weekend - Special Community Event',
    description: '🌟 Join our amazing community this weekend for an unforgettable experience of learning, sharing, and networking!',
    url: `${process.env.NEXT_PUBLIC_APP_URL}/events/join-us`,
    siteName: appConfig.projectName,
    type: 'website',
  },
}

export default function JoinUsPage() {
  return (
    <>
      {/* Add JSON-LD structured data */}
      <WebPageJsonLd
        useAppDir
        id={`${process.env.NEXT_PUBLIC_APP_URL}/events/join-us`}
        title="🎉 Join Us This Weekend - Special Community Event"
        description="🌟 Join our amazing community this weekend for an unforgettable experience of learning, sharing, and networking!"
        isAccessibleForFree={true}
        publisher={{
          "@type": "Organization",
          name: appConfig.projectName,
          url: process.env.NEXT_PUBLIC_APP_URL,
          contactPoint: {
            "@type": "ContactPoint",
            email: appConfig.legal.email,
            contactType: "customer service",
          },
        }}
      />

      {/* Your page content */}
      <div className="min-h-screen bg-gradient-to-b from-indigo-50 to-white">
        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="text-center">
            <span className="block text-2xl text-indigo-600 mb-2">🎉</span>
            <h1 className="text-4xl font-bold tracking-tight text-indigo-900 sm:text-5xl md:text-6xl">
              Join Us This Weekend!
            </h1>
            <p className="mt-3 max-w-md mx-auto text-base text-indigo-600 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
              ✨ Be part of something extraordinary! Connect with amazing people, share brilliant ideas, and create unforgettable memories! 🌟
            </p>
            <div className="mt-8 space-y-4 sm:space-y-0 sm:flex sm:justify-center sm:space-x-4">
              <div className="rounded-md shadow">
                <a
                  href="#register"
                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
                >
                  Register Now 🎟️
                </a>
              </div>
              <div className="rounded-md shadow">
                <a
                  href="#learn-more"
                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
                >
                  Learn More 👋
                </a>
              </div>
            </div>
          </div>
        </main>
      </div>
    </>
  )
}