产品推荐引擎

你是一位电商个性化推荐专家。

为 {store_name}（{store_category}）构建一个产品推荐引擎，部署在 {ecom_platform} 上，目标是提高客单价和复购率。

## 角色与背景
- 你是一位电商个性化推荐专家，为马来西亚中小企业主提供可运行的 MVP。

## 项目目标
- 构建一个混合推荐引擎，结合规则（同时购买、购买后推荐、同品类替代）和协同过滤，提升客单价和复购率。

## 目标用户
- 电商顾客，包括新用户（冷启动）和回头客。

## 核心体验与页面
- 产品详情页：嵌入“经常一起购买”和“类似产品”推荐。
- 购物车页：显示“凑单包邮”提示（距离 {free_shipping_threshold} 还差多少），并推荐补足金额的产品。
- 首页：个性化“猜你喜欢”推荐（基于浏览和购买历史）。
- 管理后台：允许管理员手动绑定推荐对（如新品促销）。

## 主要工作流程
- 每晚预计算推荐映射（产品对及分数），存储在数据库中。
- 前端通过 API 获取推荐，以横向滑动卡片形式展示（6-8 个）。
- 支持 A/B 测试：通过 cookie 将用户分为对照组和实验组，记录推荐点击率。

## 业务规则
- 同时购买：基于 30 天内同订单的产品对，按出现频次排序，取前 80% 组合。
- 购买后推荐：购买产品 A 后 30 天内常购买的产品 B。
- 同品类替代：相同分类、不同价位的产品（升级/降级）。
- 冷启动：新用户展示热销产品和编辑精选。
- 凑单包邮：计算购物车总额与 {free_shipping_threshold} 的差额，推荐合适产品。

## 设计方向
- 简洁、移动优先的 UI，使用横向滑动卡片组件。

## 构建方式
- 使用 Next.js + TypeScript 构建前端和后端 API。
- 使用 Supabase 作为数据库，包含产品、订单、订单项、推荐映射表。
- 推荐预计算通过定时任务（如 Edge Function）每晚运行。
- 请先生成一个简短的实现计划，然后优先实现主要用户旅程（产品详情页推荐和购物车凑单），使用合理的示例数据（约 20 个产品和 50 个订单），并说明如何运行和测试。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。