@extends('website.layouts.public')
@section('title', 'Contact Us – SMART Academy')

@section('content')

{{-- ── INNER HERO ── --}}
<section class="bg-[#121212] pt-32 pb-16 md:pt-40 md:pb-20 px-6 lg:px-8">
    <div class="max-w-screen-xl mx-auto">
        <span class="text-xs font-semibold tracking-widest text-red-500 bg-red-500/10 px-3 py-1 rounded-full uppercase">Get In Touch</span>
        <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight mt-3">Contact Us</h1>
        <p class="text-base md:text-lg text-zinc-400 max-w-2xl mt-4">Have questions? Reach out to Smart Academy for inquiries and admissions.</p>
    </div>
</section>

{{-- ── SECTION 1: INFO + MAP ── --}}
<section class="bg-white py-16 lg:py-24 px-6 lg:px-8">
    <div class="max-w-screen-xl mx-auto grid lg:grid-cols-2 gap-8 lg:gap-12 items-stretch">

        {{-- Left: info cards --}}
        <div class="flex flex-col gap-4">

            {{-- WhatsApp --}}
            <a href="https://wa.me/94754094470"
               class="group flex items-center gap-5 bg-slate-50 border border-slate-200 shadow-sm hover:border-green-400 hover:shadow-md rounded-2xl p-5 transition-all duration-300">
                <div class="w-12 h-12 rounded-xl bg-green-50 group-hover:bg-green-100 flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-6 h-6 text-green-500" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
                    </svg>
                </div>
                <div>
                    <div class="text-slate-900 font-bold text-base">WhatsApp</div>
                    <div class="text-slate-600 text-sm mt-0.5">Chat instantly — we reply fast</div>
                </div>
                <svg class="w-4 h-4 text-slate-400 group-hover:text-green-500 ml-auto transition-colors" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>

            {{-- Call --}}
            <a href="tel:+94754094470"
               class="group flex items-center gap-5 bg-slate-50 border border-slate-200 shadow-sm hover:border-red-300 hover:shadow-md rounded-2xl p-5 transition-all duration-300">
                <div class="w-12 h-12 rounded-xl bg-red-50 group-hover:bg-red-100 flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-6 h-6 text-[#ED1C24]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                </div>
                <div>
                    <div class="text-slate-900 font-bold text-base">Call Us</div>
                    <div class="text-slate-600 text-sm mt-0.5">+94 75 409 4470</div>
                </div>
                <svg class="w-4 h-4 text-slate-400 group-hover:text-[#ED1C24] ml-auto transition-colors" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>

            {{-- Second phone --}}
            <a href="tel:+94720756084"
               class="group flex items-center gap-5 bg-slate-50 border border-slate-200 shadow-sm hover:border-red-300 hover:shadow-md rounded-2xl p-5 transition-all duration-300">
                <div class="w-12 h-12 rounded-xl bg-red-50 group-hover:bg-red-100 flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-6 h-6 text-[#ED1C24]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                </div>
                <div>
                    <div class="text-slate-900 font-bold text-base">Call Us</div>
                    <div class="text-slate-600 text-sm mt-0.5">+94 72 075 6084</div>
                </div>
                <svg class="w-4 h-4 text-slate-400 group-hover:text-[#ED1C24] ml-auto transition-colors" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>

            {{-- Location --}}
            <div class="flex items-center gap-5 bg-slate-50 border border-slate-200 shadow-sm rounded-2xl p-5">
                <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center shrink-0">
                    <svg class="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <div>
                    <div class="text-slate-900 font-bold text-base">Find Us</div>
                    <div class="text-slate-600 text-sm mt-0.5">SMART Academy, Haputale, Sri Lanka</div>
                </div>
            </div>

            {{-- Email --}}
            <a href="mailto:info@smartacademy.lk"
               class="group flex items-center gap-5 bg-slate-50 border border-slate-200 shadow-sm hover:border-slate-400 hover:shadow-md rounded-2xl p-5 transition-all duration-300">
                <div class="w-12 h-12 rounded-xl bg-slate-100 group-hover:bg-slate-200 flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <div class="text-slate-900 font-bold text-base">Email</div>
                    <div class="text-slate-600 text-sm mt-0.5">info@smartacademy.lk</div>
                </div>
                <svg class="w-4 h-4 text-slate-400 group-hover:text-slate-700 ml-auto transition-colors" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>
        </div>

        {{-- Right: Google Map --}}
        <div class="rounded-2xl overflow-hidden border border-slate-200 shadow-lg min-h-[300px] lg:min-h-full">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31762.82!2d80.9602!3d6.7667!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae3b0b1e5e5e5e5%3A0x0!2sHaputale%2C+Sri+Lanka!5e0!3m2!1sen!2slk!4v1"
                width="100%"
                height="100%"
                style="border:0; min-height: 300px;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                class="w-full h-full">
            </iframe>
        </div>
    </div>
