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-[#1a5c38]">
          <CardHeader>
            <CardTitle className="text-lg">{pkg.name}</CardTitle>
            <CardDescription className="font-medium text-[#1a5c38]/90">{pkg.size}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-[#3d5248] 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-[#ffb300]">✓</span>
                  {h}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
