import React from 'react';
import {serverGet} from "@/utils/request";

async function Development() {
  const res = await serverGet<{year:number,processDescription:string}[]>("/webSite/getDevelopmentHistory",null,{
    next: {
      revalidate: 180
    },
    cache: "force-cache"
  })
  const list = res.data.map(item => ({
    year: item.year,
    description: item.processDescription
  }))
  return (
    <>
      <div
        className="relative overflow-hidden backdrop-blur-sm bg-gradient-to-r from-gray-200/20 to-gray-300/20 rounded-lg">
        {/* Background geometric patterns */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-10 w-32 h-32 border-2 border-white/20 rotate-45"></div>
          <div className="absolute top-40 right-20 w-24 h-24 border-2 border-white/15 rotate-12"></div>
          <div className="absolute bottom-32 left-1/4 w-40 h-40 border-2 border-white/10 -rotate-12"></div>
          <div className="absolute bottom-20 right-1/3 w-28 h-28 border-2 border-white/15 rotate-45"></div>
          <div
            className="absolute top-1/2 left-1/2 w-36 h-36 border-2 border-white/10 -rotate-45 transform -translate-x-1/2 -translate-y-1/2"></div>
        </div>

        {/* Timeline container */}
        <div className="relative z-10 flex items-center justify-center px-4 sm:px-8 py-10 sm:py-16">
          <div className="w-full max-w-7xl">
            <div className="relative mb-10 sm:mb-16">
              {/* Timeline items */}
              <div
                className="flex flex-col sm:flex-row sm:justify-between sm:items-start relative flex-wrap gap-10 sm:gap-0">
                {list.map((item, index) => (
                  <div
                    key={index}
                    className="flex flex-col items-center relative w-full sm:w-1/4"
                  >
                    {/* Dot */}
                    <div
                      className="w-3 h-3 sm:w-4 sm:h-4 bg-white rounded-full border-2 sm:border-4 border-blue-600 relative z-10 mb-4 sm:mb-8"></div>

                    {/* Year */}
                    <div className="text-white text-lg sm:text-2xl font-bold mb-2 sm:mb-4 text-center">
                      {item.year}
                    </div>

                    {/* Description */}
                    <div
                      className="text-white/90 w-full h-auto sm:h-40 text-sm leading-relaxed max-w-xs text-center px-2 sm:px-4 border-t-2 border-solid border-gray-300 pt-2">
                      {item.description}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

    </>
  );
}

export default Development;