const timeline = [
  {
    name: 'Core Infrastructure',
    description:
      '✓ ThreeFold’s decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
    date: 'Phase 1',
    description2:
      '✓ OurWorld helped secure $50M in investment from our community of investors.',
  },
  {
    name: 'Zanzibar Digital Free Zone',
    description:
      '✓ Partnered with Government of Zanzibar through ZICTA to establish the Zanzibar Digital Free Zone with financial and other incentives for ventures.',
     description2:
      '✓ Developed an alpha version of integrated platforms within the Free Zone to onboard new ventures into the ecosystem.',
    date: 'Phase 2',
  },
  {
    name: 'Launch of New Ventures',
    description:
      '◯ $30M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
    description2:
      '◯ Designing regulatory framework to facilitate digital assets exchanges and other decentralized financial platforms.',
    date: 'Current Phase',
  },
  {
    name: 'Scalable Impact',
    description:
      '◯ Deploy 1 million nodes and onboard 10 million users to empower the OurWorld ecosystem.',
    description2:
      '◯ Transition startups in our venture creator to community ownerships and ensure a successful exits for investors.',
    date: 'Phase 4',
  },
]

export function HomeMilestones() {
  return (
    <div className="bg-black py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-4xl lg:mx-0">
          <p className="subtitle text-white">MILESTONES</p>
          <h2 className="mt-2 h2-default text-white">
            Our Development Journey
          </h2>
          <div className="lg:mx-0 max-w-2xl mt-6">
          <p className="p-default text-gray-300">
           Transform the future – join a revolutionary journey towards a decentralized digital world driven by collaboration and collective intelligence.
          </p>
        </div>
        </div>
        <div className="mx-auto grid max-w-2xl mt-12 grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
          {timeline.map((item) => {
            const isCurrent = item.date === 'Current Phase'
            return (
              <div key={item.name} className={`${isCurrent ? 'bg-white/5 ' : ''}`}>
                <time className={`flex items-center text-sm/6 font-semibold ${isCurrent ? 'text-white' : 'text-white'}`}>
                  <svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 size-1 flex-none">
                    <circle r={2} cx={2} cy={2} fill="currentColor" />
                  </svg>
                  {item.date}
                  {isCurrent && <span className="ml-2 text-xs bg-white text-black px-2 py-1 rounded-full">ACTIVE</span>}
                  <div
                    aria-hidden="true"
                    className="absolute -ml-2 h-px w-screen -translate-x-full bg-white/20 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0"
                  />
                </time>
                <p className={`mt-6 text-lg/8 font-semibold tracking-tight ${isCurrent ? 'text-white' : 'text-white'}`}>{item.name}</p>
                <p className="mt-1 text-sm/7 text-gray-300 leading-relaxed">{item.description}</p>
                <p className="mt-4 text-sm/7 text-gray-300 leading-relaxed">{item.description2}</p>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}