{{-- Short first-run flow. Every step can be skipped. --}}
@extends('layouts.auth')
@section('title', 'Set up your InLynq')

@section('content')
<div class="iq-row" style="gap:8px">
  @foreach (['Your link', 'About you', 'Your work', 'Publish'] as $i => $label)
    @php($active = ($step === 'profile' && $i === 1) || ($step === 'work' && $i === 2))
    @php($done = $i === 0 || ($step === 'work' && $i === 1))
    <span class="iq-row" style="gap:6px;font-size:12px;font-weight:500;color:{{ $active || $done ? 'var(--ink)' : 'var(--ink-3)' }}">
      <span class="app-step-dot iq-num" style="{{ $done ? 'background:var(--brand-600);border-color:var(--brand-600);color:var(--on-brand)' : ($active ? 'border-color:var(--brand-600);color:var(--brand-600)' : '') }}">{{ $i + 1 }}</span>
      <span class="app-hide-sm">{{ $label }}</span>
    </span>
  @endforeach
</div>

@if ($step === 'profile')
  <div><h1>Tell people who you are</h1><p class="iq-muted" style="margin:4px 0 0">You can change all of this later.</p></div>
  <form method="POST" action="{{ route('onboarding.profile') }}" enctype="multipart/form-data" class="iq-stack">
    @csrf
    <x-iq.upload name="avatar" shape="avatar" :initials="$user->initials" label="Add a photo" help="Square, at least 256px." />
    <x-iq.field label="Headline" name="headline" optional help="e.g. Founder & Operator"><x-iq.input name="headline" :value="$user->headline" maxlength="80" /></x-iq.field>
    <x-iq.field label="One-line bio" name="bio" optional><x-iq.input name="bio" :value="$user->bio" maxlength="160" placeholder="What you build, and for whom." /></x-iq.field>
    <x-iq.field label="Location" name="location" optional><x-iq.input name="location" :value="$user->location" placeholder="Lagos, Nigeria" /></x-iq.field>
    <div class="iq-row" style="justify-content:space-between">
      <a class="iq-btn iq-btn-quiet" href="{{ route('onboarding.show', ['step' => 'work']) }}">Skip for now</a>
      <button class="iq-btn iq-btn-primary">Continue</button>
    </div>
  </form>
@else
  <div><h1>Add your first company or product</h1><p class="iq-muted" style="margin:4px 0 0">Each one gets its own card on your profile.</p></div>
  <form method="POST" action="{{ route('onboarding.work') }}" class="iq-stack">
    @csrf
    <div class="iq-seg" data-bind="[data-kind-input]" style="align-self:flex-start"><button type="button" class="is-active" data-value="company">Company</button><button type="button" data-value="product">Product</button></div>
    <input type="hidden" name="kind" value="{{ old('kind', 'company') }}" data-kind-input>
    <x-iq.field label="Name" name="name"><x-iq.input name="name" required maxlength="120" /></x-iq.field>
    <x-iq.field label="What it does" name="description" optional help="One sentence, e.g. Marketing for B2B logistics companies."><x-iq.input name="description" maxlength="160" /></x-iq.field>
    <x-iq.field label="Website" name="website" optional><x-iq.affix name="website" prefix="https://" placeholder="example.com" /></x-iq.field>
    <div class="iq-row" style="justify-content:space-between">
      <a class="iq-btn iq-btn-quiet" href="{{ route('builder.show') }}">Skip for now</a>
      <button class="iq-btn iq-btn-primary">Continue to preview</button>
    </div>
  </form>
@endif
@endsection