</section>

{{-- ── SECTION 2: TEACHER DIRECTORY ── --}}
<section class="bg-slate-50 py-16 lg:py-24 px-6 lg:px-8">
    <div class="max-w-screen-xl mx-auto">

        {{-- Section header --}}
        <div class="mb-12">
            <span class="text-xs font-semibold tracking-widest text-red-500 bg-red-500/10 px-3 py-1 rounded-full uppercase">Our Instructors</span>
            <h2 class="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight mt-3">Connect with Our Instructors</h2>
            <p class="text-slate-500 text-base mt-3 max-w-xl">Reach out directly to any of our teachers for subject-specific questions or class information.</p>
        </div>

        {{-- Teacher cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($teachers as $teacher)
                @php
                    $profile  = $teacher->teacherProfile;
                    $subject  = $profile?->subject;
                    $color    = $subject?->color ?? '#ED1C24';
                    $phone    = preg_replace('/\D/', '', $teacher->phone ?? '');
                    $hasPhone = strlen($phone) >= 9;
                @endphp
                <div class="bg-white border border-slate-200 shadow-sm hover:shadow-md rounded-2xl overflow-hidden flex flex-col hover:-translate-y-1 transition-all duration-300">

                    {{-- Card top --}}
                    <div class="p-5 flex items-center gap-4">
                        <div class="w-16 h-16 rounded-full overflow-hidden border-2 shrink-0" style="border-color: {{ $color }}">
                            @if($teacher->photo)
                                <img src="{{ asset('images/' . $teacher->photo) }}" alt="{{ $teacher->name }}"
                                     class="w-full h-full object-cover object-top">
                            @else
                                <div class="w-full h-full flex items-center justify-center font-black text-xl text-white"
                                     style="background: {{ $color }}15">{{ substr($teacher->name, 0, 1) }}</div>
                            @endif
                        </div>
                        <div class="min-w-0">
                            <div class="text-slate-900 font-bold text-base leading-tight truncate">{{ $teacher->name_si ?? $teacher->name }}</div>
                            @if($subject)
                                <div class="text-xs font-semibold mt-1 truncate" style="color: {{ $color }}">{{ $subject->name }}</div>
                            @endif
                            @if($profile?->experience_years)
                                <div class="text-slate-400 text-xs mt-0.5">{{ $profile->experience_years }} yrs experience</div>
                            @endif
                        </div>
                    </div>

                    {{-- Action bar --}}
                    @if($hasPhone)
                        <div class="mt-auto border-t border-slate-100 grid grid-cols-2">
                            <a href="tel:+{{ $phone }}"
                               class="flex items-center justify-center gap-2 py-3 bg-slate-100 text-slate-700 hover:bg-[#ED1C24] hover:text-white transition-colors text-xs font-semibold border-r border-slate-200">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                </svg>
                                Call
                            </a>
                            <a href="https://wa.me/{{ $phone }}?text={{ urlencode('Hello ' . ($teacher->name_si ?? $teacher->name) . ', I have an inquiry about ' . ($subject?->name ?? 'your class') . ' at SMART Academy.') }}"
                               class="flex items-center justify-center gap-2 py-3 bg-slate-100 text-slate-700 hover:bg-green-500 hover:text-white transition-colors text-xs font-semibold">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/>
                                </svg>
                                WhatsApp
                            </a>
                        </div>
                    @else
                        <div class="mt-auto border-t border-slate-100 px-5 py-3">
                            <span class="text-slate-400 text-xs">Contact via academy</span>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>

@endsection
