import { AnimatedNumber } from '@/components/animated-number'
import { Button } from '@/components/button'
import { Container } from '@/components/container'
import { Footer } from '@/components/footer'
import { GradientLight } from '@/components/gradient'
import { Navbar } from '@/components/navbar'
import { Heading, Lead, Subheading } from '@/components/text'
import type { Metadata } from 'next'
import Ecosystem from '@/components/ecosystem'
import { RocketLaunchIcon } from '@heroicons/react/20/solid'
import Portfolio from '@/components/portfolio'
import { Testimonials } from '@/components/testimonials'
import ProjectCard from '@/components/projectcards'

export const metadata: Metadata = {
  title: 'Projects',
  description:
    'Indaba is a Social Business with a mission to empower young people to be resilient, develop their full potential and serve the common good by developing a better educational system powered by world-class technological, collaborative and educational solutions accessible online and offline, affordable to the many.',
}

function Header() {
  return (
    <Container className="mt-16">
      <div className='lg:max-w-6xl'>
        <Heading as="h1">Deliver Transformational Learning – Anywhere.</Heading>
          <Lead className="mt-8 max-w-3xl">
           From early childhood to vocational skills and lifelong learning, Indaba brings transformative education directly to the communities that need it most. 
          </Lead>
      </div>
    </Container>
  )
}



const features = [
  {
    name: 'Reached 8,000+ young learners',
    description:
      "Indaba's ECD initiatives have already empowered thousands of children across underserved communities in Africa and Latin America, offering early access to essential learning tools.",
    icon: RocketLaunchIcon,
  },
  {
    name: ' Localized curriculum across 4 regions.',
    description: 'Each program is co-developed with local educators and elders, ensuring cultural alignment and deep community ownership.',
    icon: RocketLaunchIcon,
  },
  {
    name: '99.9% parent satisfaction rate.',
    description: 'Parents consistently report increased confidence, stronger engagement with their children, and a desire to expand the program in their communities.',
    icon: RocketLaunchIcon,
  },
]

 function Overview() {
  return (
    <div className="overflow-hidden bg-white pb-24 pt-8">
      <div className="mx-auto max-w-7xl px-6 lg:px-0">
        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
          <div className="lg:pt-4 lg:pr-8">
            <div className="lg:max-w-2xl">
              <p className="text-lg/9 text-gray-600 leading-normal">
                500 million children globally lack access to foundational education during the most critical years of brain development. Indaba addresses this urgent need by delivering culturally grounded Early Childhood Development (ECD) programs. 
              </p>
               <p className="mt-6 text-lg/9 text-gray-600 leading-normal">
                 Through a blend of online and offline tools, local storytelling, and community hubs, we equip parents and caregivers to nurture children’s cognitive, emotional, and social growth — starting from birth.
              </p>
              <dl className="mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
                {features.map((feature) => (
                  <div key={feature.name} className="relative pl-9">
                    <dt className="inline font-semibold text-gray-900">
                      <feature.icon aria-hidden="true" className="absolute top-1 left-1 size-5 text-indigo-600" />
                      {feature.name}
                    </dt>{' '}
                    <dd className="inline">{feature.description}</dd>
                  </div>
                ))}
              </dl>
            </div>
          </div>
          <img
            alt="Product screenshot"
            src="/projects/projects.jpg"
            width={2432}
            height={1442}
            className="w-2xl max-w-none  sm:w-228 md:-ml-4 lg:-ml-0"
          />
        </div>
      </div>
    </div>
  )
}


function Person({
  name,
  description,
  img,
}: {
  name: string
  description: string
  img: string
}) {
  return (
    <li className="flex items-center gap-6">
      <img alt="" src={img} className="size-16 rounded-full" />
      <div className="text-base/7">
        <h3 className="font-medium text-lg">{name}</h3>
        <p className="text-gray-500 text-base">{description}</p>
      </div>
    </li>
  )
}

import { CompanyTestimonial } from '@/components/companytestimonial'
import { CTA } from '@/components/cta'

