import type { DirectoryDealer } from '@/lib/dealer-directory';
import { getCanonicalUrl } from '@/lib/seo-utils';

/**
 * Featured-dealer cards in the dealer-template category-card idiom:
 * #f0f0f0 surface, #c6c6c6 border, rounded-lg, navy name, orange
 * border on hover.
 */
export function SpotlightStrip({ dealers }: { dealers: DirectoryDealer[] }) {
  return (
    <section className="mt-6">
      <h2 className="text-xl font-bold uppercase tracking-tight text-[#093b66] md:text-2xl">
        Featured dealers
      </h2>
      <p className="mb-4 mt-1 text-sm text-[#595959]">
        Dealers with complete profiles and customized sites. The lineup rotates daily.
      </p>
      <ul className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
        {dealers.map((d) => {
          const name = d.businessName ?? d.subdomain ?? 'AMSOIL Dealer';
          return (
            <li key={d.subdomain}>
              <a
                href={getCanonicalUrl(d)}
                className="group flex h-full flex-col items-center justify-center rounded-lg border border-[#c6c6c6] bg-[#f0f0f0] p-4 text-center transition-all hover:border-[#f8981d] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#093b66] motion-safe:hover:-translate-y-0.5"
              >
                {d.logoUrl && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={d.logoUrl}
                    alt=""
                    width={48}
                    height={48}
                    loading="lazy"
                    className="mx-auto mb-2 h-12 w-12 rounded-full border border-[#d1d1d1] bg-white object-contain p-1"
                  />
                )}
                <span className="block font-semibold text-[#093b66] transition-colors group-hover:text-[#0d5a99]">
                  {name}
                </span>
                <span className="mt-0.5 block text-sm text-[#595959]">
                  {d.city}, {d.state}
                </span>
              </a>
            </li>
          );
        })}
      </ul>
    </section>
  );
}