{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: contact.blade.php
------------------------------------------------------
Use: The public "Contact" page: support details plus a
     message form delivered to the configured contact email
     and raised as an in-site alert to operators.
=====================================================
--}}

@extends('layouts.public')

@section('title', __('front.public.nav.contact').' - '.($siteTitle ?? __('front.app.name')))

@php
    use App\Support\Format;
    $phone = $siteSupportPhone ?? '۰۲۱ - ۹۱۰۰۰۰۰۰';
    $email = $siteSupportEmail ?? 'support@etebarit.ir';
    $inputCls = 'w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white';
@endphp

@section('content')
    <section class="bg-gradient-to-b from-white to-[#faf9fd]">
        <div class="mx-auto max-w-3xl px-5 py-16 text-center sm:px-6">
            <span data-reveal-hero class="inline-flex rounded-full border border-primary-100 bg-primary-50 px-4 py-2 text-[13px] font-bold text-primary-600">{{ __('front.public.contact.badge') }}</span>
            <h1 data-reveal-hero class="mt-6 text-[clamp(30px,5vw,46px)] font-bold tracking-tight">{{ __('front.public.contact.title') }}</h1>
            <p data-reveal-hero class="mt-4 text-ink-muted">{{ __('front.public.contact.sub') }}</p>
        </div>
    </section>

    <section class="mx-auto max-w-6xl px-5 pb-24 pt-12 sm:px-6">
        <div class="grid gap-6 lg:grid-cols-[1fr_1.4fr]">
            {{-- Info cards --}}
            <div data-reveal data-reveal-group="contact" class="flex flex-col gap-4">
                <div class="rounded-2xl border border-line bg-white p-6">
                    <span class="flex size-11 items-center justify-center rounded-2xl bg-primary-50 text-primary-600"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"/></svg></span>
                    <div class="mt-4 text-[14px] font-bold">{{ __('front.public.contact.phone_title') }}</div>
                    <div class="mt-1 text-[15px] font-bold text-primary-600" dir="ltr">{{ Format::persianDigits($phone) }}</div>
                    <div class="mt-1 text-[12px] text-ink-faint">{{ __('front.public.contact.phone_hours') }}</div>
                </div>
                <div class="rounded-2xl border border-line bg-white p-6">
                    <span class="flex size-11 items-center justify-center rounded-2xl bg-secondary-50 text-secondary-500"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
                    <div class="mt-4 text-[14px] font-bold">{{ __('front.public.contact.email_title') }}</div>
                    <div class="mt-1 text-[15px] font-bold" dir="ltr">{{ $email }}</div>
                    <div class="mt-1 text-[12px] text-ink-faint">{{ __('front.public.contact.email_hint') }}</div>
                </div>
            </div>

            {{-- Form --}}
            <div data-reveal data-reveal-group="contact" class="rounded-3xl border border-line bg-white p-7">
                @if (session('contact_status'))
                    <div class="flex items-center gap-3 rounded-2xl border border-green-200 bg-green-50 px-5 py-5 text-center">
                        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-green-600/10 text-green-700"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <p class="text-[14px] font-bold leading-7 text-green-800">{{ session('contact_status') }}</p>
                    </div>
                @endif

                <form method="POST" action="{{ route('contact.submit') }}" x-data="{ busy: false }" x-ref="form" class="@if (session('contact_status')) mt-6 @endif flex flex-col gap-4">
                    @csrf
                    <div class="text-base font-bold">{{ __('front.public.contact.form_title') }}</div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.public.contact.name') }}</label>
                            <input name="name" value="{{ old('name') }}" class="{{ $inputCls }}">
                        </div>
                        <div>
                            <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.public.contact.mobile') }}</label>
                            <input name="mobile" value="{{ old('mobile') }}" dir="ltr" inputmode="numeric" class="{{ $inputCls }} text-left">
                        </div>
                        <div>
                            <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.public.contact.email') }}</label>
                            <input name="email" value="{{ old('email') }}" dir="ltr" class="{{ $inputCls }} text-left">
                        </div>
                        <div>
                            <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.public.contact.subject') }}</label>
                            <select name="subject" class="{{ $inputCls }}">
                                @foreach (__('front.public.contact.subjects') as $subject)
                                    <option value="{{ $subject }}" @selected(old('subject') === $subject)>{{ $subject }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.public.contact.message') }}</label>
                        <textarea name="message" rows="5" class="{{ $inputCls }}">{{ old('message') }}</textarea>
                    </div>
                    <div>
                        <button type="button" x-bind:disabled="busy"
                                x-on:click="busy = true; $refs.form.submit()"
                                class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-7 py-3.5 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60">
                            <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                            {{ __('front.public.contact.send') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection