Nossos Cursos ☆☆☆☆☆

<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inova Cursos - Educação Profissional</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            DEFAULT: '#254e8c',
                            dark: '#1e3f70',
                            light: '#366bc2'
                        },
                        secondary: {
                            DEFAULT: '#f37021',
                            dark: '#d65b14',
                            light: '#f79354'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'blob': 'blob 7s infinite',
                        'shimmer': 'shimmer 1.5s infinite',
                    },
                    keyframes: {
                        blob: {
                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
                            '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
                            '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
                        },
                        shimmer: {
                            '100%': { transform: 'translateX(100%)' }
                        }
                    }
                }
            }
        }
    </script>

.line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
        .skeleton {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 overflow-x-hidden antialiased flex flex-col min-h-screen">

<div class="bg-primary-dark text-blue-100 text-xs py-2 px-4 border-b border-primary-dark/80">
        <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-center sm:text-left gap-2 sm:gap-0">
            <div>
                <i href="https://g.page/inovasaofrancisco" target="_blank" class="fa-solid fa-location-dot mr-1"></i> <a href="https://g.page/inovasaofrancisco" class="hover:text-white transition ml-1">Rua Marcílio Dias 607 Centro (Mapa) |</a>
                <a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-white transition ml-1 font-semibold">Login Alunos</a> | 
                <a href="https://www.inovaeducacional.com.br/p/area-administrativa.html" class="hover:text-white transition ml-1">Portal Colaborador</a>
            </div>
            <div class="flex space-x-4">
                <a href="https://pt-br.facebook.com/inovasaofranciscodosul/" target="_blank" class="hover:text-white transition"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="https://wa.me/5547991140592" target="_blank" class="hover:text-white transition"><i class="fa-brands fa-whatsapp"></i></a>
                <a href="https://www.instagram.com/inovasaofranciscodosul/" target="_blank" class="hover:text-white transition"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://x.com/Inova_Cursos_" target="_blank" class="hover:text-white transition"><i class="fa-brands fa-twitter"></i></a>
            </div>
        </div>
    </div>

<header class="bg-white shadow-sm sticky top-0 z-40 backdrop-blur-md bg-white/95">
        <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
            
            <a href="https://www.inovaeducacional.com.br/p/home.html" class="flex-shrink-0 lg:w-[200px]">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB35ieBnv0eUVY8bF3MCwVIsC2takx9nddWuY_UWCT1u_OE3F-vbVi6PSWFlt-R_1Ul_-EbxWJreusoEbeCMTrs3c9Vb0SM9OGCAKbc2Vkc_p4acMkErEihBTuVonNAVZIH2nc4KqIHVoOK7WBdbsKTRPaNqNzH4ZDwRRcO1yy7u-5hAf7Os5JqiaNqm4S/s1600/LOGOTIPO%20INOVA%20VETORIZADO%20COREL.png" alt="Inova Cursos" class="h-10 md:h-12 object-contain">
            </a>
            
            
            <nav class="hidden lg:flex flex-grow justify-center space-x-8 font-medium text-gray-700 items-center">
                <a href="https://www.inovaeducacional.com.br/" class="hover:text-secondary transition">Início</a>
                <a href="https://www.inovaeducacional.com.br/p/nossos-cursos.html" class="text-primary border-b-2 border-primary pb-1">Nossos Cursos</a>
                <a href="https://www.inovaeducacional.com.br/p/quem-somos_26.html" class="hover:text-secondary transition">Sobre</a>
                <a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-secondary transition font-semibold text-primary"><i class="fa-solid fa-user mr-1"></i> Área Do Aluno</a>
            </nav>

<div class="hidden lg:flex lg:w-[200px] items-center space-x-4 justify-end">
            </div>

<div id="mobile-menu" class="fixed inset-0 bg-black/50 z-50 transition-opacity duration-300 opacity-0 pointer-events-none lg:hidden">
        <div id="mobile-menu-content" class="fixed top-0 right-0 w-4/5 max-w-sm h-full bg-white shadow-xl p-6 transform translate-x-full transition-transform duration-300 flex flex-col justify-between">
            <div>
                <div class="flex justify-between items-center mb-8">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB35ieBnv0eUVY8bF3MCwVIsC2takx9nddWuY_UWCT1u_OE3F-vbVi6PSWFlt-R_1Ul_-EbxWJreusoEbeCMTrs3c9Vb0SM9OGCAKbc2Vkc_p4acMkErEihBTuVonNAVZIH2nc4KqIHVoOK7WBdbsKTRPaNqNzH4ZDwRRcO1yy7u-5hAf7Os5JqiaNqm4S/s1600/LOGOTIPO%20INOVA%20VETORIZADO%20COREL.png" alt="CATÁLOGO DE CURSOS DA Inova Cursos" class="h-8 object-contain">
                    <button id="btn-close-menu" class="text-2xl text-gray-500 hover:text-primary p-2">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <nav class="flex flex-col space-y-4 font-medium text-gray-700 text-lg">
                    <a href="https://www.inovaeducacional.com.br/" class="text-primary border-l-4 border-primary pl-3 py-1 bg-blue-50/50">Início</a>
                    <a href="https://www.inovaeducacional.com.br/p/nossos-cursos.html" class="hover:text-secondary hover:border-l-4 hover:border-secondary pl-3 py-1 transition">Nossos Cursos</a>
                    <a href="https://www.inovaeducacional.com.br/p/quem-somos_26.html" class="hover:text-secondary hover:border-l-4 hover:border-secondary pl-3 py-1 transition">Sobre</a>
                    <a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-secondary hover:border-l-4 hover:border-secondary pl-3 py-1 transition font-semibold text-primary"><i class="fa-solid fa-user mr-1"></i> Área Do Aluno</a>
                </nav>
            </div>
            <div class="border-t border-gray-100 pt-6">
                <div class="flex justify-center space-x-6 text-xl text-gray-500">
                    <a href="https://pt-br.facebook.com/inovasaofranciscodosul/" target="_blank" class="hover:text-primary transition"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="https://wa.me/5547991140592" class="hover:text-primary transition"><i class="fa-brands fa-whatsapp"></i></a>
                    <a href="https://www.instagram.com/inovasaofranciscodosul/" target="_blank" class="hover:text-primary transition"><i class="fa-brands fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>

<section class="hero-bg text-white pt-16 pb-24 px-4 md:px-6 text-center relative overflow-hidden">
        <div class="relative z-10 max-w-4xl mx-auto">
            <h1 class="text-3xl md:text-5xl font-extrabold mb-4 leading-tight tracking-tight">Qualificação de verdade para o <span class="text-secondary">seu futuro</span></h1>
            <p class="text-lg md:text-xl text-blue-50 mb-10 max-w-2xl mx-auto font-light">Encontre o curso ideal e fale diretamente com nossos consultores via WhatsApp para garantir sua vaga e condições especiais.</p>
            
            <div class="relative w-full max-w-2xl mx-auto group">
                <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
                    <i class="fa-solid fa-magnifying-glass text-gray-400 group-focus-within:text-primary transition-colors text-lg"></i>
                </div>
                <input 
                    type="text" 
                    id="searchInput"
                    class="block w-full pl-14 pr-6 py-4 md:py-5 rounded-2xl border-2 border-transparent text-gray-900 bg-white shadow-xl placeholder-gray-400 focus:border-primary focus:ring-0 text-lg transition-all outline-none" 
                    placeholder="Busque por Informática, Saúde, Administração..."
                >
            </div>
        </div>
    </section>

<main class="flex-grow container mx-auto px-4 md:px-6 py-8 -mt-10 relative z-20">
        
        
        <div class="bg-white rounded-2xl shadow-md p-4 mb-10 border border-gray-100">
            <div class="flex items-center space-x-3 overflow-x-auto no-scrollbar pb-2" id="categoryFilters">
                <button class="filter-btn active whitespace-nowrap px-6 py-2.5 rounded-full font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/30" data-category="Todos">
                    Todos os Cursos
                </button>
            </div>
        </div>

<div id="errorState" class="hidden text-center py-16 bg-white rounded-2xl shadow-sm border border-gray-100">
            <i class="fa-solid fa-circle-exclamation text-5xl text-red-400 mb-4"></i>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Ops! Tivemos um problema.</h3>
            <p class="text-gray-600">Não foi possível carregar os cursos no momento. Tente novamente mais tarde.</p>
        </div>

<div id="emptyState" class="hidden text-center py-16 bg-white rounded-2xl shadow-sm border border-gray-100">
            <i class="fa-solid fa-magnifying-glass-minus text-5xl text-gray-300 mb-4"></i>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Nenhum curso encontrado</h3>
            <p class="text-gray-500">Tente buscar por outros termos ou selecione uma categoria diferente.</p>
        </div>

</main>

<footer class="bg-gray-900 pt-20 pb-10 border-t-4 border-secondary text-gray-300 mt-10">
        <div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
            
            <div class="space-y-6">
                <div class="bg-white inline-block p-3 rounded-xl">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB35ieBnv0eUVY8bF3MCwVIsC2takx9nddWuY_UWCT1u_OE3F-vbVi6PSWFlt-R_1Ul_-EbxWJreusoEbeCMTrs3c9Vb0SM9OGCAKbc2Vkc_p4acMkErEihBTuVonNAVZIH2nc4KqIHVoOK7WBdbsKTRPaNqNzH4ZDwRRcO1yy7u-5hAf7Os5JqiaNqm4S/s1600/LOGOTIPO%20INOVA%20VETORIZADO%20COREL.png" alt="Lista de cursos Inova Cursos" class="h-8 object-contain">
                </div>
                <p class="text-sm leading-relaxed text-gray-400">
                    Transformando vidas através da educação desde 2014. Cursos profissionalizantes, graduação e técnicos com foco no mercado de trabalho.
                </p>
                <div class="text-xs text-gray-500 font-medium">AWC TREINAMENTOS E IDIOMAS LTDA</div>
            </div>

<div>
                <h4 class="font-bold text-white text-lg mb-6 flex items-center gap-2"><i class="fa-solid fa-link text-secondary"></i> Links Úteis</h4>
                <ul class="space-y-3">
                    <li><a href="https://www.inovaeducacional.com.br/" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Página Inicial</a></li>
                    <li><a href="https://www.inovaeducacional.com.br/p/quem-somos_26.html" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Sobre Nós</a></li>
                    <li><a href="https://www.inovaeducacional.com.br/p/area-do-aluno.html" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Área do Aluno</a></li>
                    <li><a href="https://www.inovaeducacional.com.br/p/nossos-cursos.html" class="hover:text-secondary transition flex items-center gap-2"><i class="fa-solid fa-angle-right text-xs"></i> Lista de Cursos</a></li>
                </ul>
            </div>

<div>
                <h4 class="font-bold text-white text-lg mb-6 flex items-center gap-2"><i class="fa-solid fa-headset text-secondary"></i> Contato</h4>
                <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-location-dot mt-1 text-gray-500"></i>
                        <span class="text-sm">Rua Marcílio Dias, 607 - Centro<br>São Francisco do Sul - SC</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fa-brands fa-whatsapp text-green-500"></i>
                        <a href="https://wa.me/5547991140592" target="_blank" class="text-sm hover:text-white transition">(47) 99114-0592</a>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fa-regular fa-envelope text-gray-500"></i>
                        <a href="mailto:atendimento@grupoinova.net.br" class="text-sm hover:text-white transition">atendimento@grupoinova.net.br</a>
                    </li>
                </ul>
            </div>

</div>

<div class="max-w-7xl mx-auto px-4 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center text-xs text-gray-500">
            <p>© 2026 Inova Cursos. Todos os direitos reservados.</p>
            <p class="mt-2 md:mt-0">AWC TREINAMENTOS @ GRUPO INOVA CURSOS.</p>
        </div>
    </footer>

let allCourses = [];
        let categories = new Set();
        let currentFilter = 'Todos';
        const uniqueKeys = new Set();

const coursesGrid = document.getElementById('coursesGrid');
        const loadingState = document.getElementById('loadingState');
        const errorState = document.getElementById('errorState');
        const emptyState = document.getElementById('emptyState');
        const searchInput = document.getElementById('searchInput');
        const categoryFiltersContainer = document.getElementById('categoryFilters');

async function init() {
            try {
                setupMobileMenu();
                setupEventListeners();

await fetchProfissionalizanteData();
                fetchRemainingData();

} catch (error) {
                console.error("Erro ao inicializar página:", error);
                if (allCourses.length === 0) {
                    loadingState.classList.add('hidden');
                    errorState.classList.remove('hidden');
                }
            }
        }

function setupMobileMenu() {
            const btnMobileMenu = document.getElementById('btn-mobile-menu');
            const btnCloseMenu = document.getElementById('btn-close-menu');
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileMenuContent = document.getElementById('mobile-menu-content');

if (btnMobileMenu && btnCloseMenu && mobileMenu) {
                btnMobileMenu.addEventListener('click', () => {
                    mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
                    mobileMenuContent.classList.remove('translate-x-full');
                });
                btnCloseMenu.addEventListener('click', () => {
                    mobileMenu.classList.add('opacity-0', 'pointer-events-none');
                    mobileMenuContent.classList.add('translate-x-full');
                });
            }
        }

async function fetchProfissionalizanteData() {
            try {
                const resProf = await fetch(API_PROFISSIONALIZANTE).then(r => r.json()).catch(() => []);
                const profData = Array.isArray(resProf) ? resProf : (resProf.data || []);

processRows(profData, 'PROFISSIONALIZANTE');
                
                setupFilters();
                filterCourses(searchInput.value.toLowerCase(), currentFilter);
            } catch (error) {
                console.error("Erro ao carregar cursos profissionalizantes:", error);
            }
        }

async function fetchRemainingData() {
            try {
                const [resEja, resGrad] = await Promise.all([
                    fetch(API_EJA_TRANSITO_TEC).then(r => r.json()).catch(() => []),
                    fetch(API_GRAD_POS).then(r => r.json()).catch(() => [])
                ]);

const ejaData = Array.isArray(resEja) ? resEja : (resEja.data || []);
                const gradData = Array.isArray(resGrad) ? resGrad : (resGrad.data || []);

processRows(ejaData, 'EJA_TRANS_TEC');
                processRows(gradData, 'GRAD_POS');

setupFilters();
                filterCourses(searchInput.value.toLowerCase(), currentFilter);
            } catch (error) {
                console.error("Erro ao carregar demais cursos em segundo plano:", error);
            }
        }

function processRows(rows, sourceIdentifier) {
            rows.forEach(row => {
                const name = findKey(row, ['curso', 'nome', 'titulo', 'título', 'nome do curso', 'cursos']);
                let category = findKey(row, ['categoria', 'tipo', 'área', 'area', 'modalidade']);
                const time = findKey(row, ['turno', 'horário', 'horario', 'período', 'periodo', 'turnos de estudo']);
                const link = findKey(row, ['link', 'url', 'inscrição', 'inscricao', 'matricula', 'link de destino', 'linkdestino']);
                const imgUrl = findKey(row, ['link da imagem', 'imagem', 'foto', 'img']);
                const description = findKey(row, ['descrição', 'descricao', 'resumo', 'sobre']);

if (!name) return;

if (sourceIdentifier === 'GRAD_POS') {
                    if (category && category.toString().toUpperCase().includes('PROFISSIONALIZANTE')) {
                        return; 
                    }
                }

const courseName = name.toString().trim();
                const courseCategory = (category ? category.toString().trim() : 'Geral');
                const uniqueKey = `${courseName.toLowerCase()}-${courseCategory.toLowerCase()}`;

if (!uniqueKeys.has(uniqueKey)) {
                    uniqueKeys.add(uniqueKey);
                    categories.add(courseCategory);

allCourses.push({
                        title: courseName,
                        category: courseCategory,
                        turno: time ? time.toString().trim() : 'Consultar',
                        link: link ? link.toString().trim() : '#',
                        imgUrl: imgUrl ? imgUrl.toString().trim() : '',
                        description: description ? description.toString().trim() : '',
                        source: sourceIdentifier
                    });
                }
            });

sortCoursesList();
        }

// FUNÇÃO CENTRAL PARA DEFINIR A ORDEM DAS CATEGORIAS
        function getCategoryPriority(catName) {
            const cat = catName.toLowerCase();
            
            // Verifica dinamicamente se ESTA categoria contém o curso de Informática
            const hasInfoCourse = allCourses.some(c => 
                c.category.toLowerCase() === cat && 
                (c.title.toLowerCase().includes('informática completa') || c.title.toLowerCase().includes('informática'))
            );
            
            // Prioridade 0 (Absoluta): A categoria que possuir o curso de Informática
            if (hasInfoCourse) return 0;
            // Prioridade 1: Informática e Tecnologia
            if (cat.includes('informática') || cat.includes('tecnologia')) return 1;
            // Prioridade 2: Profissionalizante
            if (cat.includes('profissionalizante')) return 2;
            // Demais categorias
            return 3;
        }

function sortCoursesList() {
            allCourses.sort((a, b) => {
                const normA = a.title.toLowerCase().trim();
                const normB = b.title.toLowerCase().trim();
                
                // 1. Curso Exato de Informática TEM que ser o primeiro da sua categoria
                const isAInfoCourse = normA.includes('informática');
                const isBInfoCourse = normB.includes('informática');
                if (isAInfoCourse && !isBInfoCourse) return -1;
                if (!isAInfoCourse && isBInfoCourse) return 1;

// 2. Ordena pelas categorias prioritárias
                const catA = a.category.toLowerCase().trim();
                const catB = b.category.toLowerCase().trim();
                const pA = getCategoryPriority(catA);
                const pB = getCategoryPriority(catB);
                
                if (pA !== pB) return pA - pB;

// 3. Ordem Alfabética para o resto
                return a.title.localeCompare(b.title);
            });
        }

function setupFilters() {
            const existingButtons = categoryFiltersContainer.querySelectorAll('.filter-btn:not([data-category="Todos"])');
            existingButtons.forEach(btn => btn.remove());

// Ordena as abas utilizando a mesma lógica forte de prioridades
            const sortedCategories = Array.from(categories).sort((a, b) => {
                const pA = getCategoryPriority(a);
                const pB = getCategoryPriority(b);
                if (pA !== pB) return pA - pB;
                return a.localeCompare(b);
            });

sortedCategories.forEach(cat => {
                const btn = document.createElement('button');
                const isActive = currentFilter === cat;
                
                btn.className = isActive
                    ? "filter-btn active whitespace-nowrap px-6 py-2.5 rounded-full font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/30 border border-primary"
                    : "filter-btn whitespace-nowrap px-6 py-2.5 rounded-full font-semibold text-sm transition-all text-gray-600 bg-white hover:bg-gray-50 border border-gray-200 hover:border-gray-300 shadow-sm";
                
                btn.dataset.category = cat;
                btn.textContent = cat;
                categoryFiltersContainer.appendChild(btn);
            });
        }

function createCardHTML(course) {
            let badgeColor = "bg-gray-100 text-gray-700 border-gray-200";
            const catLower = course.category.toLowerCase();
            
            if (catLower.includes('informática') || catLower.includes('tecnologia')) badgeColor = "bg-blue-100 text-blue-800 border-blue-200";
            else if (catLower.includes('profissional')) badgeColor = "bg-orange-100 text-orange-800 border-orange-200";
            else if (catLower.includes('gradua')) badgeColor = "bg-purple-100 text-purple-800 border-purple-200";
            else if (catLower.includes('pós') || catLower.includes('mba')) badgeColor = "bg-indigo-100 text-indigo-800 border-indigo-200";
            else if (catLower.includes('técnico') || catLower.includes('tecnico')) badgeColor = "bg-teal-100 text-teal-800 border-teal-200";
            else if (catLower.includes('eja') || catLower.includes('supletivo')) badgeColor = "bg-sky-100 text-sky-800 border-sky-200";

const msgWhatsapp = encodeURIComponent(`Olá! Tenho interesse no curso *${course.title}* (${course.category}). Gostaria de saber mais detalhes e garantir minha vaga!`);
            const whatsappUrl = `https://wa.me/5547991140592?text=${msgWhatsapp}`;

const isProfissionalizanteSource = course.source === 'PROFISSIONALIZANTE';
            const hasValidLink = course.link && course.link !== '#' && course.link.trim() !== '';

return `
                <div class="bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 overflow-hidden transition-all duration-300 transform hover:-translate-y-1 flex flex-col h-full group relative">
                    
                    <div class="h-48 w-full bg-gray-100 relative overflow-hidden flex-shrink-0">
                        ${course.imgUrl 
                            ? `<img src="${course.imgUrl}" alt="${course.title}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" onerror="this.src='https://placehold.co/600x400/f3f4f6/a1a1aa?text=Sem+Imagem'">`
                            : `<div class="w-full h-full flex items-center justify-center text-gray-300 bg-gray-50"><i class="fa-solid fa-graduation-cap text-4xl"></i></div>`
                        }
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </div>
                    
                    <div class="p-5 flex-grow flex flex-col">
                        <div class="mb-3 flex flex-wrap gap-2 items-center">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wide border ${badgeColor}">
                                ${course.category}
                            </span>
                            ${isProfissionalizanteSource && !catLower.includes('profissional') ? `<span class="inline-flex items-center px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wide border bg-orange-50 text-orange-600 border-orange-200"><i class="fa-solid fa-star mr-1"></i> Profissionalizante</span>` : ''}
                        </div>
                        
                        <h2 class="text-lg md:text-xl font-extrabold text-gray-900 mb-2 leading-tight group-hover:text-[#007bff] transition-colors line-clamp-2">
                            ${course.title}
                        </h2>
                        
                        ${course.description ? `<p class="text-sm text-gray-500 mb-4 line-clamp-2">${course.description}</p>` : ''}
                        
                        <div class="mt-auto pt-4 border-t border-gray-50 flex items-center text-sm text-gray-600">
                            <div class="flex items-center bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-100 w-full">
                                <i class="fa-regular fa-clock text-primary mr-2"></i>
                                <span>Turno: <strong class="text-gray-900 ml-1">${course.turno}</strong></span>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="px-5 pb-5 pt-0 flex flex-col gap-2.5 relative z-10">
                        ${hasValidLink ? `
                        <a href="${course.link}" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary-light text-white font-bold py-3.5 px-4 rounded-xl transition-all shadow-md hover:shadow-lg border border-primary-dark">
                            <i class="fa-solid fa-arrow-up-right-from-square text-[14px]"></i>
                            <span>Acessar Página do Curso</span>
                        </a>
                        ` : ''}
                        
                        <a href="${whatsappUrl}" target="_blank" rel="noopener noreferrer" class="w-full flex items-center justify-center gap-2 bg-[#25D366] hover:bg-[#1ebd5a] text-white font-bold py-3.5 px-4 rounded-xl transition-all shadow-md hover:shadow-lg hover:shadow-green-500/20 whatsapp-btn-pulse">
                            <i class="fa-brands fa-whatsapp text-xl"></i>
                            <span>Falar no WhatsApp</span>
                        </a>
                    </div>
                </div>
            `;
        }

function renderCourses(coursesToRender, isInitialView = false) {
            loadingState.classList.add('hidden');
            errorState.classList.add('hidden');

if (coursesToRender.length === 0) {
                coursesGrid.innerHTML = '';
                coursesGrid.classList.add('hidden');
                emptyState.classList.remove('hidden');
                return;
            }

emptyState.classList.add('hidden');
            coursesGrid.classList.remove('hidden');

const currentViewMode = coursesGrid.dataset.viewMode || 'none';
            const newViewMode = isInitialView ? 'initial' : 'filtered';

if (currentViewMode !== newViewMode || !isInitialView) {
                coursesGrid.innerHTML = '';
            }
            coursesGrid.dataset.viewMode = newViewMode;

if (isInitialView) {
                coursesGrid.className = "flex flex-col gap-12 w-full";

const grouped = {};
                coursesToRender.forEach(c => {
                    if(!grouped[c.category]) grouped[c.category] = [];
                    grouped[c.category].push(c);
                });

// Ordenação visual dos blocos mantendo a regra rígida
                const sortedCategories = Object.keys(grouped).sort((a, b) => {
                    const pA = getCategoryPriority(a);
                    const pB = getCategoryPriority(b);
                    if (pA !== pB) return pA - pB;
                    return a.localeCompare(b);
                });

sortedCategories.forEach(cat => {
                    const sectionId = 'cat-' + cat.toLowerCase().replace(/[^a-z0-9]/g, '-');
                    let section = document.getElementById(sectionId);
                    
                    if (!section) {
                        const catCourses = grouped[cat].slice(0, 4); // Mostra 4 na home
                        if(catCourses.length === 0) return;

section = document.createElement('div');
                        section.id = sectionId;
                        section.className = "w-full bg-white p-6 md:p-8 rounded-3xl shadow-sm border border-gray-100 relative";
                        
                        const headerHtml = `
                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 pb-4 border-b-2 border-gray-50">
                                <h3 class="text-2xl md:text-3xl font-extrabold text-gray-900 flex items-center gap-3">
                                    <span class="w-1.5 h-8 bg-primary rounded-full inline-block"></span>
                                    ${cat}
                                </h3>
                                ${grouped[cat].length > 4 ? `
                                    <button onclick="setCategoryFilter('${cat}')" class="mt-4 sm:mt-0 px-5 py-2.5 bg-blue-50 hover:bg-blue-100 text-primary font-bold rounded-xl transition-colors flex items-center gap-2 group text-sm">
                                        Ver todos os ${grouped[cat].length}
                                        <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
                                    </button>
                                ` : ''}
                            </div>
                        `;

const gridContainer = document.createElement('div');
                        gridContainer.className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6";
                        gridContainer.innerHTML = catCourses.map(course => createCardHTML(course)).join('');

section.innerHTML = headerHtml;
                        section.appendChild(gridContainer);
                        coursesGrid.appendChild(section);
                    }
                });

} else {
                coursesGrid.className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6";
                
                coursesToRender.forEach(course => {
                    const wrapper = document.createElement('div');
                    wrapper.innerHTML = createCardHTML(course);
                    coursesGrid.appendChild(wrapper.firstElementChild);
                });
            }
        }

function setupEventListeners() {
            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                filterCourses(searchTerm, currentFilter);
            });

categoryFiltersContainer.addEventListener('click', (e) => {
                const btn = e.target.closest('.filter-btn');
                if (btn) {
                    const categoryName = btn.dataset.category;
                    setCategoryFilter(categoryName);
                }
            });
        }

function filterCourses(searchTerm, categoryName) {
            const isInitialView = (searchTerm === '' && categoryName === 'Todos');

const filtered = allCourses.filter(course => {
                const matchSearch = course.title.toLowerCase().includes(searchTerm) || course.category.toLowerCase().includes(searchTerm);
                const matchCategory = categoryName === 'Todos' || course.category === categoryName;
                
                return matchSearch && matchCategory;
            });

renderCourses(filtered, isInitialView);
        }

window.addEventListener('DOMContentLoaded', init);

</script>
</body>
</html>

Nossos Cursos ☆☆☆☆☆

Siga a escola:

Pesquise aqui o que você precisa

Sobre a INOVA

Siga-nos

buttons=(Tá bom !) days=(10)

Contact form