'use client'

import { clsx } from 'clsx'
import { motion } from 'framer-motion'
import { Subheading } from './text'
import { Container } from './Container'


export default function BentoSection() {
  function BentoCard({
    dark = false,
    className = '',
    eyebrow,
    title,
    description,
    graphic,
    fade = [],
    link = '/',
  }) {
    return (
      <motion.div
        initial="idle"
        whileHover="active"
        variants={{ idle: {}, active: {} }}
        data-dark={dark ? 'true' : undefined}
        className={clsx(
          className,
          'group relative flex flex-col overflow-hidden rounded-lg',
          'bg-white shadow-sm ring-1 ring-black/5',
          'data-[dark]:bg-gray-800 data-[dark]:ring-white/15',
        )}
      >
        <div className="relative h-80 pb-20 shrink-0">
          {graphic}
          {fade.includes('top') && (
            <div className="absolute inset-0 bg-gradient-to-b from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]" />
          )}
          {fade.includes('bottom') && (
            <div className="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]" />
          )}
        </div>
        <div className="relative p-10">
          <Subheading as="h3" dark={dark}>
            {eyebrow}
          </Subheading>
          <p className="mt-1 text-2xl/8 font-medium tracking-tight text-gradient-dark group-data-[dark]:text-white">
            {title}
          </p>
          <p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-[dark]:text-gray-400">
            {description}
          </p>
          <a href={link} className="lg:text-xs mt-4 text-sm font-mono text-cyan-600  hover:text-purple-600">
                    Learn More <span aria-hidden="true">→</span>
         </a>
        </div>
      </motion.div>
    )
  }

  return (
    <Container>
      <div className=' pt-12 pb-24'>
        <div className="relative z-10 mx-auto max-w-2xl lg:mx-0 lg:max-w-5xl lg:pr-24">
          <h2 className="text-intro">Features</h2>
          <h2 className="mt-2  h3-title">
            Collaboration & Creation Tools
          </h2>
          <p className="mt-4 section-text">
          Transform how you and your team work together with our innovative creative tools and explore diverse scenarios where they empower users to collaborate in immersive virtual environments.
          </p>
        </div>
        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
        <BentoCard
          eyebrow="Creativity"
          title="3D Collaboration Tools"
          description="Transform how you and your team work together with our innovative, real-time creative tools."
          graphic={
            <div className="h-80 bg-[url(/images/collaborate.jpg)] bg-cover bg-center bg-no-repeat" />
          }
          fade={['bottom']}
          className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
          link="/features"
        />
        <BentoCard
          eyebrow="Connected Experiences"
          title="OurVerse Studio"
          description="Elevate your virtual conferences with cutting-edge communication features designed to keep your audience connected and engaged."
          graphic={
            <div className="h-80 bg-[url(/images/studio.jpg)] bg-cover bg-center bg-no-repeat" />
          }
          fade={['bottom']}
          className="lg:col-span-3 lg:rounded-tr-4xl"
          link="/features"
        />
        <BentoCard
          eyebrow="3D Modeling"
          title="Verse Builder Pro"
          description="Create and customize your virtual world with powerful tools that make building and managing your digital space easy and intuitive."
          graphic={
            <div className="h-80 bg-[url(/images/builder.jpg)] bg-cover bg-center bg-no-repeat" />
          }
          fade={['bottom']}
          className="lg:col-span-2 lg:rounded-bl-4xl"
        />
        <BentoCard
          eyebrow="Next-Gen Interactions"
          title="Virtual Meeting Tools"
          description="Elevate your virtual interactions with cutting-edge communication features designed to keep you connected and engaged.."
          graphic={
            <div className="h-80 bg-[url(/images/communicate.jpg)] bg-cover bg-center bg-no-repeat" />
          }
          fade={['bottom']}
          className="lg:col-span-2"
          link="/features"
        />
        <BentoCard
          eyebrow="Business Platform"
          title="Integrated CRM"
          description="Manage customer interactions, tasks, and meetings seamlessly in one platform, helping your business transition smoothly to the digital landscape."
          graphic={
            <div className="h-80 bg-[url(/images/crm.png)] bg-cover bg-center bg-no-repeat" />
          }
          fade={['bottom']}
          className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
          link="/features"
        />
      </div>
      </div>
    </Container>
  )
}