import { GlobeAltIcon, ServerStackIcon, RocketLaunchIcon, CpuChipIcon } from '@heroicons/react/20/solid'


export  function VenturesCybercity() {
  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">
            Zanzibar Cyber City
          </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">
              This project is a pioneering collaboration between the Revolutionary Government of Zanzibar and forward-thinking partners.
            </p>
            <p className="mt-8 text-lg/7 text-gray-600">
              Together, we’re creating a new kind of city, one designed for regeneration, creativity, and connection. A place where people don’t just live and work, but belong, contribute, and grow. Where innovation is grounded in local context, guided by shared values, and built to serve both people and planet.
            </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">
                <img
                  alt=""
                  src="/images/people/chris_camponovo/chris_camponovo.jpeg"
                  className="mt-1 size-14 flex-none rounded-full bg-gray-50"
                />
                <div>
                  <p className="font-semibold text-base text-gray-900">Chris Camponovo</p>
                  <p className="text-gray-600 text-sm/8">Co-founder</p> 
                </div>
              </figcaption>
              <figcaption className="mt-4 flex gap-x-4">
                <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">Florian Fournier</p>
                  <p className="text-gray-600 text-sm/8">Co-founder</p> 
                </div>
              </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'>
                  Zanzibar, Tanzania
                </p>
                <p className='mt-6'>
                  Website
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  <a href="http://cybercity.ourworld.tf/" className="text-indigo-600 hover:text-indigo-500">cybercity.ourworld.tf</a>
                </p>
                <p className='mt-6'>
                  Contact
                </p>
                 <p className='text-lg/7 font-light text-gray-600'>
                  <a href="mailto:info@threefold.io " className="text-indigo-600 hover:text-indigo-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 Features</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">
                <GlobeAltIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Digital Free Zone. </strong>  
                  Streamlined, decentralized business hub with global connectivity. Anyone can become an e-resident, bringing the world to Zanzibar online.
                </span>
              </li>
              <li className="flex gap-x-3">
                <ServerStackIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Datacenter City. </strong>  
                  Proudly hosts the nation’s most advanced and resilient datacenter, a distributed infrastructure that secures our digital future and reflects national sovereignty.
                </span>
              </li>
              <li className="flex gap-x-3">
                <RocketLaunchIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Venture Creator. </strong>  
                  Empowers local startups with strategic guidance, funding support, data infrastructure, global networking, talent acquisition, and operational resources.
                </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">Artificial Intelligence. </strong>  
                  Co-owned AI hosted locally on Zanzibar’s national internet integrates into city services and generates income for city operations.
                </span>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  )
}