@props(['titulo', 'passo' => 1, 'subtitulo' => null])

{{--
    O instalador não usa @vite de propósito: ele precisa funcionar mesmo quando
    a pasta public/build não foi enviada — e é justamente ele quem avisa disso.
--}}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $titulo }} · Instalação</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body {
            margin: 0; padding: 2rem 1rem; min-height: 100vh;
            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
            background: #f1f5f9; color: #1e293b; line-height: 1.55;
        }
        .caixa { max-width: 46rem; margin: 0 auto; }
        .marca { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
        .marca span {
            display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
            border-radius: .5rem; background: #1c4854; color: #fff; font-weight: 700;
        }
        .marca strong { font-size: 1rem; }
        .marca small { display: block; color: #64748b; font-weight: 400; }

        .passos { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
        .passos div {
            flex: 1; height: .25rem; border-radius: 999px; background: #cbd5e1;
        }
        .passos div.feito { background: #1c4854; }

        .cartao {
            background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
            padding: 1.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05);
        }
        h1 { margin: 0 0 .25rem; font-size: 1.35rem; }
        .sub { margin: 0 0 1.5rem; color: #64748b; font-size: .925rem; }
        h2 { margin: 1.75rem 0 .75rem; font-size: .8rem; text-transform: uppercase;
             letter-spacing: .05em; color: #64748b; }
        h2:first-of-type { margin-top: 0; }

        label { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 500; }
        input, select {
            width: 100%; padding: .6rem .75rem; font-size: .925rem; color: #0f172a;
            border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff;
        }
        input:focus { outline: 2px solid #2b707e33; border-color: #2b707e; }
        .campo { margin-bottom: 1rem; }
        .dica { margin: .35rem 0 0; font-size: .8rem; color: #64748b; }
        .grade { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
        @media (max-width: 40rem) { .grade { grid-template-columns: 1fr; } }

        .btn {
            display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
            padding: .65rem 1.25rem; font-size: .925rem; font-weight: 600;
            border: 0; border-radius: .5rem; background: #1c4854; color: #fff;
            text-decoration: none;
        }
        .btn:hover { background: #173a44; }
        .btn[disabled] { opacity: .5; cursor: not-allowed; }
        .btn-fantasma { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
        .acoes { display: flex; gap: .75rem; margin-top: 1.5rem; align-items: center; }

        .lista { list-style: none; margin: 0; padding: 0; }
        .lista li {
            display: flex; align-items: flex-start; gap: .75rem;
            padding: .55rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem;
        }
        .lista li:last-child { border-bottom: 0; }
        .lista .rotulo { flex: 1; }
        .lista .valor { color: #64748b; font-size: .825rem; }
        .selo {
            flex-shrink: 0; width: 4.25rem; text-align: center; padding: .1rem 0;
            border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .03em;
        }
        .ok { background: #ecfdf5; color: #047857; }
        .falha { background: #fef2f2; color: #b91c1c; }
        .aviso { background: #fffbeb; color: #b45309; }
        .ajuda { margin: .2rem 0 0; font-size: .8rem; color: #b91c1c; }
        .ajuda.suave { color: #b45309; }

        .alerta {
            padding: .85rem 1rem; border-radius: .5rem; font-size: .9rem; margin-bottom: 1.25rem;
        }
        .alerta-erro { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
        .alerta-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
        .alerta-atencao { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
        .alerta ul { margin: .35rem 0 0; padding-left: 1.15rem; }

        code, pre {
            font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8rem;
        }
        pre {
            background: #0f172a; color: #e2e8f0; padding: .85rem 1rem;
            border-radius: .5rem; overflow-x: auto; margin: .5rem 0;
        }
        .rodape { margin-top: 1.5rem; text-align: center; font-size: .8rem; color: #94a3b8; }
    </style>
</head>
<body>
<div class="caixa">
    <div class="marca">
        <span>XM</span>
        <strong>
            XML Monitor
            <small>Instalação</small>
        </strong>
    </div>

    <div class="passos" aria-label="Etapa {{ $passo }} de 4">
        @for ($i = 1; $i <= 4; $i++)
            <div class="{{ $i <= $passo ? 'feito' : '' }}"></div>
        @endfor
    </div>

    <div class="cartao">
        <h1>{{ $titulo }}</h1>
        @if ($subtitulo)
            <p class="sub">{{ $subtitulo }}</p>
        @endif

        @if (session('status'))
            <div class="alerta alerta-ok">{{ session('status') }}</div>
        @endif

        @if ($errors->any())
            <div class="alerta alerta-erro">
                <strong>Não foi possível continuar</strong>
                <ul>
                    @foreach ($errors->all() as $erro)
                        <li>{{ $erro }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{ $slot }}
    </div>

    <p class="rodape">Etapa {{ $passo }} de 4</p>
</div>
</body>
</html>
