<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Planos SON - Tvitec</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Reset e configurações gerais - Estilo Sistema SON */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-fixed img {
            height: 40px;
            margin-right: 20px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
            text-align: center;
            color: #333;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
        }
        
        .logo-section {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            color: #333;
            font-weight: bold;
        }

        /* Container principal */
        .container {
            max-width: 1200px;
            margin: 80px auto 30px;
            padding: 0 20px;
        }

        /* Header */
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px 0;
            background: #f5f5f5;
            border-radius: 10px;
            color: #333;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border: 1px solid #ddd;
        }

        header h1 {
            font-size: 2.2rem;
            margin-bottom: 15px;
            font-weight: 600;
            color: #333;
        }

        header p {
            font-size: 1.1rem;
            color: #666;
            max-width: 800px;
            margin: 0 auto 25px;
        }

        .header-tags {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        .tag {
            background: #e9ecef;
            padding: 6px 15px;
            border-radius: 4px;
            font-size: 0.9rem;
            color: #495057;
            border: 1px solid #dee2e6;
        }

        /* Container de planos */
        .planos-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 50px;
        }

        /* Cards de planos - Estilo SON */
        .plano-card {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid #dee2e6;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .plano-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border-color: #4CAFAF;
        }

        .plano-card.destaque {
            border-color: #28a745;
            transform: translateY(-5px);
        }

        .plano-card.destaque:hover {
            transform: translateY(-10px);
            border-color: #28a745;
        }

        /* Badge de destaque */
        .badge {
            position: absolute;
            top: 15px;
            right: -30px;
            background: #28a745;
            color: white;
            padding: 6px 35px;
            transform: rotate(45deg);
            font-size: 0.8rem;
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        /* Cabeçalho do card */
        .plano-header {
            margin-bottom: 20px;
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 2px solid #f1f3f5;
        }

        .plano-titulo {
            font-size: 1.6rem;
            color: #4CAFAF;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .plano-card.destaque .plano-titulo {
            color: #28a745;
        }

        .plano-descricao {
            color: #666;
            font-size: 1rem;
            line-height: 1.5;
        }

        /* Preços - Estilo limpo */
        .precos-container {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
            text-align: center;
            border: 1px solid #e9ecef;
        }

        .opcao-preco {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #dee2e6;
        }

        .opcao-preco:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .preco-label {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .preco-label .economia {
            background: #28a745;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .preco-valor {
            font-size: 1.8rem;
            font-weight: 700;
            color: #212529;
            margin-bottom: 5px;
        }

        .preco-periodo {
            font-size: 0.9rem;
            color: #6c757d;
            font-weight: 500;
        }

        .economia-destaque {
            background: #d4edda;
            color: #155724;
            padding: 10px;
            border-radius: 6px;
            margin-top: 15px;
            font-weight: 600;
            font-size: 0.9rem;
            border: 1px solid #c3e6cb;
        }

        /* Recursos */
        .plano-recursos {
            list-style: none;
            margin-bottom: 30px;
            flex-grow: 1;
        }

        .plano-recursos li {
            padding: 10px 0;
            border-bottom: 1px solid #f1f3f5;
            display: flex;
            align-items: center;
            font-size: 0.95rem;
        }

        .plano-recursos li:last-child {
            border-bottom: none;
        }

        .plano-recursos li i {
            color: #28a745;
            margin-right: 10px;
            font-size: 1rem;
            min-width: 20px;
        }

        .plano-recursos li.disabled {
            color: #adb5bd;
        }

        .plano-recursos li.disabled i {
            color: #ced4da;
        }

        /* Botão - Estilo SON */
        .btn-escolher-plano {
            display: block;
            width: 100%;
            padding: 15px;
            background: #4CAFAF;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            text-decoration: none;
            margin-top: auto;
        }

        .btn-escolher-plano:hover {
            background: #3d9f9f;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 175, 175, 0.2);
        }

        .btn-escolher-plano.destaque {
            background: #28a745;
        }

        .btn-escolher-plano.destaque:hover {
            background: #218838;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
        }

        /* Tabela comparativa */
        .comparativo-tabela {
            background: white;
            border-radius: 8px;
            padding: 30px;
            margin: 40px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            border: 1px solid #dee2e6;
        }

        .comparativo-tabela h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 1.8rem;
            font-weight: 600;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background: #f8f9fa;
            color: #333;
            padding: 15px;
            text-align: center;
            font-weight: 600;
            font-size: 1rem;
            border-bottom: 2px solid #dee2e6;
        }

        td {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #e9ecef;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        .check {
            color: #28a745;
            font-size: 1.1rem;
        }

        .times {
            color: #dc3545;
            font-size: 1.1rem;
        }

        /* FAQ */
        .faq-section {
            background: white;
            border-radius: 8px;
            padding: 30px;
            margin: 40px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            border: 1px solid #dee2e6;
        }

        .faq-section h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 1.8rem;
            font-weight: 600;
        }

        .faq-item {
            margin-bottom: 20px;
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 20px;
        }

        .faq-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .faq-question {
            font-weight: 600;
            color: #212529;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1rem;
            padding: 10px 0;
        }

        .faq-question:hover {
            color: #4CAFAF;
        }

        .faq-answer {
            margin-top: 10px;
            color: #495057;
            line-height: 1.6;
            display: none;
        }

        .faq-answer.active {
            display: block;
        }

        /* Modal - Estilo SON */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 8px;
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #6c757d;
            cursor: pointer;
            transition: color 0.3s;
        }

        .modal-close:hover {
            color: #dc3545;
        }

        .modal h2 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .modal p {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #4CAFAF;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }

        .btn-confirmar {
            flex: 1;
            padding: 12px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-cancelar {
            flex: 1;
            padding: 12px;
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-confirmar:hover {
            background: #218838;
        }

        .btn-cancelar:hover {
            background: #545b62;
        }

        .loading {
            display: none;
            text-align: center;
            margin: 15px 0;
        }

        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4CAFAF;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .success-message {
            display: none;
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
            border: 1px solid #c3e6cb;
            font-size: 0.9rem;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 30px 20px;
            margin-top: 50px;
            color: #6c757d;
            border-top: 1px solid #dee2e6;
            font-size: 0.9rem;
        }

        footer p {
            margin-bottom: 10px;
        }

        .contact-info {
            display: flex;
            justify-content: center;
            gap: 25px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4CAFAF;
            font-weight: 500;
            font-size: 0.9rem;
        }

        /* Responsividade */
        @media (max-width: 992px) {
            .planos-container {
                grid-template-columns: 1fr;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .plano-card.destaque {
                transform: translateY(0);
            }
            
            .plano-card.destaque:hover {
                transform: translateY(-5px);
            }
        }

        @media (max-width: 768px) {
            .header-fixed {
                padding: 12px 15px;
            }
            
            .header-fixed h2 {
                font-size: 1.2rem;
            }
            
            .container {
                margin-top: 70px;
                padding: 0 15px;
            }
            
            header {
                padding: 20px 15px;
            }
            
            header h1 {
                font-size: 1.8rem;
            }
            
            .plano-card {
                padding: 20px;
            }
            
            .comparativo-tabela,
            .faq-section {
                padding: 20px;
            }
            
            .modal-content {
                padding: 20px;
            }
            
            .modal-buttons {
                flex-direction: column;
            }
            
            .preco-valor {
                font-size: 1.6rem;
            }
            
            table {
                display: block;
                overflow-x: auto;
            }
        }

        @media (max-width: 480px) {
            header h1 {
                font-size: 1.5rem;
            }
            
            .plano-titulo {
                font-size: 1.4rem;
            }
            
            .badge {
                font-size: 0.7rem;
                padding: 5px 30px;
                right: -25px;
            }
            
            .contact-info {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            .header-tags {
                gap: 5px;
            }
            
            .tag {
                font-size: 0.8rem;
                padding: 4px 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Header fixo estilo SON -->
    <div class="header-fixed">
        <div class="header-content">
            <div class="logo-section">
                <img src="tvitec.png" alt="Logo TVITEC" style="height: 40px; width: auto;">
                <h2>Planos SON - Tvitec</h2>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Header -->
        <header>
            <h1>Escolha o Plano Ideal para Sua Empresa</h1>
            <p>Oferecemos soluções flexíveis que crescem junto com seu negócio. Economize com o pacote anual!</p>
            <div class="header-tags">
                <div class="tag"><i class="fas fa-check-circle"></i> Suporte especializado</div>
                <div class="tag"><i class="fas fa-check-circle"></i> Atualizações gratuitas</div>
                <div class="tag"><i class="fas fa-check-circle"></i> Segurança garantida</div>
                <div class="tag"><i class="fas fa-check-circle"></i> Migração assistida</div>
            </div>
        </header>

        <!-- Planos -->
        <div class="planos-container">
            <!-- Plano Básico -->
            <div class="plano-card">
                <div class="plano-header">
                    <div class="plano-titulo">Plano Básico</div>
                    <div class="plano-descricao">Ideal para startups e pequenas empresas que estão começando</div>
                </div>
                
                <div class="precos-container">
                    <div class="opcao-preco">
                        <div class="preco-label">
                            <i class="fas fa-calendar-alt"></i> Pacote Anual
                            <span class="economia">Economize 10%</span>
                        </div>
                        <div class="preco-valor">R$ 109,90</div>
                        <div class="preco-periodo">por mês (cobrado anualmente)</div>
                    </div>
                    
                    <div class="opcao-preco">
                        <div class="preco-label">
                            <i class="fas fa-calendar-week"></i> Pacote Mensal
                        </div>
                        <div class="preco-valor">R$ 120,90</div>
                        <div class="preco-periodo">por mês (cobrado mensalmente)</div>
                    </div>
                </div>

                <ul class="plano-recursos">
                    <li><i class="fas fa-check"></i> Até 2 usuários</li>
                    <li><i class="fas fa-check"></i> Até 500 clientes cadastrados</li>
                    <li><i class="fas fa-check"></i> 20Mb armazenamento total</li>
                    <li><i class="fas fa-check"></i> Suporte por e-mail</li>
                    <li><i class="fas fa-check"></i> Upload de PDF/DOC</li>
                   
                   
                    <li class="disabled"><i class="fas fa-times"></i> SLA 99.9%</li>
                </ul>
                
                <button class="btn-escolher-plano" onclick="escolherPlano('Básico')">Escolher Plano</button>
            </div>

            <!-- Plano Pró -->
            <div class="plano-card destaque">
                <div class="badge">MAIS POPULAR</div>
                <div class="plano-header">
                    <div class="plano-titulo">Plano Pró</div>
                    <div class="plano-descricao">Perfeito para empresas em crescimento com necessidades expandidas</div>
                </div>
                
                <div class="precos-container">
                    <div class="opcao-preco">
                        <div class="preco-label">
                            <i class="fas fa-calendar-alt"></i> Pacote Anual
                            <span class="economia">Economize 9%</span>
                        </div>
                        <div class="preco-valor">R$ 365,80</div>
                        <div class="preco-periodo">por mês (cobrado anualmente)</div>
                    </div>
                    
                    <div class="opcao-preco">
                        <div class="preco-label">
                            <i class="fas fa-calendar-week"></i> Pacote Mensal
                        </div>
                        <div class="preco-valor">R$ 401,00</div>
                        <div class="preco-periodo">por mês (cobrado mensalmente)</div>
                    </div>
                    
                    <div class="economia-destaque">
                        <i class="fas fa-piggy-bank"></i> Economize R$ 422,40 no ano
                    </div>
                </div>

                <ul class="plano-recursos">
                    <li><i class="fas fa-check"></i> Até 5 usuários</li>
                    <li><i class="fas fa-check"></i> Até 1000 clientes cadastrados</li>
                    <li><i class="fas fa-check"></i> 300Mb armazenamento total</li>
                    <li><i class="fas fa-check"></i> Suporte prioritário</li>
                    <li><i class="fas fa-check"></i> Upload de PDF/DOC/Imagens</li>
                  
                  
                    <li class="disabled"><i class="fas fa-times"></i> SLA 99.9%</li>
                </ul>
                
                <button class="btn-escolher-plano destaque" onclick="escolherPlano('Pró')">Escolher Plano</button>
            </div>

            <!-- Plano Empresas -->
            <div class="plano-card">
                <div class="plano-header">
                    <div class="plano-titulo">Plano Empresas</div>
                    <div class="plano-descricao">Para grandes corporações com necessidades específicas e volume alto</div>
                </div>
                
                <div class="precos-container">
                    <div class="opcao-preco">
                        <div class="preco-label">
                            <i class="fas fa-calendar-alt"></i> Pacote Anual
                            <span class="economia">Economize 10%</span>
                        </div>
                        <div class="preco-valor">R$ 489,00</div>
                        <div class="preco-periodo">por mês (cobrado anualmente)</div>
                    </div>
                    
                    <div class="opcao-preco">
                        <div class="preco-label">
                            <i class="fas fa-calendar-week"></i> Pacote Mensal
                        </div>
                        <div class="preco-valor">R$ 537,90</div>
                        <div class="preco-periodo">por mês (cobrado mensalmente)</div>
                    </div>
                    
                    <div class="economia-destaque">
                        <i class="fas fa-piggy-bank"></i> Economize R$ 586,80 no ano
                    </div>
                </div>

                <ul class="plano-recursos">
                    <li><i class="fas fa-check"></i> Até 8 usuários</li>
                    <li><i class="fas fa-check"></i> Cadastro ilimitado de clientes</li>
                    <li><i class="fas fa-check"></i> 500Mb armazenamento total</li>
                    <li><i class="fas fa-check"></i> Suporte Prioritário</li>
                    <li><i class="fas fa-check"></i> Todos os tipos de arquivo</li>
                    
                    
                    <li><i class="fas fa-check"></i> SLA 99.9%</li>
                </ul>
                
                <button class="btn-escolher-plano" onclick="escolherPlano('Empresas')">Escolher Plano</button>
            </div>
        </div>

        <!-- Tabela Comparativa -->
        <div class="comparativo-tabela">
            <h2>Comparativo Detalhado dos Planos</h2>
            <table>
                <thead>
                    <tr>
                        <th>Recurso</th>
                        <th>Básico</th>
                        <th>Pró</th>
                        <th>Empresas</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Usuários</td>
                        <td>Até 10</td>
                        <td>Até 50</td>
                        <td>Ilimitados</td>
                    </tr>
                    <tr>
                        <td>Limite por arquivo</td>
                        <td>100MB</td>
                        <td>1GB</td>
                        <td>10GB</td>
                    </tr>
                    <tr>
                        <td>Armazenamento total</td>
                        <td>5GB</td>
                        <td>100GB</td>
                        <td>Ilimitado</td>
                    </tr>
                  
                  
                    <tr>
                        <td>SLA (Disponibilidade)</td>
                        <td>99.5%</td>
                        <td>99.7%</td>
                        <td>99.9%</td>
                    </tr>
                    <tr>
                        <td>Suporte</td>
                        <td>E-mail</td>
                        <td>Prioritário (8h-18h)</td>
                        <td>Prioritário (8h-18h)</td>
                    </tr>
                    <tr>
                        <td>Anual (por mês)</td>
                        <td><strong>R$ 109,90</strong></td>
                        <td><strong>R$ 365,80</strong></td>
                        <td><strong>R$ 489,00</strong></td>
                    </tr>
                    <tr>
                        <td>Mensal (por mês)</td>
                        <td>R$ 120,90</td>
                        <td>R$ 401,00</td>
                        <td>R$ 537,90</td>
                    </tr>
                    <tr>
                        <td>Economia anual</td>
                        <td>R$ 132,00</td>
                        <td>R$ 422,40</td>
                        <td>R$ 586,80</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- FAQ -->
        <div class="faq-section">
            <h2>Perguntas Frequentes</h2>
            
            <div class="faq-item">
                <div class="faq-question">
    Posso mudar de plano depois de contratar?
    <i class="fas fa-chevron-down"></i>
</div>
                <div class="faq-answer">
                    Sim! Você pode fazer upgrade a qualquer momento. O downgrade só é permitido ao final do período contratado.
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    Há cobrança de setup ou taxa de adesão?
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                  Sim. Cobramos uma taxa de implantação, que contempla o treinamento da equipe e a configuração do sistema de acordo com a realidade e as necessidades do seu negócio. Essa etapa garante uma implementação mais rápida, eficiente e com melhor aproveitamento da plataforma.
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    Posso testar antes de comprar?
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="faq-answer">
                    Sim! Oferecemos 15 dias de teste gratuito para todos os planos. Não é necessário cartão de crédito.
                </div>
            </div>
            
           
        </div>

        <!-- Footer -->
        <footer>
            <p><strong>Tvi Tecnologia</strong> - Soluções em tecnologia para empresas</p>
            <p>Entre em contato para mais informações:</p>
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <span>comercial@tvitecnologia.com.br</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <span>(48) 98802-9177</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-clock"></i>
                    <span>Segunda a Sexta, 8h às 18h</span>
                </div>
            </div>
        </footer>
    </div>

    <!-- Modal de Informações de Contato -->
    <div class="modal" id="modalContato">
        <div class="modal-content">
            <button class="modal-close" onclick="fecharModal()">&times;</button>
            
            <h2>Informações de Contato</h2>
            <p>Para finalizar a escolha do plano <strong id="planoModalNome"></strong>, preencha seus dados:</p>
            
            <form id="formContato">
                <div class="form-group">
                    <label for="nome">Nome Completo *</label>
                    <input type="text" id="nome" name="nome" required placeholder="Digite seu nome completo">
                </div>
                
                <div class="form-group">
                    <label for="empresa">Nome da Empresa *</label>
                    <input type="text" id="empresa" name="empresa" required placeholder="Nome da sua empresa">
                </div>
                
                <div class="form-group">
                    <label for="email">E-mail *</label>
                    <input type="email" id="email" name="email" required placeholder="seu@email.com">
                </div>
                
                <div class="form-group">
                    <label for="telefone">Telefone *</label>
                    <input type="tel" id="telefone" name="telefone" required placeholder="(11) 99999-9999">
                </div>
                
                <div class="form-group">
                    <label for="plano_periodo">Selecione o Período *</label>
                    <select id="plano_periodo" name="plano_periodo" required onchange="atualizarValorPlano()">
                        <option value="">Escolha o período</option>
                        <option value="anual">Pacote Anual (Economia)</option>
                        <option value="mensal">Pacote Mensal (Flexível)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="quantidade_usuarios">Quantidade de Usuários Estimada</label>
                    <input type="number" id="quantidade_usuarios" name="quantidade_usuarios" min="1" placeholder="Ex: 15">
                </div>
                
                <div class="form-group">
                    <label for="mensagem">Mensagem ou Requisitos Específicos</label>
                    <textarea id="mensagem" name="mensagem" rows="3" placeholder="Alguma necessidade específica?"></textarea>
                </div>
                
                <input type="hidden" id="plano_escolhido" name="plano_escolhido">
                <input type="hidden" id="valor_plano" name="valor_plano">
                <input type="hidden" id="periodo_plano" name="periodo_plano">
                
                <div class="loading" id="loadingSpinner">
                    <div class="loading-spinner"></div>
                    <p>Enviando informações...</p>
                </div>
                
                <div class="success-message" id="successMessage">
                    <i class="fas fa-check-circle"></i> Obrigado! Sua escolha de plano foi registrada e nossa equipe comercial entrará em contato em breve.
                </div>
                
                <div class="modal-buttons">
                    <button type="button" class="btn-cancelar" onclick="fecharModal()">Cancelar</button>
                    <button type="submit" class="btn-confirmar" id="submitButton">Confirmar Escolha</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Mapeamento de preços por plano e período
        const precos = {
            'Básico': {
                anual: '109,90',
                mensal: '120,90'
            },
            'Pró': {
                anual: '365,80',
                mensal: '401,00'
            },
            'Empresas': {
                anual: '489,00',
                mensal: '537,90'
            }
        };

        // Variáveis globais
        let planoSelecionado = '';
        let modalAberto = false;
        let periodoSelecionado = '';
        let valorCalculado = '0';

        // Função para escolher plano
        function escolherPlano(plano) {
            planoSelecionado = plano;
            
            // Atualizar nome do plano no modal
            document.getElementById('planoModalNome').textContent = plano;
            document.getElementById('plano_escolhido').value = plano;
            
            // Resetar período
            document.getElementById('plano_periodo').value = '';
            periodoSelecionado = '';
            valorCalculado = '0';
            
            // Pré-preencher informações salvas
            const savedData = JSON.parse(localStorage.getItem('userContactInfo') || '{}');
            if (savedData.nome) document.getElementById('nome').value = savedData.nome;
            if (savedData.empresa) document.getElementById('empresa').value = savedData.empresa;
            if (savedData.email) document.getElementById('email').value = savedData.email;
            if (savedData.telefone) document.getElementById('telefone').value = savedData.telefone;
            
            // Mostrar modal
            abrirModal();
        }

        // Atualizar valor do plano baseado no período selecionado
        function atualizarValorPlano() {
            const periodoSelect = document.getElementById('plano_periodo');
            periodoSelecionado = periodoSelect.value;
            
            if (planoSelecionado && periodoSelecionado && precos[planoSelecionado]) {
                valorCalculado = precos[planoSelecionado][periodoSelecionado];
                
                // Atualizar campos hidden
                document.getElementById('valor_plano').value = valorCalculado;
                document.getElementById('periodo_plano').value = periodoSelecionado;
                
                console.log('Plano:', planoSelecionado, 'Período:', periodoSelecionado, 'Valor:', valorCalculado);
            }
        }

        // Função para abrir modal
        function abrirModal() {
            document.getElementById('modalContato').style.display = 'flex';
            modalAberto = true;
            document.body.style.overflow = 'hidden';
            
            // Resetar estados
            document.getElementById('successMessage').style.display = 'none';
            document.getElementById('loadingSpinner').style.display = 'none';
            document.getElementById('submitButton').disabled = false;
        }

        // Função para fechar modal
        function fecharModal() {
            document.getElementById('modalContato').style.display = 'none';
            modalAberto = false;
            document.body.style.overflow = 'auto';
            
            // Resetar formulário
            document.getElementById('formContato').reset();
            planoSelecionado = '';
            periodoSelecionado = '';
            valorCalculado = '0';
        }

        // Toggle FAQ
        function toggleFAQ(element) {
            const answer = element.nextElementSibling;
            const icon = element.querySelector('i');
            
            if (answer.classList.contains('active')) {
                answer.classList.remove('active');
                icon.style.transform = 'rotate(0deg)';
            } else {
                answer.classList.add('active');
                icon.style.transform = 'rotate(180deg)';
            }
        }

        // Fechar modal ao clicar fora
        window.addEventListener('click', function(event) {
            const modal = document.getElementById('modalContato');
            if (modalAberto && event.target === modal) {
                fecharModal();
            }
        });

        // Fechar modal com ESC
        document.addEventListener('keydown', function(event) {
            if (modalAberto && event.key === 'Escape') {
                fecharModal();
            }
        });

        // Máscara de telefone
        document.getElementById('telefone')?.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            
            if (value.length <= 10) {
                value = value.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
            } else {
                value = value.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
            }
            
            e.target.value = value;
        });

        // Enviar formulário
        document.getElementById('formContato').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Validar período selecionado
            const periodo = document.getElementById('plano_periodo').value;
            if (!periodo) {
                alert('Por favor, selecione o período do plano (anual ou mensal).');
                return;
            }
            
            // Forçar atualização do valor antes do envio
            atualizarValorPlano();
            
            // Verificar se o valor foi calculado corretamente
            if (!valorCalculado || valorCalculado === '0') {
                alert('Erro ao calcular valor do plano. Por favor, selecione o período novamente.');
                return;
            }
            
            // Mostrar loading
            document.getElementById('loadingSpinner').style.display = 'block';
            document.getElementById('submitButton').disabled = true;
            document.getElementById('successMessage').style.display = 'none';
            
            // Coletar dados
            const formData = {
                nome: document.getElementById('nome').value,
                empresa: document.getElementById('empresa').value,
                email: document.getElementById('email').value,
                telefone: document.getElementById('telefone').value,
                plano_periodo: periodo,
                periodo_plano: periodoSelecionado,
                quantidade_usuarios: document.getElementById('quantidade_usuarios').value,
                mensagem: document.getElementById('mensagem').value,
                plano_escolhido: planoSelecionado,
                valor_plano: valorCalculado,
                data_interesse: new Date().toISOString(),
                url_origem: window.location.href,
                user_agent: navigator.userAgent
            };
            
            console.log('Dados sendo enviados:', formData);
            
            // Salvar localmente
            localStorage.setItem('userContactInfo', JSON.stringify({
                nome: formData.nome,
                empresa: formData.empresa,
                email: formData.email,
                telefone: formData.telefone
            }));
            
            try {
                // Enviar para o backend
                const response = await fetch('enviar_email_plano.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams(formData)
                });
                
                const data = await response.json();
                console.log('Resposta do servidor:', data);
                
                if (data.success) {
                    // Salvar dados para a página de obrigado
                    sessionStorage.setItem('planoEscolhido', JSON.stringify({
                        plano: formData.plano_escolhido,
                        periodo: formData.plano_periodo,
                        periodo_plano: formData.periodo_plano,
                        valor: formData.valor_plano,
                        nome: formData.nome,
                        email: formData.email,
                        empresa: formData.empresa,
                        telefone: formData.telefone
                    }));
                    
                    // Mostrar mensagem de sucesso
                    document.getElementById('loadingSpinner').style.display = 'none';
                    document.getElementById('successMessage').style.display = 'block';
                    
                    // Redirecionar após 3 segundos
                    setTimeout(() => {
                        window.location.href = 'obrigado.html';
                    }, 3000);
                    
                } else {
                    throw new Error(data.message || 'Erro ao enviar dados');
                }
                
            } catch (error) {
                console.error('Erro:', error);
                
                // Fallback: salvar localmente e continuar
                const leadsFallback = JSON.parse(localStorage.getItem('leadsFallback') || '[]');
                leadsFallback.push({
                    ...formData,
                    timestamp: new Date().toISOString(),
                    error: error.message
                });
                localStorage.setItem('leadsFallback', JSON.stringify(leadsFallback));
                
                // Salvar dados para a página de obrigado mesmo com erro
                sessionStorage.setItem('planoEscolhido', JSON.stringify({
                    plano: formData.plano_escolhido,
                    periodo: formData.plano_periodo,
                    periodo_plano: formData.periodo_plano,
                    valor: formData.valor_plano,
                    nome: formData.nome,
                    email: formData.email,
                    empresa: formData.empresa,
                    telefone: formData.telefone,
                    erro: 'Envio falhou, mas dados salvos'
                }));
                
                // Mostrar mensagem de sucesso mesmo com erro
                document.getElementById('loadingSpinner').style.display = 'none';
                document.getElementById('successMessage').style.display = 'block';
                
                // Redirecionar após 3 segundos mesmo com erro
                setTimeout(() => {
                    window.location.href = 'obrigado.html';
                }, 3000);
            }
        });

        // Inicializar FAQ
        document.addEventListener('DOMContentLoaded', function() {
            // Adicionar eventos de clique às FAQs
            document.querySelectorAll('.faq-question').forEach(question => {
                question.addEventListener('click', function() {
                    toggleFAQ(this);
                });
            });
        });
    </script>
</body>
</html>