{{-- ── HERO ──
     Props:
       $title    (string)  — main headline, supports <br> and <span>
       $subtitle (string)  — paragraph below headline
       $full     (bool)    — true = full viewport hero (homepage), false = shorter page hero
       $teachers (collection) — needed for the floating teacher band on full hero
--}}
@php
    $full     = $full     ?? false;
    $title    = $title    ?? 'Learn Smarter.<br><span class="text-[#ED1C24]">Achieve</span> More.';
    $subtitle = $subtitle ?? 'Expert university-qualified teachers. Modern learning methods. A community that cares — from Grade 1 to 13.';
    $teachers = $teachers ?? collect();
@endphp

<section class="{{ $full ? 'min-h-screen' : '' }}">

    {{-- Mobile hero --}}
    <div class="lg:hidden relative {{ $full ? 'min-h-screen' : 'min-h-[340px]' }} flex items-center bg-[#111] overflow-hidden">
        <img src="{{ asset('images/classroom-hero.jpg') }}" alt="SMART Academy"
             class="absolute inset-0 w-full h-full object-cover {{ $full ? 'opacity-30' : 'opacity-20' }}">
        <div class="absolute inset-0 bg-gradient-to-br from-[#111]/95 via-red-950/55 to-[#111]"></div>
        <div class="relative z-10 px-7 {{ $full ? 'pt-32 pb-20' : 'pt-28 pb-14' }} w-full">
            @if($full)
                <div class="flex flex-wrap gap-2 mb-6">
                    @foreach(['Grade 1–13', '10 Subjects', '1,200+ Students'] as $badge)
                        <span class="bg-red-600/25 border border-red-500/40 text-red-300 rounded-full px-4 py-1 text-xs font-semibold">{{ $badge }}</span>
                    @endforeach
                </div>
            @endif
            <h1 class="text-[clamp(32px,9vw,56px)] font-black text-white leading-[1.06] mb-5">
                {!! $title !!}
            </h1>
            <p class="text-base text-white/70 leading-relaxed mb-9 max-w-sm">{{ $subtitle }}</p>
            @if($full)
                <div class="flex flex-col gap-3">
                    <a href="{{ route('login') }}"
                       class="bg-[#ED1C24] text-white rounded-full px-8 py-4 font-bold text-base text-center shadow-[0_8px_30px_rgba(237,28,36,0.5)] hover:bg-red-700 transition-colors flex items-center justify-center gap-2">
                        Access Student Portal
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                    <a href="/teachers" class="bg-white/10 border border-white/30 text-white rounded-full px-8 py-4 font-semibold text-base text-center backdrop-blur-sm hover:bg-white/20 transition">
                        Meet Our Teachers
                    </a>
                </div>
            @endif
        </div>
    </div>

    {{-- Desktop split-screen hero --}}
    <div class="hidden lg:grid grid-cols-2 {{ $full ? 'min-h-screen' : 'min-h-[420px]' }}">
        {{-- Left: content --}}
        <div class="bg-[#111] flex flex-col justify-center px-16 {{ $full ? 'py-24' : 'py-20' }} relative">
            <div class="absolute left-0 top-1/5 bottom-1/5 w-1 bg-gradient-to-b from-transparent via-[#ED1C24] to-transparent rounded-full"></div>
            @if($full)
                <div class="flex flex-wrap gap-2.5 mb-8">
                    @foreach(['Grade 1–13', '10 Subjects', '1,200+ Students'] as $badge)
                        <span class="bg-red-600/20 border border-red-600/35 text-red-300 rounded-full px-4 py-1.5 text-xs font-bold tracking-wide">{{ $badge }}</span>
                    @endforeach
                </div>
            @endif
            <h1 class="text-[clamp(36px,4vw,64px)] font-black text-white leading-[1.05] mb-6">
                {!! $title !!}
            </h1>
            <p class="text-lg text-white/70 leading-[1.8] mb-11 max-w-md">{{ $subtitle }}</p>
            @if($full)
                <div class="flex items-center gap-4 flex-wrap">
                    <a href="{{ route('login') }}"
                       class="bg-[#ED1C24] text-white rounded-full px-10 py-4 font-bold text-base shadow-[0_8px_30px_rgba(237,28,36,0.5)] hover:bg-red-700 transition-colors flex items-center gap-2.5">
                        Access Student Portal
                        <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                    <a href="/teachers" class="border border-white/25 text-white/80 rounded-full px-8 py-4 font-semibold text-base hover:border-white/50 transition">
                        Meet Our Teachers
                    </a>
                </div>
                <div class="flex gap-9 mt-14 pt-9 border-t border-white/10">
                    @foreach([['1,200+','Students'],['10','Subjects'],['18 Yrs','Max Experience']] as [$n,$l])
                        <div>
                            <div class="text-2xl font-black text-white">{{ $n }}</div>
                            <div class="text-xs text-white/50 mt-1">{{ $l }}</div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
        {{-- Right: image --}}
        <div class="relative overflow-hidden h-full">
            <img src="{{ asset('images/classroom-hero.jpg') }}" alt="SMART Academy classroom"
                 class="absolute inset-0 w-full h-full object-cover object-center">
            <div class="absolute inset-0 bg-gradient-to-r from-[#111]/60 via-red-950/25 to-transparent"></div>
            @if($full && $teachers->isNotEmpty())
                <div class="absolute bottom-10 left-8 right-8">
                    <div class="bg-[#111]/85 backdrop-blur-xl rounded-2xl p-5 border border-white/10">
                        <div class="text-[11px] text-white/50 mb-3 font-semibold tracking-widest">OUR TEACHERS</div>
                        <div class="flex items-center gap-2">
                            <div class="flex">
                                @foreach($teachers->take(6) as $i => $teacher)
                                    <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-[#222] {{ $i > 0 ? '-ml-2.5' : '' }} bg-gray-600">
                                        @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 text-white font-bold text-xs bg-red-700">{{ substr($teacher->name, 0, 1) }}</div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <span class="ml-2 text-white/80 text-sm font-semibold">+{{ max(0, $teachers->count() - 6) }} Expert Teachers</span>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

</section>
