{{-- Installer shell: logo, step indicator, one card (design: auth card + checkout stepper). --}}
@extends('layouts.base')
@section('noindex', true)
@section('title', 'Install InLynq')

@section('body')
<div class="app-auth" style="justify-content:flex-start;padding-top:56px">
  <span class="iq-logo" style="font-size:22px">{!! \App\Support\Icons::mark(40) !!}<span>In<b>Lynq</b></span></span>

  <ol class="iq-row" style="list-style:none;margin:0;padding:0;gap:8px;justify-content:center" aria-label="Installation steps">
    @php($keys = array_keys($steps))
    @php($at = $current === 'done' ? count($keys) : array_search($current, $keys, true))
    @foreach ($steps as $key => $label)
      @php($i = $loop->index)
      <li class="iq-row" style="gap:6px;font-size:12px;font-weight:500;color:{{ $i <= $at ? 'var(--ink)' : 'var(--ink-3)' }}" @if($i === $at) aria-current="step" @endif>
        <span class="app-step-dot iq-num" style="{{ $i < $at ? 'background:var(--brand-600);border-color:var(--brand-600);color:var(--on-brand)' : ($i === $at ? 'border-color:var(--brand-600);color:var(--brand-600)' : '') }}">{{ $i + 1 }}</span>
        <span class="app-hide-sm">{{ $label }}</span>
      </li>
    @endforeach
  </ol>

  <div class="iq-card app-auth-card" style="max-width:@yield('width', '520px')">
    @yield('content')
  </div>
  <p class="app-auth-below" style="text-align:center;max-width:52ch">This setup page disappears permanently once installation is complete.</p>
</div>
@endsection