import Image from 'next/image'
import { H2, PS } from '@/components/UI/Texts'
import { Button } from '@/components/Button'

const ventures = [
  {
    src: '/images/ventures/geomind.jpg',
    alt: 'Geomind venture',
    logoSrc: '/images/ventures/ventures_logo/geomind_logo.png',
    logoAlt: 'Geomind logo',
  },
  {
    src: '/images/ventures/threefold.jpg',
    alt: 'ThreeFold venture',
    logoSrc: '/images/ventures/ventures_logo/threefold_logo.png',
    logoAlt: 'ThreeFold logo',
  },
  {
    src: '/images/ventures/freezone.jpg',
    alt: 'Freezone venture',
    logoSrc: '/images/ventures/ventures_logo/freezone_logo.png',
    logoAlt: 'Freezone logo',
  },
]

export function Ventures() {
  return (
    <div className="bg-transparent py-16 lg:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto flex max-w-7xl flex-col gap-8 lg:mx-0 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start">
          <div className="lg:pr-8">
            <H2 className="text-void">
              Meet the Ventures Shaping Our Future
            </H2>
          </div>
          <div className="flex flex-col gap-6 lg:pl-4 lg:max-w-2xl">
            <PS className="text-void">
              All ventures within the OurWorld ecosystem are connected through our shared principles, values, and the aim to bring forward a new era of digital autonomy and self-empowerment.
            </PS>
            <Button variant="solid" color="green" className="w-fit mt-2">
              Explore Ventures
            </Button>
          </div>
        </div>
        <div className="mx-auto mt-24 max-w-2xl lg:max-w-none">
          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:gap-y-16 lg:max-w-none lg:grid-cols-3">
            {ventures.map((venture) => (
              <div key={venture.src} className="flex flex-col">
                <dd className="flex flex-auto flex-col">
                  <div className="relative overflow-hidden rounded-lg">
                    <Image
                      src={venture.src}
                      alt={venture.alt}
                      width={600}
                      height={400}
                      className="h-auto w-full object-cover transition-transform duration-300 hover:scale-105"
                    />
                    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                      <Image
                        src={venture.logoSrc}
                        alt={venture.logoAlt}
                        width={180}
                        height={80}
                        className="h-auto w-40 max-w-[60%] object-contain drop-shadow-md"
                      />
                    </div>
                  </div>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}
