<!-- Debug: array(2) {
  ["categories"]=>
  array(12) {
    [0]=>
    array(8) {
      ["id"]=>
      int(1)
      ["name"]=>
      string(9) "Academias"
      ["icon"]=>
      string(15) "fas fa-dumbbell"
      ["color"]=>
      string(7) "#FF4B4B"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#FF4B4B"
    }
    [1]=>
    array(8) {
      ["id"]=>
      int(2)
      ["name"]=>
      string(10) "Barbearias"
      ["icon"]=>
      string(10) "fas fa-cut"
      ["color"]=>
      string(7) "#4B6BFF"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#4B6BFF"
    }
    [2]=>
    array(8) {
      ["id"]=>
      int(3)
      ["name"]=>
      string(9) "Dentistas"
      ["icon"]=>
      string(12) "fas fa-tooth"
      ["color"]=>
      string(7) "#00BFA5"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#00BFA5"
    }
    [3]=>
    array(8) {
      ["id"]=>
      int(4)
      ["name"]=>
      string(10) "Farmácias"
      ["icon"]=>
      string(30) "fas fa-prescription-bottle-alt"
      ["color"]=>
      string(7) "#FF6B6B"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#FF6B6B"
    }
    [4]=>
    array(8) {
      ["id"]=>
      int(5)
      ["name"]=>
      string(7) "Hotéis"
      ["icon"]=>
      string(12) "fas fa-hotel"
      ["color"]=>
      string(7) "#6772E5"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#6772E5"
    }
    [5]=>
    array(8) {
      ["id"]=>
      int(6)
      ["name"]=>
      string(11) "Lavanderias"
      ["icon"]=>
      string(13) "fas fa-tshirt"
      ["color"]=>
      string(7) "#4ECDC4"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#4ECDC4"
    }
    [6]=>
    array(8) {
      ["id"]=>
      int(7)
      ["name"]=>
      string(8) "Mercados"
      ["icon"]=>
      string(12) "fas fa-store"
      ["color"]=>
      string(7) "#FFA726"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#FFA726"
    }
    [7]=>
    array(8) {
      ["id"]=>
      int(8)
      ["name"]=>
      string(9) "Pet Shops"
      ["icon"]=>
      string(10) "fas fa-paw"
      ["color"]=>
      string(7) "#FF7043"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#FF7043"
    }
    [8]=>
    array(8) {
      ["id"]=>
      int(9)
      ["name"]=>
      string(9) "Pizzarias"
      ["icon"]=>
      string(18) "fas fa-pizza-slice"
      ["color"]=>
      string(7) "#F44336"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#F44336"
    }
    [9]=>
    array(8) {
      ["id"]=>
      int(10)
      ["name"]=>
      string(18) "Postos de Gasolina"
      ["icon"]=>
      string(15) "fas fa-gas-pump"
      ["color"]=>
      string(7) "#2196F3"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(1)
      ["category_color"]=>
      string(7) "#2196F3"
    }
    [10]=>
    array(8) {
      ["id"]=>
      int(11)
      ["name"]=>
      string(12) "Restaurantes"
      ["icon"]=>
      string(15) "fas fa-utensils"
      ["color"]=>
      string(7) "#FF5722"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(0)
      ["category_color"]=>
      string(7) "#FF5722"
    }
    [11]=>
    array(8) {
      ["id"]=>
      int(12)
      ["name"]=>
      string(17) "Salões de Beleza"
      ["icon"]=>
      string(10) "fas fa-spa"
      ["color"]=>
      string(7) "#E91E63"
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["company_count"]=>
      int(0)
      ["category_color"]=>
      string(7) "#E91E63"
    }
  }
  ["companies"]=>
  array(10) {
    [0]=>
    array(24) {
      ["id"]=>
      int(1)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(1)
      ["name"]=>
      string(16) "Academia Fitness"
      ["description"]=>
      string(34) "Aulas de grupo e personal trainer."
      ["address"]=>
      string(19) "Rua das Flores, 123"
      ["phone"]=>
      string(14) "(11) 1234-5678"
      ["whatsapp"]=>
      string(13) "5511123456789"
      ["facebook"]=>
      string(16) "academia.fitness"
      ["instagram"]=>
      string(16) "academia.fitness"
      ["linkedin"]=>
      string(16) "academia-fitness"
      ["category_id"]=>
      int(1)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(true)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(9) "Academias"
      ["category_icon"]=>
      string(15) "fas fa-dumbbell"
      ["category_color"]=>
      string(7) "#FF4B4B"
    }
    [1]=>
    array(24) {
      ["id"]=>
      int(3)
      ["type_id"]=>
      int(2)
      ["plan_id"]=>
      int(3)
      ["name"]=>
      string(9) "Dr. Silva"
      ["description"]=>
      string(32) "Clínica odontológica completa."
      ["address"]=>
      string(19) "Rua do Sorriso, 789"
      ["phone"]=>
      string(14) "(11) 3456-7890"
      ["whatsapp"]=>
      string(13) "5511345678901"
      ["facebook"]=>
      string(8) "dr.silva"
      ["instagram"]=>
      string(8) "dr.silva"
      ["linkedin"]=>
      string(8) "dr-silva"
      ["category_id"]=>
      int(3)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(true)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(9) "Dentistas"
      ["category_icon"]=>
      string(12) "fas fa-tooth"
      ["category_color"]=>
      string(7) "#00BFA5"
    }
    [2]=>
    array(24) {
      ["id"]=>
      int(5)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(2)
      ["name"]=>
      string(13) "Hotel Central"
      ["description"]=>
      string(38) "Conforto e localização privilegiada."
      ["address"]=>
      string(18) "Rua do Centro, 654"
      ["phone"]=>
      string(14) "(11) 5678-9012"
      ["whatsapp"]=>
      string(13) "5511567890123"
      ["facebook"]=>
      string(13) "hotel.central"
      ["instagram"]=>
      string(13) "hotel.central"
      ["linkedin"]=>
      string(13) "hotel-central"
      ["category_id"]=>
      int(5)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(true)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(7) "Hotéis"
      ["category_icon"]=>
      string(12) "fas fa-hotel"
      ["category_color"]=>
      string(7) "#6772E5"
    }
    [3]=>
    array(24) {
      ["id"]=>
      int(9)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(2)
      ["name"]=>
      string(14) "Pizzaria Sabor"
      ["description"]=>
      string(30) "As melhores pizzas da região."
      ["address"]=>
      string(17) "Rua da Pizza, 369"
      ["phone"]=>
      string(14) "(11) 9012-3456"
      ["whatsapp"]=>
      string(13) "5511901234567"
      ["facebook"]=>
      string(14) "pizzaria.sabor"
      ["instagram"]=>
      string(14) "pizzaria.sabor"
      ["linkedin"]=>
      string(14) "pizzaria-sabor"
      ["category_id"]=>
      int(9)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(true)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(9) "Pizzarias"
      ["category_icon"]=>
      string(18) "fas fa-pizza-slice"
      ["category_color"]=>
      string(7) "#F44336"
    }
    [4]=>
    array(24) {
      ["id"]=>
      int(7)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(1)
      ["name"]=>
      string(21) "Supermercado Economia"
      ["description"]=>
      string(29) "Preços baixos todos os dias."
      ["address"]=>
      string(21) "Rua do Comércio, 147"
      ["phone"]=>
      string(14) "(11) 7890-1234"
      ["whatsapp"]=>
      string(13) "5511789012345"
      ["facebook"]=>
      string(14) "super.economia"
      ["instagram"]=>
      string(14) "super.economia"
      ["linkedin"]=>
      string(14) "super-economia"
      ["category_id"]=>
      int(7)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(true)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(8) "Mercados"
      ["category_icon"]=>
      string(12) "fas fa-store"
      ["category_color"]=>
      string(7) "#FFA726"
    }
    [5]=>
    array(24) {
      ["id"]=>
      int(10)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(1)
      ["name"]=>
      string(17) "Auto Posto Cidade"
      ["description"]=>
      string(50) "Combustível de qualidade e loja de conveniência."
      ["address"]=>
      string(19) "Av. dos Carros, 741"
      ["phone"]=>
      string(14) "(11) 0123-4567"
      ["whatsapp"]=>
      string(13) "5511012345678"
      ["facebook"]=>
      string(12) "posto.cidade"
      ["instagram"]=>
      string(12) "posto.cidade"
      ["linkedin"]=>
      string(12) "posto-cidade"
      ["category_id"]=>
      int(10)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(false)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(18) "Postos de Gasolina"
      ["category_icon"]=>
      string(15) "fas fa-gas-pump"
      ["category_color"]=>
      string(7) "#2196F3"
    }
    [6]=>
    array(24) {
      ["id"]=>
      int(2)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(2)
      ["name"]=>
      string(15) "Barbearia Elite"
      ["description"]=>
      string(31) "Cortes modernos e tradicionais."
      ["address"]=>
      string(18) "Av. Principal, 456"
      ["phone"]=>
      string(14) "(11) 2345-6789"
      ["whatsapp"]=>
      string(13) "5511234567890"
      ["facebook"]=>
      string(15) "barbearia.elite"
      ["instagram"]=>
      string(15) "barbearia.elite"
      ["linkedin"]=>
      string(15) "barbearia-elite"
      ["category_id"]=>
      int(2)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(false)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(10) "Barbearias"
      ["category_icon"]=>
      string(10) "fas fa-cut"
      ["category_color"]=>
      string(7) "#4B6BFF"
    }
    [7]=>
    array(24) {
      ["id"]=>
      int(4)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(1)
      ["name"]=>
      string(17) "Farmácia Popular"
      ["description"]=>
      string(27) "Medicamentos e cosméticos."
      ["address"]=>
      string(18) "Av. da Saúde, 321"
      ["phone"]=>
      string(14) "(11) 4567-8901"
      ["whatsapp"]=>
      string(13) "5511456789012"
      ["facebook"]=>
      string(16) "farmacia.popular"
      ["instagram"]=>
      string(16) "farmacia.popular"
      ["linkedin"]=>
      string(16) "farmacia-popular"
      ["category_id"]=>
      int(4)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(false)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(10) "Farmácias"
      ["category_icon"]=>
      string(30) "fas fa-prescription-bottle-alt"
      ["category_color"]=>
      string(7) "#FF6B6B"
    }
    [8]=>
    array(24) {
      ["id"]=>
      int(6)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(1)
      ["name"]=>
      string(18) "Lavanderia Express"
      ["description"]=>
      string(29) "Lavagem e passadoria rápida."
      ["address"]=>
      string(14) "Av. Limpa, 987"
      ["phone"]=>
      string(14) "(11) 6789-0123"
      ["whatsapp"]=>
      string(13) "5511678901234"
      ["facebook"]=>
      string(18) "lavanderia.express"
      ["instagram"]=>
      string(18) "lavanderia.express"
      ["linkedin"]=>
      string(18) "lavanderia-express"
      ["category_id"]=>
      int(6)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(false)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(11) "Lavanderias"
      ["category_icon"]=>
      string(13) "fas fa-tshirt"
      ["category_color"]=>
      string(7) "#4ECDC4"
    }
    [9]=>
    array(24) {
      ["id"]=>
      int(8)
      ["type_id"]=>
      int(1)
      ["plan_id"]=>
      int(1)
      ["name"]=>
      string(14) "Pet Shop Amigo"
      ["description"]=>
      string(27) "Banho, tosa e produtos pet."
      ["address"]=>
      string(17) "Av. dos Pets, 258"
      ["phone"]=>
      string(14) "(11) 8901-2345"
      ["whatsapp"]=>
      string(13) "5511890123456"
      ["facebook"]=>
      string(13) "petshop.amigo"
      ["instagram"]=>
      string(13) "petshop.amigo"
      ["linkedin"]=>
      string(13) "petshop-amigo"
      ["category_id"]=>
      int(8)
      ["avatar_url"]=>
      string(25) "images/default-avatar.png"
      ["has_geolocation"]=>
      int(0)
      ["has_social"]=>
      int(0)
      ["active"]=>
      int(1)
      ["featured"]=>
      bool(false)
      ["latitude"]=>
      NULL
      ["longitude"]=>
      NULL
      ["created_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["updated_at"]=>
      string(19) "2025-01-12 22:52:44"
      ["category_name"]=>
      string(9) "Pet Shops"
      ["category_icon"]=>
      string(10) "fas fa-paw"
      ["category_color"]=>
      string(7) "#FF7043"
    }
  }
}
 --><!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GuiaComercial - Encontre empresas e profissionais na sua região</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!-- Navbar -->
        <nav class="navbar">
            <div class="navbar-container">
                <a href="/" class="logo">
                    <i class="fas fa-map-marker-alt text-primary"></i>
                    GuiaComercial
                </a>
                <div class="auth-buttons">
                    <a href="/login.php" class="btn-login">Login</a>
                    <a href="subscribe.php" class="btn-register">Assinar</a>
                </div>
            </div>
        </nav>

        <!-- Hero Section -->
        <section class="hero">
            <h1>Encontre empresas e <span>profissionais na sua região</span></h1>
            <p>O maior guia comercial para encontrar os melhores serviços perto de você.</p>
        </section>

        <!-- Search Section -->
        <div class="search-container">
            <div class="search-box">
                <i class="fas fa-search search-icon"></i>
                <input 
                    type="text" 
                    class="search-input" 
                    placeholder="Digite o nome, descrição ou endereço..."
                    v-model="searchQuery"
                >
            </div>
            <div class="filter-options">
                <label class="flex items-center space-x-2">
                    <input 
                        type="checkbox" 
                        v-model="onlyFeatured"
                        class="form-checkbox h-4 w-4 text-primary rounded"
                    >
                    <span class="text-sm text-gray-600">Apenas empresas destaque</span>
                </label>
                <button 
                    @click="resetSearch"
                    class="text-sm text-red-500 hover:text-red-600"
                >
                    Limpar filtros
                </button>
            </div>
        </div>

        <!-- Categories Section -->
        <section class="categories-section">
            <h2 class="categories-title">Categorias</h2>
            <div class="categories-scroll">
                <div class="categories-container">
                    <div v-for="category in duplicatedCategories" 
                         :key="category.id"
                         :class="['category-card']"
                         @click="selectCategory(category.id)"
                         role="button"
                         tabindex="0"
                         :style="{'--category-color': category.category_color}">
                        <i :class="['category-icon', category.icon]"></i>
                        <h3 class="category-name">{{ category.name }}</h3>
                        <span class="category-count">{{ category.company_count }} empresas</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Results Section -->
        <section v-if="filteredCompanies.length > 0" class="companies-section">
            <div class="companies-grid">
                <article v-for="company in filteredCompanies" 
                            :key="company.id" 
                            class="company-card"
                            @click="openLightbox(company)"
                            :style="{'--category-color': company.category_color}">
                    <div class="company-card-header">
                        <img :src="company.avatar_url || 'images/default-avatar.png'" :alt="company.name" class="company-avatar">
                        <div class="company-header-info">
                            <h3 class="company-name">{{ company.name }}</h3>
                            <div class="company-category">
                                <i :class="company.category_icon"></i>
                                <span>{{ company.category_name }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="company-actions">
                        <a 
                            v-if="company.whatsapp" 
                            :href="'https://wa.me/' + company.whatsapp"
                            target="_blank"
                            class="action-btn whatsapp"
                        >
                            <i class="fab fa-whatsapp"></i>
                            WhatsApp
                        </a>
                        <button 
                            @click="openLightbox(company)"
                            class="action-btn more"
                        >
                            <i class="fas fa-plus"></i>
                            Ver mais
                        </button>
                    </div>
                </article>
            </div>
        </section>

        <section v-else class="empty-state">
            <i class="fas fa-search"></i>
            <p>Nenhuma empresa encontrada para sua busca.</p>
        </section>

        <!-- Lightbox -->
        <div class="lightbox" :class="{ active: selectedCompany }" @click.self="closeLightbox">
            <div v-if="selectedCompany" class="lightbox-content">
                <button @click="closeLightbox" class="lightbox-close">
                    <i class="fas fa-times"></i>
                </button>
                
                <div class="lightbox-header">
                    <img :src="selectedCompany.avatar_url || 'images/default-avatar.png'" :alt="selectedCompany.name" class="lightbox-avatar">
                    <div class="lightbox-info">
                        <h2 class="lightbox-title">{{ selectedCompany.name }}</h2>
                        <p class="lightbox-category">
                            <i :class="selectedCompany.category_icon"></i>
                            {{ selectedCompany.category_name }}
                        </p>
                    </div>
                </div>

                <div class="lightbox-description">
                    <p>{{ selectedCompany.description }}</p>
                </div>

                <div v-if="selectedCompany.address" class="lightbox-map">
                    <div id="map" style="height: 300px;"></div>
                </div>

                <div class="social-links">
                    <a v-if="selectedCompany.whatsapp" 
                       :href="'https://wa.me/' + selectedCompany.whatsapp" 
                       target="_blank" 
                       class="social-link whatsapp">
                        <i class="fab fa-whatsapp"></i>
                        WhatsApp
                    </a>
                    <a v-if="selectedCompany.instagram" 
                       :href="'https://instagram.com/' + selectedCompany.instagram" 
                       target="_blank" 
                       class="social-link instagram">
                        <i class="fab fa-instagram"></i>
                        Instagram
                    </a>
                    <a v-if="selectedCompany.facebook" 
                       :href="'https://facebook.com/' + selectedCompany.facebook" 
                       target="_blank" 
                       class="social-link facebook">
                        <i class="fab fa-facebook"></i>
                        Facebook
                    </a>
                    <a v-if="selectedCompany.linkedin" 
                       :href="'https://linkedin.com/in/' + selectedCompany.linkedin" 
                       target="_blank" 
                       class="social-link linkedin">
                        <i class="fab fa-linkedin"></i>
                        LinkedIn
                    </a>
                    <a v-if="selectedCompany.phone" 
                       :href="'tel:' + selectedCompany.phone" 
                       class="social-link phone">
                        <i class="fas fa-phone"></i>
                        {{ selectedCompany.phone }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, nextTick } = Vue;
        
        // Dados iniciais do PHP
        const initialData = {"categories":[{"id":1,"name":"Academias","icon":"fas fa-dumbbell","color":"#FF4B4B","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#FF4B4B"},{"id":2,"name":"Barbearias","icon":"fas fa-cut","color":"#4B6BFF","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#4B6BFF"},{"id":3,"name":"Dentistas","icon":"fas fa-tooth","color":"#00BFA5","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#00BFA5"},{"id":4,"name":"Farm\u00e1cias","icon":"fas fa-prescription-bottle-alt","color":"#FF6B6B","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#FF6B6B"},{"id":5,"name":"Hot\u00e9is","icon":"fas fa-hotel","color":"#6772E5","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#6772E5"},{"id":6,"name":"Lavanderias","icon":"fas fa-tshirt","color":"#4ECDC4","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#4ECDC4"},{"id":7,"name":"Mercados","icon":"fas fa-store","color":"#FFA726","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#FFA726"},{"id":8,"name":"Pet Shops","icon":"fas fa-paw","color":"#FF7043","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#FF7043"},{"id":9,"name":"Pizzarias","icon":"fas fa-pizza-slice","color":"#F44336","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#F44336"},{"id":10,"name":"Postos de Gasolina","icon":"fas fa-gas-pump","color":"#2196F3","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":1,"category_color":"#2196F3"},{"id":11,"name":"Restaurantes","icon":"fas fa-utensils","color":"#FF5722","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":0,"category_color":"#FF5722"},{"id":12,"name":"Sal\u00f5es de Beleza","icon":"fas fa-spa","color":"#E91E63","created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","company_count":0,"category_color":"#E91E63"}],"companies":[{"id":1,"type_id":1,"plan_id":1,"name":"Academia Fitness","description":"Aulas de grupo e personal trainer.","address":"Rua das Flores, 123","phone":"(11) 1234-5678","whatsapp":"5511123456789","facebook":"academia.fitness","instagram":"academia.fitness","linkedin":"academia-fitness","category_id":1,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":true,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Academias","category_icon":"fas fa-dumbbell","category_color":"#FF4B4B"},{"id":3,"type_id":2,"plan_id":3,"name":"Dr. Silva","description":"Cl\u00ednica odontol\u00f3gica completa.","address":"Rua do Sorriso, 789","phone":"(11) 3456-7890","whatsapp":"5511345678901","facebook":"dr.silva","instagram":"dr.silva","linkedin":"dr-silva","category_id":3,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":true,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Dentistas","category_icon":"fas fa-tooth","category_color":"#00BFA5"},{"id":5,"type_id":1,"plan_id":2,"name":"Hotel Central","description":"Conforto e localiza\u00e7\u00e3o privilegiada.","address":"Rua do Centro, 654","phone":"(11) 5678-9012","whatsapp":"5511567890123","facebook":"hotel.central","instagram":"hotel.central","linkedin":"hotel-central","category_id":5,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":true,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Hot\u00e9is","category_icon":"fas fa-hotel","category_color":"#6772E5"},{"id":9,"type_id":1,"plan_id":2,"name":"Pizzaria Sabor","description":"As melhores pizzas da regi\u00e3o.","address":"Rua da Pizza, 369","phone":"(11) 9012-3456","whatsapp":"5511901234567","facebook":"pizzaria.sabor","instagram":"pizzaria.sabor","linkedin":"pizzaria-sabor","category_id":9,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":true,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Pizzarias","category_icon":"fas fa-pizza-slice","category_color":"#F44336"},{"id":7,"type_id":1,"plan_id":1,"name":"Supermercado Economia","description":"Pre\u00e7os baixos todos os dias.","address":"Rua do Com\u00e9rcio, 147","phone":"(11) 7890-1234","whatsapp":"5511789012345","facebook":"super.economia","instagram":"super.economia","linkedin":"super-economia","category_id":7,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":true,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Mercados","category_icon":"fas fa-store","category_color":"#FFA726"},{"id":10,"type_id":1,"plan_id":1,"name":"Auto Posto Cidade","description":"Combust\u00edvel de qualidade e loja de conveni\u00eancia.","address":"Av. dos Carros, 741","phone":"(11) 0123-4567","whatsapp":"5511012345678","facebook":"posto.cidade","instagram":"posto.cidade","linkedin":"posto-cidade","category_id":10,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":false,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Postos de Gasolina","category_icon":"fas fa-gas-pump","category_color":"#2196F3"},{"id":2,"type_id":1,"plan_id":2,"name":"Barbearia Elite","description":"Cortes modernos e tradicionais.","address":"Av. Principal, 456","phone":"(11) 2345-6789","whatsapp":"5511234567890","facebook":"barbearia.elite","instagram":"barbearia.elite","linkedin":"barbearia-elite","category_id":2,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":false,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Barbearias","category_icon":"fas fa-cut","category_color":"#4B6BFF"},{"id":4,"type_id":1,"plan_id":1,"name":"Farm\u00e1cia Popular","description":"Medicamentos e cosm\u00e9ticos.","address":"Av. da Sa\u00fade, 321","phone":"(11) 4567-8901","whatsapp":"5511456789012","facebook":"farmacia.popular","instagram":"farmacia.popular","linkedin":"farmacia-popular","category_id":4,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":false,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Farm\u00e1cias","category_icon":"fas fa-prescription-bottle-alt","category_color":"#FF6B6B"},{"id":6,"type_id":1,"plan_id":1,"name":"Lavanderia Express","description":"Lavagem e passadoria r\u00e1pida.","address":"Av. Limpa, 987","phone":"(11) 6789-0123","whatsapp":"5511678901234","facebook":"lavanderia.express","instagram":"lavanderia.express","linkedin":"lavanderia-express","category_id":6,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":false,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Lavanderias","category_icon":"fas fa-tshirt","category_color":"#4ECDC4"},{"id":8,"type_id":1,"plan_id":1,"name":"Pet Shop Amigo","description":"Banho, tosa e produtos pet.","address":"Av. dos Pets, 258","phone":"(11) 8901-2345","whatsapp":"5511890123456","facebook":"petshop.amigo","instagram":"petshop.amigo","linkedin":"petshop-amigo","category_id":8,"avatar_url":"images\/default-avatar.png","has_geolocation":0,"has_social":0,"active":1,"featured":false,"latitude":null,"longitude":null,"created_at":"2025-01-12 22:52:44","updated_at":"2025-01-12 22:52:44","category_name":"Pet Shops","category_icon":"fas fa-paw","category_color":"#FF7043"}]};

        createApp({
            setup() {
                // Inicializar dados do PHP
                const companies = ref(initialData.companies || []);
                const categories = ref(initialData.categories || []);
                const selectedCategory = ref(null);
                const searchQuery = ref('');
                const selectedCompany = ref(null);
                const map = ref(null);
                const marker = ref(null);

                // Duplicar categorias para scroll infinito
                const duplicatedCategories = computed(() => {
                    return [...categories.value, ...categories.value];
                });

                console.log('Initial data:', { companies: companies.value, categories: categories.value });

                const filteredCompanies = computed(() => {
                    return companies.value.filter(company => {
                        const matchesSearch = !searchQuery.value || 
                            company.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                            company.description.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                            company.category_name.toLowerCase().includes(searchQuery.value.toLowerCase());
                        
                        const matchesCategory = !selectedCategory.value || 
                            company.category_id === selectedCategory.value;
                        
                        return matchesSearch && matchesCategory;
                    });
                });

                const openLightbox = async (company) => {
                    selectedCompany.value = company;
                    
                    // Aguardar o DOM atualizar
                    await nextTick();
                    
                    if (company.address && !map.value) {
                        // Inicializar mapa
                        map.value = L.map('map').setView([0, 0], 13);
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: ' OpenStreetMap contributors'
                        }).addTo(map.value);
                        
                        try {
                            // Geocodificar endereço
                            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(company.address)}`);
                            const data = await response.json();
                            
                            if (data && data.length > 0) {
                                const lat = parseFloat(data[0].lat);
                                const lon = parseFloat(data[0].lon);
                                
                                // Atualizar mapa
                                map.value.setView([lat, lon], 15);
                                
                                // Adicionar marcador
                                if (marker.value) {
                                    marker.value.remove();
                                }
                                marker.value = L.marker([lat, lon]).addTo(map.value);
                            }
                        } catch (error) {
                            console.error('Error geocoding address:', error);
                        }
                    }
                };

                const closeLightbox = () => {
                    selectedCompany.value = null;
                    if (map.value) {
                        map.value.remove();
                        map.value = null;
                        marker.value = null;
                    }
                };

                const selectCategory = (categoryId) => {
                    selectedCategory.value = selectedCategory.value === categoryId ? null : categoryId;
                };

                return {
                    companies,
                    categories,
                    duplicatedCategories,
                    selectedCategory,
                    searchQuery,
                    selectedCompany,
                    filteredCompanies,
                    openLightbox,
                    closeLightbox,
                    selectCategory
                };
            }
        }).mount('#app');
    </script>
</body>
</html>