<?php
/**
 * Template Name: Pulsar - Operação Cometa
 * Template Post Type: page
 */

get_header();

$primary_url = fm_button_link('fm_cometa_primary_url', 'fm_diagnostic_url', fm_link('fm_quiz_url', '#'));
$secondary_url = fm_button_link('fm_cometa_secondary_url', 'fm_whatsapp_url', '#');
$portfolio_url = fm_link('fm_cometa_portfolio_url', '#portfolio-cometa');

$shifts = array(
    array('Menos dependência das redes sociais', 'Mais autonomia'),
    array('Menos comunicação dispersa', 'Mais clareza'),
    array('Menos improviso', 'Mais autoridade'),
    array('Menos oportunidades perdidas', 'Mais conversão'),
);

$today = array(
    'Depende das redes sociais para ser encontrada',
    'Serviços e informações ficam espalhados',
    'A apresentação profissional muda a cada conversa',
    'A autoridade fica limitada ao Instagram',
    'O processo comercial perde oportunidades',
);

$after = array(
    'Presença digital própria e estruturada',
    'Comunicação organizada em um ambiente central',
    'Serviços apresentados com clareza',
    'Mais confiança antes do primeiro contato',
    'Base preparada para conteúdo, relacionamento e crescimento',
);

$deliveries = array(
    array('01', 'Estratégia', 'Direcionamento para entender o que precisa existir, qual mensagem sustenta a marca e qual estrutura faz sentido.'),
    array('02', 'Comunicação', 'Organização de serviços, narrativa, chamadas e pontos de conversão para que a empresa seja compreendida com mais rapidez.'),
    array('03', 'Presença Digital', 'Site institucional, páginas internas, blog, formulários e canais de contato construídos como uma base própria.'),
    array('04', 'Integrações', 'WhatsApp, Google, formulários, analytics e conexões essenciais para a estrutura funcionar no dia a dia.'),
    array('05', 'Treinamento', 'Orientação para usar a estrutura, atualizar informações e conduzir a presença digital com mais autonomia.'),
);

$solutions = array(
    array('Base Digital Profissional', 'O ponto de partida para a empresa existir com clareza no digital.', 'fm_cometa_base_url'),
    array('Landing Pages Estratégicas', 'Páginas focadas em campanhas, lançamentos, captação e conversão.', 'fm_cometa_landing_url'),
    array('Experiências Interativas', 'Quizzes, formulários e percursos que ajudam o visitante a tomar uma decisão.', 'fm_cometa_interactive_url'),
    array('Estruturas Comerciais Digitais', 'Ambientes para organizar apresentação, relacionamento e oportunidades comerciais.', 'fm_cometa_commercial_url'),
);

$cases = array(
    array('Liga dos Educadores Parentais', 'Home page', 'Autoridade e conteúdo organizados em uma base própria.', 'fm_cometa_case_1_image', '/assets/pulsar-cometa-case-home.webp'),
    array('Grupo Egrégora', 'Página interna', 'Serviços, narrativa e contato conectados para facilitar a escolha.', 'fm_cometa_case_2_image', '/assets/pulsar-cometa-case-page.webp'),
    array('Kids Travel', 'Mobile', 'Experiência visual adaptada para quem chega pelo celular.', 'fm_cometa_case_3_image', '/assets/pulsar-cometa-case-kids.webp'),
    array('1601 Business Center', 'Resultado final', 'Presença institucional com mais confiança e profissionalismo.', 'fm_cometa_case_4_image', '/assets/pulsar-cometa-case-impacto.webp'),
);
?>

