@extends('user.layout.master')

@section('head-tag')
    <title>تماس با کن یاب</title>
@endsection

@section('content')

    <!-- Main -->
    <main>

        <section class="container">
            <x-core.divider mt="mt-5" mb="mb-10"/>

            <section class="flex flex-col w-full gap-4">
                <h1 class="w-full text-2xl font-bold">
                    تماس با ما
                </h1>
                <div class="flex flex-col justify-between w-full gap-8 md:gap-4 md:flex-row">
                    <livewire:user-side.contact-form />
                    <div class="flex lg:w-[48%] w-full flex-col gap-4">
                        <div class="flex items-center justify-start gap-2 w-fit">
                            <img src="{{ asset('user-assets/images/contact/location.svg') }}" alt="location">
                            <h4 class="w-full font-bold text-md text-stone-700">
                                آذربایجان شرقی-تبریز
                            </h4>
                        </div>
                        <div class="flex items-center justify-between gap-2">
                            <div class="flex flex-col items-start justify-between gap-2">
                                <div class="flex items-center justify-start gap-2">
                                    <img src="{{ asset('user-assets/images/contact/whatsapp.svg') }}" alt="whatsapp">
                                    <a href="tel:09144441020" class="w-full font-bold text-md text-stone-600">
                                        0914-4441020
                                    </a>
                                </div>
                                <div class="flex items-center justify-start gap-2">
                                    <img src="{{ asset('user-assets/images/contact/whatsapp.svg') }}" alt="whatsapp">
                                    <a href="tel:04135554141" class="w-full font-bold text-md text-stone-600">
                                        041-35554141
                                    </a>
                                </div>
                            </div>
                            <div class="flex flex-col items-end justify-between gap-2">
                                <div class="flex items-center justify-start gap-2 ">
                                    <a href="https://instagram.com/canyab.ir" class="w-full font-bold text-md text-stone-600">
                                        canyab
                                    </a>
                                    <img src="{{ asset('user-assets/images/contact/instagram.svg') }}" alt="instagram">
                                </div>
                                <div class="flex items-center justify-start gap-2">
                                    <a href="mailto:info@canyab.ir" class="w-full font-bold text-md text-stone-600">
                                        info@canyab.ir
                                    </a>
                                    <img src="{{ asset('user-assets/images/contact/sms.svg') }}" alt="whatsapp">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </section>
    </main>
@endsection