@extends('layouts.app')

@section('title', 'Contact')
@section('meta_description', 'Questions about InkLoop, moving your studio over, or something that is not working. Send us a message.')

@section('content')
<section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
    <div class="grid gap-14 lg:grid-cols-[1fr_1.15fr] lg:gap-20">

        <div>
            <p class="eyebrow mb-5">Contact</p>
            <h1 class="display text-[clamp(2.1rem,5vw,3.2rem)]">Ask us anything.</h1>
            <p class="mt-6 max-w-md text-lg leading-relaxed" style="color: var(--ink-soft);">
                Whether it's a question before you start, help moving an existing book across, or
                something that isn't working — write and we'll answer.
            </p>

            <dl class="mt-12 space-y-7">
                <div>
                    <dt class="eyebrow" style="font-size:.62rem">Already using InkLoop</dt>
                    <dd class="mt-2 text-sm leading-relaxed" style="color: var(--ink-soft);">
                        Tell us your studio name so we can look at your account while we read.
                    </dd>
                </div>
                <div>
                    <dt class="eyebrow" style="font-size:.62rem">Just looking</dt>
                    <dd class="mt-2 text-sm leading-relaxed" style="color: var(--ink-soft);">
                        The <a href="{{ route('demo') }}" class="underline decoration-2 underline-offset-4" style="text-decoration-color: var(--rule);">demo studio</a>
                        answers most questions faster than we can, and there's nothing to sign up for.
                    </dd>
                </div>
                <div>
                    <dt class="eyebrow" style="font-size:.62rem">Something's broken</dt>
                    <dd class="mt-2 text-sm leading-relaxed" style="color: var(--ink-soft);">
                        Say what you were doing and what happened instead. That's usually enough for us
                        to reproduce it.
                    </dd>
                </div>
            </dl>
        </div>

        <div class="border rule p-8 sm:p-10" style="background: var(--surface);">
            @if(session('success'))
                <div class="mb-7 border-l-2 pl-4 py-1" style="border-color: var(--good);">
                    <p class="text-sm font-semibold" style="color: var(--good);">{{ session('success') }}</p>
                </div>
            @endif

            @if($errors->any())
                <div class="mb-7 border-l-2 pl-4 py-1" style="border-color: var(--bad);">
                    <ul class="space-y-1 text-sm" style="color: var(--bad);">
                        @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('contact.submit') }}" method="POST" class="space-y-5">
                @csrf

                {{-- Honeypot: hidden from humans, bots auto-fill it --}}
                <div aria-hidden="true" style="position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;">
                    <label for="website_url">Leave this empty</label>
                    <input type="text" name="website_url" id="website_url" tabindex="-1" autocomplete="off" value="">
                </div>

                {{-- Timing trap: the signed moment the form was rendered. A
                     submission that arrives within a couple of seconds is a bot. --}}
                <input type="hidden" name="form_loaded_at" value="{{ \Illuminate\Support\Facades\Crypt::encryptString((string) time()) }}">

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="first-name" class="field-label">First name</label>
                        <input type="text" name="first-name" id="first-name" required maxlength="255"
                               value="{{ old('first-name') }}" autocomplete="given-name" class="field">
                    </div>
                    <div>
                        <label for="last-name" class="field-label">Last name</label>
                        <input type="text" name="last-name" id="last-name" required maxlength="255"
                               value="{{ old('last-name') }}" autocomplete="family-name" class="field">
                    </div>
                </div>

                <div>
                    <label for="company" class="field-label">
                        Studio <span class="font-normal" style="color: var(--muted);">(optional)</span>
                    </label>
                    <input type="text" name="company" id="company" maxlength="255"
                           value="{{ old('company') }}" autocomplete="organization" class="field">
                </div>

                <div>
                    <label for="email" class="field-label">Email</label>
                    <input type="email" name="email" id="email" required maxlength="255"
                           value="{{ old('email') }}" autocomplete="email" class="field">
                </div>

                <div>
                    <label for="phone-number" class="field-label">
                        Phone <span class="font-normal" style="color: var(--muted);">(optional)</span>
                    </label>
                    <input type="text" name="phone-number" id="phone-number" maxlength="50"
                           value="{{ old('phone-number') }}" autocomplete="tel" class="field">
                </div>

                <div>
                    <label for="message" class="field-label">Message</label>
                    <textarea name="message" id="message" rows="5" required maxlength="5000"
                              class="field">{{ old('message') }}</textarea>
                </div>

                <button type="submit" class="btn btn-primary w-full">Send message</button>

                <p class="text-xs leading-relaxed" style="color: var(--muted);">
                    We'll only use this to reply. See our
                    <a href="{{ route('privacy') }}" class="underline decoration-2 underline-offset-2">privacy policy</a>.
                </p>
            </form>
        </div>
    </div>
</section>
@endsection