# Implementer — F-014 Storefront catalog pages (SSG/ISR)

## Summary
Implemented storefront catalog pages for product detail, category listing, brand listing and search results using Next.js App Router server components, ISR, per-page metadata/OpenGraph, typed public API client functions and on-demand revalidation.

## Code changes
- Extended backend public search filter:
  - `project/src/modules/catalog/domain/product.ts` adds `categorySlug` to search criteria.
  - `project/src/modules/catalog/application/product-use-cases.ts` forwards `categorySlug`.
  - `project/src/modules/catalog/api/catalog.routes.ts` accepts/logs `categorySlug` on `/products/search`.
  - `project/src/modules/catalog/infrastructure/pg-product-search-repository.ts` filters products by category slug through public catalog/category tables.
  - `project/src/modules/catalog/tests/product-use-cases.test.ts` covers forwarding `brandSlug` and `categorySlug` through the search port.
- Extended storefront API client:
  - `project/storefront/src/lib/api.ts` adds `CategoryDto`, `BrandDto`, `getCategoryBySlug`, `getBrandBySlug`, `listCategoryTree`, and `categorySlug` search input.
  - `project/storefront/src/lib/seo.ts` centralizes site URL/title helpers.
- Added catalog UI:
  - `project/storefront/src/components/product-card.tsx`.
  - `project/storefront/src/app/productos/[slug]/page.tsx` product detail route.
  - `project/storefront/src/app/categoria/[slug]/page.tsx` category listing route.
  - `project/storefront/src/app/marca/[slug]/page.tsx` brand listing route.
  - `project/storefront/src/app/products/search/page.tsx` search results route.
- Added on-demand revalidation:
  - `project/storefront/src/app/api/revalidate/route.ts` validates `REVALIDATE_SECRET` with `timingSafeEqual`, accepts supported catalog paths only, and calls `revalidatePath`.

## Rendering/SEO behavior
- Product/category/brand pages export `revalidate = 300` and `generateStaticParams() { return []; }`, allowing SSG/ISR generation without requiring a live backend at build time.
- Search page exports `revalidate = 120`.
- Search page bounds displayed/metadata query text to 200 characters before rendering or metadata generation.
- Product/category/brand/search pages export `generateMetadata` with title, description, canonical URL and OpenGraph data.
- Product page uses `/productos/<slug>` and never exposes internal ids in the URL.
- All pages are server components; no client components added.

## Evidence
- `cd project/storefront && npm run lint` — PASS.
- `cd project/storefront && npm run typecheck` — PASS.
- `cd project/storefront && npm run build` — PASS; Next output shows SSG routes for `/productos/[slug]`, `/categoria/[slug]`, `/marca/[slug]` and dynamic `/products/search` plus `/api/revalidate`.
- `cd project/storefront && npm run lint` after build — PASS.
- `cd project && npm run lint` — PASS.
- `cd project && npm run typecheck` — PASS.
- `cd project && npm test` — PASS: 17 files passed, 7 skipped; 64 passed, 33 skipped.
- `./scripts/verify.sh` — PASS.
- Internal review correction run: bounded search query text in search page, then storefront lint/typecheck/build/lint, backend lint/typecheck/test and verify all reran and passed.
- Security correction run: revalidation secret comparison changed to timing-safe comparison, then storefront lint/typecheck/build/lint, backend lint/typecheck/test and verify all reran and passed.

## Notes
- Lighthouse tooling is not installed; SEO score criterion is evidenced structurally: SSR/SSG pages, semantic content, metadata/OpenGraph, canonical URLs and no client JavaScript added for these pages.
- No cart or checkout UI added.