<main class="pulsar-page cometa-page">
    <section class="cometa-hero">
        <div class="pulsar-shell cometa-hero-grid">
            <div class="cometa-hero-copy">
                <p class="pulsar-eyebrow">Presença digital e conversão</p>
                <h1>Sua empresa não deveria existir apenas dentro das redes sociais.</h1>
                <p class="pulsar-lead">Instagram, WhatsApp e Google ajudam as pessoas a encontrar você. Mas não sustentam sozinhos autoridade, credibilidade e crescimento.</p>
                <p>Quando a empresa tem uma estrutura digital própria, ela deixa de depender apenas do fluxo das redes e passa a construir um ambiente claro para apresentar serviços, gerar confiança e abrir conversas comerciais.</p>
                <div class="cometa-actions">
                    <a class="pulsar-button" href="<?php echo esc_url($primary_url); ?>">Agendar Diagnóstico Estratégico</a>
                    <a class="pulsar-button pulsar-button-outline" href="<?php echo esc_url($portfolio_url); ?>">Ver mini cases</a>
                </div>
            </div>
            <div class="cometa-device-stack" aria-label="Mockup de estrutura digital conectada">
                <div class="cometa-orbit"></div>
                <figure class="cometa-screen-main">
                    <img src="<?php echo fm_image_url('fm_cometa_hero_image', '/assets/pulsar-cometa-hero.webp'); ?>" alt="Ambiente digital com conexões e estratégia">
                    <figcaption>Site + Blog + WhatsApp + Google</figcaption>
                </figure>
                <figure class="cometa-phone">
                    <img src="<?php echo fm_image_url('fm_cometa_case_5_image', '/assets/pulsar-cometa-mobile.webp'); ?>" alt="Visualização mobile de projeto digital">
                </figure>
                <div class="cometa-channel cometa-channel-a">Formulário</div>
                <div class="cometa-channel cometa-channel-b">Conteúdo</div>
                <div class="cometa-channel cometa-channel-c">Contato</div>
            </div>
        </div>
    </section>

    <section class="cometa-shifts">
        <div class="pulsar-shell cometa-shift-grid">
            <?php foreach ($shifts as $shift) : ?>
                <article>
                    <span><?php echo esc_html($shift[0]); ?></span>
                    <strong><?php echo esc_html($shift[1]); ?></strong>
                </article>
            <?php endforeach; ?>
        </div>
    </section>

    <section class="cometa-problem">
        <div class="pulsar-shell cometa-split">
            <div>
                <p class="pulsar-eyebrow">O problema</p>
                <h2>Muitas empresas estão presentes. Poucas possuem uma presença digital própria.</h2>
            </div>
            <div class="cometa-copy">
                <p>Ter Instagram, WhatsApp, perfil no Google e redes ativas ajuda. Mas quando tudo fica solto, o visitante não entende com facilidade o que você faz, como pode contratar e por que deve confiar.</p>
                <p>A Operação Cometa organiza essa presença externa para transformar informação dispersa em um ecossistema digital claro, confiável e pronto para crescer.</p>
            </div>
        </div>
    </section>

    <section class="cometa-compare">
        <div class="pulsar-shell">
            <div class="cometa-section-title">
                <p class="pulsar-eyebrow">Hoje x depois</p>
                <h2>De canais soltos para uma estrutura conectada.</h2>
            </div>
            <div class="cometa-compare-grid">
                <article class="cometa-compare-card">
                    <span>Hoje</span>
                    <h3>Instagram + WhatsApp soltos</h3>
                    <ul>
                        <?php foreach ($today as $item) : ?>
                            <li><?php echo esc_html($item); ?></li>
                        <?php endforeach; ?>
                    </ul>
                </article>
                <div class="cometa-arrow" aria-hidden="true">→</div>
                <article class="cometa-compare-card is-after">
                    <span>Depois</span>
                    <h3>Ecossistema conectado</h3>
                    <ul>
                        <?php foreach ($after as $item) : ?>
                            <li><?php echo esc_html($item); ?></li>
                        <?php endforeach; ?>
                    </ul>
                    <div class="cometa-chips">
                        <em>Site</em><em>Blog</em><em>WhatsApp</em><em>Google</em><em>Forms</em>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <section class="cometa-definition">
        <div class="pulsar-shell cometa-definition-grid">
            <div class="cometa-image-panel">
                <img src="<?php echo fm_image_url('fm_cometa_ecosystem_image', '/assets/pulsar-cometa-farol.webp'); ?>" alt="Direção digital e presença conectada">
            </div>
            <div>
                <p class="pulsar-eyebrow">Operação Cometa</p>
                <h2>Uma estrutura digital própria para sua empresa.</h2>
                <p>A Operação Cometa não é apenas um projeto de criação de site. É uma implantação da presença digital da marca, com estratégia, comunicação, páginas, canais e pontos de conversão trabalhando juntos.</p>
                <p>O site entra como ferramenta. A estrutura é o que muda a percepção de valor.</p>
                <a class="pulsar-button" href="<?php echo esc_url($primary_url); ?>">Quero estruturar minha presença</a>
            </div>
        </div>
    </section>

    <section class="cometa-deliveries">
        <div class="pulsar-shell">
            <div class="cometa-section-title">
                <p class="pulsar-eyebrow">O que entregamos</p>
                <h2>Não é só colocar páginas no ar. É construir uma base digital que sustenta crescimento.</h2>
            </div>
            <div class="cometa-delivery-grid">
                <?php foreach ($deliveries as $delivery) : ?>
                    <article>
                        <span><?php echo esc_html($delivery[0]); ?></span>
                        <h3><?php echo esc_html($delivery[1]); ?></h3>
                        <p><?php echo esc_html($delivery[2]); ?></p>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="cometa-solutions">
        <div class="pulsar-shell">
            <div class="cometa-section-title">
                <p class="pulsar-eyebrow">Soluções complementares</p>
                <h2>Cada empresa pode precisar de uma rota digital diferente.</h2>
            </div>
            <div class="cometa-solution-grid">
                <?php foreach ($solutions as $solution) : ?>
                    <a href="<?php echo fm_button_link($solution[2], 'fm_cometa_primary_url', $primary_url); ?>">
                        <h3><?php echo esc_html($solution[0]); ?></h3>
                        <p><?php echo esc_html($solution[1]); ?></p>
                        <span>Acessar solução</span>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="cometa-process">
        <div class="pulsar-shell cometa-process-grid">
            <div>
                <p class="pulsar-eyebrow">Processo</p>
                <h2>Da presença espalhada para uma estrutura em movimento.</h2>
            </div>
            <ol>
                <li><strong>Diagnóstico</strong><span>Entendemos serviços, público, canais, pontos de contato e objetivo comercial.</span></li>
                <li><strong>Estruturação</strong><span>Organizamos mensagem, arquitetura, páginas, chamadas e jornada do visitante.</span></li>
                <li><strong>Implantação</strong><span>Colocamos a estrutura no ar com integrações, formulários, blog e bases de mensuração.</span></li>
                <li><strong>Evolução</strong><span>Você recebe orientação para manter e evoluir a presença com mais autonomia.</span></li>
            </ol>
        </div>
    </section>

    <section class="cometa-boundaries">
        <div class="pulsar-shell cometa-split">
            <div>
                <p class="pulsar-eyebrow">O que não fazemos</p>
                <h2>Projetos bonitos, mas soltos, não resolvem a presença digital.</h2>
            </div>
            <div class="cometa-no-list">
                <span>Páginas sem estratégia</span>
                <span>Projetos desconectados dos canais comerciais</span>
                <span>Design sem clareza de mensagem</span>
                <span>Estruturas difíceis de manter</span>
            </div>
        </div>
    </section>

    <section class="cometa-portfolio" id="portfolio-cometa">
        <div class="pulsar-shell">
            <div class="cometa-section-title">
                <p class="pulsar-eyebrow">Portfólio</p>
                <h2>Mini cases que mostram a estrutura, não apenas a tela.</h2>
                <p>Home page, páginas internas, blog, mobile e resultado final aparecem como partes de um ecossistema digital.</p>
            </div>
            <div class="cometa-case-grid">
                <?php foreach ($cases as $case) : ?>
                    <article>
                        <img src="<?php echo fm_image_url($case[3], $case[4]); ?>" alt="<?php echo esc_attr($case[0]); ?>">
                        <div>
                            <span><?php echo esc_html($case[1]); ?></span>
                            <h3><?php echo esc_html($case[0]); ?></h3>
                            <p><?php echo esc_html($case[2]); ?></p>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="cometa-results">
        <div class="pulsar-shell">
            <p class="pulsar-eyebrow">Resultado esperado</p>
            <h2>Mais credibilidade, mais clareza e menos dependência das redes sociais.</h2>
            <div class="cometa-result-grid">
                <span>Profissionalismo</span>
                <span>Autoridade</span>
                <span>Visibilidade</span>
                <span>Oportunidades comerciais</span>
                <span>Base para crescimento</span>
            </div>
        </div>
    </section>

    <section class="cometa-final">
        <div class="pulsar-shell">
            <p class="pulsar-eyebrow">Próximo passo</p>
            <h2>O site não é o objetivo. Ele é apenas o ponto de partida.</h2>
            <p>A transformação acontece quando a empresa deixa de depender apenas das redes sociais e passa a ter uma estrutura digital própria, clara e pronta para sustentar crescimento.</p>
            <div class="cometa-actions">
                <a class="pulsar-button" href="<?php echo esc_url($primary_url); ?>">Agendar Diagnóstico Estratégico</a>
                <a class="pulsar-button pulsar-button-outline" href="<?php echo esc_url($secondary_url); ?>">Falar com a Pulsar</a>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>