import Link from "next/link";
import { contacts } from "@/data/contacts";

export default function Page() {
  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <header className="w-full bg-white shadow p-4 flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">联系人信息</h1>
        <nav>
          <Link href="/" className="text-blue-600 hover:underline">
            返回主页
          </Link>
        </nav>
      </header>
      <main className="container mx-auto p-4 flex-grow">
        <section className="text-center mb-12">
          <h2 className="text-4xl font-extrabold text-gray-900">我们的联系人</h2>
          <p className="text-xl text-gray-600 mt-4">以下是我们的联系人的信息，您可以通过点击邮箱链接发送邮件。</p>
        </section>
        <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {contacts.map((contact, index) => (
            <a key={index} href={`mailto:${contact.email}`}>
              <div className="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition-shadow duration-300">
                <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
                <p className="text-gray-600 mt-2">{contact.email}</p>
              </div>
            </a>
          ))}
        </section>
      </main>
    </div>
  );
}