import Image from "next/image";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { PurposeGrantText } from "@/components/home/PurposeGrantText";
export function PurposeBand() {
  return (
    <Section id="about">
      <div className="grid items-center gap-10 lg:grid-cols-2">
        <TopoProseSurface>
          <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
            About this summit
          </p>
          <h2 className="mt-3 text-3xl font-bold md:text-4xl">
            A first-of-its-kind gathering for Ethiopia&apos;s innovators
          </h2>
          <p className="mt-4 text-muted-foreground leading-relaxed">
            The Great Rift Valley Innovation Summit, presented by the Ethiopian Diaspora Trust
            Fund (EDTF), convenes entrepreneurs, investors, companies, startups, and jobseekers to
            advance tech-enabled innovation in agriculture, healthcare, and education.
          </p>
          <p className="mt-4 text-muted-foreground leading-relaxed">
            Programming includes an exhibitor hall, workshops and panel discussions, and the
            inaugural Great Rift Valley Pitch Competition—<PurposeGrantText /> Ten companies will
            be selected from the most impactful ventures.
          </p>
        </TopoProseSurface>
        <div className="relative z-20 aspect-[4/3] overflow-hidden rounded-2xl">
          <Image
            src="/branding/booth-mockup.png"
            alt="Summit exhibition floor"
            fill
            className="object-cover"
          />
        </div>
      </div>
    </Section>
  );
}