import { BackgroundImage } from '@/components/BackgroundImage'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'

const timeline = [
    {
      name: 'Early Online Collaboration',
      description:
        'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal.',
      date: 'Phase I',
      dateTime: '2021-08',
    },
    {
      name: 'The Rise of Video Conferencing',
      description:
        'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online.',
      date: 'Phase II',
      dateTime: '2021-12',
    },
    {
      name: 'Persistent Barriers',
      description:
        'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure.',
      date: 'Phase III',
      dateTime: '2022-02',
    },
    {
      name: 'The OurVerse Solution',
      description:
        'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all, enabling dynamic interactions and creativity beyond borders.',
      date: 'Phase IV',
      dateTime: '2022-12',
    },
    {
      name: 'Unlimited Possibilities',
      description:
        "With OurVerse, you can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
      date: 'Phase V',
      dateTime: '2022-12',
    },
]

export function Phasesdark() {
    return (
        <div className="mx-auto max-w-7xl px-6 lg:px-8 bg-purple-900 text-white">
          <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-white text-xl">
            A Journey to The Future
          </h2>
          <p className="mt-4 mb-12 space-y-6 font-display section-text text-white">
            A journey through five transformative phases of digital collaboration, culminating in OurVerse—the immersive 
            metaverse platform breaking down barriers and unlocking unlimited possibilities for global connection!!!
          </p>
          <div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-5">
            {timeline.map((item) => (
              <div key={item.name}>
                <time
                  dateTime={item.dateTime}
                  className="flex items-center text-sm font-semibold leading-6 text-purple-400"
                >
                  <svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
                    <circle r={2} cx={2} cy={2} fill="currentColor" />
                  </svg>
                  {item.date}
                </time>
                <p className="mt-6 text-lg font-semibold leading-6 tracking-tight text-white">{item.name}</p>
                <p className="mt-4 text-sm leading-6 text-gray-300">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
    )
}