@extends('layouts.frontend')

{{-- Header Meta Section --}}
@section('headerMeta')
    @php
        $info = !empty($info) ? $info : (!empty($siteInfo) ? $siteInfo : null);
        $metaTitle = $info->meta_title ?? config('app.name');
        $metaDescription = $info->meta_description ?? config('app.name');
        $metaKeywords = $info->meta_tag ?? config('app.name');
        $metaImage = $info->meta_image ?? 'images/website.png';
    @endphp

    <title>{{ $metaTitle }}</title>
    <meta name="title" content="{{ $metaTitle }}">
    <meta name="description" content="{{ $metaDescription }}">
    <meta name="keywords" content="{{ $metaKeywords }}">
    <meta property="og:title" content="{{ $metaTitle }}">
    <meta property="og:image" content="{{ asset($metaImage) }}">
    <meta property="og:site_name" content="{{ config('app.name') }}">
    <meta property="og:description" content="{{ $metaDescription }}">
@endsection

{{-- Content Section --}}
@section('content')
    <div class="bg-gray-100 dark:bg-gray-900 pt-8 pb-12 md:pb-16">
        @include('layouts.frontend-partial.breadcrumb')
    </div>

    @php
        $siteInfo = getSiteInfo();
    @endphp

    <section class="py-16 md:py-24 bg-white dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-12 md:gap-16 items-start">
                {{-- Contact Information Section --}}
                <div class="grid gap-8 text-lg">
                    <div class="grid gap-6 p-8 bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg" data-aos="fade-up" data-aos-duration="1000">
                        <h4 class="text-3xl text-darkblue dark:text-white font-extrabold">Let's Connect</h4>
                        <p class="text-gray-600 dark:text-gray-300">Speak to our friendly team. We're here to help you.</p>

                        <div class="space-y-8 mt-6">
                            {{-- Chat & Email --}}
                            <div class="grid sm:grid-cols-2 gap-6">
                                <div class="flex items-start gap-4 p-4 rounded-xl bg-white dark:bg-gray-800 shadow-sm">
                                    <div class="p-3 bg-indigo-100 dark:bg-indigo-900 rounded-full text-indigo-600 dark:text-indigo-300 flex-shrink-0">
                                        {!! config('icons.whatsapp') !!}
                                    </div>
                                    <div>
                                        <h5 class="font-bold text-xl text-darkblue dark:text-white">Chat With Us</h5>
                                        @if (!empty($siteInfo->whatsapp))
                                            <a href="https://wa.me/{{ $siteInfo->whatsapp }}" class="text-indigo-600 dark:text-indigo-400 font-medium hover:underline transition-colors mt-1 block">Start a Live Chat</a>
                                        @else
                                            <span class="text-gray-400 text-sm mt-1 block">Not Available</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 p-4 rounded-xl bg-white dark:bg-gray-800 shadow-sm">
                                    <div class="p-3 bg-green-100 dark:bg-green-900 rounded-full text-green-600 dark:text-green-300 flex-shrink-0">
                                        {!! config('icons.email') !!}
                                    </div>
                                    <div>
                                        <h5 class="font-bold text-xl text-darkblue dark:text-white">Email Us</h5>
                                        @if (!empty($siteInfo->email))
                                            <a href="mailto:{{ $siteInfo->email }}" class="text-green-600 dark:text-green-400 font-medium hover:underline transition-colors mt-1 block">Shoot Us an Email</a>
                                        @else
                                            <span class="text-gray-400 text-sm mt-1 block">Not Available</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            {{-- Call & Visit --}}
                            <div class="grid sm:grid-cols-2 gap-6">
                                <div class="flex items-start gap-4 p-4 rounded-xl bg-white dark:bg-gray-800 shadow-sm">
                                    <div class="p-3 bg-red-100 dark:bg-red-900 rounded-full text-red-600 dark:text-red-300 flex-shrink-0">
                                        {!! config('icons.phone') !!}
                                    </div>
                                    <div>
                                        <h5 class="font-bold text-xl text-darkblue dark:text-white">Call Us</h5>
                                        <p class="text-gray-600 dark:text-gray-300 text-sm">Mon-Fri: 8am-5pm</p>
                                        @if (!empty($siteInfo->mobile))
                                            <a href="tel:{{ $siteInfo->mobile }}" class="text-red-600 dark:text-red-400 font-medium hover:underline transition-colors mt-1 block">{{ $siteInfo->mobile }}</a>
                                        @else
                                            <span class="text-gray-400 text-sm mt-1 block">Not Available</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 p-4 rounded-xl bg-white dark:bg-gray-800 shadow-sm">
                                    <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-full text-blue-600 dark:text-blue-300 flex-shrink-0">
                                        {!! config('icons.location') !!}
                                    </div>
                                    <div class="flex flex-col">
                                        <h5 class="font-bold text-xl text-darkblue dark:text-white">Visit Us</h5>
                                        @if (!empty($siteInfo->location) || !empty($siteInfo->us_location))
                                            <p class="text-gray-600 dark:text-gray-300 text-sm">Our international offices:</p>
                                        @endif
                                        @if (!empty($siteInfo->location))
                                            <span class="text-gray-600 dark:text-gray-300 text-sm mt-2 block font-semibold">BD Address:</span>
                                            <span class="text-gray-600 dark:text-gray-300 text-sm block">{{ $siteInfo->location }}</span>
                                        @endif
                                        @if (!empty($siteInfo->us_location))
                                            <span class="text-gray-600 dark:text-gray-300 text-sm mt-2 block font-semibold">UK Address:</span>
                                            <span class="text-gray-600 dark:text-gray-300 text-sm block">{{ $siteInfo->us_location }}</span>
                                        @endif
                                        @if (empty($siteInfo->location) && empty($siteInfo->us_location))
                                            <span class="text-gray-400 text-sm">Addresses Not Available</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Contact Form Section --}}
                <div data-aos="fade-up" data-aos-duration="1000">
                    <form action="{{ url('contact-email') }}" method="POST" id="contactForm">
                        @csrf
                        <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-2xl shadow-lg">
                            <h2 class="text-3xl lg:text-4xl font-extrabold text-darkblue dark:text-white mb-6">Ready to get started? Let's chat.</h2>
                            <p class="text-gray-600 dark:text-gray-300 mb-8">Fill out the form below and we'll get back to you as soon as possible.</p>

                            <div class="grid md:grid-cols-2 gap-6">
                                {{-- Input Fields --}}
                                <div><input class="inputField" id="firstName" name="first_name" type="text" placeholder="First Name (*)" required>@error('first_name') <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span> @enderror</div>
                                <div><input class="inputField" id="lastName" name="last_name" type="text" placeholder="Last name (*)" required>@error('last_name') <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span> @enderror</div>
                                <div><input class="inputField" id="email" name="email" type="email" placeholder="Your Email (*)" required>@error('email') <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span> @enderror</div>
                                <div><input class="inputField" id="phone" name="phone" type="tel" placeholder="Your Phone (*)" required>@error('phone') <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span> @enderror</div>
                                <div class="md:col-span-2"><input class="inputField" id="subject" name="subject" type="text" placeholder="Subject (*)" required>@error('subject') <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span> @enderror</div>
                                <div class="md:col-span-2"><textarea class="inputField min-h-[120px]" name="message" id="message" type="text" placeholder="Write Message (*)" required></textarea>@error('message') <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span> @enderror</div>
                            </div>

                            {{-- Cloudflare Turnstile & Submit Button --}}
                            <div class="flex flex-col gap-4 mt-6">
                                <div class="cf-turnstile" data-sitekey="{{ config('services.cloudflare.turnstile_site') }}"></div>
                                @error('cf-turnstile-response') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
                                <button type="submit" class="primary-btn mt-2 w-full">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    ---

    {{-- Map Section --}}
    @if (!empty($siteInfo->map))
        <section class="container mx-auto px-4 py-16 md:py-24">
            <h2 class="text-3xl lg:text-4xl font-extrabold text-center mb-8 text-darkblue dark:text-white">Find Us on the Map</h2>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg h-96 sm:h-[500px] md:h-[600px] w-full">
                {!! $siteInfo->map !!}
            </div>
        </section>
    @endif
@endsection

{{-- Push Scripts and Styles --}}
@push('headerPartial')
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
@endpush

@push('footerPartial')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const iframe = document.querySelector("iframe");
            if (iframe) {
                iframe.removeAttribute("width");
                iframe.removeAttribute("height");
                iframe.classList.add("w-full", "h-full", "border-0");
            }
        });
    </script>
@endpush