@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-14"><div class="wrap max-w-4xl">
    <p class="eyebrow">Start a Project</p>
    <h1 class="display">{{ \App\Support\Text::accent('Tell us what is *slowing you down*.') }}</h1>
    <p class="lead mt-6">Three short steps. No sales call unless you want one. We reply within one working day.</p>
</div></section>

<section class="on-light section !py-14"><div class="wrap max-w-3xl">
    <form method="post" action="{{ route('start-project.store') }}" data-steps data-first-error="{{ $errors->hasAny(['name', 'email', 'company']) ? 2 : ($errors->hasAny(['timeline', 'budget_range']) ? 1 : ($errors->any() ? 0 : '')) }}" novalidate>
        @csrf
        <input type="hidden" name="utm_source" value="{{ request('utm_source') }}">
        <input type="hidden" name="utm_campaign" value="{{ request('utm_campaign') }}">
        <div class="absolute -left-[9999px]" aria-hidden="true"><label>Leave empty <input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
        <p class="mb-6 font-display text-sm text-muted" data-progress aria-live="polite">Step 1 of 3</p>

        <fieldset data-step class="space-y-3">
            <legend class="h3 mb-4">Which of these sounds most like you?</legend>
            @foreach ($needs as $key => $label)
                <label class="flex cursor-pointer items-center gap-4 rounded border border-ink/20 bg-white px-5 py-4 transition has-[:checked]:border-violet has-[:checked]:bg-violet/5">
                    <input type="radio" name="need" value="{{ $key }}" class="h-4 w-4 accent-[rgb(var(--violet))]" @checked(old('need', $preselect) === $key)>
                    <span class="font-display text-lg">{{ $label }}</span>
                </label>
            @endforeach
            <p class="error" data-need-error @if (! $errors->has('need')) hidden @endif>Pick the closest one. You can explain more in a moment.</p>
            <div class="pt-3"><label class="label" for="situation">Anything else we should know? (optional)</label>
                <textarea class="field" id="situation" name="situation" rows="4">{{ old('situation') }}</textarea></div>
        </fieldset>

        <fieldset data-step class="space-y-5" hidden>
            <legend class="h3 mb-4">When and roughly how much?</legend>
            <div><label class="label" for="timeline">When do you want to start?</label>
                <select class="field" id="timeline" name="timeline"><option value="">Choose</option>@foreach ($timelines as $t)<option @selected(old('timeline') === $t)>{{ $t }}</option>@endforeach</select></div>
            <div><label class="label" for="budget_range">Budget range</label>
                <select class="field" id="budget_range" name="budget_range"><option value="">Choose</option>@foreach ($budgets as $b)<option @selected(old('budget_range') === $b)>{{ $b }}</option>@endforeach</select></div>
        </fieldset>

        <fieldset data-step class="space-y-5" hidden>
            <legend class="h3 mb-4">Who should we reply to?</legend>
            <div><label class="label" for="name">Your name</label><input class="field" id="name" name="name" value="{{ old('name') }}" required autocomplete="name">@error('name')<p class="error">{{ $message }}</p>@enderror</div>
            <div><label class="label" for="email">Work email</label><input class="field" id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email">@error('email')<p class="error">{{ $message }}</p>@enderror</div>
            <div><label class="label" for="company">Company</label><input class="field" id="company" name="company" value="{{ old('company') }}" autocomplete="organization"></div>
        </fieldset>

        <div class="mt-8 flex items-center gap-3">
            <button type="button" class="btn btn-ghost-light" data-prev hidden>Back</button>
            <button type="button" class="btn btn-primary" data-next>Continue @include('partials.arrow')</button>
            <button type="submit" class="btn btn-primary" data-submit>Send my request @include('partials.arrow')</button>
        </div>
    </form>
</div></section>
@endsection