/*
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 {
  IconActivity,
  IconHistogram,
  IconCloudStroked,
  IconLayers,
} from '@douyinfe/semi-icons';
import { useTranslation } from 'react-i18next';

const { Title, Text } = Typography;

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

  const values = [
    {
      icon: <IconActivity style={{ fontSize: 20 }} />,
      title: t('统一入口，极速连通'),
      description: t('以单一域名和密钥连接全部大模型供应商，智能容灾切换确保业务不中断。'),
      iconClass: '',
    },
    {
      icon: <IconHistogram style={{ fontSize: 20 }} />,
      title: t('全栈可观测与风控'),
      description: t('实时监控调用量、错误率与费用，一键配置限流、告警与安全策略。'),
      iconClass: 'value-card-icon-blue',
    },
    {
      icon: <IconCloudStroked style={{ fontSize: 20 }} />,
      title: t('按需扩容与成本优化'),
      description: t('多渠道配额、智能路由与批量任务调度，灵活控制成本与并发能力。'),
      iconClass: 'value-card-icon-teal',
    },
    {
      icon: <IconLayers style={{ fontSize: 20 }} />,
      title: t('开发者友好体验'),
      description: t('兼容 OpenAI 接口协议，提供 SDK、示例与 Web Playground，轻松迭代上线。'),
      iconClass: 'value-card-icon-purple',
    },
  ];

  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 uppercase tracking-widest text-semi-color-text-2">*/}
          {/*  {t('核心价值')}*/}
          {/*</Text>*/}
          <Title heading={2} className="mt-3 text-3xl font-semibold md:text-4xl">
            {t('让团队稳定使用大模型，更快落地 AI 创新')}
          </Title>
          <p className="mt-4 max-w-2xl text-base leading-relaxed text-semi-color-text-1">
            {t('从访问控制、成本可视化到全局调度，为企业提供端到端的 AI 基础设施能力。')}
          </p>
        </div>

        {/* 卡片网格 */}
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {values.map((value, index) => (
            <div key={index} className="value-card">
              <div className={`value-card-icon ${value.iconClass}`}>
                {value.icon}
              </div>
              <Title heading={3} className="text-xl font-semibold">
                {value.title}
              </Title>
              <p className="text-sm leading-relaxed text-semi-color-text-1">
                {value.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ValueSection;
