import Link from "next/link";

export const dynamic = "force-dynamic";

const LINKS = [
  {
    href: "/rankings",
    title: "Rankings",
    text: "See the wealthiest players in the hotel, ranked by credits.",
  },
  {
    href: "/staff",
    title: "Staff",
    text: "Meet the team that keeps the hotel running every day.",
  },
  {
    href: "/news",
    title: "News",
    text: "The latest announcements, events and updates.",
  },
];

export default function CommunityPage() {
  return (
    <main>
      <div className="hero">
        <h1 style={{ margin: "0 0 0.35rem" }}>Community</h1>
        <p className="muted" style={{ margin: 0 }}>
          Everything happening around the hotel in one place.
        </p>
      </div>

      <div className="grid cols-3">
        {LINKS.map((l) => (
          <Link key={l.href} href={l.href} className="card hover" style={{ color: "inherit" }}>
            <h3 style={{ margin: "0 0 0.35rem" }}>{l.title}</h3>
            <p className="muted" style={{ margin: "0 0 0.75rem" }}>
              {l.text}
            </p>
            <span className="btn btn-outline">Open →</span>
          </Link>
        ))}
      </div>
    </main>
  );
}