@extends('layouts.app')

@section('title', 'Home')

@section('content')
<!-- Hero Section -->
<section class="relative bg-teflin-blue text-white overflow-hidden">
    <!-- Decorative circles -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-20 -left-20 w-96 h-96 border border-white/10 rounded-full"></div>
        <div class="absolute -top-10 -left-10 w-80 h-80 border border-white/10 rounded-full"></div>
        <div class="absolute top-20 left-20 w-64 h-64 border border-white/10 rounded-full"></div>
        <div class="absolute -bottom-32 -right-32 w-[500px] h-[500px] border border-white/10 rounded-full"></div>
        <div class="absolute -bottom-20 -right-20 w-96 h-96 border border-white/10 rounded-full"></div>
        <div class="absolute bottom-10 right-10 w-72 h-72 border border-white/10 rounded-full"></div>
    </div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
        <div class="max-w-4xl">
            <!-- Badge -->
            @if($siteSettings->hero_badge_text)
            <span class="inline-flex items-center gap-2 px-4 py-1.5 bg-{{ $siteSettings->hero_badge_color ?? 'green' }}-500 text-white text-sm font-medium rounded-full mb-8">
                <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span>
                {{ $siteSettings->hero_badge_text }}
            </span>
            @endif
            
            <!-- Main Title -->
            <h1 class="font-serif text-5xl sm:text-6xl lg:text-7xl leading-tight mb-6">
                @if($siteSettings->hero_title)
                    {!! nl2br(e($siteSettings->hero_title)) !!}
                @else
                    <span class="text-teflin-gold">72</span><sup class="text-teflin-gold text-3xl sm:text-4xl">nd</sup> 
                    <span class="text-white">TEFLIN</span><br>
                    <span class="text-white">International Conference</span>
                @endif
            </h1>
            
            <!-- Subtitle -->
            <p class="text-lg sm:text-xl text-white/90 leading-relaxed mb-8 font-serif italic max-w-3xl">
                "{{ $siteSettings->hero_subtitle ?: $siteSettings->conference_theme }}"
            </p>
            
            <!-- Location -->
            <div class="flex items-center gap-2 text-white/80 mb-10">
                <svg class="w-5 h-5" 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>{{ $siteSettings->conference_venue }}, {{ $siteSettings->conference_location }}</span>
            </div>
            
            <!-- Buttons - Controlled by Feature Toggles -->
            <div class="flex flex-col sm:flex-row gap-4">
                @feature('hero_submit_abstract')
                <a href="{{ $featureToggles['hero_submit_abstract']->button_url ? (str_starts_with($featureToggles['hero_submit_abstract']->button_url, 'http') ? $featureToggles['hero_submit_abstract']->button_url : route($featureToggles['hero_submit_abstract']->button_url)) : route('submission.abstract') }}" class="inline-flex items-center justify-center gap-2 px-8 py-3 bg-teflin-gold text-teflin-blue-dark font-semibold rounded-lg hover:bg-teflin-gold-light transition">
                    {{ $featureToggles['hero_submit_abstract']->button_text ?? 'Submit Abstract' }}
                    <svg class="w-5 h-5" 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>
                @endfeature
                @feature('hero_register_now')
                <a href="{{ $featureToggles['hero_register_now']->button_url ? (str_starts_with($featureToggles['hero_register_now']->button_url, 'http') ? $featureToggles['hero_register_now']->button_url : route($featureToggles['hero_register_now']->button_url)) : route('registration.form') }}" class="inline-flex items-center justify-center gap-2 px-8 py-3 bg-teflin-blue-light text-white font-semibold rounded-lg hover:bg-teflin-blue-dark transition border border-white/20">
                    {{ $featureToggles['hero_register_now']->button_text ?? 'Register Now' }}
                </a>
                @endfeature
                @feature('hero_early_registration')
                <a href="{{ route('registration.form') }}" class="inline-flex items-center justify-center gap-2 px-8 py-3 bg-teflin-gold text-teflin-blue-dark font-semibold rounded-lg hover:bg-teflin-gold-light transition">
                    {{ $featureToggles['hero_early_registration']->button_text ?? 'Early Bird Registration' }}
                </a>
                @endfeature
            </div>
        </div>
    </div>
</section>

