@extends('layouts.app')

@section('title', 'Contact Us - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">GET IN TOUCH</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Contact <span style="color: var(--gold-light);">Us</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Contact Section -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        <div style="display: grid; grid-template-columns: 1.2fr 2fr; gap: 50px;">
            <!-- Left Info Panel -->
            <div>
                <span class="section-label">LPTA HQ</span>
                <h2 class="section-title" style="margin-bottom: 24px;">Association <span>Headquarters</span></h2>
                
                <div style="display: flex; flex-direction: column; gap: 24px; margin-top: 30px;">
                    <div style="display: flex; gap: 16px; align-items: flex-start;">
                        <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(26,46,90,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;"><i class="fas fa-map-marker-alt"></i></div>
                        <div>
                            <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.05rem; color: var(--blue); margin-bottom: 4px;">Address</h4>
                            <p style="font-size: 0.88rem; color: var(--gray-700); line-height: 1.5;">Milanchowk, Butwal-11, Rupandehi, Lumbini Province, Nepal</p>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 16px; align-items: flex-start;">
                        <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(26,46,90,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;"><i class="fas fa-phone"></i></div>
                        <div>
                            <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.05rem; color: var(--blue); margin-bottom: 4px;">Call Us</h4>
                            <p style="font-size: 0.88rem; color: var(--gray-700); line-height: 1.5;">+977-71-540123<br>+977-9857012345</p>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 16px; align-items: flex-start;">
                        <div style="width: 44px; height: 44px; border-radius: 10px; background: rgba(26,46,90,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;"><i class="fas fa-envelope"></i></div>
                        <div>
                            <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.05rem; color: var(--blue); margin-bottom: 4px;">Email Contacts</h4>
                            <p style="font-size: 0.88rem; color: var(--gray-700); line-height: 1.5;">info@lumbinitkd.org<br>admin@lumbinitkd.org</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Message Form -->
            <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 40px; box-shadow: var(--shadow-sm);">
                <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.4rem; color: var(--blue); margin-bottom: 24px;">Send us a message</h3>
                
                @if(session('success'))
                <div style="background: #27ae60; color: white; padding: 14px 20px; border-radius: 8px; font-size: 0.88rem; margin-bottom: 24px; display: flex; align-items: center; gap: 10px;">
                    <i class="fas fa-check-circle"></i> {{ session('success') }}
                </div>
                @endif
                
                <form id="contactForm" action="{{ route('contact.submit') }}" method="POST" style="display: flex; flex-direction: column; gap: 20px;">
                    @csrf
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                        <div>
                            <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Your Name</label>
                            <input type="text" name="name" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; transition: var(--transition); font-family: inherit; font-size: 0.88rem;" onfocus="this.style.borderColor='var(--blue)'">
                        </div>
                        <div>
                            <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Email Address</label>
                            <input type="email" name="email" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; transition: var(--transition); font-family: inherit; font-size: 0.88rem;" onfocus="this.style.borderColor='var(--blue)'">
                        </div>
                    </div>
                    
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Subject</label>
                        <input type="text" name="subject" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; transition: var(--transition); font-family: inherit; font-size: 0.88rem;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                    
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Message</label>
                        <textarea name="message" rows="5" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; transition: var(--transition); font-family: inherit; font-size: 0.88rem; resize: vertical;" onfocus="this.style.borderColor='var(--blue)'"></textarea>
                    </div>
                    
                    <button type="submit" class="btn btn-blue" style="justify-content: center; padding: 13px; font-size: 0.9rem;">
                        <i class="fas fa-paper-plane"></i> Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

@endsection