<?php
declare(strict_types=1);

require_once __DIR__ . DIRECTORY_SEPARATOR . 'config.php';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= APP_NAME ?> - 企业SaaS服务平台</title>
    <style>
        :root {
            --bg:#0b1220;
            --card:#131c2f;
            --primary:#3b82f6;
            --accent:#22c55e;
            --text:#e5e7eb;
            --muted:#9ca3af;
            --line:#243046;
        }
        * { box-sizing:border-box; }
        body {
            margin:0;
            background:#ffffff;
            color:#0f172a;
            font-family:"Microsoft YaHei",Arial,sans-serif;
        }
        .wrap { max-width:1180px; margin:0 auto; padding:28px 24px 56px; }
        .nav {
            display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;
        }
        .brand { font-size:24px; font-weight:700; letter-spacing:1px; }
        .btn {
            background:var(--primary); color:#fff; border:0; text-decoration:none;
            padding:10px 16px; border-radius:10px; font-weight:600;
        }
        .hero { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:stretch; }
        .panel {
            background:rgba(19,28,47,0.95); border:1px solid var(--line);
            border-radius:16px; padding:28px;
            color:var(--text);
        }
        .hero h1 { margin:0 0 12px; font-size:38px; line-height:1.3; }
        .hero p { margin:0; color:var(--muted); line-height:1.8; }
        .grid {
            margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
        }
        .stat-title { color:var(--muted); font-size:14px; }
        .stat-value { font-size:28px; margin-top:8px; font-weight:700; }
        .dot {
            display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:6px;
        }
        .module-list { margin:18px 0 0; padding:0; list-style:none; }
        .module-list li { padding:10px 0; border-bottom:1px dashed var(--line); color:#cbd5e1; }
        .module-list li:last-child { border-bottom:0; }
        .section-title { margin:32px 0 14px; font-size:24px; }
        .article-grid {
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:16px;
        }
        .article-card{
            background:rgba(19,28,47,0.95);
            border:1px solid var(--line);
            border-radius:14px;
            overflow:hidden;
            color:var(--text);
        }
        .article-card img{
            width:100%;
            height:170px;
            object-fit:cover;
            display:block;
        }
        .article-body{
            padding:14px 16px 16px;
        }
        .article-body h3{
            margin:0 0 10px;
            font-size:18px;
        }
        .article-body p{
            margin:0;
            color:var(--muted);
            line-height:1.7;
            font-size:14px;
        }
        .gallery{
            margin-top:16px;
            display:grid;
            grid-template-columns:2fr 1fr 1fr;
            gap:12px;
        }
        .gallery img{
            width:100%;
            height:210px;
            border-radius:12px;
            object-fit:cover;
            border:1px solid var(--line);
        }
        .feature-grid{
            margin-top:12px;
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:12px;
        }
        .feature-item{
            background:rgba(19,28,47,0.95);
            border:1px solid var(--line);
            border-radius:12px;
            padding:16px;
            color:var(--text);
        }
        .feature-item h3{
            margin:0 0 8px;
            font-size:16px;
        }
        .feature-item p{
            margin:0;
            color:var(--muted);
            line-height:1.7;
            font-size:13px;
        }
        .timeline{
            margin-top:12px;
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:12px;
        }
        .step{
            background:rgba(19,28,47,0.95);
            border:1px solid var(--line);
            border-radius:12px;
            padding:16px;
            color:var(--text);
        }
        .step .num{
            display:inline-flex;
            width:26px;
            height:26px;
            border-radius:50%;
            align-items:center;
            justify-content:center;
            background:#1d4ed8;
            margin-bottom:8px;
            font-weight:700;
            font-size:13px;
        }
        .step h3{
            margin:0 0 8px;
            font-size:16px;
        }
        .step p{
            margin:0;
            color:var(--muted);
            line-height:1.7;
            font-size:13px;
        }
        .footer { margin-top:32px; color:var(--muted); font-size:14px; text-align:center; }
        @media (max-width:900px) {
            .hero { grid-template-columns:1fr; }
            .grid { grid-template-columns:1fr; }
            .article-grid { grid-template-columns:1fr; }
            .gallery { grid-template-columns:1fr; }
            .feature-grid { grid-template-columns:1fr; }
            .timeline { grid-template-columns:1fr; }
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="nav">
        <div class="brand"><?= APP_NAME ?></div>
    </div>
    <div class="hero">
        <div class="panel">
            <h1>一体化企业数字化运营平台</h1>
            <p>面向中小企业提供客户管理、公告管理、资料上传、经营看板等核心能力。通过统一后台，实现业务流程在线化、数据可视化与信息协同化，打造轻量高效的企业SaaS工作台。</p>
            <div class="grid">
                <div>
                    <div class="stat-title">在线功能模块</div>
                    <div class="stat-value">6+</div>
                </div>
                <div>
                    <div class="stat-title">数据处理效率</div>
                    <div class="stat-value">99.9%</div>
                </div>
                <div>
                    <div class="stat-title">平台可用性</div>
                    <div class="stat-value">7 x 24</div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div><span class="dot"></span>企业管理能力</div>
            <ul class="module-list">
                <li>企业信息维护</li>
                <li>公告发布与删除</li>
                <li>客户信息管理</li>
                <li>文件上传与下载</li>
                <li>数据看板统计</li>
                <li>安全登录与会话控制</li>
            </ul>
        </div>
    </div>
    <h2 class="section-title">企业资讯</h2>
    <div class="article-grid">
        <article class="article-card">
            <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80" alt="数字化办公">
            <div class="article-body">
                <h3>从流程驱动到数据驱动</h3>
                <p>通过统一SaaS平台打通销售、服务与运营数据，帮助企业从经验管理升级为实时数据决策，显著提升执行效率。</p>
            </div>
        </article>
        <article class="article-card">
            <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=80" alt="团队协作">
            <div class="article-body">
                <h3>中小企业如何搭建协同体系</h3>
                <p>从公告管理、客户管理到文档沉淀，建立统一协作入口，减少沟通损耗，让组织在增长阶段保持稳定交付能力。</p>
            </div>
        </article>
        <article class="article-card">
            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1200&q=80" alt="可视化看板">
            <div class="article-body">
                <h3>可视化经营看板的落地实践</h3>
                <p>基于关键业务指标快速搭建管理看板，让管理层和业务团队聚焦同一目标，形成持续改进与复盘闭环。</p>
            </div>
        </article>
    </div>
    <h2 class="section-title">企业风采</h2>
    <div class="gallery">
        <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=80" alt="办公空间">
        <img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=900&q=80" alt="会议讨论">
        <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80" alt="团队协作">
    </div>
    <h2 class="section-title">核心功能</h2>
    <div class="feature-grid">
        <div class="feature-item">
            <h3>线索与客户全流程</h3>
            <p>支持线索录入、客户跟进、状态变更和成交复盘，帮助业务团队形成统一销售流程。</p>
        </div>
        <div class="feature-item">
            <h3>多角色协同办公</h3>
            <p>管理层、运营、销售可在同一平台协作，信息统一沉淀，减少跨系统沟通成本。</p>
        </div>
        <div class="feature-item">
            <h3>文档资产中心</h3>
            <p>支持文件上传、下载与分类管理，搭建企业知识库，保障关键资料有序可追溯。</p>
        </div>
        <div class="feature-item">
            <h3>经营数据看板</h3>
            <p>按业务目标汇总关键指标，实时查看公告、客户和文件数据，让管理决策更高效。</p>
        </div>
    </div>
    <h2 class="section-title">实施流程</h2>
    <div class="timeline">
        <div class="step">
            <span class="num">01</span>
            <h3>业务调研</h3>
            <p>梳理企业管理现状与核心痛点，明确平台建设范围和阶段目标。</p>
        </div>
        <div class="step">
            <span class="num">02</span>
            <h3>系统配置</h3>
            <p>根据业务模型配置组织结构、管理模块和关键流程。</p>
        </div>
        <div class="step">
            <span class="num">03</span>
            <h3>培训上线</h3>
            <p>开展角色化培训并上线试运行，确保团队可快速上手并稳定使用。</p>
        </div>
        <div class="step">
            <span class="num">04</span>
            <h3>持续优化</h3>
            <p>基于运营数据持续优化流程与功能，形成可迭代的数字化管理体系。</p>
        </div>
    </div>
    <div class="footer">© <?= date('Y') ?> <?= APP_NAME ?> · 企业SaaS管理系统</div>
</div>
</body>
</html>
