import Image from "next/image";
import { websites } from "../data/urls";
import Header from "@/components/header";
import Footer from "@/components/footer";

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col bg-gray-100">
      <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">
          {websites.map((website, index) => (
            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
              <div className="list-item bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
                  <h3 className="list-name text-xl font-bold my-1 truncate">{website.title}</h3>
                  <div className="text-sm text-gray-500 truncate">{website.description}</div>
                </div>
              </div>
            </a>
          ))}
        </section>
      </main>
      <Footer />
    </div>
  );
}