@extends('layouts.app')

@section('content')
<!-- Header Section -->
<div class="bg-gray-50 py-12 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Get in touch</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Contact Us
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                Reach out to us for any inquiries regarding our animal nutrition products. We are here to assist you.
            </p>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="grid grid-cols-1 gap-12">
        <!-- Contact Information Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
             <!-- Factory Card -->
            <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition text-center sm:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-4 border-b pb-2 inline-block sm:block">Factory</h3>
                <p class="text-gray-600 text-base mb-6 leading-relaxed">
                    Plot#12, Sector#15,<br>
                    Korangi Industrial Area,<br>
                    Karachi, Pakistan.
                </p>
                <div class="text-base text-gray-600 space-y-2">
                    <p><span class="font-semibold text-blue-800">UAN:</span> (92-21) 111-445-866</p>
                    <p><span class="font-semibold text-blue-800">Tel:</span> (92-21) 35050074 - 77</p>
                    <p><span class="font-semibold text-blue-800">Fax:</span> (92-21) 35053210</p>
                </div>
            </div>

            <!-- Head Office Card -->
            <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition text-center sm:text-left">
                <h3 class="text-xl font-bold text-gray-900 mb-4 border-b pb-2 inline-block sm:block">Head Office</h3>
                <p class="text-gray-600 text-base mb-6 leading-relaxed">
                    Progressive Plaza, 8-9th Floor<br>
                    Beaumont Road, Near P.I.D.C House,<br>
                    Karachi - Pakistan
                </p>
                 <div class="text-base text-gray-600 space-y-2">
                    <p><span class="font-semibold text-blue-800">Email:</span> <a href="mailto:info@um.com.pk" class="text-blue-600 hover:underline">info@um.com.pk</a></p>
                </div>
            </div>
        </div>

        <!-- Full Width Map -->
        <div class="rounded-lg overflow-hidden shadow-sm border border-gray-200 h-96 w-full">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14489.172468305374!2d67.1129!3d24.8426!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33b91a7b82f8d%3A0x6b5e0c5112345678!2sKorangi%20Industrial%20Area%2C%20Karachi%2C%20Karachi%20City%2C%20Sindh%2C%20Pakistan!5e0!3m2!1sen!2s!4v1614000000000!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>
</div>
@endsection