'use client';

import { ArrowRight } from 'lucide-react';
import { promoBanners } from '@/lib/products-data';

export default function PromoBanners() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      {/* 2-column grid */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:gap-6">
        {promoBanners.map((banner) => (
          <a
            key={banner.title}
            href="#"
            className={`group relative flex min-h-[200px] items-center overflow-hidden rounded-2xl bg-gradient-to-r ${banner.gradient} p-6 transition-shadow duration-300 hover:shadow-xl lg:p-8`}
          >
            <div className="relative z-10">
              {/* Badge pill */}
              <span
                className={`mb-3 inline-block rounded-full px-3 py-1 text-xs font-semibold ${banner.badgeColor}`}
              >
                {banner.badge}
              </span>

              {/* Title */}
              <h3 className="font-heading text-2xl font-bold text-white lg:text-3xl">
                {banner.title}
              </h3>

              {/* Subtitle */}
              <p className="mt-1 text-sm font-medium text-white/80">
                {banner.subtitle}
              </p>

              {/* Description */}
              <p className="mt-2 max-w-xs text-sm text-white/70">
                {banner.description}
              </p>

              {/* CTA with arrow */}
              <span className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white transition-all group-hover:gap-3">
                {banner.cta}
                <ArrowRight className="h-4 w-4" />
              </span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}