/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React from 'react';
import { Typography } from '@douyinfe/semi-ui';
import {
  IconLayers,
  IconActivity,
  IconHistogram,
} from '@douyinfe/semi-icons';
import { useTranslation } from 'react-i18next';

const { Title, Text } = Typography;

const WorkflowSection = () => {
  const { t } = useTranslation();

  const steps = [
    {
      number: '01',
      icon: <IconLayers style={{ fontSize: 20 }} />,
      title: t('接入配置'),
      description: t('在控制台创建渠道、设置密钥与限额，导入模型列表。'),
    },
    {
      number: '02',
      icon: <IconActivity style={{ fontSize: 20 }} />,
      title: t('智能调度'),
      description: t('根据健康度、延迟与价格自动选择最优模型通道，内置故障切换。'),
    },
    {
      number: '03',
      icon: <IconHistogram style={{ fontSize: 20 }} />,
      title: t('持续洞察'),
      description: t('通过仪表盘追踪调用趋势、消耗与失败率，实时告警确保 SLO。'),
    },
  ];

  return (
    <section className="home-snap-section bg-[var(--semi-color-bg-0)]">
      <div className="mx-auto w-full max-w-6xl px-5 py-16 md:px-6 lg:px-8">
        {/* 标题区域 */}
        <div>
          <Text className="text-sm font-bold uppercase tracking-widest text-semi-color-text-2">
            {t('工作流')}
          </Text>
          <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">
            {t('用 3 个步骤构建你的 AI 控制平面')}
          </Title>
        </div>

        {/* 步骤卡片 */}
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {steps.map((step, index) => (
            <div key={index} className="workflow-card">
              {/* 图标 */}
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[rgba(99,102,241,0.12)] text-semi-color-primary transition-transform duration-300">
                {step.icon}
              </div>

              {/* 步骤编号 */}
              <span className="workflow-step-number">{step.number}</span>

              {/* 标题 */}
              <Title heading={3} className="text-lg font-semibold">
                {step.title}
              </Title>

              {/* 描述 */}
              <p className="text-sm leading-relaxed text-semi-color-text-1">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default WorkflowSection;
