@extends('layouts.site')

@section('meta_title')
    {{ __('site.track_title') }} — {{ brand_name() }}
@endsection

@section('title', __('site.track_title'))

@section('content')
    <div class="site-container max-w-2xl pb-16 px-4">
        <header class="my-8">
            <h1 class="text-3xl font-bold eca-theme-text">{{ __('site.track_title') }}</h1>
            <p class="mt-2 text-sm eca-theme-text-muted">{{ __('site.track_subtitle') }}</p>
        </header>

        @if (! empty($trackError))
            <p class="mb-4 rounded-lg bg-red-500/10 px-4 py-3 text-sm text-red-600">{{ $trackError }}</p>
        @endif

        <form
            method="get"
            action="{{ route('site.repair-tracking.index', ['locale' => app()->getLocale()]) }}"
            class="eca-track-form rounded-2xl border p-5 sm:p-6"
            style="border-color: var(--eca-border); background: var(--eca-card);">
            <label for="track-code" class="mb-2 block text-sm font-semibold eca-theme-text">
                {{ __('site.track_code_label') }}
            </label>
            <div class="flex flex-col gap-3 sm:flex-row">
                <input
                    id="track-code"
                    type="text"
                    name="code"
                    required
                    autofocus
                    autocomplete="off"
                    spellcheck="false"
                    dir="ltr"
                    placeholder="{{ __('site.track_code_placeholder') }}"
                    class="eca-track-form__input min-w-0 flex-1 rounded-xl border px-4 py-3 font-mono text-sm"
                    style="border-color: var(--eca-border); background: var(--eca-surface); color: var(--eca-text);" />
                <button type="submit" class="site-btn-primary shrink-0 sm:px-8">
                    {{ __('site.track_submit') }}
                </button>
            </div>
            <p class="mt-3 text-xs eca-theme-text-muted">{{ __('site.track_hint') }}</p>
        </form>

        <div class="mt-8 flex flex-wrap gap-3">
            <button type="button" class="site-btn-primary text-sm" data-assistant-open data-intent="repair">
                {{ __('site.cta_request') }}
            </button>
            <a href="{{ route('site.contact', ['locale' => app()->getLocale()]) }}" class="site-btn-outline text-sm">
                {{ __('site.nav_contact') }}
            </a>
        </div>
    </div>
@endsection