<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>欢迎 — DBErp 安装向导</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            color-scheme: light;
            --blue:    #2563eb; --blue-d:  #1d4ed8; --blue-dd: #1e40af;
            --blue-bg: #eff6ff; --blue-br: #bfdbfe;
            --green:   #16a34a; --green-d: #15803d;
            --s50: #f8fafc; --s100: #f1f5f9; --s200: #e2e8f0;
            --s300: #cbd5e1; --s400: #94a3b8; --s500: #64748b;
            --s600: #475569; --s700: #334155; --s800: #1e293b; --s900: #0f172a;
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            background-color: #eef2ff;
            background-image:
                radial-gradient(ellipse 100% 55% at 0% 0%, rgba(219,234,254,.65) 0%, transparent 55%),
                radial-gradient(ellipse 70% 50% at 100% 100%, rgba(220,252,231,.45) 0%, transparent 55%),
                radial-gradient(circle, rgba(99,102,241,.055) 1px, transparent 1px);
            background-size: auto, auto, 28px 28px;
            background-attachment: fixed;
            color: var(--s900);
            line-height: 1.65;
            min-height: 100vh;
        }
        /* ── Stepper ───────────────────────── */
        .stepper-wrap { max-width: 44rem; margin: 0 auto; padding: 1.375rem 1.5rem .25rem; }
        .stepper { display: flex; align-items: flex-start; }
        .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
        .step-conn {
            flex: 1; height: 3px; background: var(--s200);
            margin-top: .875rem; border-radius: 2px;
        }
        .step-conn.done { background: var(--blue); }
        .step-dot {
            width: 2rem; height: 2rem;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .6875rem; font-weight: 700;
            border: 2px solid var(--s200); background: #fff; color: var(--s400);
            flex-shrink: 0;
            transition: border-color .2s, background .2s, box-shadow .2s;
        }
        .step.active .step-dot {
            background: #fff; border-color: var(--blue); color: var(--blue);
            box-shadow: 0 0 0 5px rgba(37,99,235,.13);
        }
        .step-lbl { font-size: .6875rem; color: var(--s400); text-align: center; white-space: nowrap; line-height: 1.3; }
        .step.active .step-lbl { color: var(--blue-d); font-weight: 600; }
        /* ── Wrap & Card ───────────────────── */
        .wrap { max-width: 44rem; margin: 0 auto; padding: 1.375rem 1.5rem 3rem; }
        .card {
            background: #fff;
            border-radius: 1rem;
            border: 1px solid var(--s200);
            box-shadow: 0 8px 20px -4px rgba(0,0,0,.09), 0 4px 6px -2px rgba(0,0,0,.04);
            overflow: hidden;
            position: relative;
        }
        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, #2563eb 0%, #6366f1 50%, #2563eb 100%);
            z-index: 1;
        }
        .card-hd {
            padding: 2.25rem 1.75rem 1.75rem;
            border-bottom: 1px solid var(--s100);
            background: linear-gradient(135deg, #eef3ff 0%, #f5f8ff 50%, #f0fdf7 100%);
            display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem;
        }
        .card-bd { padding: 1.5rem 1.75rem; }
        .product-icon {
            width: 4rem; height: 4rem;
            background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
            border-radius: 1rem;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 16px rgba(37,99,235,.32), 0 2px 4px rgba(37,99,235,.2);
        }
        .product-icon .install-brand-cube-card {
            width: 32px;
            height: 32px;
            color: #fff;
            display: block;
        }
        h1 { font-size: 1.5rem; font-weight: 800; color: var(--s900); letter-spacing: -.015em; }
        .lead { color: var(--s600); font-size: .9375rem; line-height: 1.7; max-width: 36rem; }
        /* ── Step List ─────────────────────── */
        .step-list { list-style: none; display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.375rem; }
        .step-list li {
            display: flex; align-items: flex-start; gap: .75rem;
            font-size: .9375rem; color: var(--s700); line-height: 1.55;
        }
        .step-list .ico {
            flex-shrink: 0; width: 1.375rem; height: 1.375rem;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--blue-bg); margin-top: .1rem;
        }
        .step-list .ico svg { display: block; }
        /* ── Note ─────────────────────────── */
        .note {
            display: flex; align-items: flex-start; gap: .75rem;
            padding: .875rem 1.125rem;
            background: var(--blue-bg); border: 1px solid var(--blue-br);
            border-radius: .625rem;
            font-size: .9rem; color: var(--blue-dd); line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        .note svg { flex-shrink: 0; margin-top: .1rem; }
        /* ── Actions ───────────────────────── */
        .actions { display: flex; align-items: center; }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
            padding: .65rem 1.5rem;
            border-radius: .5rem; font-size: .9375rem; font-weight: 600;
            text-decoration: none; border: none; cursor: pointer;
            transition: all .15s; white-space: nowrap; line-height: 1.5;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--blue), #5b50f0);
            color: #fff;
            box-shadow: 0 2px 6px rgba(37,99,235,.32), 0 1px 2px rgba(37,99,235,.2);
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, var(--blue-d), var(--blue-dd));
            box-shadow: 0 6px 14px rgba(37,99,235,.38);
            transform: translateY(-1px);
        }
        .btn-primary:active { transform: translateY(1px) scale(.98); box-shadow: 0 1px 2px rgba(37,99,235,.15); }
        .btn-primary.is-install-busy { transform: none; }
    </style>
