import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/24/outline'

const supportLinks = [
  {
    name: 'Sales',
    href: '#',
    icon: PhoneIcon,
  },
  {
    name: 'Technical Support',
    href: '#',
    icon: LifebuoyIcon,
  },
  {
    name: 'Media Inquiries',
    href: '#',
    icon: NewspaperIcon,
  },
  {
    name: 'Media Inquiries',
    href: '#',
    icon: NewspaperIcon,
  },
]

export default function Example() {
  return (
    <div className="bg-white">
      {/* Header */}
      <div className="relative bg-gray-800 pb-40">
        <div className="absolute inset-0">
          <img
            alt=""
            src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100"
            className="h-full w-full object-cover"
          />
          <div aria-hidden="true" className="absolute inset-0 bg-gray-800 mix-blend-multiply" />
        </div>
        <div className="relative mx-auto max-w-7xl px-6 py-24  lg:px-8">
          <h1 className="mt-8 text-3xl font-medium tracking-tight text-white lg:text-4xl">Community</h1>
          <p className="mt-6 max-w-3xl text-xl text-gray-300">
          Together we are shaping the future of immersive virtual environments, powered by cutting-edge technology and innovative collaborations. 
          Join OurVerse and be a part of creating new realities.
          </p>
        </div>
      </div>

      {/* Overlapping cards */}
      <section aria-labelledby="contact-heading" className="relative z-10 mx-auto -mt-60 max-w-2xl px-6 lg:mx-20">
            <div className="flex flex-wrap justify-start gap-x-10 gap-y-6 leading-7">
                {supportLinks.slice(0, 4).map((link, index) => ( // Assuming you only want to show 4 icons
                <div key={link.name} className="px-0 pb-8 pt-16">
                    <div className="relative top-0 left-0 -translate-y-1/2 rounded-xl bg-indigo-600 p-5 shadow-lg">
                     <link.icon aria-hidden="true" className="h-4 w-4 text-white" />
                    </div>
                </div>
             ))}
            </div>
        </section>
    </div>
  )
}