'use client';

import { Card } from '@/components/ui/card';
import { AlertCircle } from 'lucide-react';

export function UsageGuide() {
  return (
    <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
      <div className="flex gap-2">
        <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
        <div className="text-sm text-blue-800 dark:text-blue-200">
          <p className="mb-2">三维可视化分析说明：</p>
          <ul className="space-y-1 text-xs">
            <li>• <strong>三维模型</strong>: 立体展示土壤养分的空间分布，支持旋转和缩放</li>
            <li>• <strong>立体切片</strong>: 选择任意深度查看该层的水平分布热力图</li>
            <li>• <strong>等值面图</strong>: 以等值线形式展示养分浓度分布</li>
            <li>• <strong>克里金插值</strong>: 基于采样点数据，使用地统计学方法生成连续分布模型</li>
            <li>• <strong>垂直分析</strong>: 分析养分在土壤剖面的递减规律</li>
            <li>• <strong>水平变异</strong>: 评估同一深度养分分布的均匀性</li>
            <li>• <strong>精准施肥</strong>: 根据三维分布特征制定分层分区施肥方案</li>
          </ul>
        </div>
      </div>
    </Card>
  );
}