'use client'

import { useEffect, useState } from 'react'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import clsx from 'clsx'

import { BackgroundImage } from '@/components/BackgroundImage'
import { Container } from '@/components/Container'

const products = [
  {
    id: 1,
    name: 'Enhancing Education',
    color: 'Transform traditional education with immersive distance learning opportunities',
    href: '#',
    imageSrc: '/images/education.jpg',
    imageAlt: 'classroom',
  },
  {
    id: 2,
    name: 'Environmental Awareness',
    color: 'Advocate for environmental conservation through virtual eco-tours & initiatives.',
    href: '#',
    imageSrc: '/images/environment.jpg',
    imageAlt: 'environment',
  },
  {
    id: 3,
    name: 'Supporting Healthcare',
    color: 'Innovate healthcare delivery by integrating virtual consultations & tools.',
    href: '#',
    imageSrc: '/images/healthcare.jpg',
    imageAlt: 'clinic',
  },
  {
    id: 4,
    name: 'Empowering Africa',
    color: 'Foster cultural and economic growth across Africa through virtual solutions.',
    href: '#',
    imageSrc: '/images/africa.jpg',
    imageAlt: 'africa',
  },
]

export function Product() {
  return (
    <section id="schedule" aria-label="Schedule" className="py-8 lg:py-24 mb-12">
      <Container className="relative z-10">
        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-4xl lg:pr-24">
          <h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Usecases</h2>
          <h2 className="mt-2 font-display text-4xl font-semibold tracking-tighter text-gradient-dark sm:text-5xl">
          Transforming Possibilities Across Industries Digitally
          </h2>
          <p className="mt-4 font-display lg:text-xl text-lg tracking-tight text-purple-900">
          Explore diverse scenarios where our platform empowers users to create, collaborate, 
          and innovate in immersive virtual environments, unlocking new potentials across industries and communities.
          </p>
        </div>
      </Container>
      <div className="relative lg:mt-14 mt-16">
        <BackgroundImage position="right" className="-bottom-32 -top-40" />
        <Container className="relative">
        <div className="mt-4 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
          {products.map((product) => (
            <div key={product.id}>
              <div className="relative">
                <div className="relative h-full w-full overflow-hidden rounded-sm">
                  <img
                    alt={product.imageAlt}
                    src={product.imageSrc}
                    className="h-full w-full object-cover object-center"
                  />
                </div>
                <div className="relative mt-4">
                  <h3 className="lg:text-base text-lg font-medium text-cyan-700">{product.name}</h3>
                  <p className="mt-1 mb-2 lg:text-sm text-base text-purple-900">{product.color}</p>
                  <a href={product.href} className="lg:text-xs text-sm font-mono text-cyan-600  hover:text-purple-600">
                    Read Usecase <span aria-hidden="true">→</span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
        </Container>
      </div>
    </section>
  )
}