import Link from 'next/link';
import type { Metadata } from 'next';
import { getArtisans } from '@/lib/catalog';
import { ROUTES } from '@/lib/routes';
import { ArtisanCard } from '@/components/artisans/artisan-card';

export const metadata: Metadata = { title: 'Artisan Marketplace' };

export default async function ArtisanMarketplacePage() {
  const artisans = await getArtisans();

  return (
    <>
      <section className="border-b border-navy-100 bg-beige py-10">
        <div className="container-page">
          <h1 className="text-3xl font-serif font-bold text-navy-800">Artisan Marketplace</h1>
          <p className="mt-2 max-w-2xl text-sm text-navy-600">Meet the makers behind CeylonHandicrafts.lk — browse artisan profiles and shop directly from their stores.</p>
        </div>
      </section>

      <section className="py-14">
        <div className="container-page">
          {artisans.length > 0 ? (
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {artisans.map((artisan) => (
                <ArtisanCard key={artisan.id} artisan={artisan} />
              ))}
            </div>
          ) : (
            <p className="text-center text-sm text-navy-600">No artisan stores are live yet — check back soon.</p>
          )}
        </div>
      </section>

      <section className="bg-navy-800">
        <div className="container-page flex flex-col items-center justify-between gap-6 py-12 text-center md:flex-row md:text-left">
          <div>
            <h3 className="text-2xl font-serif font-bold text-white">Are You a Sri Lankan Artisan?</h3>
            <p className="mt-2 text-navy-100/80">List your handcrafted products and reach thousands of customers islandwide.</p>
          </div>
          <Link href={ROUTES.vendorShow} className="btn-primary shrink-0">Join as a Vendor</Link>
        </div>
      </section>
    </>
  );
}