"use client";

import { FormEvent, useMemo, useState } from "react";
import {
  CATALOG_COUNTS,
  CATALOG_PRODUCTS,
  type CatalogProduct,
} from "./catalog-data";

type Requirements = {
  application: string;
  category: string;
  torque: number;
  voltage: number;
  weightLimit: number;
  angle: string;
  control: string;
  gear: string;
  annualVolume: string;
  firstOrderQuantity: string;
  currentModel: string;
  otherRequirements: string;
  painPoint: string;
};

const APPLICATIONS = [
  { name: "AI毛绒", note: "头部、耳朵、手臂等轻量动作" },
  { name: "智能玩具", note: "互动机构、表情和行走结构" },
  { name: "教育/积木", note: "STEAM套件与积木动力模块" },
  { name: "微型机器人", note: "关节、夹爪和小型机械臂" },
  { name: "云台/航模", note: "飞行控制、云台与模型机构" },
  { name: "工业设备", note: "控制机构与定制传动组件" },
];

const CATALOG_CATEGORIES = [
  "全部产品",
  "标准舵机",
  "异形舵机",
  "全金属舵机",
  "大扭矩舵机",
  "积木舵机",
  "标准齿轮箱",
  "翻盖电机",
];

const FEATURED_SPEC_ORDER = [
  "堵转扭矩",
  "额定电压",
  "电压范围",
  "信号类型",
  "通讯方式",
  "齿轮比",
  "寿命",
  "产品尺寸",
  "外形尺寸",
];

function getFeaturedSpecs(product: CatalogProduct) {
  return FEATURED_SPEC_ORDER
    .filter((label) => product.specs[label])
    .slice(0, 3)
    .map((label) => [label, product.specs[label]] as const);
}

const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
const TORQUE_MIN = 0.09;
const TORQUE_MAX = 920;
const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];

const APPLICATION_CATEGORY_MAP: Record<string, string[]> = {
  AI毛绒: ["标准舵机", "异形舵机"],
  智能玩具: ["标准舵机", "异形舵机", "积木舵机"],
  "教育/积木": ["积木舵机", "标准舵机"],
  微型机器人: ["标准舵机", "异形舵机", "全金属舵机"],
  "云台/航模": ["标准舵机", "全金属舵机"],
  工业设备: ["全金属舵机", "大扭矩舵机", "异形舵机"],
};

function parseNumbers(value = "") {
  return (value.match(/\d+(?:\.\d+)?/g) ?? []).map(Number);
}

function inferWeight(product: CatalogProduct) {
  const listedWeight = parseNumbers(product.specs["重量"])[0];
  if (Number.isFinite(listedWeight)) return listedWeight;
  if (product.category !== "标准舵机") return null;
  const namedWeight = product.name.match(/(\d+(?:\.\d+)?)\s*(?:g|克)/i);
  return namedWeight ? Number(namedWeight[1]) : null;
}

function classifyGear(value = "") {
  const hasPlastic = /塑胶|塑料/.test(value);
  const hasMetal = /金属|铜|粉末冶金|滚齿/.test(value);
  if (hasPlastic && hasMetal) return "混合齿";
  if (hasMetal) return "全金属齿";
  if (hasPlastic) return "塑胶齿";
  return "未标注";
}

function controlMatches(control: string, productControl: string) {
  if (control === "不限") return true;
  const value = productControl.toUpperCase();
  if (control === "PWM/三线") return value.includes("PWM") || /3线|3PIN/.test(value);
  if (control === "串口/TTL") return value.includes("TTL") || value.includes("串口");
  if (control === "二/四/五线") return /[245]线|[245]PIN/.test(value);
  return value.includes(control.toUpperCase());
}

function angleMatches(angle: string, productAngle: string) {
  if (angle === "不限") return true;
  if (!productAngle) return false;
  const firstAngle = parseNumbers(productAngle)[0] ?? 0;
  if (angle === "135°") return firstAngle > 0 && firstAngle <= 135;
  if (angle === "180°") return firstAngle > 135 && firstAngle <= 180;
  if (angle === "270–330°") return firstAngle >= 270 && firstAngle < 360;
  return productAngle.includes("多圈") || firstAngle >= 360;
}

