import { BentoCard } from '@/components/bento-card'
import { Button } from '@/components/button'
import { Container } from '@/components/container'
import { Footer } from '@/components/footer'
import { Gradient } from '@/components/gradient'
import { Keyboard } from '@/components/keyboard'
import { Link } from '@/components/link'
import { LinkedAvatars } from '@/components/linked-avatars'
import { LogoCloud } from '@/components/logo-cloud'
import { LogoCluster } from '@/components/logo-cluster'
import { LogoTimeline } from '@/components/logo-timeline'
import { Map } from '@/components/map'
import { Navbar } from '@/components/navbar'
import { Screenshot } from '@/components/screenshot'
import { Testimonials } from '@/components/testimonials'
import { Heading, Subheading } from '@/components/text'
import { ChevronRightIcon } from '@heroicons/react/16/solid'
import type { Metadata } from 'next'
import Portfolio from '@/components/portfolio'
import { IndabaOs } from '@/components/indabaos'
import FeaturedTestimonial from '@/components/featuredtestimonial'

export const metadata: Metadata = {
  description:
    'Indaba is the platform that adds an "Engage" button to the Internet, inviting meaningful participation and contribution.',
}

function Hero() {
  return (
    <div className="relative">
      <Gradient className="absolute inset-2 bottom-0 rounded-4xl ring-1 ring-black/5 ring-inset " />
      <Container className="relative">
        <Navbar
          banner={
            <Link
              href="/blog"
              className="flex items-center gap-1 rounded-full bg-indigo-800/35 px-4 py-0.5 text-sm/6 font-medium text-white data-hover:bg-indigo-800/50"
            >
              Join the Indaba Community
              <ChevronRightIcon className="size-4" />
            </Link>
          }
        />
        <div className="pt-16 pb-24 lg:pt-24 lg:pb-24 md: max-w-2xl lg:max-w-5xl">
          <h1 className="font-display text-5xl/[0.9] font-medium tracking-tight text-balance text-white lg:text-8xl text-6xl leading-tighter">
            The Platform for Purposeful Participation
          </h1>
          <p className="mt-8 max-w-3xl text-xl/5 font-light text-gray-150 lg:text-xl/7 text-gray-100">
            Indaba is the platform that adds an "Engage" button to the Internet. While most platforms offer "Like," or "Comment," Indaba invites people to take responsibility, contribute meaningfully, and become part of the solution.
          </p>
          <div className="mt-12 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
            <Button href="#">Get Involved</Button>
            <Button variant="secondary" href="/pricing">
              See Projects
            </Button>
          </div>
        </div>
      </Container>
    </div>
  )
}





function FeatureSection() {
  return (
    <div className="overflow-hidden">
      <Container className="pb-24">
        <Heading as="h2" className="max-w-3xl">
          Deliver transformational experiences anywhere
        </Heading>
        <Screenshot
          width={1216}
          height={768}
          src="/screenshots/app.png"
          className="mt-12 h-144 sm:h-auto sm:w-304"
        />
      </Container>
    </div>
  )
}



