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 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">
          <h2 className="font-display lg:text-6xl text-4xl font-semibold leading-normal tracking-tighter text-gradient-dark">
            OurVerse
          </h2>
          <h1 className="lg:mt-2 mt-0 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 mx-4 font-display section-text">
            <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 creative, collaborative, and equitable digital community. By leveraging <span className='emphasis'>ThreeFold Grid</span>'s decentralized infrastructure, 
            we aim to provide a platform where data confidentiality, scalability, and independence are paramount.</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 font-semibold tracking-tight leading-normal text-gradient-dark text-xl">A Journey to The Future</h2>
          <div className="mt-4 mb-12 space-y-6 font-display section-text">
            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>
  )
}