import { boothPackages } from "@/content/exhibit";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function BoothPackages() {
  return (
    <div className="grid gap-6 md:grid-cols-3">
      {boothPackages.map((pkg) => (
        <Card key={pkg.id} className="topo-card-surface border-border bg-white text-[#37a47a]">
          <CardHeader>
            <CardTitle className="text-lg">{pkg.name}</CardTitle>
            <CardDescription className="font-medium text-[#37a47a]/90">{pkg.size}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-[#5b5b5b] leading-relaxed">{pkg.description}</p>
            <ul className="space-y-2">
              {pkg.highlights.map((h) => (
                <li key={h} className="flex gap-2 text-sm">
                  <span className="text-[#37a47a]">✓</span>
                  {h}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}