import { 
  CpuChipIcon,
  UserIcon,
  ShieldCheckIcon,
  SparklesIcon,
  BookOpenIcon,
  HandRaisedIcon
} from '@heroicons/react/20/solid'


export  function VenturesHeroApp() {
  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">
            Hero
          </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">
              HERO is a next-generation agentic AI Personal Agent (PA), a sovereign digital assistant designed to act entirely on behalf of its user. Developed on the Project Mycelium and operating within a sovereign digital free zone, HERO prioritizes privacy, autonomy, and user control in every interaction.</p>
            <p className="mt-8 text-lg/7 text-gray-600">
              Unlike traditional AI systems owned by corporations and driven by centralized data harvesting, HERO is built around the principles of Augmented Collective Intelligence (ACI), enabling personalized intelligence that evolves through real human context. It orchestrates a constellation of trusted AI agents that integrate seamlessly into everyday life, supporting communication, identity, knowledge, memory, and transactions while preserving cultural nuance and digital sovereignty.
            </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'>
                  Innovation, 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'>
                  Zanzibar, Tanzania
                </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-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 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">
                <UserIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Personal Agent Layer. </strong>  
                  HERO behaves as a sovereign digital assistant, coordinating a suite of domain-specific AI agents to handle messaging, calendars, identity, credentials, documentation, AI tasks, and transactions, all securely encrypted and user-governed.
                </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">Secure, Unbreakable Memory. </strong>  
                  Personal memory is distributed across a decentralized network using quantum-resistant cryptography, ensuring security, redundancy, and unbreachable privacy.
                </span>
              </li>
              <li className="flex gap-x-3">
                <ShieldCheckIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Private Blockchain Ledger. </strong>  
                  Every HERO maintains a private blockchain ledger that verifies identity, manages access control, tracks interactions, and can communicate securely with other ledgers.
                </span>
              </li>
              <li className="flex gap-x-3">
                <SparklesIcon aria-hidden="true" className="mt-1 size-5 flex-none text-black" />
                <span>
                  <strong className="font-semibold text-lg text-gray-900">Agentic AI Network. </strong>  
                  HERO connects with a wide range of autonomous AI agents for research, content creation, and task automation, with computation executed locally or through vetted, privacy-preserving partners.
                </span>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  )
}