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="bg-gradient-dark min-h-screen">
          <div className="mx-auto max-w-7xl py-24 px-6 lg:px-8">
            <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient-light text-3xl">
              Experience True Collaboration
            </h2>
            <p className="mt-4 mb-4 text-purple-100 lg:text-xl space-y-6 font-display">
              We’ve all experienced different ways to connect and collaborate online—through chat, video conferences, and shared platforms. But the reality is, not everyone has equal access. 
              Many people around the world still face barriers due to limited tools, infrastructure, or platforms. Geographic, technical, and economic challenges make it hard for businesses, 
              educators, and creators to collaborate effectively. 
            </p>
            <p className="mt-4 mb-20 text-purple-100 lg:text-xl space-y-6 font-display">
              Our journey through five transformative phases of digital collaboration leads to OurVerse—an immersive metaverse platform 
              designed to break down these barriers and unlock limitless opportunities for global connection and innovation.
            </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-md font-semibold leading-6 ${
                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt lg:text-xl' : 'text-purple-200'
                    }`}
                  >
                    <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 ${
                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt' : 'text-purple-200'
                    }`}
                  >
                    {item.name}
                  </p>
                  <p className="mt-4 text-sm leading-6 text-purple-100">{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
    )
}