@extends('frontend.layouts.app')
@section('title', 'Contact Us')
@section('meta', 'Contact Us')
@section('content')

    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">{{ __('contact-us.contact_us') }} </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">{{ __('contact-us.home') }}</a>
                        <p class="text-white text-base font-bold">></p>
                        <span class="text-white font-bold">{{ __('contact-us.contact_us') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <!-- Heading Section -->
        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
            <!-- content -->
            <section class=" px-6 flex justify-center items-center">
                <div class="flex flex-col lg:flex-row gap-8 justify-center lg:items-stretch w-full max-w-6xl">
                    <!-- Card Component -->
                    @php
                        $cards = [
                            [
                                'title' => __('contact-us.our_address'),
                                'icon' => '/assets/images/footer/location.png',
                                'value' => $settings->address ?? '',
                            ],
                            [
                                'title' => __('contact-us.email_us'),
                                'icon' => '/assets/images/footer/mail.png',
                                'value' => $settings->email ?? '',
                            ],
                            [
                                'title' => __('contact-us.call_us'),
                                'icon' => '/assets/images/footer/phone-call.png',
                                'value' => $settings->phone_no ?? '',
                            ],
                        ];
                    @endphp

                    @foreach ($cards as $card)
                        <div
                            class="relative group bg-[#F5FEF3] hover:bg-white border border-transparent
           hover:border-primary/20 transition-all duration-500 shadow-md
           hover:shadow-xl rounded-2xl p-6 flex flex-col sm:flex-row
           gap-6 items-center
           w-full sm:w-72 md:w-80 lg:w-88 xl:w-96">

                            <!-- Icon Circle -->
                            <div
                                class="flex-shrink-0
               w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 xl:w-20 xl:h-20
               rounded-full bg-primary flex justify-center items-center
               shadow-md group-hover:scale-110 transition-transform duration-500">
                                <img src="{{ asset($card['icon']) }}"
                                    class="w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 xl:w-12 xl:h-12" alt="icon" />
                            </div>

                            <!-- Content -->
                            <div class="flex flex-col justify-center text-center sm:text-left">
                                <p
                                    class="text-lg sm:text-xl lg:text-2xl font-semibold
                   text-gray-800 group-hover:text-primary transition-colors duration-300">
                                    {{ $card['title'] }}
                                </p>
                                <p class="mt-2 text-gray-600 leading-relaxed text-sm sm:text-base lg:text-lg">
                                    {{ $card['value'] }}
                                </p>
                            </div>

                            <!-- Bottom Accent Line -->
                            <div
                                class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-green-500
               to-lime-400 group-hover:w-full transition-all duration-500 rounded-b-2xl">
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
            <!-- cards section -->


            <!-- contact form -->
            <section class="py-10">
                <div class="mx-10 sm:mx-20">
                    <section class="overflow-x-hidden">
                        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
                            <div>
                                <!-- Subtitle -->
                                <p
                                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                                    {{ __('contact-us.get_in_touch') }}
                                </p>

                                <!-- Main Title -->
                                <h2
                                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                                    <span class="relative inline-block text-[#5da174]">
                                        <svg viewBox="0 0 52 24" fill="currentColor"
                                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                            <defs>
                                                <pattern id="get-in-touch-pattern" x="0" y="0" width=".135"
                                                    height=".30">
                                                    <circle cx="1" cy="1" r=".7"></circle>
                                                </pattern>
                                            </defs>
                                            <rect fill="url(#get-in-touch-pattern)" width="52" height="24"></rect>
                                        </svg>
                                        <span
                                            class="relative text-2xl lg:text-3xl font-extrabold text-primary">{{ __('contact-us.we_love_to_hear_from_you') }}</span>
                                    </span>
                                </h2>
                            </div>

                            <!-- Description -->
                            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto text-gray-700">
                                {{ __('contact-us.contact_form_description') }}
                            </p>
                        </div>

                    </section>
                </div>


                <div class="lg:flex lg:justify-center lg:mt-10 w-full">
                    <div id="contact-form-section" class="lg:w-[70%] bg-white shadow-xl rounded-md p-6">
                        <form class="sm:mx-20" action="{{ route('contact-us') }}" method="POST">
                            @csrf
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                <div class="flex flex-col space-y-3">
                                    <label for="full_name"
                                        class="font-bold text-xl text-primary">{{ __('contact-us.full_name') }}</label>
                                    <input id="full_name" name="full_name" type="text"
                                        placeholder="{{ __('contact-us.enter_your_full_name') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] @error('full_name') border-red-500 @enderror"
                                        value="{{ old('full_name') }}" required />

                                    @error('full_name')
                                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="flex flex-col space-y-3">
                                    <label for="email"
                                        class="font-bold text-xl text-primary">{{ __('contact-us.email') }}</label>
                                    <input id="email" name="email" type="email"
                                        placeholder="{{ __('contact-us.enter_your_email') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] @error('email') border-red-500 @enderror"
                                        value="{{ old('email') }}" required />
                                    @error('email')
                                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>


                                <div class="flex flex-col space-y-3">
                                    <label for="phone_no"
                                        class="font-bold text-xl text-primary">{{ __('contact-us.phone_number') }}</label>
                                    <input id="phone_no" name="phone_no" type="tel"
                                        placeholder="{{ __('contact-us.enter_your_phone_number') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] @error('phone_no') border-red-500 @enderror"
                                        value="{{ old('phone_no') }}" required />
                                    @error('phone_no')
                                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>


                                <div class="flex flex-col space-y-3">
                                    <label for="subject"
                                        class="font-bold text-xl text-primary">{{ __('contact-us.service_interested_in') }}</label>
                                    <input id="subject" name="subject" type="text"
                                        placeholder="{{ __('contact-us.type_of_service') }}"
                                        class="w-full rounded-md bg-[#F5FEF3] @error('subject') border-red-500 @enderror"
                                        value="{{ old('subject') }}" />
                                    @error('subject')
                                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>


                            <div class="mt-5 flex flex-col space-y-3">
                                <label for="message"
                                    class="font-bold text-xl text-primary">{{ __('contact-us.message') }}</label>
                                <textarea name="message" id="message" cols="20" rows="10"
                                    class="bg-[#F5FEF3] rounded-md @error('message') border-red-500 @enderror"
                                    placeholder="{{ __('contact-us.please_enter_your_message') }}">{{ old('message') }}</textarea>
                                @error('message')
                                    <span class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="w-full flex justify-center">
                                <button type="submit"
                                    class="w-44 text-center py-3 px-5 rounded-sm border-2 border-primary bg-primary text-white hover:bg-white hover:text-primary transiton-all ease-in-out cursor-pointer tracking-wide my-6 font-semibold">
                                    {{ __('contact-us.send_message') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- contact form -->

        </div>
        <!-- map section -->
        <section class="w-full">
            <div class="mt-16 flex justify-center w-full">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d28268.13239831884!2d85.31365967780042!3d27.670425496264468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1skvda%20location!5e0!3m2!1sen!2snp!4v1753608619471!5m2!1sen!2snp"
                    class="
            w-full
            h-[250px]
            sm:h-[300px]
            md:h-[350px]
            lg:h-[450px]
            xl:h-[550px]
        "
                    style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </section>
    </section>

    <!-- map section -->
@endsection

<!-- Removed @push('scripts') block entirely -->

    @if ($errors->any())
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const el = document.getElementById("contact-form-section");
                if (el) {
                    el.scrollIntoView({
                        behavior: "smooth"
                    });
                }
            });
        </script>
    @endif