import { Layout, Typography } from 'antd';
import logo from '@/style/images/logo-19.png';

const { Content } = Layout;
const { Title, Text } = Typography;

export default function SideContent() {
  return (
    <Content
      style={{
        padding: '150px 30px 30px',
        width: '100%',
        maxWidth: '450px',
        margin: '0 auto',
      }}
      className="sideContent"
    >
      <div style={{ width: '100%' }}>
        <img
          src={logo}
          alt="Ascend ERP"
          style={{ margin: '0 0 40px', display: 'block' }}
          height={54}
          width={220}
        />

        <Title level={1} style={{ fontSize: 28 }}>
          Ascend ERP - Business Management Platform
        </Title>
        <Text>
          One secure workspace for CRM, sales, finance, inventory, automation, AI, and operations.
        </Text>

        <div className="space20"></div>
        <div className="auth-value-list">
          <article className="auth-value-item">
            <strong>Secure workspace access</strong>
            <span>Every sign-in respects tenant, branch, and role permissions from the API layer upward.</span>
          </article>
          <article className="auth-value-item">
            <strong>Connected operations</strong>
            <span>Leads, invoices, inventory, approvals, and automation runs stay linked across the product.</span>
          </article>
          <article className="auth-value-item">
            <strong>Ready for teams</strong>
            <span>Sales, finance, vendors, marketing, and admins all work from one controlled environment.</span>
          </article>
        </div>
      </div>
    </Content>
  );
}
