"use client";

import Link from "next/link";
import HeroSection from "./components/HeroSection";
import Footer from "./components/Footer";
import { COMMUNITY_STATS } from "@/config/home.config";

export default function Home() {
  return (
    <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
      <HeroSection />

      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-8">
        <Link href="/join" className="right-item block max-w-md">
          <div className="right-item-header">加入社区</div>
          <div className="flex flex-col items-center justify-center text-center p-2 sm:p-5 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
            <span className="text-2xl sm:text-5xl mb-1 sm:mb-3">💬</span>
            <p className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 mb-0.5">
              加入数字游民社区，结识志同道合的伙伴
            </p>
            <p className="text-[9px] sm:text-xs text-gray-400 dark:text-gray-500 mb-1.5 sm:mb-4">
              {COMMUNITY_STATS.onlineMembers} 人在线
            </p>
            <span className="bg-[#ff4d4f] text-white px-2.5 sm:px-6 py-1 sm:py-2 rounded-lg text-[10px] sm:text-sm font-semibold whitespace-nowrap">
              加入社区 →
            </span>
          </div>
        </Link>
      </div>

      <Footer />
    </div>
  );
}