import Footer from "@/app/components/Footer";
import { pressArticles } from "@/app/data/mock";

export const metadata = {
  title: "媒体报道 | 游牧中国",
  description: "查看媒体对游牧中国的报道，了解数字游民社区的发展。",
};

export default function PressPage() {
  return (
    <>
      <main className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
        <section className="max-w-4xl mx-auto px-4 sm:px-6 py-12 sm:py-20">
          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-2">
            <span className="w-1 h-10 bg-[#ff4d4f] rounded-full" />
            媒体报道
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mb-10">
            了解媒体对游牧中国的报道和数字游民社区的发展
          </p>
          <div className="grid gap-4">
            {pressArticles.map((article) => (
              <a
                key={article.id}
                href={article.url}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-white dark:bg-gray-900 rounded-xl p-5 border border-gray-100 dark:border-gray-800 hover:shadow-md transition-shadow block"
              >
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0 overflow-hidden">
                    {article.logo ? (
                      <img
                        src={article.logo}
                        alt={article.outlet}
                        className="w-8 h-8 object-contain"
                      />
                    ) : (
                      <span className="text-lg">📰</span>
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-sm text-gray-500">{article.outlet}</span>
                      <span className="text-gray-300">·</span>
                      <span className="text-sm text-gray-400">{article.date}</span>
                    </div>
                    <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-1">
                      {article.title}
                    </h2>
                    <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                      {article.excerpt}
                    </p>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}