销售电话话术工具

你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。请为「{company_name}」构建一个销售电话话术工具：按通话类型生成可照读的五段式话术，配异议应对库和练习模式。

## 角色与背景
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。

## 项目目标
为 {company_name} 构建一个话术工具，让销售在打电话前 1 分钟内拿到一份结构完整的话术，并能随时查异议应对、做开口练习。

## 目标用户
{company_name} 的电话销售团队，主推 {product_service}，很多是新手，需要照稿开口、越练越熟。

## 核心体验与页面
- 话术生成器：选择通话类型（陌生电话／跟进／续约挽留）和客户类型，生成五段式话术卡：开场 30 秒、提问清单、价值介绍（含 {price_range} 的报价说法）、异议应对、收尾约定，每段可单独复制。
- 异议应对库：内置常见异议（「太贵了」「我考虑一下」「已有供应商」）与应对话术，可新增和编辑自己的版本。
- 练习模式：逐段翻卡朗读，开场配 30 秒倒计时，练完显示完成度。

## 主要工作流程
1. 销售选好通话类型和客户类型，生成话术。
2. 打电话时照结构走，遇到异议随手点开应对库。
3. 通话后把有效的说法保存回库里。
4. 新人每天用练习模式过一遍开场和异议。

## 业务规则
- 开场 30 秒必须包含：自我介绍、来电理由、征得许可的提问。
- 介绍价值前至少先问三个了解需求的问题。
- 异议应对固定三步：先认同、再回应、后反问。
- 每通电话必须以具体下一步收尾（约时间、发资料、加 WhatsApp）。

## 设计方向
- 白色背景，深海军蓝（#0F172A）标题区，主按钮金黄色（#FCD34D），话术分段编号清晰。
- 练习模式全屏大字，适合边看边讲。

## 构建方法
- 使用 Next.js 14（App Router）+ Tailwind CSS；数据保存在浏览器本地（localStorage），无需登录。
- 用真实感的马来西亚 B2B 通话示例演示。
- 先给出简短实施计划，优先做「话术生成器」主路径，说明如何运行和测试。

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