@php
    use App\Helpers\Helper;
@endphp

@push('styles')
    <style>
        /* Hide default scrollbar */
        .scrollable-content {
            overflow-y: auto;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
        }

        .scrollable-content::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Edge */
        }

        /* Optional: Add custom pointer on hover */
        .scrollable-content:hover {
            cursor: grab;
            /* Shows grab hand cursor */
        }

        /* Optional: Change to grabbing when user clicks and drags */
        .scrollable-content:active {
            cursor: grabbing;
        }
    </style>
@endpush

<div id="introduction-section" class="bg-transparent overflow-hidden w-full section-y">
    <div class="flex overflow-hidden flex-col">
        <x-section-heading id="introduction-head" align="center" :eyebrow="Helper::contentText('homepage.introduction')"
            class="mb-2!" />

        <div class="w-full max-w-384 mx-auto px-4 sm:px-6 lg:px-8 py-6 grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch">
            @php
                $principalEn = $principal->information_en ?? [];
                $principalNp = $principal->information_np ?? [];
                $isEn = app()->getLocale() === 'en';
                // Nepali title/details fall back to English when left blank
                $hourCards = $setting->schoolHours('en');
                if (!$isEn) {
                    $np = $setting->schoolHours('np');
                    $hourCards = $hourCards
                        ? array_map(fn($card, $i) => array_merge($card, array_filter($np[$i] ?? [])), $hourCards, array_keys($hourCards))
                        : $np;
                }
                $hourGroups = array_map(fn($card) => [
                    'title' => $card['title'] ?? '',
                    'rows' => \App\Models\Setting::schoolHourRows($card['details'] ?? ''),
                ], $hourCards);
                $contact1 = json_decode($setting->contact1);
                $contact2 = json_decode($setting->contact2);
            @endphp

            <!-- ------------------------- Principal card ------------------------- -->
            <a href="{{ route('founder-principal') }}" target="_blank" rel="noopener noreferrer"
                class="lg:col-span-4 group block max-w-md w-full mx-auto lg:max-w-none">
                <div id="introduction-left-box"
                    class="h-full bg-white rounded-3xl overflow-hidden shadow-lg border border-gray-100 flex flex-col transition-shadow duration-300 group-hover:shadow-xl">
                    <div class="w-full h-52 overflow-hidden shrink-0">
                        <img loading="lazy" decoding="async"
                            class="w-full h-full object-top object-cover transition-transform duration-500 group-hover:scale-105"
                            src="{{ asset($principal->image ?? '') }}"
                            alt="{{ $isEn ? $principalEn['name'] ?? '' : $principalNp['name'] ?? ($principalEn['name'] ?? '') }}" />
                    </div>

                    <div class="p-6 flex flex-col gap-4 flex-1">
                        <div class="text-center">
                            <h3 class="font-bold text-xl text-gray-900">
                                {{ $isEn ? $principalEn['name'] ?? '' : $principalNp['name'] ?? ($principalEn['name'] ?? '') }}
                            </h3>
                            <p class="font-semibold text-sm text-primary">
                                {{ $isEn
                                    ? $principalEn['designation'] ?? ''
                                    : $principalNp['designation'] ?? ($principalEn['designation'] ?? '') }}
                            </p>
                        </div>

                        <div class="flex items-start gap-3">
                            <i class="fa-solid fa-quote-left text-primary/70 text-xl shrink-0 mt-1" aria-hidden="true"></i>
                            <div class="text-sm text-gray-700 leading-7 line-clamp-8">
                                {!! Helper::stripInlineStyle(
                                    $isEn ? $principalEn['description'] ?? '' : $principalNp['description'] ?? ($principalEn['description'] ?? ''),
                                ) !!}
                            </div>
                        </div>

                        <span
                            class="mt-auto inline-flex items-center gap-2 text-sm font-semibold text-primary group-hover:gap-3 transition-all">
                            {{ __('pages.read_more') }} <i class="fa-solid fa-arrow-right-long" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
            </a>

            <!-- ------------------------- Welcome text ------------------------- -->
            <div class="lg:col-span-8 flex flex-col justify-center gap-5">
                <div id="step11">
                    <h2 class="font-bold text-h2 text-primary">
                        {!! Helper::content('homepage.welcome_to_gbbs') !!}
                    </h2>
                </div>

                <div id="step22"
                    class="line-clamp-9 text-gray-700 text-base md:text-[1.0625rem] leading-8 [&_p]:mb-4">
                    {!! Helper::stripInlineStyle(
                        $isEn ? $setting['description_en'] : $setting['description_np'] ?? $setting['description_en'],
                    ) !!}
                </div>

                <div>
                    <a href="{{ route('about-us') }}"
                        class="btn group inline-flex bg-secondary text-white hover:bg-primary shadow-lg rounded-full pl-6 pr-2 gap-3">
                        {{ __('homepage.discover_our_story') }}
                        <span
                            class="w-9 h-9 rounded-full bg-white text-primary flex items-center justify-center transition-transform duration-300 group-hover:translate-x-1">
                            <i class="fa-solid fa-arrow-right text-sm"></i>
                        </span>
                    </a>
                </div>
            </div>

        </div>

        <!-- ------------------------- School hours / contact ------------------------- -->
        @php $phones = collect([$contact1, $contact2])->filter(fn($c) => !empty($c?->contact)); @endphp
        @if ($hourGroups || $phones->isNotEmpty())
            <div class="w-full max-w-384 mx-auto px-4 sm:px-6 lg:px-8 pt-4">
                <div id="school-hours" class="bg-brand-gradient rounded-3xl p-6 md:p-8 text-white shadow-lg">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                        <h3 class="inline-flex items-center gap-3 text-xl md:text-2xl font-bold">
                            <span class="w-11 h-11 rounded-full bg-white text-primary flex items-center justify-center shrink-0">
                                <i class="fa-regular fa-clock" aria-hidden="true"></i>
                            </span>
                            {{ $hourGroups ? Helper::contentText('homepage.school_hrs') : Helper::contentText('homepage.contact_us_247') }}
                        </h3>

                        @if ($phones->isNotEmpty())
                            <div class="flex flex-wrap gap-3">
                                @foreach ($phones as $contact)
                                    <a href="tel:{{ preg_replace('/\s+/', '', $contact->contact) }}"
                                        class="inline-flex items-center gap-2 rounded-full bg-white/10 ring-1 ring-white/25 px-4 py-2 text-sm font-semibold hover:bg-white hover:text-primary transition">
                                        <i class="fa-solid fa-phone text-xs" aria-hidden="true"></i>
                                        {{ $contact->contact }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    @if ($hourGroups)
                        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
                            @foreach ($hourGroups as $group)
                                <div class="school-hours-card rounded-2xl bg-white/10 ring-1 ring-white/15 p-5">
                                    <h4 class="font-bold text-accent leading-snug">{{ $group['title'] }}</h4>
                                    <div class="mt-3 text-sm divide-y divide-white/20">
                                        @foreach ($group['rows'] as $row)
                                            @if (isset($row['sub']))
                                                <p class="pt-3 pb-1 text-xs font-bold uppercase tracking-wider text-white first:pt-0">{{ $row['sub'] }}</p>
                                            @elseif (isset($row['label']))
                                                <p class="flex justify-between gap-4 py-2">
                                                    <span class="text-white/95">{{ $row['label'] }}</span>
                                                    <span class="font-semibold text-right">{{ $row['value'] }}</span>
                                                </p>
                                            @else
                                                <p class="py-2 text-white/95">{{ $row['text'] }}</p>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>

@push('scripts')
    <script>
        gsap.from("#introduction-head", {
            y: -200,
            duration: 1,
            ease: "power3.linear",
            scrollTrigger: {
                trigger: "#introduction-section",
                start: "top 80%",
            }
        });

        gsap.from("#step22", {
            y: 200,
            duration: 1,
            ease: "power3.linear",
            scrollTrigger: {
                trigger: "#introduction-section",
                start: "top 80%",
            }
        });

        gsap.from("#step11", {
            y: -200,
            duration: 1,
            ease: "power3.linear",
            scrollTrigger: {
                trigger: "#introduction-section",
                start: "top 80%",
            }
        });

        gsap.from("#introduction-left-box", {
            x: -400,
            duration: 1,
            ease: "power3.linear",
            scrollTrigger: {
                trigger: "#introduction-section",
                start: "top 80%",
            }
        });

        gsap.from("#school-hours .school-hours-card", {
            y: 60,
            opacity: 0,
            duration: 0.8,
            stagger: 0.12,
            ease: "power3.out",
            scrollTrigger: {
                trigger: "#school-hours",
                start: "top 85%",
            }
        });
    </script>
@endpush