Pricing Table

interface PricingPlan {
  name: string
  price: string
  period?: string
  description: string
  features: string[]
  ctaText: string
  ctaLink: string
  highlighted?: boolean
}

interface PricingTableProps {
  title: string
  subtitle: string
  plans: PricingPlan[]
}

export function PricingTable({ title, subtitle, plans }: PricingTableProps) {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-6">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-white sm:text-4xl">{title}</h2>
          <p className="mt-4 text-lg text-gray-400">{subtitle}</p>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {plans.map((plan) => (
            <div key={plan.name} className={`relative overflow-hidden rounded-2xl border p-8 transition-all duration-300 ${plan.highlighted ? "border-indigo-500/50 bg-gradient-to-b from-indigo-500/10 to-transparent shadow-[0_0_40px_rgba(99,102,241,0.15)]" : "border-white/10 bg-white/5 hover:border-white/20"}`}>
              {plan.highlighted && <div className="absolute top-0 right-0 rounded-bl-xl bg-indigo-500 px-3 py-1 text-xs font-bold text-white">Popular</div>}
              <h3 className="text-lg font-semibold text-white">{plan.name}</h3>
              <p className="mt-2 text-sm text-gray-400">{plan.description}</p>
              <div className="mt-6">
                <span className="text-4xl font-bold text-white">{plan.price}</span>
                {plan.period && <span className="text-gray-500">/{plan.period}</span>}
              </div>
              <ul className="mt-8 space-y-3">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex items-center gap-2 text-sm text-gray-300">
                    <svg className="h-4 w-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
                    {feature}
                  </li>
                ))}
              </ul>
              <a href={plan.ctaLink} className={`mt-8 block rounded-xl px-6 py-3 text-center text-sm font-semibold transition-all ${plan.highlighted ? "bg-indigo-500 text-white hover:bg-indigo-600" : "border border-white/20 text-white hover:bg-white/5"}`}>
                {plan.ctaText}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}