"use client";
import { useState } from "react";
import { contacts } from "@/data/contacts";
import Header from "@/components/header";
import Footer from "@/components/footer";

interface Contact {
  name: string;
  describe: string;
  email?: string;
  phone?: string;
  qq?: string;
}

export default function Page() {
  const [modalContent, setModalContent] = useState<Contact | null>(null);

  const handleModal = (contact: Contact) => {
    setModalContent(contact);
  };

  const closeModal = () => {
    setModalContent(null);
  };

  return (
    <div className="min-h-screen flex flex-col bg-gray-100">
      <Header />
      <main className="container mx-auto p-4 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) => (
            <div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow-sm rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
              <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
              <p className="text-gray-600">{contact.describe}</p>
            </div>
          ))}
        </section>
      </main>
      <Footer />
      <div className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ${modalContent ? "opacity-100" : "opacity-0 pointer-events-none"}`} onClick={closeModal}>
        {modalContent && (
          <div className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 ${modalContent ? "scale-100" : "scale-90"}`} onClick={(e) => e.stopPropagation()}>
            <h3 className="text-xl font-semibold text-gray-900">{modalContent.name}</h3>
            <p className="text-gray-600 ">{modalContent.describe}</p>
            <br></br>
            {modalContent.email && <p>Email: {modalContent.email}</p>}
            {modalContent.phone && <p>Phone: {modalContent.phone}</p>}
            {modalContent.qq && <p>QQ: {modalContent.qq}</p>}
            <button onClick={closeModal} className="mt-4 text-blue-600 hover:underline">
              关闭
            </button>
          </div>
        )}
      </div>
    </div>
  );
}