@extends('layouts.master')

@section('content')
    @if (session('success'))
        <div class="max-w-2lg mx-auto px-4 mt-6">
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">Success!</strong>
                <span class="block sm:inline">{{ session('success') }}</span>
            </div>
        </div>
    @endif
    <!-- contact info -->
    <section class="register-info bg-white mb-[70px] lg:mb-[100px]">
        <div class="max-w-2lg mx-auto px-4">
            <div class="grid grid-cols-12 gap-4 lg:gap-12 bg-gray-50 p-4 lg:p-8 rounded-[16px]">

                <div class="col-span-12 lg:col-span-6 ">
                    <form action="{{ route('website.contact-us.store') }}" method="POST"
                        class="w-full bg-white p-6 rounded-xl shadow-[02px8px0rgba(0,0,0,0.08)] border border-gray-50 sticky top-[120px]">
                        @csrf
                        <h2 class="text-[32px] font-semibold text-gray-800 mb-1">Contact Us</h2>
                        <p class="mb-4 pb-4 text-base lg:text-xl font-medium text-gray-500 border-b border-gray-100">
                            We’re here to help with any questions, feedback, or support you need.</p>

                        <div class="grid grid-cols-1 gap-4 mb-5">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Name <span
                                        class="text-red-500">*</span></label>
                                <input type="text" name="name" placeholder="Enter your name"
                                    value="{{ old('name') }}"
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-300 @error('name') border-red-500 @enderror">
                                @error('name')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-1  gap-4 mb-5">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Email <span
                                        class="text-red-500">*</span></label>
                                <input type="email" name="email" placeholder="Write your email"
                                    value="{{ old('email') }}"
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-300 @error('email') border-red-500 @enderror">
                                @error('email')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="input mb-5">
                            <label class="block text-gray-700 font-medium mb-2">Subject</label>
                            <input type="text" name="subject" placeholder="Enter Subject" value="{{ old('subject') }}"
                                class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-300 @error('subject') border-red-500 @enderror">
                            @error('subject')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="input mb-5">
                            <label class="block text-gray-700 font-medium mb-2">Message <span
                                    class="text-red-500">*</span></label>
                            <textarea
                                class="w-full h-[140px] p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-300 @error('message') border-red-500 @enderror"
                                name="message" id="" placeholder="Write Your Message">{{ old('message') }}</textarea>
                            @error('message')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="common-btn flex items-center justify-end">
                            <button type="submit"
                                class="group relative overflow-hidden text-base font-medium text-white h-12 lg:h-[56px] bg-primary1-600 rounded-[8px] flex items-center justify-center gap-[10px] px-[34px] transition-all duration-500 ease-out hover:bg-primary1-700">
                                <i
                                    class="fa-solid fa-arrow-right transition-all duration-500 ease-out -translate-x-6 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"></i>
                                <span
                                    class="transition-all translate-x-[-10px] duration-500 ease-out group-hover:translate-x-2">
                                    Submit Message
                                </span>
                                <i
                                    class="fa-solid fa-arrow-right transition-all duration-500 ease-out group-hover:translate-x-4 translate-x-[-10px] group-hover:opacity-0">
                                </i>
                            </button>
                        </div>
                    </form>
                </div>

                <div class="col-span-12 lg:col-span-6">
                    <div class="img overflow-hidden rounded-[16px]">
                        <img class="item w-full h-[300px] xl:h-full object-cover rounded-[16px]"
                            src="../assets/images/landing/contact-us/contact-us.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Address -->
    <section class="address-area mb-[100px]">
        <div class="max-w-2lg mx-auto px-4">
            <div
                class="grid grid-cols-12 gap-4 lg:gap-[60px] p-4 lg:p-8 bg-[radial-gradient(76.89%_126.86%_at_29.09%_0%,_#0c3458_0%,_#17181d_100%)] rounded-[16px]">
                <div class="col-span-12 lg:col-span-6">
                    <div class="map">
                        <iframe class="rounded-[12px]"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d116833.83187878219!2d90.33728799397399!3d23.78097572837469!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8b087026b81%3A0x8fa563bbdd5904c2!2sDhaka!5e0!3m2!1sen!2sbd!4v1771906927403!5m2!1sen!2sbd"
                            width="100%" height="432" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-6">
                    <div class="text-white h-full">
                        <div class="widget flex flex-col justify-center h-full">
                            <h5 class="title text-2xl lg:text-[48px] font-semibold mb-4">
                                Address
                            </h5>
                            <ul class="footer-link flex flex-col gap-4 mb-6">
                                <li>
                                    <a href="mailto:info@razinsoft.com"
                                        class="text-lg font-light  overflow-hidden flex w-max items-center gap-2 hover:text-white before:bg-white">
                                        <i
                                            class="fa-solid fa-envelope text-[#1469B5] w-10 lg:w-12 lg:h-12 h-10 rounded-[12px] bg-white/10 flex items-center justify-center  text-base lg:text-[22px] flex-[0_0_auto]"></i>
                                        info@razinsoft.com
                                    </a>
                                </li>
                                <li>
                                    <a href="tel:+8801711257498"
                                        class="text-lg font-light overflow-hidden flex w-max items-center gap-2 hover:text-white before:bg-white">
                                        <i
                                            class="fa-solid fa-phone text-[#1469B5]  w-10 lg:w-12 lg:h-12 h-10 rounded-[12px]  bg-white/10 flex items-center justify-center text-base lg:text-[22px] flex-[0_0_auto]"></i>
                                        +880 1711 257 498
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="text-lg font-light overflow-hidden flex lg:w-max items-start gap-2 hover:text-white before:bg-white">
                                        <i
                                            class="fa-solid fa-location-dot mt-1 text-[#1469B5]  w-10 lg:w-12 lg:h-12 h-10 rounded-[12px]  bg-white/10 flex items-center justify-center text-base lg:text-[22px] flex-[0_0_auto]"></i>
                                        RMR Center 1/1 (A&amp;B) Shamoli Ring Road, Dhaka - <br class="hidden lg:block">
                                        1207,
                                        Bangladesh.
                                    </a>
                                </li>


                            </ul>

                            <div class="social-area flex items-center gap-[10px]">
                                <a href="#"
                                    class="flex items-center justify-center w-12 h-12 bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-[12px] transition duration-300 hover:bg-primary1-600">
                                    <i class="fa-brands fa-facebook text-xl"></i>
                                </a>
                                <a href="#"
                                    class="flex items-center justify-center w-12 h-12 bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-[12px] transition duration-300 hover:bg-primary1-600">
                                    <i class="fa-brands fa-square-x-twitter text-xl rounded-full"></i>
                                </a>
                                <a href="#"
                                    class="flex items-center justify-center w-12 h-12 bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-[12px] transition duration-300 hover:bg-primary1-600">
                                    <i class="fa-brands fa-youtube text-xl"></i>
                                </a>
                                <a href="#"
                                    class="flex items-center justify-center w-12 h-12 bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] rounded-[12px] transition duration-300 hover:bg-primary1-600">
                                    <i class="fa-brands fa-pinterest text-xl"></i>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection