@extends('layouts.app')

@php
    $mainClass = 'bg-[#f7f7f7] w-full'
@endphp

@section('title', 'تماس با ما | نیکس فایل')


@section('content')

    <div class="mt-4">
        @include('components.header')
    </div>

    <div class="flex flex-col flex-wrap md:flex-nowrap mt-12 gap-4 mb-12 mx-auto container">
        <div class="flex mb-8 lg:mb-16 flex-wrap lg:flex-nowrap mx-4 gap-12">
            <div class="lg:w-3/4">
                <h1 class="text-2xl lg:text-3xl font-bold mb-4 text-center lg:text-start">
                    راه‌های ارتباطی و
                    <span class="text-primary-color">
            آدرس دفتر
            </span>
                </h1>
                <p class="text-text-color">
                    برای ارتباط با تیم نیکس فایل و دریافت راهنمایی‌های لازم در خصوص آپلود و مدیریت فایل‌های خود،
                    می‌توانید از طریق فرم تماس یا شماره‌های موجود در سایت با ما در ارتباط باشید. همواره آماده پاسخگویی
                    به سوالات شما هستیم.
                </p>
            </div>
            <div class="bg-white shadow-custom rounded-xl px-8 py-4 lg:w-2/4">
            <span
                class="inline-flex gap-2 items-center justify-center bg-primary-color/20 py-1 px-4 rounded-xl text-primary-color mb-4">
            <i class="fa-solid fa-location-dot text-primary-color"></i>
            آدرس
            </span>
                <p class="text-text-color">
                    ایران - تهران - بازار تجریش تکنولوژی، میدان ولیعصر
                    ساختمان نمرونان واحد۱۲
                </p>
            </div>
        </div>
        <div class="flex justify-center my-12 lg:container lg:mx-auto">
            <img src="{{asset('images/location.webp')}}" alt="">
        </div>
        <div class="lg:px-14">
            <div
                class="bg-white shadow-custom rounded-xl flex justify-center mx-4 flex-wrap mb-12 flex-col-reverse lg:flex-row md:mx-auto">
                <div class="p-4 lg:px-8 lg:py-6 items-center w-full lg:w-[50%]">
                    <h3 class="text-2xl text-center font-bold mb-3">
                        عضویت
                        <span class="text-primary-color">

                    خبرنامه
                    </span>
                    </h3>
                    <p class="text-text-color text-center mb-8">
                        در خبرنامه ما عضو شوید و از آخرین قابلیت ها و تخفیف های ویژه نیکس فایل خبردار شوید
                    </p>
                    <form action="" method="POST">
                        @csrf
                        <div class="relative mb-6">
                            <input
                                type="text"
                                id="name"
                                name="name"
                                class="block border px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-full border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-primary-color peer"
                                placeholder=" "
                                required
                                aria-describedby="nameHelp"
                            />
                            <label
                                for="name"
                                class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-primary-color peer-focus:dark:text-primary-color peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2
            peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">
                                نام و نام خانوادگی:
                            </label>
                        </div>

                        <div class="relative mb-6">
                            <input
                                type="email"
                                id="email"
                                name="email"
                                class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-full border border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-primary-color peer"
                                placeholder=" "
                                required
                                aria-describedby="emailHelp"
                            />
                            <label
                                for="email"
                                class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-primary-color peer-focus:dark:text-primary-color peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2
            peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">
                                ایمیل:
                            </label>
                        </div>

                        <button type="submit"
                                class="py-3 bg-primary-color/90 text-white block w-full rounded-full hover:bg-primary-color transition-all">
                            ثبت درخواست تماس
                        </button>
                    </form>

                </div>
                <div class="flex justify-center lg:justify-start">
                    <img class="relative lg:-top-12 p-8 lg:p-0" src="{{asset('images/contact-page.svg')}}" alt=""
                         title="">
                </div>
            </div>
        </div>
    </div>

@endsection