@php
    $tip_title = $tip_title ?? 'Explore upcoming events';
    $tip_text = $tip_text ?? 'Open any event for details. If registration is open, you can sign up from the event page.';
    $tip_href = $tip_href ?? route('frontend.events.index');
    $tip_storage_key = $tip_storage_key ?? 'events_tip_dismissed_v1';
@endphp

<div class="events-tip" id="events-tip" hidden>
    <div class="events-tip__card">
        <div class="events-tip__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.7"/>
                <path d="M12 8v5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                <circle cx="12" cy="16" r="1" fill="currentColor"/>
            </svg>
        </div>
        <a class="events-tip__body" href="{{ $tip_href }}">
            <p class="events-tip__title">{{ $tip_title }}</p>
            <p class="events-tip__text">{{ $tip_text }}</p>
        </a>
        <button type="button" class="events-tip__close" id="events-tip-close" aria-label="Dismiss">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M7 7l10 10M17 7L7 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
        </button>
    </div>
</div>

@push('styles')
<style>
    .events-tip {
        position: fixed;
        right: 20px;
        bottom: 24px;
        z-index: 1200;
        width: min(360px, calc(100% - 28px));
        animation: events-tip-in 0.35s ease both;
    }

    .events-tip__card {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 14px 14px 16px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #eceff3;
        box-shadow: 0 16px 40px rgba(5, 5, 5, 0.12);
    }

    .events-tip__icon {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff8e6;
        color: #d69a00;
        flex: 0 0 auto;
    }

    .events-tip__icon svg {
        width: 16px;
        height: 16px;
    }

    .events-tip__body {
        flex: 1 1 auto;
        min-width: 0;
        text-decoration: none;
        color: inherit;
    }

    .events-tip__body:hover .events-tip__title {
        color: #d69a00;
    }

    .events-tip__title {
        margin: 0 0 4px;
        font-size: 0.9rem;
        font-weight: 800;
        color: #0b0f19;
        transition: color 0.15s ease;
    }

    .events-tip__text {
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.45;
        color: #3f4654;
    }

    .events-tip__close {
        border: 0;
        background: transparent;
        color: #4b5563;
        padding: 2px;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .events-tip__close svg {
        width: 16px;
        height: 16px;
        display: block;
    }

    @keyframes events-tip-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 640px) {
        .events-tip {
            left: 14px;
            right: 14px;
            width: auto;
            bottom: 16px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
(function () {
    var tip = document.getElementById('events-tip');
    var close_btn = document.getElementById('events-tip-close');
    if (!tip || !close_btn) return;

    var storage_key = @json($tip_storage_key);
    try {
        if (window.sessionStorage && sessionStorage.getItem(storage_key) === '1') {
            return;
        }
    } catch (error) {}

    tip.hidden = false;

    function dismiss() {
        tip.hidden = true;
        try {
            if (window.sessionStorage) {
                sessionStorage.setItem(storage_key, '1');
            }
        } catch (error) {}
    }

    close_btn.addEventListener('click', function (event) {
        event.preventDefault();
        event.stopPropagation();
        dismiss();
    });
    setTimeout(dismiss, 9000);
})();
</script>
@endpush