function BentoSection() {
  return (
    <Container>
      <Subheading>Features</Subheading>
      <Heading as="h3" className="mt-2 max-w-3xl">
        Empowering meaningful participation.
      </Heading>

      <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
        <BentoCard
          eyebrow="Community"
          title="Foster Engagement"
          description="Indaba creates spaces for meaningful dialogue and collaboration, helping communities come together to address shared challenges."
          graphic={
            <div className="h-80 bg-[url(/screenshots/profile.png)] bg-size-[1000px_560px] bg-position-[left_-109px_top_-112px] bg-no-repeat" />
          }
          fade={['bottom']}
          className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
        />
        <BentoCard
          eyebrow="Impact"
          title="Drive Real Change"
          description="Indaba empowers communities to identify challenges and work together on sustainable solutions through structured participation."
          graphic={
            <div className="absolute inset-0 bg-[url(/screenshots/competitors.png)] bg-size-[1100px_650px] bg-position-[left_-38px_top_-73px] bg-no-repeat" />
          }
          fade={['bottom']}
          className="lg:col-span-3 lg:rounded-tr-4xl"
        />
        <BentoCard
          eyebrow="Tools"
          title="Powerful Features"
          description="Access intuitive tools designed to facilitate meaningful discussions, decision-making, and collaborative action within your community."
          graphic={
            <div className="flex size-full pt-10 pl-10">
              <Keyboard highlighted={['LeftCommand', 'LeftShift', 'D']} />
            </div>
          }
          className="lg:col-span-2 lg:rounded-bl-4xl"
        />
        <BentoCard
          eyebrow="Connect"
          title="Build Networks"
          description="Connect with like-minded individuals and organizations committed to creating positive change in their communities."
          graphic={<LogoCluster />}
          className="lg:col-span-2"
        />
        <BentoCard
          eyebrow="Global"
          title="Worldwide Impact"
          description="Join a global movement of communities using Indaba to drive meaningful change and sustainable development."
          graphic={<Map />}
          className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
        />
      </div>
    </Container>
  )
}

const stats = [
  { id: 1, name: 'Lessons delivered', value: '+4,000,000,000' },
  { id: 2, name: 'Educational resources', value: '+90,000,000' },
  { id: 3, name: 'Spent on infrastructure & content development', value: '+$60,000,000' },
]


function DarkBentoSection() {
  return (
    <div className="pt-24 pb-12">
      <div className="mx-auto max-w-8xl px-6 lg:px-8">
        <div className="rounded-4xl bg-indigo-50 dark:bg-indigo-800/50 px-6 py-24 lg:rounded-3xl lg:px-16">
          <div className="flex flex-col gap-y-20 lg:flex-row lg:gap-x-12">
            {/* Left: Text Column */}
            <div className="lg:basis-5/12">
              <Subheading>About Indaba</Subheading>
              <Heading as="h3" className="mt-2 max-w-2xl">
                A Movement to Reimagine Learning for All
              </Heading>
              <p className="mt-8 text-xl/4 font-light text-gray-600 dark:text-gray-200 leading-normal lg:text-xl/6">
                Indaba is a social business on a mission to empower young people to be resilient, reach their full potential,
                and contribute to the common good. We’re building a global ecosystem for holistic learning — accessible online
                and offline, affordable to the many, and grounded in culture, care, and collaboration.
              </p>
              <div className="mt-8 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
              <Button href="#">About Us</Button>
          </div>
            </div>

            {/* Right: Stats Column */}
            <div className="lg:basis-7/12 lg:pl-16">
              <dl className="grid grid-cols-1 gap-x-12 gap-y-10">
                {stats.map((stat) => (
                  <div key={stat.id} className="flex flex-col gap-y-1">
                    <dt className="text-base text-gray-600 dark:text-gray-300">{stat.name}</dt>
                    <dd className="text-4xl lg:text-7xl font-semibold bg-linear-145 from-[#490ae7] from-10% via-[#9592ff] via-50% to-[#4605b0] to-90% bg-clip-text text-transparent">
                      {stat.value}
                    </dd>
                    {stat.name && (
                      <dd className="mt-2 text-sm lg:text-base font-light text-gray-600 dark:text-gray-300">
                        {stat.name}
                      </dd>
                    )}
                  </div>
                ))}
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

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



export default function Home() {
  return (
    <div className="overflow-hidden">
      <Hero />
      <main>
        <Container className="mt-24">
          <LogoCloud />
        </Container>
        <DarkBentoSection />
        <div className="bg-linear-to-b from-white from-50% to-gray-100 py-24">
          <Testimonials />
        </div>
        <Portfolio />
        <IndabaOs />
        <FeaturedTestimonial />
        <CTA />
      </main>
      <Footer />
    </div>
  )
}