</head>
<body>

@include('install.partials.install-wizard-header')

<div class="stepper-wrap">
    <div class="stepper">
        <div class="step active">
            <div class="step-dot">1</div>
            <div class="step-lbl">欢迎</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">2</div>
            <div class="step-lbl">环境检测</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">3</div>
            <div class="step-lbl">数据库配置</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">4</div>
            <div class="step-lbl">系统初始化</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">5</div>
            <div class="step-lbl">安装完成</div>
        </div>
    </div>
</div>

<div class="wrap">
    <div class="card">
        <div class="card-hd">
            <div class="product-icon" aria-hidden="true">
                @include('partials.dberp-brand-cube-mark', ['class' => 'install-brand-cube-card'])
            </div>
            <div>
                <h1>欢迎使用 DBErp</h1>
                <p class="lead">您即将开始安装 DBErp 进销存系统。本向导将引导您完成环境检测、数据库配置与系统初始化，全程约需 5 分钟。</p>
            </div>
        </div>
        <div class="card-bd">
            <ul class="step-list">
                <li>
                    <span class="ico">
                        <svg width="11" height="11" viewBox="0 0 16 16" fill="#2563eb"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
                    </span>
                    <span>服务器须满足运行环境要求（下一步将自动检测）。</span>
                </li>
                <li>
                    <span class="ico">
                        <svg width="11" height="11" viewBox="0 0 16 16" fill="#2563eb"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
                    </span>
                    <span>请提前准备好<strong>数据库</strong>连接信息（地址、库名、账号、密码）。</span>
                </li>
                <li>
                    <span class="ico">
                        <svg width="11" height="11" viewBox="0 0 16 16" fill="#2563eb"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
                    </span>
                    <span>安装完成后，安装向导将自动锁定，<strong>无法重复执行</strong>，以保护已有数据。</span>
                </li>
                <li>
                    <span class="ico">
                        <svg width="11" height="11" viewBox="0 0 16 16" fill="#2563eb"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
                    </span>
                    <span>安装完成后使用<strong>管理员账号</strong>登录管理端，从<strong>工作台</strong>开始配置业务参数与基础资料，即可正式使用。</span>
                </li>
            </ul>

            <div class="note">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="#1e40af" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"/></svg>
                <span>请先完成<strong>环境检测</strong>。数据库连接信息与初始化配置将在后续步骤中填写，本步骤无需任何填写。</span>
            </div>

            <div class="actions">
                <a class="btn btn-primary" href="{{ route('install.environment') }}">
                    开始环境检测
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>
                </a>
            </div>
        </div>
    </div>
</div>

@include('install.partials.official-feedback-entry', ['variant' => 'default', 'compact' => true])

@include('install.partials.wizard-action-feedback')
</body>
</html>
