const ventures = [
  {
    name: 'Project Mycelium',
    logo: '/images/ventures/mycelium.png',
    description: 'Project Mycelium is the community-driven, co-owned decentralized cloud built on GeoMind’s technology, delivering sovereign digital infrastructure for people, enterprises, and public institutions.',
    url: 'https://projectmycelium.com',
    learnMoreUrl: './project-mycelium'
  },
  {
    name: 'GeoMind',
    logo: '/images/ventures/geo_ico.png',
    description: 'GeoMind delivers a new generation of decentralized cloud and AI infrastructure with Tier S enterprise and Tier H personal datacenters so anyone from individuals to enterprises can own their cloud and earn from idle capacity.',
    url: 'https://geomind.io',
    learnMoreUrl: './geomind'
  },
  {
    name: 'Zanzibar Digital Free Zone',
    logo: '/images/ventures/freezone.png',
    description: 'A Public-Private Partnership (PPP) with the Government of Zanzibar through ZICTIA. 100% digital and automated business operations, offering seamless legal, financial, and operational support for businesses.',
    url: 'http://freezone.ourworld.tf/',
    learnMoreUrl: './freezone'
  },
  {
    name: 'Zanzibar Cyber City',
    logo: '/images/ventures/cybercity.png',
    description: 'A visionary startup city being developed as a PPP with the Government of Zanzibar. The cyber city aims to be a collaborative hub for innovation, bringing together startups, investors, and technologists in a state-of-the-art urban environment.',
    learnMoreUrl: './cybercity'
  },
  {
    name: 'Sikana',
    logo: '/images/ventures/ow_icon.png',
    description: 'Sikana is a social business empowering young people to be resilient, reach their full potential, and contribute to the common good. A global ecosystem for holistic learning - accessible online and offline, affordable to the many, and grounded in culture, care, and collaboration.',
    url: 'https://sikana.tv',
    learnMoreUrl: './sikana'
  },
  {
    name: 'Hero',
    logo: '/images/ventures/hero.png',
    description: 'Hero is an agentic AI assistant designed to give individuals full control over their digital identity and assets. Focused on privacy and autonomy, Hero orchestrates trusted AI agents to manage personal information, tasks, and interactions across decentralized platforms.',
    learnMoreUrl: './hero'
  }
]

const heroContent = {
  title: 'OurWorld Ventures',
  subtitle: 'United by shared values, these ventures collectively build the infrastructure, frameworks, and tools needed for true digital autonomy.',
  backgroundImage: '/images/ventures/earth.jpg',
  backgroundAlt: 'Earth from space'
}

export function VenturesHero() {
  return (
    <div className="bg-white">
      <div className="relative">
        <img 
          src={heroContent.backgroundImage}
          alt={heroContent.backgroundAlt} 
          className="h-96 w-full object-cover object-center"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-white"></div>
      </div>
      
      <div className="relative mx-auto -mt-28 max-w-7xl px-4 pb-24 sm:px-6 sm:pb-24 lg:px-8">
        <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
          <h1 className="h1-default text-gray-900">{heroContent.title}</h1>
          <p className="mt-4 p-default text-gray-800">{heroContent.subtitle}</p>
        </div>

        <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:gap-x-12 lg:gap-y-10">
          {ventures.map((venture, index) => (
            <div key={index} className="border-t border-gray-200 pt-4">
              <div className="flex items-center">
                <a href={venture.url} target="_blank" rel="noopener" className="flex items-center hover:text-indigo-700">
                  <img 
                    src={venture.logo} 
                    alt={`${venture.name} Logo`} 
                    className="w-8 h-8 mr-2"
                  />
                  <dt className="font-semibold text-xl text-gray-900 lg:text-2xl">{venture.name}</dt>
                </a>
              </div>
              <dd className="mt-2 font-light tracking-normal text-gray-600">
                {venture.description}
              </dd>
              <div className="mt-4">
                <a 
                  href={venture.learnMoreUrl} 
                  className="text-sm font-medium text-black hover:text-gray-700"
                >
                  Learn more <span aria-hidden="true">&rarr;</span>
                </a>
              </div>
            </div>
          ))}
        </dl>
      </div>
    </div>
  )
}