import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Social Media",
  description:
    "Follow AdultWorld on social media. Find us on Twitter/X and stay updated.",
};

export default function SocialPage() {
  const activeSocials = [
    {
      name: "Twitter / X",
      url: "https://x.com/adultworld_ai",
      description: "Follow us for updates and news",
    },
  ];

  const comingSoon = [
    { name: "Instagram", description: "Behind the scenes and highlights" },
    { name: "Telegram", description: "Join our community channel" },
    { name: "Reddit", description: "Discussions and community content" },
  ];

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <h1 className="text-2xl font-bold">Follow Us</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {activeSocials.map((social) => (
          <Link
            key={social.name}
            href={social.url}
            target="_blank"
            rel="noopener noreferrer"
            className="bg-surface hover:bg-surface-light rounded-lg p-6 transition-colors"
          >
            <p className="font-semibold text-lg">{social.name}</p>
            <p className="text-text-muted mt-1">{social.description}</p>
          </Link>
        ))}

        {comingSoon.map((social) => (
          <div
            key={social.name}
            className="bg-surface rounded-lg p-6 opacity-50"
          >
            <p className="font-semibold text-lg">
              {social.name}{" "}
              <span className="text-sm font-normal text-text-muted">
                &mdash; Coming Soon
              </span>
            </p>
            <p className="text-text-muted mt-1">{social.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}