@extends('front.layout.master')
@section('title', 'Contact us | ')

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.ContactUs') }}</span>
    </nav>

    <div class="mt-6 mb-8 text-center">
        <h1 class="font-display font-extrabold text-3xl lg:text-4xl">{{ __('staticwords.ContactUs') }}</h1>
        <p class="text-slate-500 text-[15px] mt-2 max-w-xl mx-auto">{{ __('Have a question or need help? We\'d love to hear from you.') }}</p>
    </div>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 grid lg:grid-cols-3 gap-5 pb-12">

    {{-- Contact info --}}
    <aside class="lg:col-span-1 space-y-4">
        @if(!empty($settings['address']))
        <div class="bg-white rounded-2xl shadow-card p-5">
            <div class="w-11 h-11 bg-brand-50 rounded-lg grid place-items-center text-brand-600 mb-3">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12Z"/><circle cx="12" cy="9" r="2.5"/></svg>
            </div>
            <h3 class="font-semibold text-[14px]">{{ __('Visit us') }}</h3>
            <p class="text-[13px] text-slate-600 mt-1 leading-relaxed">{{ $settings['address'] }}</p>
        </div>
        @endif
        @if(!empty($settings['mobile']))
        <div class="bg-white rounded-2xl shadow-card p-5">
            <div class="w-11 h-11 bg-emerald-50 rounded-lg grid place-items-center text-emerald-600 mb-3">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
            </div>
            <h3 class="font-semibold text-[14px]">{{ __('Call us') }}</h3>
            <a href="tel:{{ $settings['mobile'] }}" class="text-[13px] text-brand-600 hover:underline mt-1 block">{{ $settings['mobile'] }}</a>
        </div>
        @endif
        @if(!empty($settings['email']))
        <div class="bg-white rounded-2xl shadow-card p-5">
            <div class="w-11 h-11 bg-amber-50 rounded-lg grid place-items-center text-amber-600 mb-3">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Z"/><path d="m22 6-10 7L2 6"/></svg>
            </div>
            <h3 class="font-semibold text-[14px]">{{ __('Email us') }}</h3>
            <a href="mailto:{{ $settings['email'] }}" class="text-[13px] text-brand-600 hover:underline mt-1 block break-all">{{ $settings['email'] }}</a>
        </div>
        @endif
    </aside>

    {{-- Contact form --}}
    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <h2 class="font-display font-extrabold text-2xl mb-2">{{ __('staticwords.ContactForm') }}</h2>
            <p class="text-slate-500 text-[14px] mb-5">{{ __('Fill out the form below and we will get back to you shortly.') }}</p>

            <form action="{{ route('get.connect') }}" method="POST" class="space-y-4" novalidate>
                @csrf
                <div class="grid sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.YourName') }} <span class="text-rose-500">*</span></label>
                        <input required type="text" name="name" value="{{ old('name') }}" placeholder="{{ __('staticwords.EnterYourName') }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                        @error('name')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.eaddress') }} <span class="text-rose-500">*</span></label>
                        <input required type="email" name="email" value="{{ old('email') }}" placeholder="you@example.com" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                        @error('email')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('Subject') }} <span class="text-rose-500">*</span></label>
                    <input required type="text" name="subject" value="{{ old('subject') }}" class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                    @error('subject')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Message') }} <span class="text-rose-500">*</span></label>
                    <textarea required name="message" rows="5" class="w-full px-3 py-2 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">{{ old('message') }}</textarea>
                    @error('message')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                @if(isset($genrals_settings) && $genrals_settings->captcha_enable == 1)
                    <div>{!! no_captcha()->display() !!}</div>
                    @error('g-recaptcha-response')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                @endif
                <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-8 py-3 rounded-full transition-colors flex items-center gap-2">
                    {{ __('Send Message') }}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z"/></svg>
                </button>
            </form>
        </div>

        {{-- Map --}}
        @if(!empty($settings['address']))
        <div class="bg-white rounded-2xl shadow-card overflow-hidden mt-5">
            <iframe width="100%" height="400" frameborder="0" scrolling="no" src="https://maps.google.com/maps?width=600&height=450&hl=en&q={{ urlencode($settings['address']) }}&t=&z=14&ie=UTF8&iwloc=B&output=embed" class="w-full"></iframe>
        </div>
        @endif
    </div>
</section>

@endsection