interface Partner {
  name: string;
  type: string;
  type_color: "yellow" | "green" | "teal" | "cyan";
  description: string;
  badge: string;
}

interface PartnerGridData {
  title: string;
  subtitle: string;
  partners: Partner[];
}

const COLOR_MAP = {
  yellow: { accent: "#C7D92F", bg: "#C7D92F15" },
  green:  { accent: "#8FD15E", bg: "#8FD15E15" },
  teal:   { accent: "#47C3A6", bg: "#47C3A615" },
  cyan:   { accent: "#14B7CC", bg: "#14B7CC15" },
};

export default function PartnerGrid({ data }: { data: PartnerGridData }) {
  return (
    <div className="mt-3 rounded-xl border border-[#E2E8F0] overflow-hidden shadow-sm">
      {/* Header */}
      <div className="bg-white px-5 py-4 border-b border-[#E2E8F0]">
        <div className="flex items-center gap-2 mb-1">
          <div className="w-1 h-4 rounded-full bg-brand-gradient-h" />
          <h3 className="text-sm font-semibold text-[#1A202C]">{data.title}</h3>
        </div>
        <p className="text-xs text-[#64748B] ml-3">{data.subtitle}</p>
      </div>

      {/* Partner grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-[#E2E8F0]">
        {data.partners.map((partner) => {
          const { accent, bg } = COLOR_MAP[partner.type_color];
          return (
            <div key={partner.name} className="bg-white p-4 hover:bg-[#F8FAFC] transition-colors">
              <div className="flex items-start justify-between gap-2 mb-3">
                <div>
                  <p className="text-sm font-semibold text-[#1A202C]">{partner.name}</p>
                  <span
                    className="text-[10px] font-medium px-1.5 py-0.5 rounded mt-1 inline-block uppercase tracking-wider"
                    style={{ background: bg, color: accent }}
                  >
                    {partner.type}
                  </span>
                </div>
                <span className="text-[10px] text-[#94A3B8] bg-[#F1F5F9] border border-[#E2E8F0] px-2 py-0.5 rounded flex-shrink-0">
                  {partner.badge}
                </span>
              </div>

              <p className="text-xs text-[#64748B] leading-relaxed">{partner.description}</p>

              <div
                className="mt-3 h-px rounded-full opacity-40"
                style={{ background: `linear-gradient(90deg, ${accent}, transparent)` }}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
}