@extends('layouts.app')

@section('title', 'Contact Angel Technical College')

@section('content')
<main class="pt-28 bg-gray-50">
    <section class="py-16 lg:py-20">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
                <div>
                    <span class="inline-flex items-center px-4 py-2 bg-primary-100 text-primary-600 text-sm font-semibold rounded-full mb-5">
                        <i class="fas fa-envelope mr-2"></i>Contact Us
                    </span>
                    <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 leading-tight mb-5">
                        Talk to Our <span class="text-[#027fc5]">Counseling Team</span>
                    </h1>
                    <p class="text-lg text-gray-600 leading-relaxed mb-8">
                        Send your question or application interest. Our team will review your inquiry and contact you with the right course and destination guidance.
                    </p>

                    <div class="space-y-4">
                        <div class="flex items-start gap-4 bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
                            <div class="w-11 h-11 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-location-dot"></i>
                            </div>
                            <div>
                                <h2 class="font-bold text-gray-900">Address</h2>
                                <p class="text-sm text-gray-600 mt-1">{{ $siteSettings->address ?: 'Visit our office for counseling and course admission support.' }}</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4 bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
                            <div class="w-11 h-11 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h2 class="font-bold text-gray-900">Phone</h2>
                                <p class="text-sm text-gray-600 mt-1">{{ $siteSettings->phone ?: 'Contact number will be updated soon.' }}</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4 bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
                            <div class="w-11 h-11 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-at"></i>
                            </div>
                            <div>
                                <h2 class="font-bold text-gray-900">Email</h2>
                                <p class="text-sm text-gray-600 mt-1">{{ $siteSettings->email ?: 'Email address will be updated soon.' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="inquiry-form" class="bg-white rounded-3xl shadow-xl border border-gray-100 p-6 lg:p-8">
                    <div class="mb-6">
                        <h2 class="text-2xl font-extrabold text-gray-900">Send an Inquiry</h2>
                        <p class="text-sm text-gray-500 mt-1">We usually respond within 24 hours.</p>
                    </div>
                    @include('components.forms.inquiry', ['source' => 'contact'])
                    <div class="mt-4 flex items-start space-x-2 text-xs text-gray-400">
                        <i class="fas fa-shield-alt text-teal-500 mt-0.5 flex-shrink-0"></i>
                        <p>Your information is secure and used only for counseling follow-up.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection