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, making it challenging for teams to work effectively across distances.',
    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. This brought teams closer, but still lacked the feeling of truly being together and required reliable internet access.',
    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. Geographic and economic limitations continue to hinder effective digital connection.',
    date: 'Phase III',
    dateTime: '2022-02',
  },
  {
    name: 'The OurVerse Solution',
    description:
      'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all. It offers real presence in virtual spaces, enabling dynamic interactions and creativity, regardless of location or technical constraints.',
    date: 'Phase IV',
    dateTime: '2022-12',
  },
  {
    name: 'Unlimited Possibilities',
    description:
      "With OurVerse, we're breaking down barriers and unlocking unlimited possibilities. 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 Hero() {
  return (
    <div className="relative lg:py-12 mt-20 pb-12 pt-12">
      <BackgroundImage className="-bottom-14 -top-20" />
      <Container className="relative">
        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
          <h1 className="font-display lg:text-6xl text-3xl font-semibold tracking-tighter text-gradient-dark">
            OurVerse
          </h1>
          <h1 className="mt-2 font-display lg:text-2xl text-lg font-semibold tracking-tight text-gradient-dark">
            Powered by ThreeFold
          </h1>
          <div className="mt-4 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-purple-900">
            <p>
            <span className='emphasis'>OurVerse</span> empowers users to build, manage, and monetize their unique virtual experiences by blending the latest advancements 
            in blockchain technology with immersive virtual reality, built on top of the <span className='emphasis'>ThreeFold Grid</span>.
            </p>
            <p>Our mission is to make the metaverse accessible to all, fostering a vibrant community where creativity, commerce, and 
              collaboration thrive in a borderless, equitable digital space. By leveraging <span className='emphasis'>ThreeFold Grid</span>'s decentralized hosting infrastructure', 
            we provide a platform where data confidentiality, scalability, and independence are paramount.</p>
            <p>
            Free from centralized control, your interactions are not only secure but also resilient, 
            fostering a more democratic and trustworthy virtual space. OurVerse offers the freedom to collaborate and 
            connect in ways that are cutting-edge, empowering, and reliable.
            </p>
          </div>
          <dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 gap-x-16 gap-y-10 text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
            {[
              ['3D Assets', '100000+'],
              ['Users', '5000+'],
              ['Verses', '2000+'],
              ['Countries', '15'],
            ].map(([name, value]) => (
              <div key={name}>
                <dt className="font-mono text-sm text-cyan-600">{name}</dt>
                <dd className="mt-0.5 text-2xl font-semibold tracking-tight text-gradient-dark">
                  {value}
                </dd>
              </div>
            ))}
          </dl>
        </div>
        <div className="pt-6 pb-24"></div>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <h2 className="lg:text-4xl mb-8 font-semibold tracking-tight  text-gradient-dark text-xl">A Journey to The Future</h2>
          <div className="mt-4 mb-12 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-purple-900">
            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.
          </div>
        <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-cyan-600"
              >
                <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}
                <div
                  aria-hidden="true"
                  className="absolute -ml-2 h-px w-screen -translate-x-full bg-purple-900/10 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 font-semibold leading-6 tracking-tight text-purple-700">{item.name}</p>
              <p className="mt-4 text-sm leading-6 text-purple-900">{item.description}</p>
            </div>
          ))}
        </div>
      </div>
      </Container>
    </div>
  )
}