GRV-Summit-Site/components/home/ExperienceCards.tsx

import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { experiences } from "@/content/program";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { ScrollReveal } from "@/components/motion/ScrollReveal";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function ExperienceCards() {
  return (
    <Section variant="inverse" id="program">
      <TopoProseSurface tone="green" className="topo-on-green-bg max-w-3xl">
        <h2 className="text-3xl font-bold md:text-5xl">
          Two days to go deep into what Ethiopia&apos;s innovators need
        </h2>
        <p className="mt-4 max-w-2xl text-white/85">
          Workshops, exhibition, and Africa&apos;s largest non-dilutive grant pitch event.
        </p>
      </TopoProseSurface>
      <div className="mt-12 grid gap-6 md:grid-cols-3">
        {experiences.map((exp, i) => (
          <ScrollReveal key={exp.id} variant="card" delay={i * 90} as="div">
          <Card className="topo-card-surface overflow-hidden border-0 bg-white text-[#37a47a]">
            <div className="relative h-48">
              <Image
                src="/branding/booth-mockup.png"
                alt={exp.title}
                fill
                className="object-cover"
              />
            </div>
            <CardHeader>
              <p className="text-xs font-medium uppercase text-[#5b5b5b]">
                Day {i + 1}
              </p>
              <CardTitle>{exp.title}</CardTitle>
              <CardDescription className="text-[#5b5b5b]">{exp.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <Button
                variant="ghost"
                className="topo-card-link px-0 hover:bg-transparent"
                asChild
              >
                <Link href={exp.href}>
                  Learn more <ArrowRight className="size-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>
          </ScrollReveal>
        ))}
      </div>
    </Section>
  );
}