<script>
    function filterCoaches(field) {
        document.querySelectorAll('.filter-tab').forEach(btn => btn.classList.remove('active'));
        const btn = document.getElementById('btn-' + field);
        if (btn) btn.classList.add('active');

        document.querySelectorAll('.coach-point').forEach(point => {
            if (field === 'all' || point.getAttribute('data-field') === field) {
                point.classList.remove('hidden-point');
            } else {
                point.classList.add('hidden-point');
            }
        });

        const currentActive = document.querySelector('.coach-info-card[style*="display: block"]');
        if (currentActive) {
            const activeId = currentActive.id;
            const point = document.querySelector(`.coach-point[onclick*="${activeId}"]`);
            if (point && point.classList.contains('hidden-point')) {
                document.querySelectorAll('.coach-info-card').forEach(card => card.style.display = 'none');
                const d = document.getElementById('default-msg');
                if (d) d.style.display = 'block';
            }
        }
    }

    function showCoach(coachId) {
        document.querySelectorAll('.coach-info-card').forEach(card => { card.style.display = 'none'; });
        const d = document.getElementById('default-msg');
        if (d) d.style.display = 'none';
        const target = document.getElementById(coachId);
        if (target) target.style.display = 'block';
        if (window.innerWidth < 768) { target.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
    }
</script>
