const SkillModal = ({ skill, onClose, onStart }) => {
  const [uploadMode, setUploadMode] = React.useState(false);
  const [files, setFiles] = React.useState([]);
  const [quoteFiles, setQuoteFiles] = React.useState([]);
  const [floorPlanFiles, setFloorPlanFiles] = React.useState([]);
  const [context, setContext] = React.useState('');
  const [error, setError] = React.useState('');
  const inputRef = React.useRef(null);
  const quoteInputRef = React.useRef(null);
  const floorPlanInputRef = React.useRef(null);

  if (!skill) return null;

  const isQuantity = skill.id === 'quantity';
  const isQuote = skill.id === 'quote';
  const isCombined = skill.id === 'combined';
  const isCompare = skill.id === 'compare';
  const canUploadReal = isQuantity || isQuote || isCombined || isCompare;
  const maxFiles = isCompare ? 10 : null;
  const drawingAllowedExts = ['pdf', 'png', 'jpg', 'jpeg', 'webp'];
  const quoteAllowedExts = ['pdf', 'xlsx', 'xls', 'csv', 'txt', 'doc', 'docx', 'png', 'jpg', 'jpeg', 'webp'];
  const allowedExts = isQuantity ? drawingAllowedExts : quoteAllowedExts;
  const uploadCopy = isCombined ? {
    title: '上传图纸 + 报价联审',
    dropTitle: '分别添加图纸文件和报价附件',
    dropSub: '图纸与报价都可多次继续添加；报价附件会合并为同一供应商的一份完整报价。',
    errorEmpty: '请至少添加 1 份图纸文件和 1 份报价文件。',
    errorUnsupported: '联审图纸支持 PDF/图片；报价支持 PDF、Excel、CSV、TXT、Word、图片文件。',
    startLabel: '开始联审',
    contextPlaceholder: '可选：补充项目名称、城市、面积、层高、报价范围或重点复核项。',
  } : isCompare ? {
    title: '上传多家报价对比',
    dropTitle: '逐份添加 2-10 份报价文件',
    dropSub: '可多次点击选择文件，全部添加完成后再开始对比。',
    errorEmpty: '请至少选择 2 份报价文件。',
    errorUnsupported: '当前多家报价对比支持 PDF、Excel、CSV、TXT、Word、图片文件。',
    startLabel: '开始对比',
    contextPlaceholder: '可选：补充项目名称、城市、面积、统一口径或重点关注的对比维度。',
  } : isQuote ? {
    title: '上传报价审核',
    dropTitle: '逐份添加 1 份或多份报价附件',
    dropSub: '可多次点击继续添加；多份 PDF、图片或表格会合并为同一户型的一份完整报价审核。',
    errorEmpty: '请先选择至少 1 份报价文件。',
    errorUnsupported: '当前报价审核支持 PDF、Excel、CSV、TXT、Word、图片文件。',
    startLabel: '开始审核',
    contextPlaceholder: '可选：补充项目名称、城市、面积、报价范围或重点关注的风险。',
  } : {
    title: '上传图纸算量',
    dropTitle: '逐份添加 PDF 或图片图纸',
    dropSub: '可多次点击继续添加；多个 PDF/图片会合并为同一户型的完整图纸。',
    errorEmpty: '请先选择至少 1 份 PDF 或图片图纸。',
    errorUnsupported: '当前算量仅支持 PDF、PNG、JPG、JPEG、WEBP。',
    startLabel: '开始算量',
    contextPlaceholder: '可选：补充项目名称、层高、图纸范围或需要重点复核的房间。',
  };
  const formatBytes = (bytes) => {
    if (!Number.isFinite(bytes)) return '—';
    if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
    if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
    return `${bytes} B`;
  };

  const fileKey = (file) => `${file.name}::${file.size}::${file.lastModified || 0}`;

  const mergePickedFiles = (current, picked) => {
    const seen = new Set(current.map(fileKey));
    const next = [...current];
    picked.forEach(file => {
      const key = fileKey(file);
      if (!seen.has(key)) {
        seen.add(key);
        next.push(file);
      }
    });
    return maxFiles ? next.slice(0, maxFiles) : next;
  };

  const hasUnsupportedFile = (picked, exts) => picked.find(file => {
    const ext = String(file.name || '').split('.').pop().toLowerCase();
    return !exts.includes(ext);
  });

  const onChooseFiles = (event) => {
    const picked = Array.from(event.target.files || []);

    const unsupported = hasUnsupportedFile(picked, allowedExts);

    if (unsupported) {
      const ext = String(unsupported.name || '').split('.').pop().toLowerCase();
      setFiles([]);
      setError(ext === 'dwg'
        ? '当前第一阶段暂不支持 DWG，请先导出 PDF 或图片后上传。'
        : uploadCopy.errorUnsupported);
      event.target.value = '';
      return;
    }

    const merged = mergePickedFiles(files, picked);
    if (maxFiles && files.length + picked.length > maxFiles) {
      setError(`多家报价对比最多支持 ${maxFiles} 份文件，已保留前 ${maxFiles} 份。`);
    } else {
      setError('');
    }
    setFiles(merged);
    event.target.value = '';
  };

  const onChooseCombinedFiles = (kind, event) => {
    const picked = Array.from(event.target.files || []);
    const isDrawingGroup = kind === 'floorPlan';
    const unsupported = hasUnsupportedFile(picked, isDrawingGroup ? drawingAllowedExts : quoteAllowedExts);
    if (unsupported) {
      const ext = String(unsupported.name || '').split('.').pop().toLowerCase();
      setError(ext === 'dwg'
        ? '当前第一阶段暂不支持 DWG，请先导出 PDF 或图片后上传。'
        : (isDrawingGroup ? '图纸仅支持 PDF、PNG、JPG、JPEG、WEBP。' : '报价支持 PDF、Excel、CSV、TXT、Word、图片文件。'));
      event.target.value = '';
      return;
    }

    if (isDrawingGroup) {
      setFloorPlanFiles(prev => mergePickedFiles(prev, picked));
    } else {
      setQuoteFiles(prev => mergePickedFiles(prev, picked));
    }
    setError('');
    event.target.value = '';
  };

  const removeFile = (index) => {
    setFiles(prev => prev.filter((_, i) => i !== index));
    setError('');
  };

  const removeCombinedFile = (kind, index) => {
    if (kind === 'floorPlan') {
      setFloorPlanFiles(prev => prev.filter((_, i) => i !== index));
    } else {
      setQuoteFiles(prev => prev.filter((_, i) => i !== index));
    }
    setError('');
  };

  const startUpload = () => {
    if (isCombined) {
      if (!floorPlanFiles.length || !quoteFiles.length) {
        setError(uploadCopy.errorEmpty);
        return;
      }
      onStart(skill.id, {
        source: 'real',
        floorPlans: floorPlanFiles,
        quoteFiles,
        context,
      });
      return;
    }
    if (!files.length) {
      setError(uploadCopy.errorEmpty);
      return;
    }
    if (isCompare && files.length < 2) {
      setError(uploadCopy.errorEmpty);
      return;
    }
    if (isCompare && files.length > 10) {
      setError('多家报价对比最多支持 10 份文件。');
      return;
    }
    onStart(skill.id, { source: 'real', files, context });
  };

  const exitUploadMode = () => {
    setUploadMode(false);
    setFiles([]);
    setQuoteFiles([]);
    setFloorPlanFiles([]);
    setContext('');
    setError('');
  };

  const fileRowIcon = (file) => (
    file.name.toLowerCase().match(/\.(xlsx|xls|csv)$/) ? 'file-spreadsheet'
      : file.name.toLowerCase().match(/\.(png|jpg|jpeg|webp)$/) ? 'file-image'
      : 'file-text'
  );

  const renderFileRows = (rows, color, onRemove) => (
    rows.length > 0 && (
      <div className="upload-file-list">
        {rows.map((file, index) => (
          <div className="upload-file-row" key={`${file.name}-${index}`}>
            <Icon name={fileRowIcon(file)} size={13} style={{ color }} />
            <span className="upload-file-name">{file.name}</span>
            <span style={{ color: 'var(--text-muted)', fontVariantNumeric: 'tabular-nums' }}>{formatBytes(file.size)}</span>
            <button className="btn btn-ghost btn-sm" style={{ padding: '4px 6px' }} onClick={() => onRemove(index)} title="移除文件">
              <Icon name="x" size={12} />
            </button>
          </div>
        ))}
      </div>
    )
  );

  const startDisabled = isCombined
    ? (!floorPlanFiles.length || !quoteFiles.length)
    : (!files.length || (isCompare && files.length < 2));

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-icon" style={{ background: skill.bg, color: skill.color }}>
            <Icon name={skill.icon} size={22} />
          </div>
          <div className="modal-heading">
            <div className="modal-title">{skill.title}</div>
            <div className="modal-subtitle">{skill.titleEn}</div>
          </div>
          <button className="modal-close" onClick={onClose}>
            <Icon name="x" size={16} />
          </button>
        </div>

        <div className="modal-body">
          <div className="modal-left">
            <div className="modal-sec-title">
              <Icon name="eye" size={12} /> 示例预览
            </div>
            {skill.id === 'quantity' && <QuantityPreview />}
            {skill.id === 'quote' && <QuotePreview />}
            {skill.id === 'combined' && <CombinedPreview />}
            {skill.id === 'compare' && <ComparePreview />}
          </div>

          <div className="modal-right">
            <div className="modal-sec-title">
              <Icon name="sparkles" size={12} /> 能力说明
            </div>
            <ul className="feat-list">
              {skill.features.map((f, i) => (
                <li key={i}>
                  <Icon name="check-circle-2" size={14} style={{ color: skill.color }} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>

            <div className="modal-sec-title" style={{ marginTop: 18 }}>
              <Icon name="message-square" size={12} /> 建议 Prompt
            </div>
            <div className="prompt-box">"{skill.prompt}"</div>

            <div className="format-hint">
              <strong>支持格式：</strong>{skill.formats}
            </div>

            {uploadMode && canUploadReal && (
              <div className="upload-panel">
                <div className="modal-sec-title">
                  <Icon name="upload-cloud" size={12} /> {uploadCopy.title}
                </div>
                {isCombined ? (
                  <>
                    <input
                      ref={floorPlanInputRef}
                      type="file"
                      multiple
                      accept=".pdf,.png,.jpg,.jpeg,.webp"
                      style={{ display: 'none' }}
                      onChange={event => onChooseCombinedFiles('floorPlan', event)}
                    />
                    <input
                      ref={quoteInputRef}
                      type="file"
                      multiple
                      accept=".pdf,.xlsx,.xls,.csv,.txt,.doc,.docx,.png,.jpg,.jpeg,.webp"
                      style={{ display: 'none' }}
                      onChange={event => onChooseCombinedFiles('quote', event)}
                    />
                    <div className="upload-drop" style={{ marginBottom: 10 }}>
                      <Icon name="file-image" size={24} style={{ color: 'var(--quantity)' }} />
                      <div className="upload-drop-title">图纸文件</div>
                      <div className="upload-drop-sub">PDF、PNG、JPG、JPEG、WEBP，可逐次添加。</div>
                      <button className="btn btn-ghost" style={{ marginTop: 12 }} onClick={() => floorPlanInputRef.current && floorPlanInputRef.current.click()}>
                        <Icon name="paperclip" size={13} /> {floorPlanFiles.length ? '继续添加图纸' : '选择图纸'}
                      </button>
                    </div>
                    {renderFileRows(floorPlanFiles, 'var(--quantity)', index => removeCombinedFile('floorPlan', index))}
                    <div className="upload-drop" style={{ marginTop: 12 }}>
                      <Icon name="file-spreadsheet" size={24} style={{ color: 'var(--quote)' }} />
                      <div className="upload-drop-title">报价文件</div>
                      <div className="upload-drop-sub">PDF、Excel、CSV、TXT、Word、图片，可逐次添加并合并审核。</div>
                      <button className="btn btn-ghost" style={{ marginTop: 12 }} onClick={() => quoteInputRef.current && quoteInputRef.current.click()}>
                        <Icon name="paperclip" size={13} /> {quoteFiles.length ? '继续添加报价' : '选择报价'}
                      </button>
                    </div>
                    {renderFileRows(quoteFiles, 'var(--quote)', index => removeCombinedFile('quote', index))}
                  </>
                ) : (
                  <>
                    <input
                      ref={inputRef}
                      type="file"
                      multiple={isQuantity || isQuote || isCompare}
                      accept={isQuantity ? '.pdf,.png,.jpg,.jpeg,.webp' : '.pdf,.xlsx,.xls,.csv,.txt,.doc,.docx,.png,.jpg,.jpeg,.webp'}
                      style={{ display: 'none' }}
                      onChange={onChooseFiles}
                    />
                    <div className="upload-drop">
                      <Icon name="file-up" size={24} style={{ color: skill.color }} />
                      <div className="upload-drop-title">{uploadCopy.dropTitle}</div>
                      <div className="upload-drop-sub">{uploadCopy.dropSub}</div>
                      <button className="btn btn-ghost" style={{ marginTop: 12 }} onClick={() => inputRef.current && inputRef.current.click()}>
                        <Icon name="paperclip" size={13} /> {files.length ? '继续添加' : '选择文件'}
                      </button>
                    </div>
                    {renderFileRows(files, skill.color, removeFile)}
                  </>
                )}
                <textarea
                  className="upload-context"
                  value={context}
                  onChange={e => setContext(e.target.value)}
                  placeholder={uploadCopy.contextPlaceholder}
                />
                {error && (
                  <div className="upload-error">
                    <Icon name="circle-alert" size={13} style={{ marginTop: 1 }} />
                    <span>{error}</span>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="modal-footer">
          {uploadMode && canUploadReal ? (
            <>
              <button className="btn btn-ghost btn-lg" onClick={exitUploadMode}>
                <Icon name="arrow-left" size={14} /> 返回预览
              </button>
              <button className="btn btn-primary btn-lg" disabled={startDisabled} onClick={startUpload}>
                <Icon name="play" size={14} strokeWidth={2.5} /> {uploadCopy.startLabel}
              </button>
            </>
          ) : (
            <>
              <button className="btn btn-ghost btn-lg" onClick={() => canUploadReal ? setUploadMode(true) : onStart(skill.id, { source: 'mock' })}>
                <Icon name="upload" size={14} /> 上传我的文件
              </button>
              <button className="btn btn-primary btn-lg" onClick={() => onStart(skill.id, { source: 'mock' })}>
                <Icon name="play" size={14} strokeWidth={2.5} /> 使用示例数据体验
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

const QuantityPreview = () => (
  <div className="preview-card">
    <div className="preview-img">
      <FloorPlanSVG />
    </div>
    <div className="preview-meta">
      <div className="preview-meta-row"><span className="preview-label">项目</span><span className="preview-value">示例三室两厅</span></div>
      <div className="preview-meta-row"><span className="preview-label">面积</span><span className="preview-value">约 89 ㎡</span></div>
      <div className="preview-meta-row"><span className="preview-label">房间</span><span className="preview-value">7 间（含厨卫阳台）</span></div>
      <div className="preview-meta-row"><span className="preview-label">置信度</span><span className="preview-value" style={{ color: 'var(--quantity)' }}>★★★★★</span></div>
    </div>
  </div>
);

const QuotePreview = () => (
  <div className="preview-card">
    <div className="preview-meta" style={{ padding: 14 }}>
      <div style={{ fontWeight: 650, fontSize: 13, marginBottom: 2 }}>和顺装饰公司 · 报价单</div>
      <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 10 }}>报价总额 <strong style={{ color: 'var(--text-primary)' }}>¥128,000</strong> · 89㎡</div>
      <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
        <tbody>
          {[
            ['地砖铺贴', '¥55/㎡', 'low'],
            ['防水工程', '¥28/㎡', 'mid'],
            ['水管改造', '¥95/m', 'high'],
            ['乳胶漆', '¥38/㎡', 'low'],
          ].map(([n, p, r], i) => (
            <tr key={i} style={{ borderTop: '1px dashed var(--border)' }}>
              <td style={{ padding: '6px 0' }}>{n}</td>
              <td style={{ padding: '6px 0', fontVariantNumeric: 'tabular-nums' }}>{p}</td>
              <td style={{ padding: '6px 0', textAlign: 'right' }}>
                <RiskDot level={r} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
        <span>综合评分 <strong>62/100</strong></span>
        <span style={{ display: 'flex', gap: 6 }}>
          <span><RiskDot level="high" inline /> 3</span>
          <span><RiskDot level="mid" inline /> 5</span>
          <span><RiskDot level="low" inline /> 12</span>
        </span>
      </div>
    </div>
  </div>
);

const CombinedPreview = () => (
  <div className="preview-card">
    <div style={{ padding: 16 }}>
      <div style={{ fontWeight: 650, fontSize: 13, marginBottom: 12 }}>联合审核流程</div>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginBottom: 16 }}>
        <div style={{ flex: 1, padding: 10, border: '1px solid var(--border)', borderRadius: 8, textAlign: 'center', background: 'var(--bg-page)' }}>
          <Icon name="file-image" size={18} style={{ color: 'var(--quantity)' }} />
          <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4 }}>图纸平面图</div>
        </div>
        <div style={{ display: 'grid', placeItems: 'center', color: 'var(--text-muted)' }}><Icon name="plus" size={14} /></div>
        <div style={{ flex: 1, padding: 10, border: '1px solid var(--border)', borderRadius: 8, textAlign: 'center', background: 'var(--bg-page)' }}>
          <Icon name="file-spreadsheet" size={18} style={{ color: 'var(--quote)' }} />
          <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4 }}>报价单</div>
        </div>
      </div>
      <div style={{ textAlign: 'center', color: 'var(--text-muted)', marginBottom: 10 }}><Icon name="arrow-down" size={16} /></div>
      <div style={{ background: 'var(--bg-page)', borderRadius: 8, padding: 10, fontSize: 12 }}>
        <div style={{ fontWeight: 600, marginBottom: 6 }}>量差核实</div>
        {[
          ['客厅地砖', '+26%', 'high'],
          ['乳胶漆', '+13%', 'mid'],
          ['防水面积', '-2%', 'low'],
        ].map(([n, d, r], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
            <span>{n}</span>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>{d} <RiskDot level={r} inline /></span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const ComparePreview = () => (
  <div className="preview-card">
    <div style={{ padding: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
        <div style={{ padding: 10, border: '1px solid var(--border)', borderRadius: 8, fontSize: 12 }}>
          <div style={{ fontWeight: 600 }}>和顺装饰</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>¥128,000</div>
          <div style={{ color: 'var(--risk-mid)', marginTop: 4, fontSize: 11 }}>⚠ 材料规格未注明</div>
        </div>
        <div style={{ padding: 10, border: '2px solid var(--compare)', borderRadius: 8, fontSize: 12, background: '#F0FAF3', position: 'relative' }}>
          <div style={{ position: 'absolute', top: -8, right: 8, background: 'var(--compare)', color: 'white', fontSize: 10, padding: '1px 6px', borderRadius: 4 }}>推荐</div>
          <div style={{ fontWeight: 600 }}>星辉装饰</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>¥115,000</div>
          <div style={{ color: 'var(--compare)', marginTop: 4, fontSize: 11 }}>✓ 详细清单品牌明确</div>
        </div>
      </div>
      <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ color: 'var(--text-secondary)' }}>
            <th style={{ textAlign: 'left', padding: '4px 0', fontWeight: 500 }}>项目</th>
            <th style={{ padding: '4px 0', fontWeight: 500, textAlign: 'right' }}>A</th>
            <th style={{ padding: '4px 0', fontWeight: 500, textAlign: 'right' }}>B</th>
          </tr>
        </thead>
        <tbody>
          {[['地砖铺贴', 55, 48], ['防水', 28, 35], ['水管', 95, 68]].map(([n,a,b], i) => (
            <tr key={i} style={{ borderTop: '1px dashed var(--border)' }}>
              <td style={{ padding: '5px 0' }}>{n}</td>
              <td style={{ padding: '5px 0', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>¥{a}</td>
              <td style={{ padding: '5px 0', textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: a > b ? 'var(--compare)' : 'inherit', fontWeight: a > b ? 600 : 400 }}>¥{b}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const RiskDot = ({ level, inline }) => {
  const color = level === 'high' ? 'var(--risk-high)' : level === 'mid' ? 'var(--risk-mid)' : 'var(--risk-low)';
  return (
    <span style={{
      display: 'inline-block',
      width: 8, height: 8, borderRadius: '50%',
      background: color,
      verticalAlign: inline ? 'middle' : 'baseline',
      marginRight: inline ? 2 : 0
    }} />
  );
};

// Simple procedural floor plan SVG
const FloorPlanSVG = () => (
  <svg viewBox="0 0 400 300" width="100%" height="100%" style={{ display: 'block' }}>
    <rect x="20" y="20" width="360" height="260" fill="none" stroke="var(--primary)" strokeWidth="2" />
    {/* Living room */}
    <rect x="20" y="20" width="220" height="160" fill="#EAF1F7" stroke="var(--primary)" strokeWidth="1" />
    <text x="130" y="95" textAnchor="middle" fontSize="11" fill="var(--primary)" fontWeight="600">客厅</text>
    <text x="130" y="108" textAnchor="middle" fontSize="9" fill="var(--text-secondary)">24.6 ㎡</text>
    {/* Kitchen */}
    <rect x="240" y="20" width="140" height="80" fill="#FDEBD0" stroke="var(--primary)" strokeWidth="1" />
    <text x="310" y="58" textAnchor="middle" fontSize="10" fill="var(--quote)" fontWeight="600">厨房</text>
    <text x="310" y="70" textAnchor="middle" fontSize="9" fill="var(--text-secondary)">6.4 ㎡</text>
    {/* Bath */}
    <rect x="240" y="100" width="70" height="80" fill="#D6F0F5" stroke="var(--primary)" strokeWidth="1" />
    <text x="275" y="138" textAnchor="middle" fontSize="10" fill="#1B7A8A" fontWeight="600">卫生间</text>
    <text x="275" y="150" textAnchor="middle" fontSize="9" fill="var(--text-secondary)">2.5 ㎡</text>
    {/* Balcony */}
    <rect x="310" y="100" width="70" height="80" fill="#F3F5F7" stroke="var(--primary)" strokeWidth="1" strokeDasharray="3 2" />
    <text x="345" y="138" textAnchor="middle" fontSize="10" fill="var(--text-secondary)" fontWeight="600">阳台</text>
    {/* Master bedroom */}
    <rect x="20" y="180" width="140" height="100" fill="#EAF1F7" stroke="var(--primary)" strokeWidth="1" />
    <text x="90" y="225" textAnchor="middle" fontSize="11" fill="var(--primary)" fontWeight="600">主卧</text>
    <text x="90" y="238" textAnchor="middle" fontSize="9" fill="var(--text-secondary)">12.2 ㎡</text>
    {/* Second bedroom */}
    <rect x="160" y="180" width="110" height="100" fill="#EAF1F7" stroke="var(--primary)" strokeWidth="1" />
    <text x="215" y="225" textAnchor="middle" fontSize="10" fill="var(--primary)" fontWeight="600">次卧</text>
    <text x="215" y="238" textAnchor="middle" fontSize="9" fill="var(--text-secondary)">10.5 ㎡</text>
    {/* Study */}
    <rect x="270" y="180" width="110" height="100" fill="#EAF1F7" stroke="var(--primary)" strokeWidth="1" />
    <text x="325" y="225" textAnchor="middle" fontSize="10" fill="var(--primary)" fontWeight="600">书房</text>
    <text x="325" y="238" textAnchor="middle" fontSize="9" fill="var(--text-secondary)">8.8 ㎡</text>
    {/* Dimensions */}
    <text x="200" y="14" textAnchor="middle" fontSize="9" fill="var(--text-muted)">14,200 mm</text>
  </svg>
);

window.SkillModal = SkillModal;