GRV-Summit-Site/app/program/page.tsx

import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { programDays } from "@/content/program";
import { pillars } from "@/content/tracks";
import { PageRiftHeader } from "@/components/layout/PageRiftHeader";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export const metadata: Metadata = createPageMetadata(pageSeo.program);

export default function ProgramPage() {
  return (
    <>
      <PageRiftHeader
        variant="program"
        eyebrow="Program"
        title={<h1 className="text-4xl font-bold md:text-5xl">Event program</h1>}
        description={
          <p>
            Two days of workshops, panels, exhibition, and the Great Rift Valley Pitch Competition at
            Skylight Hotel, Addis Ababa.
          </p>
        }
      />

      <Section>
        <div className="grid gap-8 md:grid-cols-2">
          {programDays.map((day) => (
            <Card key={day.id} className="overflow-hidden">
              <div className="relative h-48">
                <Image
                  src={day.image || "/branding/booth-mockup.png"}
                  alt={day.title}
                  fill
                  className="object-cover"
                />
              </div>
              <CardHeader>
                <p className="text-xs font-semibold uppercase text-[#ffb300]">{day.date}</p>
                <CardTitle>{day.title}</CardTitle>
                <CardDescription>{day.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  {day.highlights.map((h) => (
                    <li key={h}>· {h}</li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

      <Section variant="muted">
        <TopoProseSurface className="inline-block">
          <h2 className="text-2xl font-bold">Innovation pillars</h2>
        </TopoProseSurface>
        <div className="mt-6 grid gap-4 md:grid-cols-3">
          {pillars.map((p) => (
            <Card key={p.id}>
              <CardHeader>
                <CardTitle>{p.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">{p.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
        <Button className="mt-10 rounded-full bg-[#ffb300] text-[#0f0404]" asChild>
          <Link href="/pitch-competition">Pitch competition details</Link>
        </Button>
      </Section>
    </>
  );
}