@extends('front.layouts.app')

@section('content')

{{-- <div class="overlay" id="overlay">
    <div class="container h-100">
        <div class="row align-items-center justify-content-center h-100">
            <div class="col-md-4 text-center text-md-start">
                <p class="coming-soon">{{ \App\Helpers\TranslationHelper::translate('This content will be available soon') }}</p>
            </div>
            <div class="col-md-4 text-center">
                <button class="lock-btn" onclick="unlockContent()">
                    <img src="{{ asset('front/assets/img/lock.png') }}" alt="" class="img-fluid">
                </button>
            </div>
        </div>
    </div>
</div> --}}
    <main>

        <section class="contact-us">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="text-contact" style="color: #fff; margin-top: 20px;">
                            <h2 style="color: rgb(241, 196, 15);">

                                {{ $contact->title }}
                            </h2>
                            {!! $contact->description !!}

                        </div>
                    </div>


                    <div class="col-md-6" style="margin-top: 20px;">
                        <div class="img-contact">
                            <img src="{{ $contact->getFirstMediaUrl('contacts_meta_image') }}" alt=""
                                style="height: 300px; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);">
                        </div>
                    </div>

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

        <section class="coshel">
            <div class="container" style="margin-top: 30px;">
                <h2>
                    {{ \App\Helpers\TranslationHelper::translate('Contact Us') }}
                </h2>
                <p>
                    {{ \App\Helpers\TranslationHelper::translate('Our team is always available to assist you.') }}
                </p>
                <div class="social-1 mt-5">
                    <a href="{{ $contact->iniesta }}"> <i class="fab fa-instagram"></i></a>
                    <a href="{{ $contact->tiktok }}"><i class="fab fa-youtube"></i> </a>
                    <a href="{{ $contact->email }}"> <i class="fas fa-envelope"></i></a>

                    <a href="{{ $contact->x }}"> <i class="fa-brands fa-x-twitter fa-2x"></i></a>


                </div>

            </div>
        </section>
    </main>

@endsection

@push('js')


{{-- <script>
function unlockContent() {
    let overlay = document.getElementById("overlay");
    overlay.style.opacity = "0";

    setTimeout(() => {
        overlay.style.display = "none";
        document.getElementById("main-content").style.display = "block";
    }, 300);
}
</script> --}}
@endpush