<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>
        @yield('title', 'Home') -
        {{ $siteSettings->conference_title ??
            '72nd
                              TEFLIN International Conference' }}
    </title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        teflin: {
                            blue: '#1e3a6e',
                            'blue-dark': '#162d54',
                            'blue-light': '#2a4f8a',
                            gold: '#d4a843',
                            'gold-light': '#e8c36a',
                            'gold-dark': '#b8922f',
                        },
                    },
                    fontFamily: {
                        serif: ['Playfair Display', 'Georgia', 'serif'],
                    },
                },
            },
        };
    </script>
    <link rel="icon" type="image/png" href="{{ asset('images/uin-logo.png') }}" />
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet" />
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .font-serif {
            font-family: 'Playfair Display', Georgia, serif;
        }

        [x-cloak] {
            display: none !important;
        }
    </style>
</head>

<body class="font-sans antialiased bg-gray-50" x-data="{ mobileMenu: false }">
    <!-- Top Deadline Bar - Controlled by Feature Toggle -->
    @feature('hero_submit_abstract')
        <div class="bg-teflin-gold text-teflin-blue-dark py-2 text-sm" x-data="{ ...countdown(), showBar: true }" x-init="init()"
            x-show="showBar" x-cloak>
            <div class="max-w-7xl mx-auto px-4 flex items-center justify-center gap-2 flex-wrap">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="font-medium">Abstract Submission Deadline:</span>
                <div class="flex items-center gap-1">
                    <span class="bg-teflin-blue text-white px-2 py-0.5 rounded text-xs font-bold"
                        x-text="days + 'd'">00d</span>
                    <span class="font-bold">:</span>
                    <span class="bg-teflin-blue text-white px-2 py-0.5 rounded text-xs font-bold"
                        x-text="hours + 'h'">00h</span>
                    <span class="font-bold">:</span>
                    <span class="bg-teflin-blue text-white px-2 py-0.5 rounded text-xs font-bold"
                        x-text="minutes + 'm'">00m</span>
                    <span class="font-bold">:</span>
                    <span class="bg-teflin-blue text-white px-2 py-0.5 rounded text-xs font-bold"
                        x-text="seconds + 's'">00s</span>
                </div>
                <a href="{{ route('submission.abstract') }}" class="font-semibold hover:underline flex items-center gap-1">
                    Submit Now
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </a>
                <button @click="showBar = false"
                    class="ml-auto text-teflin-blue-dark hover:text-teflin-blue transition cursor-pointer text-xl font-bold leading-none">
                    &times;
                </button>
            </div>
        </div>
    @endfeature

    <!-- Header -->
    <header class="bg-teflin-blue sticky top-0 z-50 lg:relative">
        <div class="max-w-7xl mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <a href="{{ route('home') }}" class="flex items-center gap-3">
                    <img src="{{ asset('images/uin-logo.png') }}" alt="UIN Logo" class="h-14 w-auto" />
                    <img src="{{ asset('images/logo_teflin2.png') }}" alt="TEFLIN Logo" class="h-14 w-auto" />
                </a>

                <!-- Title -->
                <div class="hidden md:block text-center flex-1">
                    <h1 class="text-white text-xl font-medium">
                        @if ($siteSettings->conference_title)
                            {!! $siteSettings->conference_title !!}
                        @else
                            <span>The 72</span><sup>nd</sup>
                            <span class="text-white">TEFLIN</span>
                            <span class="text-white">International Conference</span>
                        @endif
                    </h1>
                </div>

                <!-- Buttons - Controlled by Feature Toggles -->
                <div class="flex items-center gap-3">
                    @feature('hero_submit_abstract')
                        <a href="{{ route('submission.abstract') }}"
                            class="hidden sm:inline-flex items-center px-4 py-2 bg-teflin-gold text-teflin-blue-dark text-sm font-semibold rounded-lg hover:bg-teflin-gold-light transition">
                            Submit Abstract
                        </a>
                        @endfeature @if($siteSettings->registration_open)
                        <a href="{{ route('registration.form') }}"
                            class="hidden sm:inline-flex items-center px-4 py-2 border border-white text-white text-sm font-semibold rounded-lg hover:bg-white/10 transition">
                            Register
                        </a>
                    @endif
                    <button @click="mobileMenu = !mobileMenu" class="lg:hidden p-2 text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Navigation -->
    <nav class="bg-teflin-blue border-t border-white/20 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="hidden lg:flex items-center justify-center py-2">
                <div class="flex items-center gap-1">
                    @if (isset($headerNavigation) && $headerNavigation->count() > 0)
                        @foreach ($headerNavigation as $nav)
                            @if ($nav->children->count() > 0)
                                <!-- Dropdown Menu -->
                                <div class="relative" x-data="{ open: false }" @mouseenter="open = true"
                                    @mouseleave="open = false">
                                    <a href="{{ $nav->getUrl() }}"
                                        class="px-4 py-2 text-sm font-medium {{ request()->url() == $nav->getUrl() ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide flex items-center gap-1"
                                        @if ($nav->open_in_new_tab) target="_blank" @endif> {{ $nav->title }}
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </a>
                                    <div x-show="open" x-cloak x-transition
                                        class="absolute left-0 top-full mt-0 w-56 bg-teflin-blue-dark rounded-lg shadow-xl py-2 z-50">
                                        @foreach ($nav->children as $child)
                                            <a href="{{ $child->getUrl() }}"
                                                class="block px-4 py-2 text-sm text-white hover:bg-white/10"
                                                @if ($child->open_in_new_tab) target="_blank" @endif>{{ $child->title }}</a>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <!-- Single Link -->
                                <a href="{{ $nav->getUrl() }}"
                                    class="px-4 py-2 text-sm font-medium {{ request()->url() == $nav->getUrl() ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide"
                                    @if ($nav->open_in_new_tab) target="_blank" @endif>{{ $nav->title }}</a>
                            @endif
                        @endforeach
                    @else
                        <!-- Fallback Static Navigation -->
                        <a href="{{ route('home') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('home') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">Home</a>
                        <a href="{{ route('about') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('about') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">About</a>
                        <a href="{{ route('speakers') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('speakers') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">Speakers</a>
                        <a href="{{ route('call-for-papers') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('call-for-papers') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">Call
                            for Papers</a>
                        <a href="{{ route('registration') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('registration') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">Registration</a>
                        <a href="{{ route('venue') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('venue') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">Venue
                            & Travel</a>
                        <a href="{{ route('contact') }}"
                            class="px-4 py-2 text-sm font-medium {{ request()->routeIs('contact') ? 'text-teflin-gold' : 'text-white hover:text-teflin-gold' }} transition uppercase tracking-wide">Contact</a>
                    @endif
                </div>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div x-show="mobileMenu" x-cloak class="lg:hidden bg-teflin-blue-dark border-t border-white/10">
            <div class="px-4 py-3 space-y-1">
                @if (isset($headerNavigation) && $headerNavigation->count() > 0)
                    @foreach ($headerNavigation as $nav)
                        @if ($nav->children->count() > 0)
                            <!-- Mobile Dropdown -->
                            <div x-data="{ open: false }">
                                <button @click="open = !open"
                                    class="flex items-center justify-between w-full px-3 py-2 text-white hover:bg-white/10 rounded">
                                    {{ $nav->title }}
                                    <svg class="w-4 h-4" :class="{ 'rotate-180': open }" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7" />
                                    </svg>
                                </button>
                                <div x-show="open" class="pl-4 space-y-1">
                                    @foreach ($nav->children as $child)
                                        <a href="{{ $child->getUrl() }}"
                                            class="block px-3 py-2 text-white/80 hover:bg-white/10 rounded text-sm"
                                            @if ($child->open_in_new_tab) target="_blank" @endif>{{ $child->title }}</a>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <!-- Mobile Single Link -->
                            <a href="{{ $nav->getUrl() }}"
                                class="block px-3 py-2 text-white hover:bg-white/10 rounded"
                                @if ($nav->open_in_new_tab) target="_blank" @endif>{{ $nav->title }}</a>
                        @endif
                    @endforeach
                @else
                    <!-- Fallback Static Mobile Navigation -->
                    <a href="{{ route('home') }}"
                        class="block px-3 py-2 text-white hover:bg-white/10 rounded">Home</a>
                    <a href="{{ route('about') }}"
                        class="block px-3 py-2 text-white hover:bg-white/10 rounded">About</a>
                    <a href="{{ route('speakers') }}"
                        class="block px-3 py-2 text-white hover:bg-white/10 rounded">Speakers</a>
                    <a href="{{ route('call-for-papers') }}"
                        class="block px-3 py-2 text-white hover:bg-white/10 rounded">Call for Papers</a>
                    <a href="{{ route('registration') }}"
                        class="block px-3 py-2 text-white hover:bg-white/10 rounded">Registration</a>
                    <a href="{{ route('venue') }}" class="block px-3 py-2 text-white hover:bg-white/10 rounded">Venue
                        & Travel</a>
                    <a href="{{ route('contact') }}"
                        class="block px-3 py-2 text-white hover:bg-white/10 rounded">Contact</a>
                @endif

                <div class="pt-3 border-t border-white/10 space-y-2">
                    <a href="{{ route('submission.abstract') }}"
                        class="block w-full px-4 py-2 bg-teflin-gold text-teflin-blue-dark text-center font-semibold rounded-lg">Submit
                        Abstract</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main>@yield('content')</main>

    <!-- Footer -->
    <footer class="bg-teflin-blue text-white">
        <div class="max-w-7xl mx-auto px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
                <!-- About -->
                <div>
                    <div class="flex items-center gap-3 mb-4">
                        <div
                            class="w-10 h-10 bg-teflin-blue-light rounded-full flex items-center justify-center border-2 border-teflin-gold">
                            <span class="text-white font-bold text-sm">72</span>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg">
                                {{ $siteSettings->site_name ?? 'TEFLIN 2026' }}
                            </h3>
                            <p class="text-white/70 text-xs">International Conference</p>
                        </div>
                    </div>
                    <p class="text-white/80 text-sm leading-relaxed">
                        @if ($siteSettings->footer_about)
                            {!! $siteSettings->footer_about !!}
                        @else
                            <span>The 72nd TEFLIN</span>
                            <span class="text-white">International Conference</span>
                        @endif
                    </p>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="font-serif text-xl mb-4">Quick Links</h3>
                    <ul class="space-y-2 text-white/80 text-sm">
                        <li>
                            <a href="{{ route('call-for-papers') }}" class="hover:text-teflin-gold transition">Submission Guidelines</a>
                        </li>
                        <li>
                            <a href="{{ route('speakers') }}" class="hover:text-teflin-gold transition">Speakers</a>
                        </li>
                        {{-- <li>
                            <a href="{{ route('speakers') }}" class="hover:text-teflin-gold transition">Program</a>
                        </li> --}}
                        <li>
                            <a href="{{ route('venue') }}" class="hover:text-teflin-gold transition">Venue</a>
                        </li>
                    </ul>
                </div>

                <!-- Important Dates -->
                <div class="col-span-1 lg:col-span-2">
                    <h3 class="font-serif text-xl mb-4">Important Dates</h3>
                    <ul class="space-y-2 text-sm">
                        @forelse($timelines as $timeline)
                            <li class="flex justify-between">
                                <span class="text-white/80">{{ $timeline->title }}</span>
                                <span
                                    class="text-teflin-gold">{{ $timeline->start_date->format('j M') }}{{ $timeline->end_date ? ' – ' . $timeline->end_date->format('j M Y') : ' ' . $timeline->start_date->format('Y') }}</span>
                            </li>
                        @empty
                            <li class="flex justify-between">
                                <span class="text-white/80">Abstract Deadline</span><span
                                    class="text-teflin-gold">{{ $siteSettings->abstract_deadline
                                        ? \Carbon\Carbon::parse($siteSettings->abstract_deadline)->format('M
                                                                                                                                                                                                                                                                                                                          d, Y')
                                        : 'May 31, 2026' }}</span>
                            </li>
                            <li class="flex justify-between">
                                <span class="text-white/80">Conference Start</span><span
                                    class="text-teflin-gold">{{ $siteSettings->conference_date
                                        ? \Carbon\Carbon::parse($siteSettings->conference_date)->format('M
                                                                                                                                                                                                                                                                                                                          d, Y')
                                        : 'Oct 7, 2026' }}</span>
                            </li>
                            <li class="flex justify-between">
                                <span class="text-white/80">Conference End</span><span
                                    class="text-teflin-gold">{{ $siteSettings->conference_end_date
                                        ? \Carbon\Carbon::parse($siteSettings->conference_end_date)->format('M
                                                                                                                                                                                                                                                                                                                          d, Y')
                                        : 'Oct 9, 2026' }}</span>
                            </li>
                        @endforelse
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h3 class="font-serif text-xl mb-4">Contact Us</h3>
                    <ul class="space-y-3 text-white/80 text-sm">
                        @if ($siteSettings->contact_address)
                            <li class="flex items-start gap-2">
                                <svg class="w-5 h-5 mt-0.5 text-teflin-gold flex-shrink-0" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        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" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <span>{!! nl2br(e($siteSettings->contact_address)) !!}</span>
                            </li>
                            @endif @if ($siteSettings->contact_email)
                                <li class="flex items-center gap-2">
                                    <svg class="w-5 h-5 text-teflin-gold flex-shrink-0" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            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>
                                    <span>{{ $siteSettings->contact_email }}</span>
                                </li>
                                @endif @if ($siteSettings->contact_phone)
                                    <li class="flex items-center gap-2">
                                        <svg class="w-5 h-5 text-teflin-gold flex-shrink-0" fill="none"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                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>
                                        <span>{{ $siteSettings->contact_phone }}</span>
                                    </li>
                                @endif
                    </ul>
                    <div class="flex gap-3 mt-4">
                        @if ($siteSettings->facebook_url)
                            <a href="{{ $siteSettings->facebook_url }}" target="_blank"
                                class="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center hover:bg-teflin-gold hover:text-teflin-blue transition">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                </svg>
                            </a>
                            @endif @if ($siteSettings->twitter_url)
                                <a href="{{ $siteSettings->twitter_url }}" target="_blank"
                                    class="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center hover:bg-teflin-gold hover:text-teflin-blue transition">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                        <path
                                            d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                                    </svg>
                                </a>
                                @endif @if ($siteSettings->instagram_url)
                                    <a href="{{ $siteSettings->instagram_url }}" target="_blank"
                                        class="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center hover:bg-teflin-gold hover:text-teflin-blue transition">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                            <path
                                                d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.757-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
                                        </svg>
                                    </a>
                                    @endif @if ($siteSettings->youtube_url)
                                        <a href="{{ $siteSettings->youtube_url }}" target="_blank"
                                            class="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center hover:bg-teflin-gold hover:text-teflin-blue transition">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                <path
                                                    d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                                            </svg>
                                        </a>
                                    @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="border-t border-white/10">
            <div
                class="max-w-7xl mx-auto px-4 py-4 flex flex-col sm:flex-row justify-between items-center gap-2 text-sm text-white/60">
                <p>
                    {{ $siteSettings->footer_copyright ?:
                        '© ' .
                            date('Y') .
                            ' TEFLIN
                                                                                                                                                                                                International Conference. All rights reserved.' }}
                </p>
                <div class="flex gap-4">
                    <a href="#" class="hover:text-white transition">Privacy Policy</a>
                    <a href="#" class="hover:text-white transition">Terms of Use</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        function countdown() {
            return {
                days: '00',
                hours: '00',
                minutes: '00',
                seconds: '00',
                init() {
                    this.updateCountdown();
                    setInterval(() => this.updateCountdown(), 1000);
                },
                updateCountdown() {
                    @if ($siteSettings->abstract_deadline)
                        const target = new Date('{{ $siteSettings->abstract_deadline }}').getTime();
                    @endif
                    const now = new Date().getTime();
                    const diff = target - now;

                    if (diff > 0) {
                        this.days = String(
                            Math.floor(diff / (1000 * 60 * 60 * 24)),
                        ).padStart(2, '0');
                        this.hours = String(
                            Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                        ).padStart(2, '0');
                        this.minutes = String(
                            Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
                        ).padStart(2, '0');
                        this.seconds = String(
                            Math.floor((diff % (1000 * 60)) / 1000),
                        ).padStart(2, '0');
                    }
                },
            };
        }
    </script>
    @stack('scripts')
</body>

</html>
