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 { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function ExperienceCards() {
  return (
    <Section variant="inverse" id="program" className="grain" riftPattern="arc-top">
      <h2 className="max-w-3xl 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/70">
        Workshops, exhibition, and Africa&apos;s largest non-dilutive grant pitch event.
      </p>
      <div className="mt-12 grid gap-6 md:grid-cols-3">
        {experiences.map((exp, i) => (
          <Card key={exp.id} className="overflow-hidden border-0 bg-white text-foreground">
            <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-muted-foreground">
                Day {i + 1}
              </p>
              <CardTitle>{exp.title}</CardTitle>
              <CardDescription>{exp.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <Button variant="ghost" className="px-0 text-[#1f3d7e]" asChild>
                <Link href={exp.href}>
                  Learn more <ArrowRight className="size-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </Section>
  );
}