import type { Metadata } from "next";
import { Button } from "@/components/ui/button";
import { ItemCard } from "@/components/item-card";
import Link from "next/link";
import { api } from "@/lib/api";
import { buildMetadata } from "@/lib/seo";

export const metadata: Metadata = buildMetadata({
  title: "Discover Unique Resale Finds",
  description:
    "Shop curated secondhand clothing, shoes, accessories, and home goods from verified resale stores.",
  canonical: "https://alqove.com/",
});

export default async function HomePage() {
  // Fetch newest items + category tree in parallel
  const [itemsRes, catRes] = await Promise.all([
    api.items.browse({ sort: "newest", per_page: 8 }),
    api.categories.list(),
  ]);

  const justListed = itemsRes.data ?? [];
  const categories = catRes.data ?? [];

  return (
    <div>
      {/* Hero */}
      <section className="bg-white border-b border-slate-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <h1 className="text-5xl font-bold tracking-tight text-slate-900">
            Discover Unique Finds
          </h1>
          <p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">
            Shop curated resale from verified stores. Every item is one-of-a-kind.
            Every purchase keeps clothing out of landfills.
          </p>
          <div className="mt-8">
            <Button asChild size="lg">
              <Link href="/items">Shop Now</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="mx-auto max-w-7xl px-4 py-10">
        <div className="flex gap-3 justify-center flex-wrap">
          {categories.map((cat) => (
            <Link
              key={cat.id}
              href={`/items?category_slug=${cat.slug}`}
              className="px-5 py-2.5 rounded-full border border-slate-300 text-sm font-medium text-slate-600 hover:border-forest-600 hover:text-forest-600 transition-colors"
            >
              {cat.name}
            </Link>
          ))}
        </div>
      </section>

      {/* Just Listed */}
      <section className="mx-auto max-w-7xl px-4 pb-10">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-bold text-slate-900">Just Listed</h2>
          <Link href="/items" className="text-sm font-medium text-forest-600 hover:text-forest-700">
            View all &#8594;
          </Link>
        </div>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
          {justListed.map((item) => (
            <ItemCard
              key={item.id}
              item={{
                id: item.id ?? "",
                title: item.title ?? "",
                brand: item.brand ?? undefined,
                price: item.price ?? 0,
                condition: item.condition ?? "",
                storeName: item.store?.name ?? "",
                imageUrl: item.thumbnail_url ?? undefined,
                storeAverageRating: null,
                storeReviewCount: null,
              }}
            />
          ))}
        </div>
      </section>

      {/* Why Alqove */}
      <section className="bg-white border-t border-slate-200">
        <div className="mx-auto max-w-7xl px-4 py-14">
          <h2 className="text-xl font-bold text-slate-900 text-center mb-8">Why Alqove</h2>
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            <div className="text-center">
              <div className="text-3xl mb-3">&#10003;</div>
              <h3 className="font-semibold text-slate-900">Verified Stores Only</h3>
              <p className="mt-1 text-sm text-slate-500">
                Every store on Alqove is a vetted resale business. No individual sellers, no guesswork.
              </p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-3">&#127793;</div>
              <h3 className="font-semibold text-slate-900">Sustainable Fashion</h3>
              <p className="mt-1 text-sm text-slate-500">
                Every purchase keeps clothing out of landfills. Look great, feel good about it.
              </p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-3">&#8635;</div>
              <h3 className="font-semibold text-slate-900">Full Refund Guarantee</h3>
              <p className="mt-1 text-sm text-slate-500">
                Not as described? Full refund, every time. Alqove is the trust mark.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}