function formatTorque(value: number) {
  if (value < 1) return value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
  if (value < 100) return value.toFixed(1).replace(/\.0$/, "");
  return Math.round(value).toString();
}

function torqueToSlider(value: number) {
  return ((Math.log(value) - Math.log(TORQUE_MIN)) / (Math.log(TORQUE_MAX) - Math.log(TORQUE_MIN))) * 100;
}

function sliderToTorque(position: number) {
  const value = Math.exp(
    Math.log(TORQUE_MIN) + (position / 100) * (Math.log(TORQUE_MAX) - Math.log(TORQUE_MIN)),
  );
  if (value < 1) return Number(value.toFixed(2));
  if (value < 100) return Number(value.toFixed(1));
  return Math.round(value);
}

const SELECTOR_PRODUCTS = CATALOG_PRODUCTS.filter((product) =>
  SERVO_CATEGORIES.includes(product.category),
).map((product) => {
  const voltageValues = parseNumbers(product.specs["电压范围"]);
  const ratedVoltage = product.ratedVoltage ?? 0;
  const control = [
    product.specs["信号类型"],
    product.specs["通讯方式"],
    product.specs["端子连接线"],
    product.specs["连接线类型"],
  ].filter(Boolean).join(" · ");
  return {
    ...product,
    torque: product.torqueValue ?? 0,
    voltageMin: voltageValues[0] ?? ratedVoltage,
    voltageMax: voltageValues.at(-1) ?? ratedVoltage,
    weight: inferWeight(product),
    gear: classifyGear(product.specs["齿轮材质"]),
    angle: product.specs["可操作角度"] ?? product.specs["操作角度范围"] ?? "",
    control,
    speed: product.specs["空载速度"] ?? product.specs["转动速度"] ?? "",
    size: product.specs["产品尺寸"] ?? product.specs["外形尺寸"] ?? "",
  };
});

const DEFAULT_REQUIREMENTS: Requirements = {
  application: "",
  category: "全部舵机",
  torque: 2,
  voltage: 5,
  weightLimit: 0,
  angle: "不限",
  control: "不限",
  gear: "不限",
  annualVolume: "5000–50000件",
  firstOrderQuantity: "",
  currentModel: "",
  otherRequirements: "",
  painPoint: "交期",
};

