/**
 * Pricing — Add-ons strip
 * ───────────────────────
 * A-la-carte upgrades shown between the tier cards and the comparison
 * table. Prices match the PLAN_ADDONS source of truth in
 * src/lib/plan-config.ts (kept as strings here because the Additional
 * Brand tier varies by plan and we don't want to duplicate the matrix).
 */

import { Plus, Zap, Headphones, Database, Users } from "lucide-react";

const ADDONS = [
  {
    icon: Plus,
    name: "Additional Brand",
    price: "$49–$79",
    unit: "/mo",
    desc: "Add more brands without upgrading plans. Price varies by plan.",
  },
  {
    icon: Users,
    name: "Additional Seat",
    price: "$15–$29",
    unit: "/seat/mo",
    desc: "Invite more teammates without changing plans. $29 Growth → $15 Agency Pro.",
  },
  {
    icon: Zap,
    name: "AI Credit Pack",
    price: "$49",
    unit: "/mo",
    desc: "500 extra AI credits for a single billing cycle.",
  },
  {
    icon: Headphones,
    name: "Priority Support",
    price: "$99",
    unit: "/mo",
    desc: "Guaranteed 4-hour response time + dedicated Slack channel.",
  },
  {
    icon: Database,
    name: "SERP Data Boost",
    price: "$29",
    unit: "/mo",
    desc: "+5,000 keyword / SERP lookups for heavier research.",
  },
];

export default function PricingAddOns() {
  return (
    <div className="w-full">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-slate-900">Add-ons</h2>
        <p className="text-sm text-slate-500 mt-1">
          Scale a single dimension without jumping to the next tier.
        </p>
      </div>
      {/* 1 col on mobile → 2 on sm → 3 on md → 5 on lg+. The 3-column
          intermediate keeps cards from going edge-to-edge on tablets
          where 5-wide would crush them but 2-wide would waste space.
          On lg+ all 5 cards fit in one row at ~240px wide each (page
          container max-w-7xl ≈ 1280px / 5 + gaps). */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
        {ADDONS.map((a) => {
          const Icon = a.icon;
          return (
            <div
              key={a.name}
              className="rounded-xl border border-slate-200 bg-white p-5 flex flex-col min-h-[176px]"
            >
              <div className="flex items-center gap-2 mb-3">
                <div className="w-9 h-9 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center shrink-0">
                  <Icon className="w-4 h-4" />
                </div>
                <h3 className="text-sm font-bold text-slate-900 leading-tight">{a.name}</h3>
              </div>
              <div className="flex items-baseline gap-1 mb-2">
                <span className="text-2xl font-extrabold text-slate-900">{a.price}</span>
                <span className="text-xs text-slate-500">{a.unit}</span>
              </div>
              {/* mt-auto pins the description to the bottom so cards
                  with shorter copy don't have a floating description
                  next to others with longer copy. min-h-[176px] above
                  enforces consistent card height across the row. */}
              <p className="text-xs text-slate-500 leading-relaxed mt-auto">{a.desc}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}
