<?php
// Incluir configurações
require_once 'config.php';

// Processar formulário se foi enviado
$form_success = false;
$form_error = '';
$form_data = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_form'])) {
    require_once 'process_form.php';
    $result = processContactForm($_POST);
    
    if ($result['success']) {
        $form_success = true;
        $form_data = [];
        // Redirecionar para página de agradecimento
        header('Location: obrigado.php?success=1');
        exit;
    } else {
        $form_error = $result['message'];
        $form_data = $_POST;
    }
}

// Verificar se veio de redirecionamento de sucesso
if (isset($_GET['success']) && $_GET['success'] == '1') {
    $form_success = true;
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-523HNRKK');</script>
    <!-- End Google Tag Manager -->
    
    <!-- Facebook Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '854449800105975');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=854449800105975&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
    <meta name="description" content="Envolvedora de Filme Stretch Semi-Automática GK2100 GIMAK - Economize até 75% de filme stretch. Conformidade NR 10 e NR 12. Produção nacional com mais de 21 anos de experiência.">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#FF6B35">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <title>GK2100 GIMAK - Envolvedora Semi-Automática | Economize até 75%</title>
    <link rel="stylesheet" href="styles.css?v=<?php echo filemtime('styles.css'); ?>">
    <link rel="stylesheet" href="mobile_optimizations.css?v=<?php echo filemtime('mobile_optimizations.css'); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-523HNRKK"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <!-- Header Navigation -->
    <header class="header" id="header">
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <img src="logo2.png" alt="GIMAK" class="logo-image">
                </div>
                <ul class="nav-menu" id="navMenu">
                    <li><a href="#inicio" class="nav-link">Início</a></li>
                    <li><a href="#beneficios" class="nav-link">Benefícios</a></li>
                    <li><a href="#recursos" class="nav-link">Recursos</a></li>
                    <li><a href="#depoimentos" class="nav-link">Depoimentos</a></li>
                    <li><a href="#orcamento" class="nav-link cta-nav">WhatsApp</a></li>
                </ul>
                <button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="inicio">
        <div class="hero-background">
            <div class="hero-gradient-1"></div>
            <div class="hero-gradient-2"></div>
            <div class="hero-gradient-3"></div>
            <div class="hero-grid-pattern"></div>
        </div>
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <div class="hero-badge">
                        <span class="badge-dot"></span>
                        <span>Revolucione sua operação logística</span>
                    </div>
                    <h1 class="hero-headline">
                        <span class="headline-prefix">Envolvedora Semi-Automática</span>
                        <span class="headline-product">
                            <span class="product-name">GK2100</span>
                            <span class="product-line"></span>
                        </span>
                        <span class="headline-savings">
                            <span class="savings-text">Economize até</span>
                            <span class="savings-percentage">75%</span>
                            <span class="savings-text">de filme stretch</span>
                        </span>
                    </h1>
                    <p class="hero-subheadline">
                        <span class="subheadline-highlight">Conformidade NR 10 e NR 12</span> - Plataforma giratória de 1,5m. Carga máxima 1.800kg. Produção até 30 ciclos/hora. Solução definitiva para embalagem e paletização.
                    </p>
                    <div class="hero-actions">
                        <a href="#orcamento" class="cta-primary-hero">
                            <span>Falar no WhatsApp</span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>
                        <a href="#beneficios" class="cta-secondary-hero">
                            <span>Ver benefício financeiro</span>
                        </a>
                    </div>
                </div>
                <div class="hero-visual">
                    <div class="hero-image-wrapper">
                        <div class="image-glow"></div>
                        <div class="machine-container">
                            <img src="foto1.jpg" alt="Máquina Envolvedora GK2100 GIMAK" class="machine-image">
                        </div>
                        <div class="floating-card stat-card-1">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number" data-target="75">0</div>
                                <div class="stat-label">% Economia</div>
                            </div>
                        </div>
                        <div class="floating-card stat-card-2">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number" data-target="30">0</div>
                                <div class="stat-label">Ciclos/h</div>
                            </div>
                        </div>
                        <div class="floating-card stat-card-3">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number" data-target="1800">0</div>
                                <div class="stat-label">kg Capacidade</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefícios Financeiros Section -->
    <section class="benefits" id="beneficios">
        <div class="container">
            <h2 class="section-title">Benefícios Financeiros</h2>
            <p class="benefits-subtitle">Economia que paga o investimento da máquina.</p>

            <div class="benefits-grid">
                <div class="benefits-grid-left">
                    <h3 class="benefits-grid-title">Comparativo</h3>

                    <div class="comparison-table">
                        <table>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="manual-col">Manual</th>
                                    <th class="gk2100-col">GK2100</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Consumo de filme</strong></td>
                                    <td class="manual-col">100% (referência)</td>
                                    <td class="gk2100-col">Até 75% menos</td>
                                </tr>
                                <tr>
                                    <td><strong>Produção</strong></td>
                                    <td class="manual-col">Variável</td>
                                    <td class="gk2100-col">Até 30 ciclos/h</td>
                                </tr>
                                <tr>
                                    <td><strong>Pré-estiramento</strong></td>
                                    <td class="manual-col">Não</td>
                                    <td class="gk2100-col">200%</td>
                                </tr>
                                <tr>
                                    <td><strong>Tempo por pallet</strong></td>
                                    <td class="manual-col">5-8 minutos</td>
                                    <td class="gk2100-col">2-3 minutos</td>
                                </tr>
                                <tr>
                                    <td><strong>Custo mensal*</strong></td>
                                    <td class="manual-col">R$ 3.000 - R$ 5.000</td>
                                    <td class="gk2100-col">R$ 1.200 - R$ 2.000</td>
                                </tr>
                                <tr>
                                    <td><strong>Desperdício</strong></td>
                                    <td class="manual-col">Alto (invisível)</td>
                                    <td class="gk2100-col">Mínimo</td>
                                </tr>
                                <tr>
                                    <td><strong>Segurança da carga</strong></td>
                                    <td class="manual-col">Variável</td>
                                    <td class="gk2100-col">Garantida</td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="table-note">* Valores estimados para 100-150 pallets/dia</p>
                    </div>
                </div>

                <div class="benefits-grid-right">
                    <div class="film-economy-calculator" id="filmEconomyCalculator">
                        <h3 class="film-economy-title">
                            <span class="film-economy-emoji">🧰</span>
                            Economia em média de Filme Stretch com GIMAK
                        </h3>

                        <div class="film-economy-form">
                            <label class="film-economy-label" for="filmKgMonthInput">Kg de filme usados no mês atualmente</label>
                            <input
                                type="number"
                                id="filmKgMonthInput"
                                min="0"
                                step="0.1"
                                placeholder="Ex: 500"
                                value="500"
                            >
                            <button
                                type="button"
                                class="film-economy-button"
                                id="filmEconomyCalcBtn"
                            >
                                Calcular Economia com GIMAK
                            </button>
                            <div class="film-economy-error" id="filmEconomyError" style="display:none;"></div>
                        </div>

                        <div class="film-economy-results" id="filmEconomyResults" style="display:none;">
                            <div class="film-economy-results-title">Resultado com a máquina GIMAK</div>

                            <div class="film-economy-results-grid">
                                <div class="film-economy-result-card">
                                    <div class="film-economy-card-label">Novo consumo</div>
                                    <div class="film-economy-card-value" id="filmNewConsumptionKg">0kg</div>
                                </div>

                                <div class="film-economy-result-card">
                                    <div class="film-economy-card-label">Consumo atual</div>
                                    <div class="film-economy-card-value" id="filmCurrentConsumptionKg">0kg</div>
                                </div>

                                <div class="film-economy-result-card film-economy-result-card-positive">
                                    <div class="film-economy-card-label">Economia mensal</div>
                                    <div class="film-economy-card-value" id="filmEconomyKg">0kg</div>
                                </div>
                            </div>

                            <div class="film-economy-footnote">
                                Raciocínio: convertemos seu consumo mensal pela equivalência média e estimamos o novo consumo com a máquina.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problema Section -->
    <section class="problem">
        <div class="container">
            <div class="problem-header">
                <div class="problem-badge">
                    <span>Problemas Reais</span>
                </div>
                <h2 class="section-title">O Problema</h2>
                <p class="problem-subtitle">Envolver pallets manualmente custa caro — mesmo quando parece barato.</p>
            </div>
            <div class="problems-grid">
                <div class="problem-card" data-problem="1">
                    <div class="problem-card-inner">
                        <div class="problem-icon-wrapper">
                            <div class="problem-icon-circle">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="11" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="19" y="3" width="2" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="3" y="11" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="11" y="11" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="19" y="11" width="2" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="3" y="19" width="6" height="2" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="11" y="19" width="6" height="2" rx="1" stroke="currentColor" stroke-width="2"/>
                                    <rect x="19" y="19" width="2" height="2" rx="1" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </div>
                        </div>
                        <div class="problem-content">
                            <h3>Alto consumo de filme</h3>
                            <p>Desperdício invisível que aumenta custos mensais</p>
                        </div>
                    </div>
                </div>
                <div class="problem-card" data-problem="2">
                    <div class="problem-card-inner">
                        <div class="problem-icon-wrapper">
                            <div class="problem-icon-circle">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="problem-content">
                            <h3>Operação lenta</h3>
                            <p>Tempo perdido reduzindo produtividade da equipe</p>
                        </div>
                    </div>
                </div>
                <div class="problem-card" data-problem="3">
                    <div class="problem-card-inner">
                        <div class="problem-icon-wrapper">
                            <div class="problem-icon-circle">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                                    <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="problem-content">
                            <h3>Falta de padrão</h3>
                            <p>Envolvimento inconsistente compromete segurança</p>
                        </div>
                    </div>
                </div>
                <div class="problem-card" data-problem="4">
                    <div class="problem-card-inner">
                        <div class="problem-icon-wrapper">
                            <div class="problem-icon-circle">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.13 3.16z" fill="currentColor"/>
                                </svg>
                            </div>
                        </div>
                        <div class="problem-content">
                            <h3>Desperdício invisível</h3>
                            <p>Custos ocultos que você não percebe até somar tudo</p>
                        </div>
                    </div>
                </div>
                <div class="problem-card" data-problem="5">
                    <div class="problem-card-inner">
                        <div class="problem-icon-wrapper">
                            <div class="problem-icon-circle">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                                    <rect x="7" y="7" width="10" height="10" rx="1" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </div>
                        </div>
                        <div class="problem-content">
                            <h3>Esforço físico</h3>
                            <p>Cansaço do colaborador afeta qualidade e velocidade</p>
                        </div>
                    </div>
                </div>
                <div class="problem-card" data-problem="6">
                    <div class="problem-card-inner">
                        <div class="problem-icon-wrapper">
                            <div class="problem-icon-circle">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <path d="M9 11l3 3L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="problem-content">
                            <h3>Risco de avarias</h3>
                            <p>Envolvimento inadequado causa danos durante transporte</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Solução Section -->
    <section class="solution">
        <div class="solution-background">
            <div class="solution-gradient-1"></div>
            <div class="solution-gradient-2"></div>
            <div class="solution-grid-pattern"></div>
        </div>
        <div class="container">
            <div class="solution-header">
                <div class="solution-badge">
                    <span class="badge-dot"></span>
                    <span>A Solução</span>
                </div>
                <h2 class="solution-title">
                    <span class="solution-title-text">Envolvedora </span>
                    <span class="solution-title-highlight">GK2100</span>
                </h2>
                <p class="solution-subtitle">Tecnologia que transforma sua operação</p>
            </div>
            <div class="solution-content">
                <div class="solution-layout">
                    <div class="solution-left">
                        <div class="solution-grid">
                            <div class="solution-card">
                                <div class="solution-card-inner">
                                    <div class="solution-icon-wrapper">
                                        <div class="solution-icon">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                                                <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="solution-content-text">
                                        <strong>Economia de até 75% no consumo de filme</strong>
                                        <p>Pré-estiramento de 200% e estiramento total até 400% - Baixo custo de manutenção</p>
                                    </div>
                                </div>
                            </div>
                            <div class="solution-card solution-card-video" id="videoTriggerCard">
                                <div class="solution-card-inner">
                                    <div class="solution-card-content" id="cardContent">
                                        <div class="solution-icon-wrapper">
                                            <div class="solution-icon">
                                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                                                    <path d="M9 11l3 3L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="solution-content-text">
                                            <strong>Envolvimento uniforme e firme</strong>
                                            <p>Cada pallet sai perfeito, com segurança garantida para transporte</p>
                                        </div>
                                        <div class="video-hint">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                                <polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                            </svg>
                                            <span>Clique e assista o vídeo</span>
                                        </div>
                                    </div>
                                    <div class="video-wrapper-in-card" id="videoWrapperInCard" style="display: none;">
                                        <div class="video-overlay-in-card" id="videoOverlayInCard">
                                            <div class="video-thumbnail">
                                                <img src="https://img.youtube.com/vi/uofjOCeM9AU/maxresdefault.jpg" alt="Vídeo GK2100 GIMAK" class="thumbnail-image">
                                                <div class="play-button-overlay">
                                                    <button class="custom-play-button" id="playVideoBtn" aria-label="Reproduzir vídeo">
                                                        <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
                                                            <circle cx="40" cy="40" r="40" fill="rgba(44, 95, 143, 0.9)"/>
                                                            <path d="M32 24L32 56L56 40L32 24Z" fill="white"/>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <iframe 
                                            id="youtubeIframe"
                                            src=""
                                            frameborder="0" 
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                            allowfullscreen
                                            loading="lazy"
                                            class="youtube-embed">
                                        </iframe>
                                    </div>
                                </div>
                            </div>
                            <div class="solution-card">
                                <div class="solution-card-inner">
                                    <div class="solution-icon-wrapper">
                                        <div class="solution-icon">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="solution-content-text">
                                        <strong>Aumento de produtividade</strong>
                                        <p>Até 3x mais rápido que o envolvimento manual</p>
                                    </div>
                                </div>
                            </div>
                            <div class="solution-card">
                                <div class="solution-card-inner">
                                    <div class="solution-icon-wrapper">
                                        <div class="solution-icon">
                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="solution-content-text">
                                        <strong>Redução de retrabalho e avarias</strong>
                                        <p>Menos devoluções e danos durante o transporte</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    
    <!-- Recursos Técnicos Section -->
    <section class="features" id="recursos">
        <div class="container">
            <div class="features-header">
                <h2 class="section-title">Recursos Técnicos</h2>
                <p class="section-subtitle">Tecnologia avançada em cada detalhe</p>
            </div>
            <div class="features-grid">
                <div class="feature-card" data-feature="1">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">01</div>
                        </div>
                        <div class="feature-content">
                            <h3>Plataforma 1.500 mm</h3>
                            <p>Diâmetro de 1,5 metros - Suporta pallets padrão brasileiro e internacionais</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                                <path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="2"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="feature-card" data-feature="2">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">02</div>
                        </div>
                        <div class="feature-content">
                            <h3>Capacidade até 1.800 kg</h3>
                            <p>Carga máxima admissível - Altura máxima 2.200mm - Diâmetro máximo 1.500mm</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="feature-card" data-feature="3">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">03</div>
                        </div>
                        <div class="feature-content">
                            <h3>Pré-estiramento 200%</h3>
                            <p>Estiramento total do filme até 400% - Largura de filme 500mm - Espessura 17 a 60μm</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="feature-card" data-feature="4">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">04</div>
                        </div>
                        <div class="feature-content">
                            <h3>Produção até 30 ciclos/h</h3>
                            <p>Operação semi-automática eficiente - Sistema de pré-estiramento maximiza economia</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="feature-card" data-feature="5">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">05</div>
                        </div>
                        <div class="feature-content">
                            <h3>Painel digital simples</h3>
                            <p>Interface intuitiva e fácil operação</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2"/>
                                <path d="M8 21h8M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="feature-card" data-feature="6">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">06</div>
                        </div>
                        <div class="feature-content">
                            <h3>Altura máxima 2.200 mm</h3>
                            <p>Suporta pallets de até 2,2 metros de altura - Versatilidade para diversos produtos</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <circle cx="12" cy="12" r="2" fill="currentColor"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="feature-card" data-feature="7">
                    <div class="feature-card-inner">
                        <div class="feature-number-wrapper">
                            <div class="feature-number">07</div>
                        </div>
                        <div class="feature-content">
                            <h3>Conformidade NR 10 e NR 12</h3>
                            <p>Padrões de segurança exigidos - Operação segura garantida - Tensão: consulte padrões disponíveis - Consumo: 0,8 KW/h</p>
                        </div>
                        <div class="feature-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                                <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Prova Social Section -->
    <section class="testimonials" id="depoimentos">
        <div class="container">
            <h2 class="section-title">O que nossos clientes dizem</h2>

            <div class="testimonials-video-wrap">
                <div class="testimonials-video-shell">
                    <iframe
                        id="testimonialsShortsIframe"
                        class="testimonials-youtube-iframe"
                        src="https://www.youtube.com/embed/94YNZI8dyc8?autoplay=1&mute=1&modestbranding=1&rel=0&controls=0&showinfo=0&fs=0&cc_load_policy=0&iv_load_policy=3&playsinline=1&disablekb=1&loop=1&playlist=94YNZI8dyc8&autohide=1&disable_polymer=1&enablejsapi=1&vq=hd1080"
                        frameborder="0"
                        allow="autoplay; encrypted-media; picture-in-picture"
                    >
                    </iframe>

                    <button
                        type="button"
                        class="testimonials-mute-btn"
                        id="testimonialsMuteBtn"
                        aria-label="Mutar ou desmutar o vídeo"
                        aria-pressed="true"
                    >
                        Som: mutado
                    </button>
                </div>
            </div>

        </div>
    </section>


    <!-- Sobre a GIMAK Section -->
    <section class="about">
        <div class="container">
            <div class="about-header">
                <div class="about-badge">
                    <span>Nossa História</span>
                </div>
                <h2 class="section-title">Sobre a GIMAK</h2>
                <p class="about-intro">Referência em soluções industriais com foco em seladoras e envolvedoras</p>
            </div>
            
            <div class="about-content-modern">
                <div class="about-main-card">
                    <div class="about-main-content">
                        <div class="about-company-info">
                            <h3 class="about-company-name">GIMAK Indústria e Comércio de Máquinas Ltda.</h3>
                            <p class="about-description">Atuamos com equipamentos robustos, tecnologia confiável e atendimento especializado para otimizar sua linha de produção.</p>
                        </div>
                        <div class="about-location">
                            <div class="location-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="currentColor"/>
                                </svg>
                            </div>
                            <div class="location-text">
                                <strong>Localização</strong>
                                <p>SC-108, 7499 - Centro<br>Massaranduba - SC<br>CEP: 89108-000</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="about-specs-grid">
                    <div class="spec-card">
                        <div class="spec-icon-wrapper">
                            <div class="spec-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="spec-content">
                            <div class="spec-label">Dimensões</div>
                            <div class="spec-value">2100 × 1500 × 2450 mm</div>
                            <div class="spec-label-secondary">Peso: 600 kg</div>
                        </div>
                    </div>
                    
                    <div class="spec-card">
                        <div class="spec-icon-wrapper">
                            <div class="spec-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="spec-content">
                            <div class="spec-label">Energia</div>
                            <div class="spec-value">Consulte padrões disponíveis</div>
                            <div class="spec-label-secondary">Consumo: 0,8 KW/h</div>
                        </div>
                    </div>
                    
                    <div class="spec-card">
                        <div class="spec-icon-wrapper">
                            <div class="spec-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                                    <path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </div>
                        </div>
                        <div class="spec-content">
                            <div class="spec-label">Filme Stretch</div>
                            <div class="spec-value">500 mm</div>
                            <div class="spec-label-secondary">Espessura: 17 a 60 µm</div>
                        </div>
                    </div>
                    
                    <div class="spec-card highlight">
                        <div class="spec-icon-wrapper">
                            <div class="spec-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="spec-content">
                            <div class="spec-label">Estiramento</div>
                            <div class="spec-value">200% → 400%</div>
                            <div class="spec-label-secondary">Pré-estiramento até estiramento total</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq">
        <div class="container">
            <h2 class="section-title">Perguntas Frequentes</h2>
            <div class="faq-list">
                <div class="faq-item">
                    <button class="faq-question-btn" aria-expanded="false">
                        <span class="faq-question-text">Quanto tempo leva para a máquina se pagar?</span>
                        <span class="faq-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer-wrapper">
                        <div class="faq-answer">
                            <p>Com a economia de até 60% de filme stretch, a GK2100 normalmente se paga em menos de 12 meses, dependendo do volume de pallets processados.</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item">
                    <button class="faq-question-btn" aria-expanded="false">
                        <span class="faq-question-text">A máquina funciona com qualquer tipo de filme stretch?</span>
                        <span class="faq-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer-wrapper">
                        <div class="faq-answer">
                            <p>Sim, a GK2100 é compatível com todos os tipos de filme stretch disponíveis no mercado, incluindo filme preto, transparente e colorido.</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item">
                    <button class="faq-question-btn" aria-expanded="false">
                        <span class="faq-question-text">Qual o espaço necessário para instalação?</span>
                        <span class="faq-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer-wrapper">
                        <div class="faq-answer">
                            <p>A máquina requer aproximadamente 3m x 3m de espaço livre. Nossa equipe técnica pode fazer uma avaliação prévia do local.</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item">
                    <button class="faq-question-btn" aria-expanded="false">
                        <span class="faq-question-text">Há garantia e assistência técnica?</span>
                        <span class="faq-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer-wrapper">
                        <div class="faq-answer">
                            <p>Sim, oferecemos garantia completa e assistência técnica especializada em todo o território nacional, com equipe treinada e peças de reposição disponíveis.</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item">
                    <button class="faq-question-btn" aria-expanded="false">
                        <span class="faq-question-text">É difícil operar a máquina?</span>
                        <span class="faq-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer-wrapper">
                        <div class="faq-answer">
                            <p>Não. A GK2100 possui interface simples e intuitiva. Qualquer operador aprende a usar em poucos minutos. Oferecemos treinamento completo na instalação.</p>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item">
                    <button class="faq-question-btn" aria-expanded="false">
                        <span class="faq-question-text">A máquina funciona com pallets de qualquer tamanho?</span>
                        <span class="faq-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </button>
                    <div class="faq-answer-wrapper">
                        <div class="faq-answer">
                            <p>Sim, a plataforma de 1.650mm suporta pallets padrão brasileiro (PBR) e internacionais, com capacidade de até 2.000kg e altura ajustável automaticamente.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Final Section -->
    <section id="orcamento" class="cta-final">
        <div class="container">
            <h2 class="section-title">Fale com a GIMAK no WhatsApp</h2>
            <p class="cta-subtitle">Clique no botão abaixo e fale com nosso time (atendimento rápido).</p>

            <div class="whats-widget">
                <div class="whats-widget-label">Escolha o que você precisa agora:</div>

                <div class="whats-topic-row" role="group" aria-label="Assunto para o WhatsApp">
                    <button type="button" class="whats-chip is-active" data-whats-topic="Orçamento">Orçamento</button>
                    <button type="button" class="whats-chip" data-whats-topic="Instalação e Dimensões">Instalação e Dimensões</button>
                    <button type="button" class="whats-chip" data-whats-topic="Assistência Técnica">Assistência Técnica</button>
                    <button type="button" class="whats-chip" data-whats-topic="Preço e Prazo">Preço e Prazo</button>
                </div>

                <div class="whats-preview" id="whatsPreview">Mensagem pronta: Orçamento</div>

                <a
                    id="whatsappContactLink"
                    class="cta-primary whatsapp-btn whats-widget-link"
                    data-whats-number="554791880156"
                    href="https://wa.me/554791880156?text=Ol%C3%A1!%20Tenho%20interesse%20na%20GK2100.%20Assunto%3A%20Or%C3%A7amento.%20Pode%20me%20passar%20informa%C3%A7%C3%B5es%20e%20valores%3F"
                    target="_blank"
                    rel="noopener"
                >
                    <span>Enviar mensagem no WhatsApp</span>
                </a>

                <div class="whats-widget-note">Sem formulário: é só clicar.</div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3 class="footer-title">GIMAK</h3>
                    <p class="footer-text">Mais de 21 anos produzindo equipamentos de alta qualidade para indústrias de todo o Brasil.</p>
                </div>
                <div class="footer-section">
                    <h3 class="footer-title">Produto</h3>
                    <ul class="footer-links">
                        <li><a href="#inicio">Início</a></li>
                        <li><a href="#beneficios">Benefícios</a></li>
                        <li><a href="#recursos">Recursos</a></li>
                        <li><a href="#depoimentos">Depoimentos</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3 class="footer-title">Contato</h3>
                    <ul class="footer-contact">
                        <li>📞 <strong>(47) 3379-2323</strong></li>
                        <li>📱 (47) 99279-7575</li>
                        <li>✉️ <strong>vendas@gimak.ind.br</strong></li>
                        <li>📍 SC-108, 7499 - Centro<br>Massaranduba - SC<br>CEP: 89108-000</li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3 class="footer-title">Falar no WhatsApp</h3>
                    <a href="#orcamento" class="footer-cta">Clique aqui</a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; <?php echo date('Y'); ?> GIMAK. Todos os direitos reservados.</p>
            </div>
        </div>
    </footer>

    <!-- Modal de Vídeo -->
    <div class="video-modal" id="videoModal">
        <div class="video-modal-overlay" id="videoModalOverlay"></div>
        <div class="video-modal-content">
            <button class="video-modal-close" id="videoModalClose" aria-label="Fechar vídeo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </button>
            <div class="video-modal-wrapper">
                <iframe 
                    id="videoModalIframe"
                    src=""
                    frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowfullscreen
                    loading="lazy"
                    class="video-modal-iframe">
                </iframe>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        // Script de fallback para garantir que os números apareçam
        (function() {
            function initNumbers() {
                const stats = document.querySelectorAll('.floating-card .stat-number[data-target]');
                console.log('🔢 Fallback: Elementos encontrados:', stats.length);
                
                stats.forEach(function(stat) {
                    const target = parseInt(stat.getAttribute('data-target'));
                    if (target && !isNaN(target)) {
                        // Formatar número com separador de milhar
                        const formatted = target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                        stat.textContent = formatted;
                        console.log('📊 Número definido:', formatted);
                    }
                });
            }
            
            // Tentar imediatamente
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initNumbers);
            } else {
                initNumbers();
            }
            
            // Tentar novamente após 1 segundo
            setTimeout(initNumbers, 1000);
            
            // Garantir após 3 segundos
            setTimeout(initNumbers, 3000);
        })();
    </script>
</body>
</html>

