@extends('layouts.front.app')

@section('title', 'Contact Us - JotiJournal')

@section('content')
    <section class="breadcrumb-section">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('welcome') }}">Home</a></li>
                    <li aria-current="page" class="breadcrumb-item active text-dark">Contact Us</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-11">
                <div class="text-center mb-5">
                    <h1 class="display-5 font-serif fw-bold text-dark mb-3">Contact Us</h1>
                    <div class="header-divider mx-auto bg-gold" style="height: 3px; width: 60px; background-color: var(--legal-gold);"></div>
                </div>

                <div class="row g-4 align-items-stretch">
                    <!-- Contact Details Column -->
                    <div class="col-lg-5">
                        <div class="bg-white p-5 rounded-4 shadow-sm border border-light h-100 position-relative overflow-hidden d-flex flex-column justify-content-center">
                            <!-- Decorative background accent -->
                            <div class="position-absolute top-0 start-0 w-100" style="height: 4px; background-color: var(--legal-gold);"></div>
                            
                            <h3 class="font-serif fw-bold mb-4 text-dark mt-2">Get in Touch</h3>

                            <div class="d-flex mb-4 align-items-start contact-item">
                                <div class="mt-1 me-4 bg-light rounded-circle p-3 d-flex align-items-center justify-content-center shadow-sm flex-shrink-0" style="width: 54px; height: 54px;">
                                    <i class="fas fa-map-marker-alt fa-lg" style="color: var(--legal-gold);"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">Academy Address</h5>
                                    <p class="text-muted mb-0 lh-lg">
                                        MP State Judicial Academy<br>
                                        Beoharbagh, Ghamapur Road,<br>
                                        Jabalpur, Madhya Pradesh – 482007
                                    </p>
                                </div>
                            </div>

                            <div class="d-flex mb-4 align-items-start contact-item">
                                <div class="mt-1 me-4 bg-light rounded-circle p-3 d-flex align-items-center justify-content-center shadow-sm flex-shrink-0" style="width: 54px; height: 54px;">
                                    <i class="fas fa-phone-alt fa-lg" style="color: var(--legal-gold);"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">Phone & Fax</h5>
                                    <p class="text-muted mb-0 lh-lg">
                                        Tel: <a href="tel:07612626945" class="text-decoration-none text-muted hover-gold transition-all">0761-2626945</a><br>
                                        Fax: 0761-2345677
                                    </p>
                                </div>
                            </div>

                            <div class="d-flex align-items-start contact-item">
                                <div class="mt-1 me-4 bg-light rounded-circle p-3 d-flex align-items-center justify-content-center shadow-sm flex-shrink-0" style="width: 54px; height: 54px;">
                                    <i class="fas fa-envelope fa-lg" style="color: var(--legal-gold);"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">Email</h5>
                                    <p class="text-muted mb-0 lh-lg">
                                        <a href="mailto:dirmpsja@mp.gov.in" class="text-decoration-none text-muted hover-gold transition-all">dirmpsja@mp.gov.in</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Map Column -->
                    <div class="col-lg-7">
                        <div class="bg-white p-2 rounded-4 shadow-sm border border-light h-100">
                            <!-- Interactive Map -->
                            <div class="map-container rounded-4 overflow-hidden position-relative w-100 h-100" style="min-height: 500px;">
                                <iframe 
                                    src="https://maps.google.com/maps?q=MP%20State%20Judicial%20Academy,%20Jabalpur&t=&z=15&ie=UTF8&iwloc=&output=embed" 
                                    width="100%" 
                                    height="100%" 
                                    style="border:0; position: absolute; top:0; left:0; right:0; bottom:0;" 
                                    allowfullscreen="" 
                                    loading="lazy" 
                                    referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection

@push('styles')
<style>
    .transition-all {
        transition: all 0.3s ease;
    }
    .hover-gold:hover {
        color: var(--legal-gold) !important;
    }
    .contact-item:hover .rounded-circle {
        background-color: var(--legal-gold) !important;
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }
    .contact-item:hover .rounded-circle i {
        color: white !important;
        transition: all 0.3s ease;
    }
</style>
@endpush