import { CloudIcon, GlobeAltIcon, CpuChipIcon, CircleStackIcon } from '@heroicons/react/20/solid'

export function VenturesProjectMycelium() {
  return (
    <div className="overflow-hidden bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <div className="max-w-5xl">
          <p className="subtitle-default text-gray-900">VENTURES</p>
          <h2 className="mt-2 h2-default text-gray-900">
            Project Mycelium
          </h2>
        </div>
        <section className="mt-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-x-48 lg:gap-y-16">
          <div className="lg:pr-8">
            <h2 className="text-2xl font-semibold tracking-tight text-pretty text-gray-900">About</h2>
            <p className="mt-6 text-lg/7 text-gray-600">
              Project Mycelium is the community-driven, co-owned decentralized cloud that gives people, enterprises, and public institutions direct access to sovereign digital infrastructure.
            </p>
            <p className="mt-8 text-lg/7 text-gray-600">
              Powered by technology developed at GeoMind, Project Mycelium runs on GeoMind&apos;s Tier H compute and Tier S storage datacenters—delivering autonomous, verifiable performance across distributed bare metal. This combination ensures data remains local, resilient, and verifiably secure for every participant in the network.
            </p>
          </div>
          <div className="lg:row-span-2 lg:-mr-24 xl:mr-auto">
            <div className="lg:mx-0">
             <div className="relative">
              <figure className="border border-gray-200  px-6 lg:pl-8 lg:pr-24 py-6 lg:py-8 rounded-3xl bg-gray-50 mt-8 lg:mt-0">
              <blockquote className="text-lg/8 font-semibold tracking-tight text-gray-900">
                <p>
                  Sector
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  Technology, Information and Internet
                </p>
                <p className='mt-4'>
                  Key Contact
                </p>
              </blockquote>
              <figcaption className="mt-4 flex gap-x-4">
                <a href="/people/kristof_de_spiegeleer" className="flex gap-x-4 hover:opacity-80 transition-opacity">
                  <img
                    alt=""
                    src="/images/people/kristof_de_spiegeleer/kristof_de_spiegeleer.jpeg"
                    className="mt-1 size-14 flex-none rounded-full bg-gray-50"
                  />
                  <div>
                    <p className="font-semibold text-base text-gray-900 hover:text-indigo-600">Kristof de Spiegeleer</p>
                    <p className="text-gray-600 text-sm/8">Co-founder & CEO</p> 
                  </div>
                </a>
              </figcaption>
              <figcaption className="mt-4 flex gap-x-4">
                <a href="/people/florian_fournier" className="flex gap-x-4 hover:opacity-80 transition-opacity">
                  <img
                    alt=""
                    src="/images/people/florian_fournier/florian_fournier.jpeg"
                    className="mt-1 size-14 flex-none rounded-full bg-gray-50"
                  />
                  <div>
                    <p className="font-semibold text-base text-gray-900 hover:text-indigo-600">Florian Fournier</p>
                    <p className="text-gray-600 text-sm/8">Co-founder</p> 
                  </div>
                </a>
              </figcaption>
              <blockquote className="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">
                <p>
                  Headquarters
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  Dubai, United Arab Emirates
                </p>
                <p className='mt-6'>
                  Website
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  <a href="https://projectmycelium.com" className="text-indigo-600 hover:text-gray-500">projectmycelium.com</a>
                </p>
                <p className='mt-6'>
                  Contact
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  <a href="mailto:info@ourworld.tf" className="text-indigo-600 hover:text-gray-500">info@ourworld.tf</a>
                </p>
              </blockquote>
              </figure>
              </div>
            </div>
          </div>
          <div className="max-lg:mt-8 lg:col-span-1">
            <p className="text-2xl font-semibold tracking-tight text-pretty text-gray-900">Key Technologies</p>
            <hr className="mt-6 border-t border-gray-200" />
            <ul role="list" className="mt-8 space-y-8 text-gray-600">
                <li className="flex gap-x-3">
                  <CircleStackIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                  <span>
                    <strong className="font-semibold text-lg text-gray-900">Community-Owned Cloud.</strong> Participants co-own, govern, and benefit from the network while gaining sovereignty over their infrastructure footprint.
                  </span>
                </li>
                <li className="flex gap-x-3">
                  <GlobeAltIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                  <span>
                    <strong className="font-semibold text-lg text-gray-900">Tier H &amp; Tier S Datacenters.</strong> GeoMind-operated facilities provide deterministic performance for high-availability compute and secure, persistent storage.
                  </span>
                </li>
                <li className="flex gap-x-3">
                  <CpuChipIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                  <span>
                    <strong className="font-semibold text-lg text-gray-900">Autonomous Compute.</strong> GeoMind orchestration distributes workloads across the mesh, balancing edge and core resources with verifiable performance.
                  </span>
                </li>
                <li className="flex gap-x-3">
                  <CloudIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                  <span>
                    <strong className="font-semibold text-lg text-gray-900">Sovereign Cloud Services.</strong> Self-healing, edge-ready services for Web2, Web3, and AI workloads, delivered without centralized control.
                  </span>
                </li>
              </ul>
          </div>
        </section>
      </div>
    </div>
  )
}
