{{-- Hero Widget - Admin Config Kullanıyor --}}
@php
    $cfg = $widget->content_with_defaults;
    $showForGuest = $cfg['guest_only'] ?? false;
    $shouldShow = !$showForGuest || auth()->guest();
@endphp

@if($shouldShow)
<section class="hero-section" style="position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center;
                background: linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #1a3a52 100%);
                overflow: hidden; padding: 80px 24px 100px;">
    <div style="position: absolute; inset: 0;
                background: radial-gradient(circle at 20% 50%, rgba(59,130,246,0.15) 0%, transparent 50%),
                            radial-gradient(circle at 80% 80%, rgba(139,92,246,0.1) 0%, transparent 50%);
                pointer-events: none;"></div>
    
    <div style="position: relative; z-index: 10; text-align: center; max-width: 800px;">
        @if($cfg['badge_text'] ?? false)
        <div style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px;
                    background: rgba(34,197,94,0.15); backdrop-filter: blur(10px);
                    border: 1px solid rgba(34,197,94,0.3); border-radius: 50px;
                    color: #86efac; font-size: 12px; font-weight: 700;
                    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px;">
            <span style="width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block;"></span>
            {{ $cfg['badge_text'] }}
        </div>
        @endif

        <h1 style="font-size: clamp(36px, 5vw, 56px); font-weight: 900; color: #ffffff;
                   line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em;">
            @guest
                <span>{{ $cfg['title'] ?? 'Askeri Kariyer Başarısının Merkezine Hoş Geldiniz' }}</span>
            @else
                <span>{{ auth()->user()->name }}, </span>
                <span style="background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
                             -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                    Seni Bekliyoruz
                </span>
            @endguest
        </h1>

        <p style="font-size: clamp(15px, 2vw, 18px); color: rgba(255,255,255,0.85); line-height: 1.7;
                  margin-bottom: 32px; max-width: 650px; margin-left: auto; margin-right: auto;">
            @guest
                {{ $cfg['subtitle'] ?? 'KPSS hazırlığından mülakat pratiklerine, forum tartışmalarından AI asistanına kadar her şey tek platformda. Binlerce kullanıcı ile bağlantı kurun ve kariyerinizi geliştirin.' }}
            @else
                Binlerce üyeyle birlikte öğren, paylaş ve başar. Her gün yeni içerik ve fırsatlar seni bekliyor.
            @endguest
        </p>

        @if($cfg['show_cta'] ?? true)
        <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
            @guest
                <a href="{{ route('register') }}" style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
                    background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; text-decoration: none;
                    border-radius: 10px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 20px rgba(37,99,235,0.35);
                    transition: all 0.3s ease;"
                    onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 28px rgba(37,99,235,0.4)';"
                    onmouseout="this.style.transform=''; this.style.boxShadow='';">
                    🚀 Ücretsiz Başla
                </a>
                <a href="{{ route('login') }}" style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
                    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1.5px solid rgba(255,255,255,0.2);
                    color: white; text-decoration: none; border-radius: 10px; font-size: 15px; font-weight: 600;
                    transition: all 0.3s ease;"
                    onmouseover="this.style.background='rgba(255,255,255,0.15)'; this.style.borderColor='rgba(255,255,255,0.3)';"
                    onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.borderColor='rgba(255,255,255,0.2)';">
                    Giriş Yap
                </a>
            @else
                <a href="{{ route('forum.index') }}" style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
                    background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; text-decoration: none;
                    border-radius: 10px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 20px rgba(37,99,235,0.35);
                    transition: all 0.3s ease;"
                    onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 28px rgba(37,99,235,0.4)';"
                    onmouseout="this.style.transform=''; this.style.boxShadow='';">
                    💬 Forum'a Katıl
                </a>
                <a href="{{ route('blog.index') }}" style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
                    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1.5px solid rgba(255,255,255,0.2);
                    color: white; text-decoration: none; border-radius: 10px; font-size: 15px; font-weight: 600;
                    transition: all 0.3s ease;"
                    onmouseover="this.style.background='rgba(255,255,255,0.15)'; this.style.borderColor='rgba(255,255,255,0.3)';"
                    onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.borderColor='rgba(255,255,255,0.2)';">
                    Blog'u Keşfet
                </a>
            @endguest
        </div>
        @endif
    </div>
</section>
@endif