function Team() {
  return (
    <Container className="mt-24">
      <Subheading>Meet the team</Subheading>
      <Heading as="h3" className="mt-2">
        Founded by educators, activists, and systems changers.
      </Heading>
      <Lead className="mt-6 max-w-2xl">
        Indaba is founded by community leaders and backed by investors who believe in the power of meaningful participation.
      </Lead>
      <div className="mt-8 grid grid-cols-1 gap-12 lg:grid-cols-2">
        <div className="max-w-lg">
          <p className="text-md/6 text-gray-600">
            Years ago, while working on separate community projects across Africa and beyond, our founding team kept encountering the same problem: fragmented systems, siloed resources, and a lack of tools built for those doing the real work on the ground. Frustrated but inspired, they came together to design a new kind of platform — one that centers people, culture, and purpose.
          </p>
          <p className="mt-8 text-md/6 text-gray-600">
            Today, Indaba empowers communities through a unified ecosystem that supports education, collaboration, and regenerative action. From early childhood learning to vocational training, over 30,000 people across the globe engage with Indaba to reimagine what’s possible — and to build it, together.
          </p>
          <div className="mt-12">
            <Button className="w-full sm:w-auto" href="#">
              Get Involved
            </Button>
          </div>
        </div>
        <div className="max-lg:order-first max-lg:max-w-lg">
          <CompanyTestimonial />
        </div>
      </div>
      <Subheading as="h3" className="mt-24">
        Team Members
      </Subheading>
      <Heading as="h3" className="mt-2">
        An experienced and purpose-driven team
      </Heading>
      <hr className="mt-6 border-t border-gray-200" />
      <ul
        role="list"
        className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
      >
        <Person
          name="Gregory Flipo"
          description="Co-Founder & CEO"
          img="/team/gregory-flipo.jpg"
        />
        <Person
          name="Layal Fayad"
          description="Head of Learning and Development"
          img="/team/layal-fayad.jpg"
        />
        <Person
          name="Thijs Westerveld"
          description="CTO – AI Leader"
          img="/team/thijs-westerveld.jpg"
        />
        <Person
          name="Sacha Obeegadoo"
          description="COO"
          img="/team/sacha-obeegadoo.jpg"
        />
        <Person
          name="Gerben de Vries"
          description="AI Research Engineer"
          img="/team/gerben-de-vries.jpg"
        />
        <Person
          name=""
          description="Plus over +100 engineers, business developers, advisors and other team members."
          img="/team/team.jpg"
        />
      </ul>
    </Container>
  )
}

function Investors() {
  return (
    <Container className="my-32">
      <Subheading>Board Members</Subheading>
      <Heading as="h3" className="mt-2">
        Benefit from experts of various ventures
      </Heading>
      <Lead className="mt-6 max-w-3xl">
        Backed by top-tier board members, mentors and industry leaders who bring deep insights, networks, and execution power.
      </Lead>
      <hr className="mt-6 border-t border-gray-200" />
      <ul
        role="list"
        className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
      >
        <Person
          name="Ahmer Inam"
          description="CEO of Cognisese"
          img="/team/ahmer-inam.jpg"
        />
        <Person
          name="Florian Fournier"
          description="Co-Founder of Ourworld"
          img="/team/florian-fournier.jpg"
        />
        <Person
          name="André Shearer"
          description="Co-Founder and CEO, Indaba"
          img="/team/andre-shearer.jpg"
        />
        <Person
          name="Kristof de Spiegeleer"
          description="CEO of Ourworld"
          img="/team/kristof-de-spiegeleer.jpg"
        />
        <Person
          name="Thomas Becker"
          description="Serial Innovator"
          img="/team/thomas-becker.jpg"
        />

      </ul>
    </Container>
  )
}





export default function Company() {
  return (
    <main className="overflow-hidden">
      <GradientLight />
      <Container>
        <Navbar color="black" />
      </Container>
      <Header />
      <Overview />
      <ProjectCard />
      <CTA />
      <Footer />
    </main>
  )
}