<!-- Quick Links Cards -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Submit Abstract Card - Blue -->
            <a href="{{ route('submission.abstract') }}" class="group bg-teflin-blue rounded-2xl p-8 text-white hover:shadow-xl transition">
                <div class="w-14 h-14 bg-teflin-gold rounded-xl flex items-center justify-center mb-6">
                    <svg class="w-7 h-7 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <h3 class="text-xl font-bold mb-2">Submit Abstract</h3>
                <p class="text-white/80 mb-4">Share your research with the global ELT community</p>
                <span class="inline-flex items-center gap-1 text-teflin-gold font-medium group-hover:gap-2 transition-all">
                    Learn more <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>
                </span>
            </a>
            
            <!-- Register Now Card - White -->
            <a href="{{ route('registration.form') }}" class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition border border-gray-100">
                <div class="w-14 h-14 bg-teflin-blue/10 rounded-xl flex items-center justify-center mb-6">
                    <svg class="w-7 h-7 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Register Now</h3>
                <p class="text-gray-600 mb-4">Secure your spot at the conference</p>
                <span class="inline-flex items-center gap-1 text-teflin-blue font-medium group-hover:gap-2 transition-all">
                    Learn more <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>
                </span>
            </a>
            
            <!-- Program Overview Card - White -->
            <a href="{{ route('speakers', 'schedule') }}" class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition border border-gray-100">
                <div class="w-14 h-14 bg-teflin-blue/10 rounded-xl flex items-center justify-center mb-6">
                    <svg class="w-7 h-7 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Program Overview</h3>
                <p class="text-gray-600 mb-4">Explore the conference schedule and sessions</p>
                <span class="inline-flex items-center gap-1 text-teflin-blue font-medium group-hover:gap-2 transition-all">
                    Learn more <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>
                </span>
            </a>
        </div>
    </div>
</section>

<!-- Conference Sub-themes -->
<section class="py-16 bg-teflin-gold/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-serif text-4xl text-teflin-blue mb-4">Conference Sub-themes</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">The {{ $siteSettings->conference_title }} welcomes submissions addressing these key areas in English Language Teaching research and practice.</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @forelse($subThemes as $theme)
            <div class="{{ $theme->is_featured ? 'bg-teflin-blue text-white' : 'bg-white' }} rounded-2xl p-6 shadow-sm hover:shadow-lg transition">
                <div class="w-12 h-12 {{ $theme->is_featured ? 'bg-teflin-gold' : 'bg-teflin-blue/10' }} rounded-xl flex items-center justify-center mb-4">
                    @switch($theme->icon)
                        @case('lightbulb')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                            @break
                        @case('computer')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            @break
                        @case('globe')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            @break
                        @case('users')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            @break
                        @case('book')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                            @break
                        @case('beaker')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                            @break
                        @case('clipboard')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                            @break
                        @case('language')
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
                            @break
                        @default
                            <svg class="w-6 h-6 {{ $theme->is_featured ? 'text-teflin-blue' : 'text-teflin-blue' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                    @endswitch
                </div>
                <h3 class="font-bold {{ $theme->is_featured ? '' : 'text-gray-900' }} mb-2">{{ $theme->title }}</h3>
                <p class="{{ $theme->is_featured ? 'text-white/80' : 'text-gray-600' }} text-sm">{{ $theme->description }}</p>
            </div>
            @empty
            <!-- Default themes when none in DB -->
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition">
                <div class="w-12 h-12 bg-teflin-blue/10 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">AI in Language Education</h3>
                <p class="text-gray-600 text-sm">Exploring the role of artificial intelligence in transforming language teaching and learning</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition">
                <div class="w-12 h-12 bg-teflin-blue/10 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">Digital Literacy & ELT</h3>
                <p class="text-gray-600 text-sm">Integrating digital tools and media literacy in English language classrooms</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition">
                <div class="w-12 h-12 bg-teflin-blue/10 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <h3 class="font-bold text-gray-900 mb-2">Global Englishes</h3>
                <p class="text-gray-600 text-sm">Perspectives on World Englishes and their implications for teaching</p>
            </div>
            <div class="bg-teflin-blue rounded-2xl p-6 shadow-sm hover:shadow-lg transition text-white">
                <div class="w-12 h-12 bg-teflin-gold rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
                </div>
                <h3 class="font-bold mb-2">Multilingualism</h3>
                <p class="text-white/80 text-sm">Exploring multilingual education and translanguaging practices</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

<!-- Important Dates -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-serif text-4xl text-teflin-blue mb-4">Important Dates</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">Mark your calendar with these key dates for the conference.</p>
        </div>
        <div class="flex flex-wrap justify-center gap-4">
            @forelse($timelines as $timeline)
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center min-w-[160px] hover:shadow-lg transition">
                <p class="text-teflin-blue font-bold text-sm mb-2">{{ $timeline->start_date->format('j M') }}{{ $timeline->end_date ? ' – ' . $timeline->end_date->format('j M Y') : ' ' . $timeline->start_date->format('Y') }}</p>
                <p class="text-gray-700 text-sm font-medium">{{ $timeline->title }}</p>
            </div>
            @empty
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">1 Feb – 15 May 2026</p>
                <p class="text-gray-700 text-sm font-medium">Abstract Submission</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">16 May – 15 Jun 2026</p>
                <p class="text-gray-700 text-sm font-medium">Abstract Review</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">15 June 2026</p>
                <p class="text-gray-700 text-sm font-medium">Letter of Acceptance</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">16 Jun – 30 May 2026</p>
                <p class="text-gray-700 text-sm font-medium">Full Paper Submission<br>to Partner Journals</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">31 May 2026</p>
                <p class="text-gray-700 text-sm font-medium">Desk Rejection /<br>Journal Acceptance<br>Announcement</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">7 – 9 October 2026</p>
                <p class="text-gray-700 text-sm font-medium">Conference Date</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center">
                <p class="text-teflin-blue font-bold text-sm mb-2">1 Nov – 31 Jan 2027</p>
                <p class="text-gray-700 text-sm font-medium">Paper Processing for<br>Proceedings</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

<!-- Distinguished Speakers -->
<section class="py-16 bg-teflin-gold/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-serif text-4xl text-teflin-blue mb-4">Distinguished Speakers</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">Learn from world-renowned experts in English Language Teaching and Applied Linguistics.</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            @forelse($speakers->take(4) as $speaker)
            <div class="text-center">
                <div class="relative inline-block mb-4">
                    <div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-teflin-gold shadow-lg">
                        @if($speaker->photo)
                        <img src="{{ asset('uploads/' . $speaker->photo) }}" alt="{{ $speaker->name }}" class="w-full h-full object-cover">
                        @else
                        <div class="w-full h-full bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center">
                            <span class="text-4xl font-bold text-white">{{ substr($speaker->name, 0, 1) }}</span>
                        </div>
                        @endif
                    </div>
                    <span class="absolute bottom-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-teflin-{{ $speaker->type === 'keynote' ? 'gold text-teflin-blue-dark' : ($speaker->type === 'plenary' ? 'blue text-white' : 'gold text-teflin-blue-dark') }} text-xs font-semibold rounded-full whitespace-nowrap">
                        {{ ucfirst($speaker->type) }} Speaker
                    </span>
                </div>
                <h3 class="font-serif text-lg font-bold text-gray-900">{{ $speaker->name }}</h3>
                <p class="text-gray-600 text-sm">{{ $speaker->institution }}{{ $speaker->country ? ', ' . $speaker->country : '' }}</p>
                @if($speaker->topic_title)
                <p class="text-teflin-gold italic text-sm mt-2">"{{ $speaker->topic_title }}"</p>
                @endif
            </div>
            @empty
            <!-- Sample speakers when none in DB -->
            <div class="text-center">
                <div class="relative inline-block mb-4">
                    <div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-teflin-gold shadow-lg bg-gradient-to-br from-gray-200 to-gray-300">
                        <div class="w-full h-full flex items-center justify-center"><span class="text-4xl font-bold text-white">S</span></div>
                    </div>
                    <span class="absolute bottom-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-teflin-gold text-teflin-blue-dark text-xs font-semibold rounded-full">Keynote Speaker</span>
                </div>
                <h3 class="font-serif text-lg font-bold text-gray-900">Prof. Dr. Sarah Mitchell</h3>
                <p class="text-gray-600 text-sm">University of Cambridge, UK</p>
                <p class="text-teflin-gold italic text-sm mt-2">"The Future of AI in Language Assessment"</p>
            </div>
            <div class="text-center">
                <div class="relative inline-block mb-4">
                    <div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-teflin-gold shadow-lg bg-gradient-to-br from-gray-200 to-gray-300">
                        <div class="w-full h-full flex items-center justify-center"><span class="text-4xl font-bold text-white">H</span></div>
                    </div>
                    <span class="absolute bottom-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-teflin-blue text-white text-xs font-semibold rounded-full">Plenary Speaker</span>
                </div>
                <h3 class="font-serif text-lg font-bold text-gray-900">Prof. Hiroshi Tanaka</h3>
                <p class="text-gray-600 text-sm">University of Tokyo, Japan</p>
                <p class="text-teflin-gold italic text-sm mt-2">"Digital Transformation in ELT"</p>
            </div>
            <div class="text-center">
                <div class="relative inline-block mb-4">
                    <div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-teflin-gold shadow-lg bg-gradient-to-br from-gray-200 to-gray-300">
                        <div class="w-full h-full flex items-center justify-center"><span class="text-4xl font-bold text-white">M</span></div>
                    </div>
                    <span class="absolute bottom-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-teflin-gold text-teflin-blue-dark text-xs font-semibold rounded-full">Featured Speaker</span>
                </div>
                <h3 class="font-serif text-lg font-bold text-gray-900">Dr. Maria Santos</h3>
                <p class="text-gray-600 text-sm">Stanford University, USA</p>
                <p class="text-teflin-gold italic text-sm mt-2">"Multilingual Education in the 21st Century"</p>
            </div>
            <div class="text-center">
                <div class="relative inline-block mb-4">
                    <div class="w-40 h-40 mx-auto rounded-full overflow-hidden border-4 border-teflin-gold shadow-lg bg-gradient-to-br from-gray-200 to-gray-300">
                        <div class="w-full h-full flex items-center justify-center"><span class="text-4xl font-bold text-white">A</span></div>
                    </div>
                    <span class="absolute bottom-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-teflin-gold text-teflin-blue-dark text-xs font-semibold rounded-full">Keynote Speaker</span>
                </div>
                <h3 class="font-serif text-lg font-bold text-gray-900">Prof. Ahmed Hassan</h3>
                <p class="text-gray-600 text-sm">King Saud University, KSA</p>
                <p class="text-teflin-gold italic text-sm mt-2">"Global Perspectives on English Teaching"</p>
            </div>
            @endforelse
        </div>
        <div class="text-center mt-10">
            <a href="{{ route('speakers') }}" class="inline-flex items-center gap-2 px-6 py-3 border-2 border-teflin-blue text-teflin-blue font-semibold rounded-lg hover:bg-teflin-blue hover:text-white transition">
                View All Speakers
                <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>
        </div>
    </div>
</section>

<!-- News & Announcements -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-start mb-12">
            <div>
                <h2 class="font-serif text-4xl text-teflin-blue mb-2">News & Announcements</h2>
                <p class="text-gray-600">Stay updated with the latest conference news, important dates, and announcements.</p>
            </div>
            <a href="{{ route('news') }}" class="hidden sm:inline-flex items-center gap-1 text-teflin-blue font-medium hover:text-teflin-gold transition">
                View all news <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>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @forelse($news as $index => $item)
            <a href="{{ route('news.detail', $item->slug) }}" class="group bg-white rounded-2xl border border-gray-100 hover:shadow-xl transition overflow-hidden">
                <div class="p-6">
                    @php
                        $badges = ['NEW' => 'bg-green-500', 'UPDATE' => 'bg-teflin-blue', 'INFO' => 'bg-gray-500'];
                        $badgeType = $index === 0 ? 'NEW' : ($index === 1 ? 'UPDATE' : ($index === 2 ? 'NEW' : 'INFO'));
                    @endphp
                    <span class="inline-block px-3 py-1 {{ $badges[$badgeType] }} text-white text-xs font-semibold rounded-full mb-4">{{ $badgeType }}</span>
                    <h3 class="font-bold text-gray-900 group-hover:text-teflin-blue transition mb-3 line-clamp-2">{{ $item->title }}</h3>
                    @if($item->excerpt)
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">{{ $item->excerpt }}</p>
                    @endif
                    <p class="text-gray-400 text-sm flex items-center gap-1">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        {{ $item->published_at?->format('F d, Y') ?? $item->created_at->format('F d, Y') }}
                    </p>
                </div>
            </a>
            @empty
            <!-- Sample news when none in DB -->
            <a href="#" class="group bg-white rounded-2xl border border-gray-100 hover:shadow-xl transition overflow-hidden">
                <div class="p-6">
                    <span class="inline-block px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full mb-4">NEW</span>
                    <h3 class="font-bold text-gray-900 group-hover:text-teflin-blue transition mb-3">Abstract Submission Portal Now Open</h3>
                    <p class="text-gray-600 text-sm mb-4">We are pleased to announce that the abstract submission portal for the 72nd TEFLIN International...</p>
                    <p class="text-gray-400 text-sm flex items-center gap-1">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        January 15, 2025
                    </p>
                </div>
            </a>
            <a href="#" class="group bg-white rounded-2xl border border-gray-100 hover:shadow-xl transition overflow-hidden">
                <div class="p-6">
                    <span class="inline-block px-3 py-1 bg-teflin-blue text-white text-xs font-semibold rounded-full mb-4">UPDATE</span>
                    <h3 class="font-bold text-gray-900 group-hover:text-teflin-blue transition mb-3">Keynote Speakers Announced</h3>
                    <p class="text-gray-600 text-sm mb-4">We are excited to reveal our distinguished lineup of keynote speakers from leading institutions...</p>
                    <p class="text-gray-400 text-sm flex items-center gap-1">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        January 10, 2025
                    </p>
                </div>
            </a>
            <a href="#" class="group bg-white rounded-2xl border border-gray-100 hover:shadow-xl transition overflow-hidden">
                <div class="p-6">
                    <span class="inline-block px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full mb-4">NEW</span>
                    <h3 class="font-bold text-gray-900 group-hover:text-teflin-blue transition mb-3">Early Bird Registration Available</h3>
                    <p class="text-gray-600 text-sm mb-4">Take advantage of our early bird registration rates. Register before July 15, 2025 to save on conference...</p>
                    <p class="text-gray-400 text-sm flex items-center gap-1">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        January 5, 2025
                    </p>
                </div>
            </a>
            <a href="#" class="group bg-white rounded-2xl border border-gray-100 hover:shadow-xl transition overflow-hidden">
                <div class="p-6">
                    <span class="inline-block px-3 py-1 bg-gray-500 text-white text-xs font-semibold rounded-full mb-4">INFO</span>
                    <h3 class="font-bold text-gray-900 group-hover:text-teflin-blue transition mb-3">Conference Venue Information</h3>
                    <p class="text-gray-600 text-sm mb-4">Learn more about the conference venue at UIN Syarif Hidayatullah Jakarta and nearby accommodations.</p>
                    <p class="text-gray-400 text-sm flex items-center gap-1">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        December 20, 2024
                    </p>
                </div>
            </a>
            @endforelse
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="relative py-20 overflow-hidden">
    <!-- Background -->
    <div class="absolute inset-0 bg-gradient-to-br from-teflin-blue via-teflin-blue-light to-teflin-blue"></div>
    <!-- Decorative circles -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-20 -left-20 w-96 h-96 bg-white/5 rounded-full"></div>
        <div class="absolute top-1/2 -left-32 w-64 h-64 bg-white/5 rounded-full"></div>
        <div class="absolute -bottom-32 -right-32 w-[500px] h-[500px] bg-white/5 rounded-full"></div>
        <div class="absolute top-20 right-20 w-32 h-32 bg-white/5 rounded-full"></div>
    </div>
    
    <div class="relative max-w-4xl mx-auto px-4 text-center">
        <h2 class="font-serif text-4xl sm:text-5xl text-white mb-6">Ready to Share Your Research?</h2>
        <p class="text-white/80 text-lg mb-10 max-w-2xl mx-auto">Join researchers and educators from around the world at the 72nd TEFLIN International Conference. Submit your abstract today.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            @feature('hero_submit_abstract')
            <a href="{{ route('submission.abstract') }}" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-teflin-gold text-teflin-blue-dark font-semibold rounded-lg hover:bg-teflin-gold-light transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Submit Abstract
                <svg class="w-5 h-5" 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>
            @endfeature
            @feature('hero_register_now')
            <a href="{{ route('registration.form') }}" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/10 text-white font-semibold rounded-lg hover:bg-white/20 transition border border-white/30">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Register Now
            </a>
            @endfeature
        </div>
        <p class="text-white/60 text-sm mt-8">Abstract submission deadline: May 31, 2025</p>
    </div>
</section>
@endsection
