import Link from 'next/link';
import type { Metadata } from 'next';
import { fetchBrands } from '@/lib/api';

export const metadata: Metadata = {
  title: 'Marcas — MercadoDeVida',
  description: 'Todas las marcas de productos naturales y ecológicos.',
};

export default async function BrandsPage() {
  const brands = await fetchBrands();

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900" style={{ fontFamily: 'var(--font-heading)' }}>
          Nuestras marcas
        </h1>
        <p className="mt-2 text-gray-600">
          Descubre las marcas de confianza que trabajan con nosotros.
        </p>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 justify-center">
        {brands.map((brand) => (
          <Link key={brand.id} href={`/brands/${brand.slug}`}>
            <div className="p-6 bg-gray-50 hover:bg-[#70ad47] hover:text-white rounded-xl border border-gray-200 hover:border-[#70ad47] transition-all text-center group">
              <div className="w-14 h-14 mx-auto mb-3 bg-[#70ad47]/10 group-hover:bg-white/20 rounded-full flex items-center justify-center">
                <span className="text-xl font-bold text-[#70ad47] group-hover:text-white">
                  {brand.name.slice(0, 2).toUpperCase()}
                </span>
              </div>
              <p className="font-semibold text-sm">{brand.name}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}