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 max-md: max-w-2xl mx-auto">
          <h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
          <p className="text-xl text-gray-600 mt-4 text-left">　　在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。</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>
  );
}