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-[var(--spacing-section-gap)] bg-surface-container-low/30 px-[var(--spacing-gutter)]">
      <div className="max-w-[1280px] mx-auto w-full">
        {/* Header */}
        <div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8 mb-12 md:mb-20">
          <h2 className="font-[var(--font-display-lg)] text-2xl md:text-4xl text-primary leading-tight">
            {data.title}
          </h2>
          <div className="hidden md:block h-px w-full bg-primary/20" />
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
          {data.items.map((pkg) => (
            <div
              key={pkg.id}
              className={`glass-panel p-6 sm:p-10 rounded-[2rem] flex flex-col h-full transition-all duration-500 hover:-translate-y-2 hover:border-primary hover:shadow-[0_0_20px_rgba(197,160,89,0.3)] ${
                pkg.featured ? "bg-surface-container-high/40" : ""
              }`}
            >
              <div className="mb-10">
                {pkg.badge && (
                  <span className="bg-primary/10 text-primary border border-primary/20 px-5 py-2 rounded-full text-[10px] font-bold tracking-[0.25em] uppercase mb-6 inline-block">
                    {pkg.badge}
                  </span>
                )}
                <h3 className={`font-[var(--font-display-lg)] text-2xl md:text-3xl mb-3 ${pkg.featured ? "text-primary" : "text-on-surface"}`}>
                  {pkg.tier}
                </h3>
                <div className="text-primary/90 font-[var(--font-mono)] text-xl tracking-tight">
                  {pkg.price}
                </div>
              </div>

              <div className="h-px w-full bg-white/5 mb-10" />

              <ul className="space-y-6 mb-12 flex-grow">
                {pkg.benefits.map((benefit) => (
                  <li key={benefit} className="flex items-start gap-5">
                    <span className="material-symbols-outlined text-primary text-[22px] mt-0.5">
                      {pkg.featured ? "verified" : "check_circle"}
                    </span>
                    <span className={`text-on-surface-variant text-base leading-relaxed ${benefit === pkg.boldBenefit ? "font-bold text-primary" : ""}`}>
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>

              <button
                type="button"
                className="w-full py-5 rounded-xl font-bold uppercase tracking-widest text-sm transition-all duration-300 bg-surface-container-high border border-white/10 text-on-surface hover:bg-primary hover:text-on-primary hover:border-primary hover:shadow-lg hover:shadow-primary/20 active:scale-95"
              >
                {pkg.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}