"use client"

import { Tabs, Card, Pagination } from "antd"

export default function Home() {
  return (
    <div className="w-full">
      {/* 导航栏 */}
      <div className="flex justify-center space-x-10 border-b py-4 bg-white sticky top-0 z-50">
        {["公司简介", "发展历程", "荣誉资质", "公司招聘", "联系我们"].map((item, idx) => (
          <a
            key={idx}
            href={`#section-${idx}`}
            className="text-gray-700 hover:text-blue-600 font-medium"
          >
            {item}
          </a>
        ))}
      </div>

      {/* 公司简介 */}
      <section id="section-0" className="max-w-6xl mx-auto py-12 px-4 grid sm:grid-cols-1 md:grid-cols-2 gap-8">
        <div>
          <h2 className="text-xl font-bold text-blue-600 mb-4">公司简介</h2>
          <p className="text-gray-700 leading-7 mb-6">
            中科图信信息技术有限公司是一家专注于智慧图书馆知识服务与平台研发的国家高新技术企业...
          </p>
          <div className="grid grid-cols-2 gap-6 mt-6">
            <div className="text-center">
              <div className="text-2xl">🏢</div>
              <p className="text-sm">专精特新小巨人企业</p>
            </div>
            <div className="text-center">
              <div className="text-2xl">💡</div>
              <p className="text-sm">创新型中小企业</p>
            </div>
            <div className="text-center">
              <div className="text-2xl">🚀</div>
              <p className="text-sm">高新技术企业</p>
            </div>
            <div className="text-center">
              <div className="text-2xl">🎓</div>
              <p className="text-sm">硕博士后创新基地</p>
            </div>
          </div>
        </div>
        <div className="bg-gray-300 w-full h-80 rounded-lg"></div>
      </section>

      {/* 发展历程 */}
      <section id="section-1" className="bg-blue-900 text-white py-12 px-4">
        <h2 className="text-xl font-bold mb-8">发展历程</h2>
        <div className="flex flex-col sm:flex-row justify-between gap-8">
          {[
            { year: "2014", text: "专注图书馆系统研发..." },
            { year: "2018", text: "业务规模扩展..." },
            { year: "2022", text: "建设研发测试基地..." },
            { year: "2023", text: "获批博士后创新实践基地..." },
          ].map((item, idx) => (
            <div key={idx} className="flex-1">
              <p className="text-2xl font-bold">{item.year}</p>
              <p className="mt-2 text-sm">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 荣誉资质 */}
      <section id="section-2" className="max-w-6xl mx-auto py-12 px-4">
        <h2 className="text-xl font-bold text-blue-600 mb-6">荣誉资质</h2>
        <Tabs
          defaultActiveKey="1"
          items={[
            {
              key: "1",
              label: "荣誉证书",
              children: (
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
                  <div className="bg-gray-300 h-40 rounded"></div>
                  <div className="bg-gray-300 h-40 rounded"></div>
                  <div className="bg-gray-300 h-40 rounded"></div>
                </div>
              ),
            },
            { key: "2", label: "专利证书", children: <p>专利证书内容...</p> },
            { key: "3", label: "ISO认证书", children: <p>ISO认证书内容...</p> },
            { key: "4", label: "软件作品证书", children: <p>软件作品证书内容...</p> },
          ]}
        />
      </section>

      {/* 公司招聘 */}
      <section id="section-3" className="max-w-6xl mx-auto py-12 px-4">
        <h2 className="text-xl font-bold text-blue-600 mb-6">公司招聘</h2>
        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
          <Card title="前端工程师" bordered>
            <p>工作地点：湖南长沙</p>
            <p>招聘人数：2</p>
            <p>岗位要求：熟悉React、Next.js...</p>
          </Card>
          <Card title="前端工程师" bordered>
            <p>工作地点：湖南怀化</p>
            <p>招聘人数：3</p>
            <p>岗位要求：掌握TypeScript、Ant Design...</p>
          </Card>
        </div>
        <div className="flex justify-center mt-6">
          <Pagination defaultCurrent={1} total={50} />
        </div>
      </section>

      {/* 联系我们 */}
      <section id="section-4" className="bg-gray-50 py-12 px-4">
        <h2 className="text-xl font-bold text-blue-600 mb-6">联系我们</h2>
        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-gray-300 h-64 rounded"></div>
          <div className="space-y-4">
            <p>电话：0731-85315153</p>
            <p>邮箱：337843345@qq.com</p>
            <p>地址：湖南省长沙市岳麓区...</p>
            <div className="bg-gray-300 w-40 h-40"></div>
          </div>
        </div>
      </section>
    </div>
  )
}
