@extends('Client.layouts.layout')
@section('content')

@push('css')
<style>
/* ---------- HERO ---------- */
.contact-hero {
    min-height: 300px;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--main--color), #333);
}

.contact-hero h1 {
    font-size: 3rem;
    font-weight: 700;
}

/* ---------- CARD ---------- */
.contact-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

/* ---------- LEFT IMAGE ---------- */
.contact-image {
    background: url('{{ asset("assets/img/contact-side.jpg") }}') center/cover no-repeat;
    min-height: 100%;
}

/* ---------- TOP INFO ---------- */
.contact-top-info {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.contact-info-box {
    flex: 1;
    min-width: 150px;
    padding: 18px;
    border-radius: 14px;
    background: #f9f9f9;
    text-align: center;
    transition: .3s;
}

.contact-info-box:hover {
    background: var(--main--color);
    color: #fff;
    transform: translateY(-3px);
}

.contact-info-box i {
    font-size: 26px;
    margin-bottom: 10px;
    display: block;
}

.contact-info-box a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    word-break: break-word;
}

/* ---------- INPUTS ---------- */
.input-group-modern {
    position: relative;
    margin-bottom: 30px;
}

.input-group-modern input,
.input-group-modern textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ddd;
    padding: 12px 0;
    font-size: 15px;
    outline: none;
    background: transparent;
}

.input-group-modern label {
    position: absolute;
    top: 12px;
    @if(lang('en'))
        left: 0;
    @else
        right: 0;
    @endif
    color: #888;
    transition: .3s;
    pointer-events: none;
}

.input-group-modern input:focus + label,
.input-group-modern input:not(:placeholder-shown) + label,
.input-group-modern textarea:focus + label,
.input-group-modern textarea:not(:placeholder-shown) + label {
    top: -12px;
    font-size: 12px;
    color: var(--main--color);
}

/* ---------- BUTTON ---------- */
.btn-contact {
    background: var(--main--color);
    color: #fff;
    padding: 12px 40px;
    border-radius: 30px;
    transition: .3s;
}

.btn-contact:hover {
    background: #333;
    transform: translateY(-2px);
}
</style>
@endpush

{{-- HERO --}}
<section class="contact-hero">
    <div class="container text-center">
        <h1 data-aos="fade-down">{{ __('trans.contact_us') }}</h1>
        <p data-aos="fade-up" data-aos-delay="200">
            @lang('trans.ContactMessage')
        </p>
    </div>
</section>

{{-- CONTENT --}}
<div class="container my-5">
    <div class="row contact-card">
        <div class="col-12">

            {{-- TOP CONTACT INFO --}}
            <div class="contact-top-info">

                {{-- EMAIL --}}
                <div class="contact-info-box">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:{{ setting('email') }}">
                        {{ setting('email') }}
                    </a>
                </div>

                {{-- PHONE --}}
                <div class="contact-info-box">
                    <i class="fas fa-phone"></i>
                    <a href="tel:{{ setting('phone') }}">
                        {{ setting('phone') }}
                    </a>
                </div>

                {{-- WHATSAPP --}}
                <div class="contact-info-box">
                    <i class="fab fa-whatsapp"></i>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', setting('whatsapp')) }}"
                       target="_blank">
                        {{ setting('whatsapp') }}
                    </a>
                </div>

            </div>
        </div>
        {{-- IMAGE --}}
        <div class="col-md-5 d-none d-md-block contact-image"></div>

        {{-- FORM --}}
        <div class="col-md-7 p-5">


            {{-- FORM --}}
            <form method="POST" action="{{ route('client.contact') }}">
                @csrf

                <div class="input-group-modern">
                    <input type="text" name="name" required placeholder=" ">
                    <label>@lang('trans.name')</label>
                </div>

                <div class="input-group-modern">
                    <input type="email" name="email" required placeholder=" ">
                    <label>@lang('trans.email')</label>
                </div>

                <div class="input-group-modern">
                    <input type="text" name="phone" required placeholder=" " class="NoIntl">
                    <label>@lang('trans.phone')</label>
                </div>

                <div class="input-group-modern">
                    <input type="text" name="subject" required placeholder=" ">
                    <label>@lang('trans.subject')</label>
                </div>

                <div class="input-group-modern">
                    <textarea name="message" rows="4" required placeholder=" "></textarea>
                    <label>@lang('trans.message')</label>
                </div>

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-contact">
                        @lang('trans.Send Message')
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

@endsection
