/*
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, { useContext } from 'react';
import { Button, Typography } from '@douyinfe/semi-ui';
import { IconPlay, IconFile } from '@douyinfe/semi-icons';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { StatusContext } from '../../../context/Status';

const { Title, Text } = Typography;

const CTASection = () => {
  const { t } = useTranslation();
  const [statusState] = useContext(StatusContext);
  const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
  const docsLink = statusState?.status?.docs_link || '';

  return (
    <section className="home-snap-section bg-[var(--semi-color-bg-0)]">
      <div className="mx-auto w-full max-w-5xl px-5 py-16 md:px-6 lg:px-8">
        <div className="cta-section relative overflow-hidden rounded-3xl border border-[var(--semi-color-border)] bg-[var(--semi-color-bg-0)] px-6 py-12 text-center md:px-12">
          {/* 内容 */}
          <div className="relative z-10 flex flex-col items-center gap-6">
            <Title heading={2} className="text-3xl font-semibold md:text-4xl">
              {t('将大模型能力真正落地到业务流程')}
            </Title>
            <p className="max-w-2xl text-base leading-relaxed text-semi-color-text-1">
              {t('立即接入，统一控制访问策略与调用成本，为产品带来稳定、可扩展的智能体验。')}
            </p>

            {/* CTA 按钮 */}
            <div className="flex flex-wrap justify-center gap-4">
              <Link to="/console">
                <Button
                  type="primary"
                  theme="solid"
                  size="large"
                  className="!rounded-3xl px-8 py-2"
                  icon={<IconPlay />}
                >
                  {t('立即开始')}
                </Button>
              </Link>
              {/*{docsLink && (*/}
              {/*  <Button*/}
              {/*    type="primary"*/}
              {/*    theme="light"*/}
              {/*    size="large"*/}
              {/*    className="flex items-center !rounded-3xl px-6 py-2"*/}
              {/*    icon={<IconFile />}*/}
              {/*    onClick={() => window.open(docsLink, '_blank')}*/}
              {/*  >*/}
              {/*    {t('查看文档')}*/}
              {/*  </Button>*/}
              {/*)}*/}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CTASection;
