搭建客服回复工具：粘贴顾客信息、选好语气，三条可直接发送的 WhatsApp 回复即刻生成
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。请为「{company_name}」（{business_type}）构建一个 WhatsApp 客服回复助手：员工把顾客信息粘贴进来，几秒内拿到三条可直接发送的回复。
## 角色与背景
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。
## 项目目标
为 {company_name} 构建一个网页工具，让员工粘贴顾客的 WhatsApp 信息、选择情境和语气，立即生成三条贴合品牌的回复，一键复制发送。
## 目标用户
{company_name} 的客服与门店员工，工作繁忙、常用手机操作，非技术人员。
## 核心体验与页面
- 回复工作台：粘贴顾客信息，选择情境（询价、订单进度、投诉、售后、预约）与语气（亲切／专业），生成三张不同风格的回复卡片（可切换中英文），每张带一键复制按钮和 WhatsApp 风格气泡预览。
- 模板库：按情境分类保存常用回复，支持新增、编辑、删除、搜索；模板中可插入商家信息（如营业时间、运费）。
- 商家设置：填写营业时间、配送费、付款方式和主打产品 {main_products}，生成回复时自动带入。
## 主要工作流程
1. 顾客在 WhatsApp 发来问题，员工复制粘贴到工作台。
2. 选好情境和语气，生成三条回复。
3. 挑一条微调后复制，回 WhatsApp 发送。
4. 好用的回复一键存入模板库，下次直接调用。
## 业务规则
- 每条回复最多三句话，口语化，结尾带一个推进问题（如「请问方便留下订单号吗？」）。
- 投诉情境必须先道歉、不争辩，并给出具体解决步骤和时限。
- 询价回复先讲价值再报价，最后引导下一步行动。
- 生成逻辑用内置模板加规则组合即可，无需接入 AI 接口。
## 设计方向
- 白色背景，深海军蓝（#0F172A）顶栏，主按钮金黄色（#FCD34D）；WhatsApp 绿只用于气泡预览。
- 手机优先布局，按钮大、字体清晰，复制成功有明显提示。
## 构建方法
- 使用 Next.js 14（App Router）+ Tailwind CSS；数据保存在浏览器本地（localStorage），无需登录。
- 用贴近真实的马来西亚示例数据（顾客问题、模板）演示。
- 先给出简短实施计划，优先做「回复工作台」这条主路径，说明如何运行和测试。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。