@extends('layouts.app')

@section('title', __('storefront.nav.contact'))
@section('description', 'Επικοινώνησε μαζί μας για οποιαδήποτε απορία ή ιδέα έχεις και θα σου απαντήσουμε το συντομότερο δυνατό.')

{{-- Only on pages with a captcha, not in the global layout. --}}
@push('scripts')
    <script src="https://js.hcaptcha.com/1/api.js?hl={{ app()->getLocale() }}" async defer></script>
@endpush

@section('content')

    <section class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-black lg:min-h-[calc(100vh-102px)]">

        <div class="flex flex-col justify-center gap-10 px-8 py-16 lg:px-16">

            <svg viewBox="0 0 135 124" class="rotating-star text-brand w-24 h-24 lg:w-40 lg:h-40" aria-hidden="true" fill="currentColor">
                <path d="m88.4 0 4 28.9 29.7-5.2-14.3 25.7L135 62l-27.2 12.6 14.3 25.7-29.7-5.2-4 28.9-20.9-21.1L46.6 124l-4-28.9-29.7 5.2 14.3-25.7L0 62l27.2-12.6-14.3-25.7 29.7 5.2 4-28.9 20.9 21.1L88.4 0z"/>
            </svg>

            <h1 class="font-display text-h2 font-semibold leading-tight lg:text-h2"
                data-controller="appear"
                data-appear-visible-class="is-visible">
                <span class="text-dance">Επικοινώνησε</span><br>
                μαζί μας <span class="text-dance [--dance-delay:200ms]">άμεσα</span>
            </h1>

            <p class="max-w-md ">
                Έχεις απορία, ιδέα ή θες να μας πεις κάτι; Γράψε μας το μήνυμά σου και θα σου απαντήσουμε το συντομότερο δυνατό.
            </p>

            <x-ui.status class="max-w-xl" />

            <form method="POST" action="{{ route('contact.send') }}" class="flex flex-col gap-8 max-w-xl">
                @csrf

                <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
                    <x-ui.field label="Το όνομά σου *" for="contact-name" :error="$errors->first('name')">
                        <x-ui.input id="contact-name" name="name" autocomplete="name" maxlength="100" :value="old('name')" :required="true"
                            :aria-invalid="$errors->has('name') ? 'true' : null"
                            :aria-describedby="$errors->has('name') ? 'contact-name-error' : null" />
                    </x-ui.field>

                    <x-ui.field label="Το email σου *" for="contact-email" :error="$errors->first('email')">
                        <x-ui.input id="contact-email" name="email" type="email" autocomplete="email" maxlength="255" :value="old('email')" :required="true"
                            :aria-invalid="$errors->has('email') ? 'true' : null"
                            :aria-describedby="$errors->has('email') ? 'contact-email-error' : null" />
                    </x-ui.field>
                </div>

                <x-ui.field label="Το μήνυμά σου *" for="contact-message" :error="$errors->first('message')">
                    <x-ui.textarea id="contact-message" name="message" rows="5" maxlength="5000" :required="true"
                        :aria-invalid="$errors->has('message') ? 'true' : null"
                        :aria-describedby="$errors->has('message') ? 'contact-message-error' : null">{{ old('message') }}</x-ui.textarea>
                </x-ui.field>

                {{-- hCaptcha checkbox, verified by App\Rules\HCaptcha (see auth/login). --}}
                <x-ui.field for="contact-captcha" :error="$errors->first('h-captcha-response')">
                    <div
                        id="contact-captcha"
                        class="h-captcha min-h-[78px]"
                        data-sitekey="{{ config('services.hcaptcha.sitekey') }}"
                        @if ($errors->has('h-captcha-response')) aria-describedby="contact-captcha-error" @endif
                    ></div>
                </x-ui.field>

                @if (session('contact_error'))
                    <p role="alert" class="text-sm text-red-600">{{ session('contact_error') }}</p>
                @endif

                <div>
                    <x-ui.button type="submit" size="md">Υποβολή</x-ui.button>
                </div>
            </form>

        </div>

        <div class="min-h-[320px] bg-neutral-400 lg:min-h-full" aria-hidden="true"></div>

    </section>

@endsection