From 0351c47684c3d1cb123bcd4aba8a49b0788e7bfb Mon Sep 17 00:00:00 2001
From: Jacky Ser <jacky@MacBook-Pro-5.local>
Date: Tue, 11 Aug 2026 00:00:14 +0800
Subject: [PATCH] Add custom servo contact path

---
 app/globals.css | 16 ++++++++++
 app/page.tsx    | 82 +++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 4b9a21d..a9073d7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -218,6 +218,22 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
 .success-card h3 { margin: 0; }
 .success-card > p:not(.step-kicker) { color: #66776f; font-size: 10px; }
 .success-card .outline-button { min-height: 38px; }
+.custom-result-card {
+  padding: 22px;
+  display: grid;
+  grid-template-columns: 58px 1fr;
+  gap: 10px 16px;
+  border: 1px solid #bdd0f2;
+  border-radius: 15px;
+  background: linear-gradient(145deg, #f7faff, #edf4ff);
+}
+.custom-result-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, #397fff, #1454d0); font-size: 13px; font-weight: 850; box-shadow: 0 10px 22px rgba(24,94,232,.2); }
+.custom-result-card > div:nth-child(2) > span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
+.custom-result-card h3 { margin: 4px 0 7px; font-size: 18px; line-height: 1.35; }
+.custom-result-card > div:nth-child(2) > p { margin: 0; color: #6d7b91; font-size: 10px; line-height: 1.65; }
+.custom-requirement-grid { grid-column: 1 / -1; margin-top: 8px; }
+.custom-notes { grid-column: 1 / -1; margin: 2px 0 0; padding: 10px 12px; border-radius: 8px; color: #5d6c82; background: rgba(255,255,255,.8); font-size: 9px; line-height: 1.6; }
+.custom-contact-form { border-color: #afc8f2; }
 
 .capability-strip { padding: 28px max(32px, calc((100vw - 1120px) / 2)); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: white; }
 .capability-strip div { display: grid; gap: 4px; text-align: center; border-right: 1px solid rgba(255,255,255,.13); }
diff --git a/app/page.tsx b/app/page.tsx
index acdad94..dd23f18 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -65,7 +65,8 @@ function getFeaturedSpecs(product: CatalogProduct) {
 
 const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
 const SILENT_SERVO_CATEGORY = "静音舵机";
-const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY];
+const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
+const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY, CUSTOM_SERVO_CATEGORY];
 const TORQUE_MIN = 0.09;
 const TORQUE_MAX = 920;
 const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];
@@ -447,7 +448,9 @@ export default function Home() {
                         <option value="全部舵机">全部舵机（243款）</option>
                         {SELECTOR_CATEGORIES.map((category) => (
                           <option key={category} value={category}>
-                            {category}（{getCategoryCount(category)}款）
+                            {category === CUSTOM_SERVO_CATEGORY
+                              ? `${category}（联系我们）`
+                              : `${category}（${getCategoryCount(category)}款）`}
                           </option>
                         ))}
                       </select>
@@ -644,7 +647,80 @@ export default function Home() {
             </div>
           )}
 
-          {stage === 4 && top && (
+          {stage === 4 && requirements.category === CUSTOM_SERVO_CATEGORY && (
+            <div className="result-panel custom-result-panel">
+              <div className="result-heading">
+                <div>
+                  <p className="step-kicker">非标准舵机定制</p>
+                  <h2>已生成定制需求摘要</h2>
+                </div>
+                <button type="button" className="restart-button" onClick={reset}>重新填写</button>
+              </div>
+
+              <div className="custom-result-card">
+                <div className="custom-result-mark">ODM</div>
+                <div>
+                  <span>高徳乐工程定制</span>
+                  <h3>目录型号无法覆盖？可进行非标结构与性能评估</h3>
+                  <p>支持特殊尺寸、扭矩、角度、控制协议、静音、防水、线材与安装结构等定制需求。</p>
+                </div>
+                <div className="metric-grid custom-requirement-grid">
+                  <Metric label="最低堵转扭矩" value={`${formatTorque(requirements.torque)} kgf·cm`} />
+                  <Metric label="额定电压" value={`${requirements.voltage.toFixed(1)}V`} />
+                  <Metric label="操作角度" value={requirements.angle} />
+                  <Metric label="控制 / 通讯" value={requirements.control} />
+                  <Metric label="首次采购数量" value={requirements.firstOrderQuantity ? `${requirements.firstOrderQuantity}只` : "待确认"} />
+                  <Metric label="年度用量" value={requirements.annualVolume} />
+                </div>
+                {requirements.otherRequirements && (
+                  <p className="custom-notes"><strong>其他要求：</strong>{requirements.otherRequirements}</p>
+                )}
+              </div>
+
+              {!showSampleForm && (
+                <div className="result-actions">
+                  <button className="panel-primary" type="button" onClick={() => setShowSampleForm(true)}>
+                    联系我们 · 提交定制需求 <span>→</span>
+                  </button>
+                  <button className="outline-button" type="button" onClick={() => window.print()}>打印 / 保存需求</button>
+                </div>
+              )}
+
+              {showSampleForm && !submitted && (
+                <form className="sample-form custom-contact-form" onSubmit={submitLead}>
+                  <div>
+                    <p className="step-kicker">联系我们</p>
+                    <h3>留下项目联系方式</h3>
+                    <p>提交后将生成定制需求卡，正式版可自动进入CRM并通知工程师跟进。</p>
+                  </div>
+                  <div className="form-grid">
+                    <label><span>公司名称</span><input required name="company" placeholder="请输入公司名称" /></label>
+                    <label><span>联系人</span><input required name="name" placeholder="姓名" /></label>
+                    <label><span>手机号</span><input required name="phone" inputMode="tel" placeholder="用于方案确认" /></label>
+                    <label><span>邮箱（选填）</span><input name="email" type="email" placeholder="接收定制方案" /></label>
+                  </div>
+                  <label className="full-field">
+                    <span>补充说明</span>
+                    <textarea name="notes" defaultValue={requirements.otherRequirements} placeholder="请补充结构图、安装空间、认证或交期要求" />
+                  </label>
+                  <button className="panel-primary" type="submit">提交定制需求 <span>→</span></button>
+                  <small className="demo-disclaimer">当前为内部演示，不会向外部系统发送信息。</small>
+                </form>
+              )}
+
+              {submitted && (
+                <div className="success-card">
+                  <div className="success-icon">✓</div>
+                  <p className="step-kicker">定制需求卡已生成</p>
+                  <h3>需求编号 {leadId}</h3>
+                  <p>需求已标记为“非标准舵机定制”。正式版上线后将自动通知销售与工程师联合评估。</p>
+                  <button type="button" className="outline-button" onClick={reset}>继续填写另一项需求</button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {stage === 4 && requirements.category !== CUSTOM_SERVO_CATEGORY && top && (
             <div className="result-panel">
               <div className="result-heading">
                 <div>