import {
  BoltIcon,
  ChatBubbleBottomCenterTextIcon,
  EnvelopeIcon,
  GlobeAltIcon,
  ScaleIcon,
} from '@heroicons/react/24/outline'

const transferFeatures = [
  {
    id: 1,
    name: 'Creative Collaboration',
    description:
      'Work on projects together with real-time collaboration in shared virtual spaces, interactive 3D whiteboards, and dynamic environments for live demos and workshops.',
    icon: GlobeAltIcon,
  },
  {
    id: 2,
    name: 'Build Your Verse',
    description:
      'Design custom virtual environments using AI-powered tools, extensive 3D model and template libraries, and immersive animations to bring your virtual spaces to life.',
    icon: ScaleIcon,
  },
  {
    id: 3,
    name: 'OurVerse Studio',
    description:
      'Create professional-grade live content with integrated virtual studio tools and multi-cam switching for high-quality broadcasting.',
    icon: BoltIcon,
  },
]
const communicationFeatures = [
  {
    id: 1,
    name: 'Advanced Communication',
    description:
      'Connect through holograms, video and voice chat, and powerful sharing tools that elevate interaction and engagement.',
    icon: ChatBubbleBottomCenterTextIcon,
  },
  {
    id: 2,
    name: 'Event Management',
    description:
      'Host customized events with dynamic spaces, real-time updates, virtual networking lounges, live streaming, and analytics.',
    icon: EnvelopeIcon,
  },
]

export default function Featureshome() {
  return (
    <div className="overflow-hidden py-16 lg:py-24">
      <div className="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
        <svg
          fill="none"
          width={404}
          height={784}
          viewBox="0 0 404 784"
          aria-hidden="true"
          className="absolute left-full hidden -translate-x-1/2 -translate-y-1/4 transform lg:block"
        >
          <defs>
            <pattern
              x={0}
              y={0}
              id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7"
              width={20}
              height={20}
              patternUnits="userSpaceOnUse"
            >
              <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
            </pattern>
          </defs>
          <rect fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" width={404} height={784} />
        </svg>

        <div className="relative">
          <h2 className="text-center text-3xl font-bold leading-8 tracking-tight font-gradient sm:text-4xl">
          The Future of Communication and Collaboration
          </h2>
          <p className="mx-auto mt-4 max-w-3xl text-center text-xl text-gray-500">
          OurVerse offers cutting-edge tools and immersive virtual environments designed to bring your events, meetings, and creative projects to life in new and exciting ways.
          </p>
        </div>

        <div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
          <div className="relative">
            <h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Collaboration & Creation</h3>
            <p className="mt-3 text-lg text-gray-500">
            Transform how you and your team work together with our innovative, real-time creative tools.
            </p>

            <dl className="mt-10 space-y-10">
              {transferFeatures.map((item) => (
                <div key={item.id} className="relative">
                  <dt>
                    <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500 text-white">
                      <item.icon aria-hidden="true" className="h-8 w-8" />
                    </div>
                    <p className="ml-16 text-lg font-medium leading-6 text-gray-900">{item.name}</p>
                  </dt>
                  <dd className="ml-16 mt-2 text-base text-gray-500">{item.description}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div aria-hidden="true" className="relative -mx-4 mt-10 lg:mt-0">
            <svg
              fill="none"
              width={784}
              height={404}
              viewBox="0 0 784 404"
              className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
            >
              <defs>
                <pattern
                  x={0}
                  y={0}
                  id="ca9667ae-9f92-4be7-abcb-9e3d727f2941"
                  width={20}
                  height={20}
                  patternUnits="userSpaceOnUse"
                >
                  <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
                </pattern>
              </defs>
              <rect fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" width={784} height={404} />
            </svg>
            <img
              alt=""
              src="/images/feature1.png"
              width={490}
              className="relative mx-auto"
            />
          </div>
        </div>

        <svg
          fill="none"
          width={404}
          height={784}
          viewBox="0 0 404 784"
          aria-hidden="true"
          className="absolute right-full hidden translate-x-1/2 translate-y-12 transform lg:block"
        >
          <defs>
            <pattern
              x={0}
              y={0}
              id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
              width={20}
              height={20}
              patternUnits="userSpaceOnUse"
            >
              <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
            </pattern>
          </defs>
          <rect fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" width={404} height={784} />
        </svg>

        <div className="relative mt-12 sm:mt-16 lg:mt-24">
          <div className="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:items-center lg:gap-8">
            <div className="lg:col-start-2">
              <h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Events & Communication</h3>
              <p className="mt-3 text-lg text-gray-500">
              Host seamless virtual events and interact through holographic communication in a secure, immersive space.
              </p>

              <dl className="mt-10 space-y-10">
                {communicationFeatures.map((item) => (
                  <div key={item.id} className="relative">
                    <dt>
                      <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500 text-white">
                        <item.icon aria-hidden="true" className="h-8 w-8" />
                      </div>
                      <p className="ml-16 text-lg font-medium leading-6 text-gray-900">{item.name}</p>
                    </dt>
                    <dd className="ml-16 mt-2 text-base text-gray-500">{item.description}</dd>
                  </div>
                ))}
              </dl>
            </div>

            <div className="relative -mx-4 mt-10 lg:col-start-1 lg:mt-0">
              <svg
                fill="none"
                width={784}
                height={404}
                viewBox="0 0 784 404"
                aria-hidden="true"
                className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
              >
                <defs>
                  <pattern
                    x={0}
                    y={0}
                    id="e80155a9-dfde-425a-b5ea-1f6fadd20131"
                    width={20}
                    height={20}
                    patternUnits="userSpaceOnUse"
                  >
                    <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
                  </pattern>
                </defs>
                <rect fill="url(#e80155a9-dfde-425a-b5ea-1f6fadd20131)" width={784} height={404} />
              </svg>
              <img
                alt=""
                src="/images/feature2.png"
                width={490}
                className="relative mx-auto"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}