import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { FaTelegramPlane, FaTwitter, FaYoutube, FaInstagram, FaLinkedin, FaFacebookF } from 'react-icons/fa' // Importing specific icons
import { FaSquareXTwitter } from "react-icons/fa6";

const features = [
  {
    name: 'Telegram',
    description: 'Connect with our community in real-time, and participate in discussions about the future of virtual worlds.',
    icon: FaTelegramPlane,
    link: 'https://t.me/+wLcrJaC_DTw0NTVk', // Replace with actual Telegram link
  },
  {
    name: 'X',
    description: 'Follow us on X to receive the latest updates, insights, and news from OurVerse and our community.',
    icon: FaSquareXTwitter,
    link: 'https://x.com/OurVerseTF', // Replace with actual Twitter link
  },
  {
    name: 'YouTube',
    description: "Dive deep into product demos, event recaps, and videos that showcase how we're revolutionizing virtual experiences.",
    icon: FaYoutube,
    link: 'https://www.youtube.com/channel/UCavIIyki4cYFAUysi0aEDeA', // Replace with actual YouTube link
  },
  {
    name: 'Instagram',
    description: "Follow us on Instagram for sneak peeks of upcoming projects, community highlights, and more.",
    icon: FaInstagram,
    link: 'https://www.instagram.com/ourversetf/', // Replace with actual Instagram link
  },
  {
    name: 'LinkedIn',
    description: "Connect and stay informed on industry insights, partnerships, and professional opportunities.",
    icon: FaLinkedin,
    link: 'https://www.linkedin.com/company/ourversetf/', // Replace with actual LinkedIn link
  },
  {
    name: 'Facebook',
    description: "Join our community on Facebook to follow and be part of discussions about the evolution of immersive virtual experiences.",
    icon: FaFacebookF,
    link: 'https://www.facebook.com/profile.php?id=61566233156241', // Replace with actual Facebook link
  },
]

export default function Socials() {
  return (
    <div className="relative bg-white py-16 sm:py-24 lg:py-32">
      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
        <h2 className="text-intro">Socials</h2>
        <p className="mt-2 h3-title">
          Get Involved
        </p>
        <p className="mx-auto mt-4 max-w-prose section-text">
          Be a part of our global community by participating in open discussions and follow the most recent updates and news from OurVerse.
        </p>
        <div className="mt-12">
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {features.map((feature) => (
              <a href={feature.link} key={feature.name} 
              className="pt-6"
              target='_blank'
                rel='noreferrer'
              >
                <div className="flow-root rounded-lg bg-gray-50 px-6 pb-8">
                  <div className="-mt-6">
                    <div>
                      <span className="inline-flex items-center justify-center rounded-md btn-gradient-dark2 px-6 py-6 shadow-lg">
                        <feature.icon aria-hidden="true" className="h-6 w-6 text-white" />
                      </span>
                    </div>
                    <h3 className="mt-8 text-lg font-medium tracking-tight text-gray-900">{feature.name}</h3>
                    <p className="mt-5 text-base text-gray-500">{feature.description}</p>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}