@extends('layouts.public')

@section('title', 'Contact — Boss Of AI')
@section('meta_description', 'Questions about Boss Of AI, billing or the data behind the leads? Send us a message.')

@section('content')
<section class="py-14 md:py-20">
    <div class="shell grid gap-12 lg:grid-cols-[minmax(0,24rem)_1fr] lg:gap-20">
        <div>
            <h1 class="text-4xl leading-[1.05]">Contact</h1>
            <p class="mt-5 max-w-[42ch] leading-relaxed text-graphite-600">
                Questions about the product, the data behind the leads, or billing. We reply within one
                business day.
            </p>
            <p class="mt-6 text-[15px]">
                <a href="mailto:{{ config('bossofai.brand.support_email') }}" class="underline underline-offset-4">{{ config('bossofai.brand.support_email') }}</a>
            </p>
        </div>

        <form method="POST" action="{{ route('contact.store') }}" class="max-w-xl space-y-5">
            @csrf
            <div class="absolute -left-[9999px]" aria-hidden="true">
                <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
            </div>

            @foreach ([
                ['name', 'Your name', 'text', true],
                ['email', 'Work email', 'email', true],
                ['company', 'Company (optional)', 'text', false],
                ['subject', 'Subject', 'text', true],
            ] as [$field, $label, $type, $required])
                <div>
                    <label for="{{ $field }}" class="mb-1.5 block text-sm font-medium">{{ $label }}</label>
                    <input id="{{ $field }}" type="{{ $type }}" name="{{ $field }}" value="{{ old($field) }}"
                           @required($required) class="field">
                    @error($field)<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
            @endforeach

            <div>
                <label for="body" class="mb-1.5 block text-sm font-medium">Message</label>
                <textarea id="body" name="body" rows="6" required class="field">{{ old('body') }}</textarea>
                @error('body')<p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <button type="submit" class="btn btn-primary">Send message</button>
        </form>
    </div>
</section>
@endsection