function getMatches(requirements: Requirements) {
  return SELECTOR_PRODUCTS.map((product) => {
    let score = 20;
    const reasons: string[] = [];
    const categoryOk =
      requirements.category === "全部舵机" || requirements.category === product.category;
    const torqueOk = product.torque >= requirements.torque;
    const voltageOk =
      requirements.voltage >= product.voltageMin && requirements.voltage <= product.voltageMax;
    const weightOk =
      requirements.weightLimit === 0 || product.weight === null || product.weight <= requirements.weightLimit;
    const gearOk = requirements.gear === "不限" || requirements.gear === product.gear;
    const angleOk = angleMatches(requirements.angle, product.angle);
    const controlOk = controlMatches(requirements.control, product.control);
    const coreCompatible = categoryOk && torqueOk && voltageOk && weightOk && gearOk && angleOk && controlOk;

    if (categoryOk) score += requirements.category === "全部舵机" ? 6 : 16;
    else score -= 120;

    if (APPLICATION_CATEGORY_MAP[requirements.application]?.includes(product.category)) {
      score += 12;
      reasons.push(`适合${requirements.application}场景`);
    }

    if (torqueOk) {
      const ratio = product.torque / requirements.torque;
      score += Math.max(5, 28 - Math.log10(Math.max(1, ratio)) * 9);
      const margin = Math.round((product.torque / requirements.torque - 1) * 100);
      reasons.push(`扭矩满足，约有${Math.max(0, margin)}%余量`);
    } else {
      score -= 120;
    }

    if (voltageOk) {
      score += 22;
      reasons.push(`${requirements.voltage}V供电兼容`);
    } else {
      score -= 90;
    }

    if (requirements.weightLimit > 0) {
      if (product.weight === null) score -= 6;
      else if (weightOk) {
        score += 10;
        reasons.push(`重量${product.weight}g，符合上限`);
      } else score -= 45;
    }

    if (requirements.gear !== "不限") score += gearOk ? 10 : -40;
    if (requirements.angle !== "不限") score += angleOk ? 10 : -40;
    if (requirements.control !== "不限") score += controlOk ? 12 : -50;

    if (requirements.painPoint === "成本" && product.gear === "塑料齿") score += 8;
    if (requirements.painPoint === "耐久" && product.gear === "全金属齿") score += 8;
    if (requirements.painPoint === "体积" && product.weight !== null && product.weight <= 9) score += 8;

    return {
      product,
      score,
      coreCompatible,
      confidence: Math.max(48, Math.min(97, Math.round(score))),
      reasons: reasons.slice(0, 3),
    };
  }).sort((a, b) => Number(b.coreCompatible) - Number(a.coreCompatible) || b.score - a.score);
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <div className="metric">
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

export default function Home() {
  const [stage, setStage] = useState(0);
  const [requirements, setRequirements] = useState(DEFAULT_REQUIREMENTS);
  const [showSampleForm, setShowSampleForm] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [leadId, setLeadId] = useState("");
  const [catalogQuery, setCatalogQuery] = useState("");
  const [catalogCategory, setCatalogCategory] = useState("全部产品");
  const [catalogLimit, setCatalogLimit] = useState(24);
  const [selectedCatalogProduct, setSelectedCatalogProduct] = useState<CatalogProduct | null>(null);

  const matches = useMemo(() => getMatches(requirements), [requirements]);
  const topMatches = matches.slice(0, 3);
  const top = topMatches[0];
  const compatibleCount = matches.filter((match) => match.coreCompatible).length;
  const filteredCatalog = useMemo(() => {
    const query = catalogQuery.trim().toLowerCase();
    return CATALOG_PRODUCTS.filter((product) => {
      const matchesCategory =
        catalogCategory === "全部产品" || product.category === catalogCategory;
      if (!matchesCategory) return false;
      if (!query) return true;
      const haystack = [
        product.name,
        product.code,
        product.category,
        ...Object.keys(product.specs),
        ...Object.values(product.specs),
      ]
        .join(" ")
        .toLowerCase();
      return haystack.includes(query);
    });
  }, [catalogCategory, catalogQuery]);
  const visibleCatalog = filteredCatalog.slice(0, catalogLimit);
  const needsEngineer =
    !top?.coreCompatible ||
    requirements.annualVolume === "50000件以上" ||
    Number(requirements.firstOrderQuantity) >= 1000 ||
    requirements.application === "工业设备";

  function update<K extends keyof Requirements>(key: K, value: Requirements[K]) {
    setRequirements((current) => ({ ...current, [key]: value }));
  }

  function reset() {
    setStage(1);
    setRequirements(DEFAULT_REQUIREMENTS);
    setShowSampleForm(false);
    setSubmitted(false);
  }

  function submitLead(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const id = `GDL-${new Date().toISOString().slice(5, 10).replace("-", "")}-${String(
      Date.now(),
    ).slice(-4)}`;
    setLeadId(id);
    setSubmitted(true);
  }

  return (
    <main>
      <header className="site-header">
        <a className="brand" href="#top" aria-label="高徳乐 AI选型首页">
          <span className="brand-mark">G</span>
          <span>
            <strong>GAUDELOT</strong>
            <small>高徳乐 · 精密传动</small>
          </span>
        </a>
        <nav aria-label="主导航">
          <a href="#selector">AI选型</a>
          <a href="#products">完整目录</a>
          <a href="#how">服务流程</a>
        </nav>
        <button className="header-cta" type="button" onClick={() => setStage(1)}>
          开始选型 <span>→</span>
        </button>
      </header>

      <section className="hero" id="top">
        <div className="hero-copy">
          <div className="eyebrow"><span /> AI 智能选型 · 工程师复核</div>
          <h1>
            3分钟，找到<br />
            <em>适合你的舵机</em>
          </h1>
          <p className="hero-lead">
            告诉我们应用、扭矩与结构限制。AI从高徳乐完整舵机目录中生成候选方案，
            同步准备样品与替代选型摘要。
          </p>
          <div className="hero-actions">
            <button className="primary-action" type="button" onClick={() => setStage(1)}>
              免费开始选型 <span>→</span>
            </button>
            <a href="#products" className="text-action">查看能力范围</a>
          </div>
          <div className="trust-row">
            <span><b>280</b> 个产品型号</span>
            <span><b>0.09–920</b> kgf·cm</span>
            <span><b>48h</b> 方案响应</span>
          </div>
        </div>

        <div className="selector-shell" id="selector">
          <div className="selector-topbar">
            <div>
              <span className="live-dot" /> AI 选型助手
            </div>
            <span className="secure-note">仅作初选建议</span>
          </div>

          {stage === 0 && (
            <div className="welcome-panel">
              <div className="assistant-avatar">AI</div>
              <p className="assistant-label">高徳乐选型助手</p>
              <h2>你好，我来帮你缩小选型范围。</h2>
              <p>回答3组问题，即可获得推荐型号、匹配理由和样品申请入口。</p>
              <button className="panel-primary" type="button" onClick={() => setStage(1)}>
                开始回答 <span>预计3分钟</span>
              </button>
              <div className="privacy-note">✓ 无需注册即可查看选型结果</div>
            </div>
          )}

          {stage > 0 && stage < 4 && (
            <div className="question-panel">
              <div className="progress-wrap" aria-label={`选型进度 ${stage}/3`}>
                <div className="progress-labels">
                  <span>需求识别</span>
                  <strong>{stage} / 3</strong>
                </div>
                <div className="progress-track"><i style={{ width: `${stage * 33.33}%` }} /></div>
              </div>

              {stage === 1 && (
                <div className="question-step">
                  <p className="step-kicker">第一步 · 使用场景</p>
                  <h2>舵机将用在什么产品上？</h2>
                  <p className="step-help">选择最接近的一项，后续可以补充具体结构。</p>
                  <div className="choice-grid">
                    {APPLICATIONS.map((item) => (
                      <button
                        type="button"
                        key={item.name}
                        className={`choice-card ${requirements.application === item.name ? "selected" : ""}`}
                        onClick={() => update("application", item.name)}
                      >
                        <b>{item.name}</b>
                        <small>{item.note}</small>
                        <span className="choice-check">✓</span>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {stage === 2 && (
                <div className="question-step">
                  <p className="step-kicker">第二步 · 核心参数</p>
                  <h2>输入舵机的关键技术要求</h2>
                  <p className="step-help">已覆盖243款舵机：0.09–920 kgf·cm、0.8–30V；不确定的项目可选“不限”。</p>
                  <div className="two-fields compact-fields">
                    <label className="select-field">
                      <span>目标产品系列</span>
                      <select
                        value={requirements.category}
                        onChange={(event) => update("category", event.target.value)}
                      >
                        <option value="全部舵机">全部舵机（243款）</option>
                        {SERVO_CATEGORIES.map((category) => (
                          <option key={category} value={category}>
                            {category}（{CATALOG_COUNTS[category]}款）
                          </option>
                        ))}
                      </select>
                    </label>
                    <label className="select-field">
                      <span>系统工作电压（0.8–30V）</span>
                      <input
                        className="parameter-input"
                        type="number"
                        min="0.8"
                        max="30"
                        step="0.1"
                        list="voltage-values"
                        value={requirements.voltage}
                        onChange={(event) => update("voltage", Number(event.target.value))}
                      />
                      <datalist id="voltage-values">
                        {[1.2, 2.7, 3.7, 4.2, 5, 6, 7.4, 8.4, 9, 12, 16.8, 24, 28, 30].map((voltage) => (
                          <option key={voltage} value={voltage} />
                        ))}
                      </datalist>
                    </label>
                  </div>
                  <div className="field-stack">
                    <div className="field-label">
                      <label htmlFor="torque">最低堵转扭矩</label>
                      <span className="torque-entry">
                        <input
                          aria-label="最低堵转扭矩精确值"
                          type="number"
                          min={TORQUE_MIN}
                          max={TORQUE_MAX}
                          step="0.01"
                          value={requirements.torque}
                          onChange={(event) => update(
                            "torque",
                            Math.min(TORQUE_MAX, Math.max(TORQUE_MIN, Number(event.target.value) || TORQUE_MIN)),
                          )}
                        />
                        <strong>kgf·cm</strong>
                      </span>
                    </div>
                    <input
                      id="torque"
                      className="range-input"
                      type="range"
                      min="0"
                      max="100"
                      step="0.1"
                      value={torqueToSlider(requirements.torque)}
                      onChange={(event) => update("torque", sliderToTorque(Number(event.target.value)))}
                    />
                    <div className="range-scale"><span>0.09</span><span>1</span><span>10</span><span>100</span><span>920</span></div>
                    <div className="torque-presets" aria-label="常用扭矩快捷值">
                      {TORQUE_PRESETS.map((torque) => (
                        <button
                          key={torque}
                          type="button"
                          className={requirements.torque === torque ? "active" : ""}
                          onClick={() => update("torque", torque)}
                        >{formatTorque(torque)}</button>
                      ))}
                    </div>
                  </div>
                  <div className="parameter-grid">
                    <label className="select-field">
                      <span>单只重量上限</span>
                      <select
                        value={requirements.weightLimit}
                        onChange={(event) => update("weightLimit", Number(event.target.value))}
                      >
                        <option value={0}>不限</option>
                        {[2, 5, 10, 20, 40, 100, 250, 500, 1000, 2000].map((weight) => (
                          <option key={weight} value={weight}>{weight}g以内</option>
                        ))}
                      </select>
                    </label>
                    <label className="select-field">
                      <span>操作角度</span>
                      <select
                        value={requirements.angle}
                        onChange={(event) => update("angle", event.target.value)}
                      >
                        <option>不限</option>
                        <option>135°</option>
                        <option>180°</option>
                        <option>270–330°</option>
                        <option>360°/多圈</option>
                      </select>
                    </label>
                    <label className="select-field">
                      <span>控制 / 通讯方式</span>
                      <select
                        value={requirements.control}
                        onChange={(event) => update("control", event.target.value)}
                      >
                        <option>不限</option>
                        <option>PWM/三线</option>
                        <option>串口/TTL</option>
                        <option>RS485</option>
                        <option>CAN</option>
                        <option>SBUS</option>
                        <option>二/四/五线</option>
                      </select>
                    </label>
                    <label className="select-field">
                      <span>齿轮材质</span>
                      <select
                        value={requirements.gear}
                        onChange={(event) => update("gear", event.target.value)}
                      >
                        <option>不限</option>
                        <option>塑胶齿</option>
                        <option>混合齿</option>
                        <option>全金属齿</option>
                      </select>
                    </label>
                  </div>
                </div>
              )}

              {stage === 3 && (
                <div className="question-step">
                  <p className="step-kicker">第三步 · 项目信息</p>
                  <h2>最后，告诉我采购侧的偏好。</h2>
                  <p className="step-help">这些信息用于调整候选型号的优先级，并由工程师在送样前复核。</p>
                  <div className="two-fields">
                    <label className="select-field">
                      <span>预计年度用量</span>
                      <select
                        value={requirements.annualVolume}
                        onChange={(event) => update("annualVolume", event.target.value)}
                      >
                        <option>500件以内</option>
                        <option>500–5000件</option>
                        <option>5000–50000件</option>
                        <option>50000件以上</option>
                      </select>
                    </label>
                    <label className="select-field">
                      <span>首次采购数量（只）</span>
                      <input
                        className="parameter-input"
                        type="number"
                        min="1"
                        step="1"
                        inputMode="numeric"
                        value={requirements.firstOrderQuantity}
                        onChange={(event) => update("firstOrderQuantity", event.target.value)}
                        placeholder="例如：500"
                      />
                    </label>
                  </div>
                  <div className="two-fields">
                    <label className="select-field">
                      <span>最想解决的问题</span>
                      <select
                        value={requirements.painPoint}
                        onChange={(event) => update("painPoint", event.target.value)}
                      >
                        <option>交期</option>
                        <option>成本</option>
                        <option>耐久</option>
                        <option>体积</option>
                        <option>一致性</option>
                        <option>二供替代</option>
                      </select>
                    </label>
                    <label className="select-field">
                      <span>当前使用型号（选填）</span>
                      <input
                        className="parameter-input"
                        value={requirements.currentModel}
                        onChange={(event) => update("currentModel", event.target.value)}
                        placeholder="例如：SG90 / DS-E001"
                      />
                    </label>
                  </div>
                  <label className="text-field project-notes">
                    <span>其他要求备注（选填）</span>
                    <textarea
                      value={requirements.otherRequirements}
                      onChange={(event) => update("otherRequirements", event.target.value)}
                      placeholder="例如：防水等级、噪音、寿命、认证、安装尺寸、线长或交期要求"
                    />
                  </label>
                </div>
              )}

              <div className="panel-nav">
                <button className="back-button" type="button" onClick={() => setStage(stage - 1)}>← 返回</button>
                <button
                  className="next-button"
                  type="button"
                  disabled={stage === 1 && !requirements.application}
                  onClick={() => setStage(stage + 1)}
                >
                  {stage === 3 ? "生成选型方案" : "继续"} <span>→</span>
                </button>
              </div>
            </div>
          )}

          {stage === 4 && top && (
            <div className="result-panel">
              <div className="result-heading">
                <div>
                  <p className="step-kicker">AI 初选结果</p>
                  <h2>{compatibleCount > 0 ? `找到 ${compatibleCount} 个匹配型号` : "暂无完全匹配型号"}</h2>
                </div>
                <button type="button" className="restart-button" onClick={reset}>重新选型</button>
              </div>

              <div className="best-match">
                <div className="match-image-wrap">
                  <img src={top.product.image} alt={top.product.name} />
                  <span className="match-badge">{top.coreCompatible ? "首选推荐" : "待复核候选"}</span>
                </div>
                <div className="match-content">
                  <div className="match-score"><span>匹配度</span><strong>{top.confidence}%</strong></div>
                  <p className="product-code">{top.product.code}</p>
                  <h3>{top.product.name}</h3>
                  <p className="product-subtitle">{top.product.category} · {top.product.size || "尺寸待复核"}</p>
                  <div className="metric-grid">
                    <Metric label="堵转扭矩" value={`${formatTorque(top.product.torque)} kgf·cm`} />
                    <Metric label="工作电压" value={`${top.product.voltageMin}–${top.product.voltageMax}V`} />
                    <Metric label="空载速度" value={top.product.speed || "目录未标注"} />
                    <Metric label="操作角度" value={top.product.angle || "目录未标注"} />
                    <Metric label="控制 / 通讯" value={top.product.control || "目录未标注"} />
                    <Metric label="齿轮材质" value={top.product.gear} />
                  </div>
                  <ul className="reason-list">
                    {top.reasons.map((reason) => <li key={reason}>✓ {reason}</li>)}
                  </ul>
                  <div className="source-line">
                    <span>官方目录型号</span>
                    <strong>{top.product.category}</strong>
                    <small>价格与交期按用量确认</small>
                  </div>
                </div>
              </div>

              {needsEngineer && (
                <div className="engineer-alert">
                  <span>工程师复核</span>
                  <p>{compatibleCount === 0
                    ? "当前条件没有完全匹配的目录型号，建议调整电压、扭矩余量或发起定制评估。"
                    : "你的项目包含高用量、工业场景或边界参数，系统已标记为优先人工复核。"}</p>
                </div>
              )}

              <div className="alternative-list">
                {topMatches.slice(1).map((match) => (
                  <div className="alternative-card" key={match.product.id}>
                    <img src={match.product.image} alt={match.product.name} />
                    <div>
                      <span>{match.confidence}% 匹配</span>
                      <h4>{match.product.name}</h4>
                      <p>{formatTorque(match.product.torque)} kgf·cm · {match.product.category} · {match.product.gear}</p>
                    </div>
                  </div>
                ))}
              </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" 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><select name="quantity"><option>1–2只</option><option>3–5只</option><option>6–10只</option></select></label>
                  </div>
                  <label className="full-field"><span>补充说明</span><textarea name="notes" 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>推荐型号：{top.product.name}。正式版上线后，此处将自动进入CRM并触发技术复核。</p>
                  <button type="button" className="outline-button" onClick={reset}>继续测试另一组需求</button>
                </div>
              )}
            </div>
          )}
        </div>
      </section>

      <section className="capability-strip" aria-label="高徳乐能力">
        <div><strong>2万㎡</strong><span>研发与制造基地</span></div>
        <div><strong>137台</strong><span>精密注塑设备</span></div>
        <div><strong>1万台/天</strong><span>单线自动化产能</span></div>
        <div><strong>IATF 16949</strong><span>汽车行业质量体系</span></div>
      </section>

      <section className="products-section" id="products">
        <div className="section-heading">
          <div>
            <p className="eyebrow"><span /> 官方产品目录 · 2026.06</p>
            <h2>完整收录280个产品型号</h2>
          </div>
          <p>覆盖标准、异形、全金属、大扭矩和积木舵机，以及标准齿轮箱与翻盖电机。参数来自高徳乐官方产品型号表。</p>
        </div>

        <div className="catalog-summary" aria-label="产品分类统计">
          {CATALOG_CATEGORIES.slice(1).map((category) => (
            <button
              type="button"
              key={category}
              className={catalogCategory === category ? "active" : ""}
              onClick={() => {
                setCatalogCategory(category);
                setCatalogLimit(24);
              }}
            >
              <strong>{CATALOG_COUNTS[category]}</strong>
              <span>{category}</span>
            </button>
          ))}
        </div>

        <div className="catalog-toolbar">
          <label className="catalog-search">
            <span>⌕</span>
            <input
              value={catalogQuery}
              onChange={(event) => {
                setCatalogQuery(event.target.value);
                setCatalogLimit(24);
              }}
              placeholder="搜索型号、编码、扭矩、协议或参数"
              aria-label="搜索产品目录"
            />
            {catalogQuery && (
              <button type="button" onClick={() => setCatalogQuery("")} aria-label="清空搜索">×</button>
            )}
          </label>
          <div className="category-pills" aria-label="产品类别筛选">
            {CATALOG_CATEGORIES.map((category) => (
              <button
                type="button"
                key={category}
                className={catalogCategory === category ? "active" : ""}
                onClick={() => {
                  setCatalogCategory(category);
                  setCatalogLimit(24);
                }}
              >{category}</button>
            ))}
          </div>
          <p className="catalog-result-count">
            找到 <strong>{filteredCatalog.length}</strong> 个型号
          </p>
        </div>

        {visibleCatalog.length > 0 ? (
          <div className="catalog-grid">
            {visibleCatalog.map((product) => (
              <article className="catalog-card" key={product.id}>
                <button
                  type="button"
                  className="catalog-image-button"
                  onClick={() => setSelectedCatalogProduct(product)}
                  aria-label={`查看${product.name}详情`}
                >
                  {product.image ? (
                    <img src={product.image} alt={product.name} loading="lazy" />
                  ) : (
                    <span className="catalog-placeholder">GAUDELOT</span>
                  )}
                  <small>{product.category}</small>
                </button>
                <div className="catalog-card-body">
                  <p>{product.code}</p>
                  <h3>{product.name}</h3>
                  <dl>
                    {getFeaturedSpecs(product).map(([label, value]) => (
                      <div key={label}><dt>{label}</dt><dd>{value}</dd></div>
                    ))}
                  </dl>
                  <button type="button" onClick={() => setSelectedCatalogProduct(product)}>
                    查看完整参数 <span>→</span>
                  </button>
                </div>
              </article>
            ))}
          </div>
        ) : (
          <div className="catalog-empty">
            <strong>没有找到匹配型号</strong>
            <p>可以尝试减少关键词，或切换到“全部产品”。</p>
            <button type="button" onClick={() => { setCatalogQuery(""); setCatalogCategory("全部产品"); }}>
              清除筛选
            </button>
          </div>
        )}

        {catalogLimit < filteredCatalog.length && (
          <div className="load-more-wrap">
            <button type="button" onClick={() => setCatalogLimit((current) => current + 24)}>
              加载更多产品 <span>已显示 {visibleCatalog.length} / {filteredCatalog.length}</span>
            </button>
          </div>
        )}
      </section>

      {selectedCatalogProduct && (
        <div
          className="catalog-modal-backdrop"
          role="presentation"
          onMouseDown={() => setSelectedCatalogProduct(null)}
        >
          <section
            className="catalog-modal"
            role="dialog"
            aria-modal="true"
            aria-labelledby="catalog-modal-title"
            onMouseDown={(event) => event.stopPropagation()}
          >
            <button
              className="catalog-modal-close"
              type="button"
              onClick={() => setSelectedCatalogProduct(null)}
              aria-label="关闭产品详情"
            >×</button>
            <div className="catalog-modal-product">
              <div className="catalog-modal-image">
                {selectedCatalogProduct.image ? (
                  <img src={selectedCatalogProduct.image} alt={selectedCatalogProduct.name} />
                ) : (
                  <span className="catalog-placeholder">GAUDELOT</span>
                )}
              </div>
              <div>
                <p className="step-kicker">{selectedCatalogProduct.category}</p>
                <h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
                <code>{selectedCatalogProduct.code}</code>
                <p className="catalog-source-note">官方产品目录第 {selectedCatalogProduct.page} 页</p>
              </div>
            </div>
            <div className="catalog-spec-table">
              {Object.entries(selectedCatalogProduct.specs).map(([label, value]) => (
                <div key={label}><span>{label}</span><strong>{value}</strong></div>
              ))}
            </div>
            <div className="catalog-modal-actions">
              <button
                className="panel-primary"
                type="button"
                onClick={() => {
                  setSelectedCatalogProduct(null);
                  setStage(1);
                  window.scrollTo({ top: 0, behavior: "smooth" });
                }}
              >
                用AI继续确认需求 <span>→</span>
              </button>
              <p>具体价格、交期及最终适配结果以工程师确认和正式文件为准。</p>
            </div>
          </section>
        </div>
      )}

      <section className="how-section" id="how">
        <div className="how-copy">
          <p className="eyebrow light"><span /> 无人销售边界</p>
          <h2>标准需求自动完成，<br />复杂项目及时接管。</h2>
          <p>AI负责需求采集、初选、说明和线索评分。工程师负责最终适配、认证和技术承诺，销售负责大客户商业条件。</p>
          <button className="primary-action light-button" type="button" onClick={() => { setStage(1); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
            体验完整流程 <span>→</span>
          </button>
        </div>
        <div className="flow-list">
          <div><b>01</b><span><strong>客户自助描述需求</strong><small>应用、参数、数量和现用型号</small></span></div>
          <div><b>02</b><span><strong>AI生成候选方案</strong><small>匹配理由、参考价格和风险提示</small></span></div>
          <div><b>03</b><span><strong>标准样品自动申请</strong><small>形成结构化线索卡和跟进计划</small></span></div>
          <div><b>04</b><span><strong>复杂项目人工接管</strong><small>技术复核、测试、报价和量产</small></span></div>
        </div>
      </section>

      <footer>
        <div className="brand footer-brand">
          <span className="brand-mark">G</span>
          <span><strong>GAUDELOT</strong><small>高徳乐 · 精密传动</small></span>
        </div>
        <p>AI选型结果仅供初步筛选，最终型号、价格、交期与适配结果以工程师和正式文件确认为准。</p>
        <span>内部原型 · V1</span>
      </footer>
    </main>
  );
}