import { CheckCircleOutlined } from '@ant-design/icons';
import type { LoginPageLogic } from '../LoginPageLogic';
import LoginFormCard from './LoginFormCard';
import kaiwuIcon from '../../../assets/brand/kaiwu-icon-gradient-transparent.png';

const WEB_FEATURES = ['多模型即插即用', '知识库与工具闭环', '可分享智能体'];

export default function LoginPageWeb({ logic }: { logic: LoginPageLogic }) {
  return (
    <div className="login-page login-page-web">
      <div className="login-deco login-deco-1" />
      <div className="login-deco login-deco-2" />

      <div className="login-content login-page-web-content">
        <div className="login-brand-panel">
          <div className="login-brand-header">
            <img src={kaiwuIcon} alt="鲸域AI" className="login-brand-logo" />
            <span className="login-brand-name">鲸域AI</span>
          </div>

          <h1 className="login-title">
            为业务流程配置
            <br />
            <span className="login-title-highlight">可调用的 AI 智能体</span>
          </h1>

          <p className="login-subtitle">
            将知识库、工具、额度与数据看板放进同一个闭环，让团队从试用走向可复购的平台化交付。
          </p>

          <div className="login-features">
            {WEB_FEATURES.map((text) => (
              <div key={text} className="login-feature-item">
                <CheckCircleOutlined className="login-feature-icon" />
                {text}
              </div>
            ))}
          </div>
        </div>

        <div className="login-form-panel">
          <LoginFormCard logic={logic} />
        </div>
      </div>
    </div>
  );
}