type PackageItem = {
  id: string;
  tier: string;
  badge: string | null;
  price: string;
  featured: boolean;
  cta: string;
  benefits: string[];
  boldBenefit: string | null;
};

type SponsorPackagesData = {
  eyebrow: string;
  title: string;
  items: PackageItem[];
};

export default function SponsorPackages({ data }: { data: SponsorPackagesData }) {
  return (
    <section className="py-16 lg:py-32 bg-surface-container-lowest">
      <div className="max-w-[1280px] mx-auto px-gutter">

        {/* Header — flex items-center justify-between mb-stack-lg */}
        <div className="flex items-center justify-between mb-stack-lg">
          <h2 className="font-headline-md text-headline-md">{data.title}</h2>
          <div className="hidden lg:block h-px flex-grow mx-stack-lg bg-outline-variant/30" />
        </div>

        {/* Grid — gap-stack-lg = 32px */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
          {data.items.map((pkg) => (
            <div
              key={pkg.id}
              className={`glass-panel p-stack-lg rounded-xl flex flex-col h-full ${
                pkg.featured ? "gold-border gold-glow ring-2 ring-primary/20" : ""
              }`}
            >
              <div className="mb-stack-lg">
                {pkg.badge && (
                  <span className="bg-primary/20 text-primary px-3 py-1 rounded text-label-caps mb-4 inline-block">
                    {pkg.badge}
                  </span>
                )}
                <h3
                  className={`font-display-lg text-headline-md ${
                    pkg.featured ? "text-primary" : ""
                  }`}
                >
                  {pkg.tier}
                </h3>
                <div className="text-on-surface font-display-lg text-title-sm mt-2">
                  {pkg.price}
                </div>
              </div>

              <ul className="space-y-4 mb-stack-lg flex-grow">
                {pkg.benefits.map((benefit) => (
                  <li key={benefit} className="flex items-start gap-3">
                    <span
                      className="material-symbols-outlined text-primary text-[20px]"
                      style={
                        pkg.featured
                          ? { fontVariationSettings: "'FILL' 1" }
                          : undefined
                      }
                    >
                      check_circle
                    </span>
                    <span
                      className={`text-on-surface-variant ${
                        benefit === pkg.boldBenefit ? "font-bold" : ""
                      }`}
                    >
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>

              <button
                type="button"
                className={`w-full py-4 rounded font-title-sm transition-all active:scale-95 ${
                  pkg.featured
                    ? "gold-gradient-bg text-on-primary hover:opacity-90"
                    : "border border-outline-variant text-on-surface hover:border-primary transition-colors"
                }`}
              >
                {pkg.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}