@extends('front.layouts.master')
@section('content')
    <main class="flex-grow bg-gray-100 pb-14 pt-36 dark:bg-black xs:pt-36">
        <div class="container rounded-lg bg-white p-5 dark:bg-zinc-900">
            <!-- Head -->
            <div class="mb-5 flex">
                <h1 class="relative select-none pb-2 text-lg text-zinc-700 dark:text-white md:text-xl">
                    تماس با ما
                    <span
                        class="absolute bottom-0 right-0 h-0.5 w-full rounded-full bg-emerald-500 dark:bg-emerald-400"></span>
                </h1>
            </div>
             <!-- Sub Head -->
             <div class="mb-2 flex">
                <h2 class="mb-4 text-lg font-semibold text-zinc-700 dark:text-white">
                    {{ option('title') }}
                </h2>
            </div>
            <!-- Content -->
            <p class="mb-5 leading-loose text-zinc-600 dark:text-zinc-300">
                قبل از مطرح کردن هرگونه سوال ، بخش
                <a href="#" class="text-emerald-500 dark:text-emerald-400">سوالات متداول</a>
                را مطالعه نمایید.
            </p>
            <div class="grid grid-cols-5 gap-6">
                <div class="col-span-5 md:col-span-3">
                    <div class="grid grid-cols-2 items-center gap-6">
                        <!-- Name -->
                        <div class="col-span-2 md:col-span-1">
                            <label for="name"
                                class="relative block rounded-lg border border-gray-100 shadow-base dark:border-white/5">
                                <input type="text" id="name"
                                    class="peer w-full rounded-lg border-none bg-transparent px-4 py-3 text-zinc-700 placeholder-transparent focus:outline-none focus:ring-0 dark:text-white"
                                    placeholder="نام شما" />

                                <span
                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white px-2 py-0.5 text-sm text-zinc-600 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-sm dark:bg-zinc-900 dark:text-zinc-300">
                                    نام شما
                                </span>
                            </label>
                        </div>
                        <!-- Number -->
                        <div class="col-span-2 md:col-span-1">
                            <label for="number"
                                class="relative block rounded-lg border border-gray-100 shadow-base dark:border-white/5">
                                <input type="text" id="number"
                                    class="peer w-full rounded-lg border-none bg-transparent px-4 py-3 text-zinc-700 placeholder-transparent focus:outline-none focus:ring-0 dark:text-white"
                                    placeholder="شماره تماس" />

                                <span
                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white px-2 py-0.5 text-sm text-zinc-600 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-sm dark:bg-zinc-900 dark:text-zinc-300">
                                    شماره تماس شما
                                </span>
                            </label>
                        </div>
                        <!-- Email -->
                        <div class="col-span-2">
                            <label for="email"
                                class="relative block rounded-lg border border-gray-100 shadow-base dark:border-white/5">
                                <input type="text" id="email"
                                    class="peer w-full rounded-lg border-none bg-transparent px-4 py-3 text-zinc-700 placeholder-transparent focus:outline-none focus:ring-0 dark:text-white"
                                    placeholder="ایمیل شما" />

                                <span
                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white px-2 py-0.5 text-sm text-zinc-600 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-sm dark:bg-zinc-900 dark:text-zinc-300">
                                    ایمیل شما
                                </span>
                            </label>
                        </div>
                        <!-- Message -->
                        <div class="col-span-2">
                            <label for="message"
                                class="relative block rounded-lg border border-gray-100 shadow-base dark:border-white/5">
                                <textarea type="text" id="message" rows="3"
                                    class="main-scroll peer w-full rounded-lg border-none bg-transparent px-4 py-3 text-zinc-700 placeholder-transparent focus:outline-none focus:ring-0 dark:text-white"
                                    placeholder="پیام شما"></textarea>

                                <span
                                    class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white px-2 py-0.5 text-sm text-zinc-600 transition-all peer-placeholder-shown:top-6 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-sm dark:bg-zinc-900 dark:text-zinc-300">
                                    پیام شما
                                </span>
                            </label>
                        </div>
                        <!-- Submit -->
                        <div class="col-span-2 flex justify-end">
                            <button class="btn-primary w-full px-4 py-2 md:w-auto">
                                ارسال پیام
                            </button>
                        </div>
                    </div>
                </div>
                <div class="order-first col-span-5 md:order-last md:col-span-2">
                    <ul class="space-y-6">
                        <li>
                            <!-- Email -->
                            <div class="flex flex-col gap-y-4">
                                <p class="text-zinc-600 dark:text-zinc-300">آدرس ایمیل</p>
                                <a href="#" class="text-emerald-500 dark:text-emerald-400">
                                    {{ option('email') }}
                                </a>
                            </div>
                        </li>

                        <li>
                            <!-- phone -->
                            <div class="flex flex-col gap-y-4">
                                <p class="text-zinc-600 dark:text-zinc-300">
                                    تلفن پشتیبانی
                                </p>
                                <a dir="ltr" href="#" class="text-emerald-500 dark:text-emerald-400">
                                    {{ option('tel') }}
                                </a>
                            </div>
                        </li>
                        <li>
                            <!-- work time -->
                            <div class="flex flex-col gap-y-4">
                                <p class="text-zinc-600 dark:text-zinc-300">
                                    ساعت کاری
                                </p>
                                <a dir="ltr" href="#" class="text-emerald-500 dark:text-emerald-400">
                                    {{ option('work') }}
                                </a>
                            </div>
                        </li>
                        <li>
                            <!-- phone -->
                            <div class="flex flex-col gap-y-4">
                                <p class="min-w-fit text-zinc-600 dark:text-zinc-300">
                                    آدرس دفتر مرکزی
                                </p>
                                <a href="#" class="text-emerald-500 dark:text-emerald-400">
                                    {{ option('adress') }}
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('js-page')
    <script defer src="/front/scripts/custom.js"></script>
@endsection