<?php
/**
 * Template Name: Pulsar - Posicionamento e Perfil Vitrine
 * Template Post Type: page
 */

get_header();

$diagnostic_url = fm_button_link('fm_positioning_primary_url', 'fm_diagnostic_url', fm_link('fm_quiz_url', '#'));
$secondary_url = fm_button_link('fm_positioning_secondary_url', 'fm_whatsapp_url');
$portfolio_url = fm_link('fm_positioning_portfolio_url', '#portfolio-posicionamento');
$library_url = fm_link('fm_positioning_library_url', 'https://pulsarmarcas.gfstudiosalvador.com.br/inicio');
$library_image = fm_image_url('fm_positioning_library_image', '/assets/photo-placeholder.svg');

$solutions = array(
    array(
        'kicker' => 'Primeiro perfil estratégico',
        'title' => 'Operação Perfil',
        'subtitle' => 'Estruture seu primeiro perfil estratégico',
        'text' => 'Para profissionais que sentem que sua comunicação está confusa, genérica ou desconectada do valor que entregam.',
        'items' => array('posicionamento', 'mensagem', 'proposta de valor', 'perfil profissional', 'comunicação digital'),
        'result' => 'Uma presença mais coerente, clara e preparada para crescer.',
        'price' => fm_mod('fm_positioning_brilho_price'),
        'url' => fm_button_link('fm_positioning_brilho_url', 'fm_positioning_primary_url', $diagnostic_url),
        'button' => 'Conhecer solução',
        'image' => fm_image_url('fm_positioning_brilho_image', '/assets/pulsar-positioning-brilho.webp'),
    ),
    array(
        'kicker' => 'Imagem e vídeo',
        'title' => 'Saia da Toca',
        'subtitle' => 'Desbloqueio de imagem e vídeo',
        'text' => 'Para quem sabe que precisa aparecer, mas ainda sente insegurança diante da câmera.',
        'items' => array('exposição', 'confiança', 'naturalidade', 'comunicação em vídeo', 'presença'),
        'result' => 'Mais conforto para aparecer sem precisar criar personagens.',
        'price' => fm_mod('fm_positioning_toca_price'),
        'url' => fm_button_link('fm_positioning_toca_url', 'fm_positioning_primary_url', $diagnostic_url),
        'button' => 'Ver se é para mim',
        'image' => fm_image_url('fm_positioning_toca_image', '/assets/pulsar-positioning-instagram.webp'),
    ),
    array(
        'kicker' => 'Reputação profissional',
        'title' => 'LinkedIn Estratégico',
        'subtitle' => 'Posicionamento Profissional para LinkedIn',
        'text' => 'Estruturação completa do perfil para fortalecer autoridade profissional e ampliar oportunidades de relacionamento e negócios.',
        'items' => array('otimização do perfil', 'posicionamento', 'headline', 'resumo estratégico', 'conteúdo', 'plano de relacionamento'),
        'result' => 'Um perfil mais claro, estratégico e preparado para gerar autoridade.',
        'price' => fm_mod('fm_positioning_linkedin_price'),
        'url' => fm_button_link('fm_positioning_linkedin_url', 'fm_positioning_primary_url', $diagnostic_url),
        'button' => 'Conhecer solução',
        'image' => fm_image_url('fm_positioning_linkedin_image', '/assets/pulsar-positioning-linkedin.webp'),
    ),
    array(
        'kicker' => 'Consistência digital',
        'title' => 'Gestão de Presença Digital',
        'subtitle' => 'Acompanhamento contínuo para comunicação estratégica',
        'text' => 'Para profissionais que desejam manter consistência sem carregar sozinhas toda a produção de conteúdo.',
        'items' => array('planejamento', 'produção de conteúdo', 'carrosséis', 'reels', 'orientação para stories', 'acompanhamento estratégico'),
        'result' => 'Apenas 5 vagas simultâneas.',
        'price' => fm_mod('fm_positioning_presence_price'),
        'url' => fm_button_link('fm_positioning_presence_url', 'fm_positioning_primary_url', $diagnostic_url),
        'button' => 'Solicitar avaliação',
        'image' => fm_image_url('fm_positioning_presence_image', '/assets/pulsar-positioning-instagram.webp'),
    ),
);

$library_items = array(
    'Comunicação e Pitch',
    'Marketing e Aquisição de Clientes',
    'Produtividade e Gestão do Tempo',
    'Vendas e Conversão',
    'Mentalidade e Posicionamento',
    'Checklist Instagram',
    'Crescimento e Expansão',
    'Outros materiais disponíveis',
);

$portfolio = array(
    fm_image_url('fm_positioning_portfolio_1', '/assets/pulsar-positioning-portfolio-1.webp'),
    fm_image_url('fm_positioning_portfolio_2', '/assets/pulsar-positioning-portfolio-2.webp'),
    fm_image_url('fm_positioning_portfolio_3', '/assets/pulsar-positioning-portfolio-3.webp'),
    fm_image_url('fm_positioning_portfolio_4', '/assets/pulsar-positioning-portfolio-4.webp'),
    fm_image_url('fm_positioning_portfolio_5', '/assets/pulsar-positioning-portfolio-5.webp'),
    fm_image_url('fm_positioning_portfolio_6', '/assets/pulsar-positioning-portfolio-6.webp'),
    fm_image_url('fm_positioning_portfolio_7', '/assets/pulsar-positioning-portfolio-7.webp'),
    fm_image_url('fm_positioning_portfolio_8', '/assets/pulsar-positioning-portfolio-8.webp'),
    fm_image_url('fm_positioning_portfolio_9', '/assets/pulsar-positioning-portfolio-9.webp'),
);
?>

<main class="pulsar-page positioning-page">
    <section class="positioning-hero">
        <div class="pulsar-shell positioning-hero-grid">
            <div class="positioning-hero-copy">
                <p class="pulsar-eyebrow">Posicionamento e Perfil Vitrine</p>
                <h1>Sua presença digital não deveria depender de esforço constante.</h1>
                <p class="pulsar-lead">Ela deveria gerar confiança, autoridade e oportunidades mesmo quando você não está online.</p>
                <div class="agents-actions">
                    <a class="pulsar-button" href="<?php echo esc_url($diagnostic_url); ?>">Agendar Diagnóstico Estratégico</a>
                </div>
            </div>
            <div class="positioning-hero-panel">
                <img src="<?php echo esc_url(fm_image_url('fm_positioning_hero_image', '/assets/pulsar-positioning-hero.webp')); ?>" alt="Consultoria de posicionamento e presença digital">
                <div>
                    <span>Rota de presença</span>
                    <strong>Clareza → Posicionamento → Autoridade → Oportunidades</strong>
                </div>
            </div>
        </div>
    </section>

    <section class="positioning-challenge positioning-challenge-text">
        <div class="pulsar-shell positioning-two-text">
            <div>
                <p class="pulsar-eyebrow">O desafio</p>
                <h2>Muitas profissionais possuem conhecimento, experiência e resultados.</h2>
                <p>Mas quando alguém visita seu perfil, nem sempre consegue perceber isso.</p>
            </div>
            <div>
                <p>A forma como você se apresenta, comunica e aparece influencia diretamente a percepção de valor da sua marca.</p>
                <p>A Pulsar ajuda a alinhar imagem, comunicação e posicionamento para que sua presença digital reflita aquilo que você realmente construiu.</p>
            </div>
        </div>
    </section>

    <section class="positioning-route">
        <div class="pulsar-shell positioning-route-grid positioning-transform-grid">
            <div class="positioning-route-image">
                <img src="<?php echo esc_url(fm_image_url('fm_positioning_route_image', '/assets/pulsar-positioning-route.webp')); ?>" alt="Rota estratégica de posicionamento">
            </div>
            <div>
                <p class="pulsar-eyebrow">A transformação</p>
                <h2>Não é sobre postar mais. É sobre mostrar certo.</h2>
                <p>O problema raramente está na qualidade da entrega. Normalmente está na forma como ela está sendo percebida.</p>
                <div class="positioning-transform-columns">
                    <div>
                        <strong>Antes</strong>
                        <span>Comunicação genérica</span>
                        <span>Perfil sem estratégia</span>
                        <span>Pouca diferenciação</span>
                    </div>
                    <div>
                        <strong>Depois</strong>
                        <span>Posicionamento claro</span>
                        <span>Autoridade percebida</span>
                        <span>Mais facilidade para gerar oportunidades</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="positioning-solutions positioning-solutions-combined">
        <div class="pulsar-shell">
            <div class="positioning-section-title">
                <p class="pulsar-eyebrow">Como a Pulsar ajuda</p>
                <h2>Existem diferentes formas de fortalecer sua presença.</h2>
                <p>Nem toda transformação começa pelo mesmo caminho. Algumas marcas precisam de clareza, outras de exposição, outras de reputação profissional e outras de acompanhamento contínuo.</p>
            </div>
            <div class="positioning-solution-grid">
                <?php foreach ($solutions as $solution) : ?>
                    <article class="positioning-solution-card">
                        <img src="<?php echo esc_url($solution['image']); ?>" alt="<?php echo esc_attr($solution['title']); ?>">
                        <div>
                            <span><?php echo esc_html($solution['kicker']); ?></span>
                            <h3><?php echo esc_html($solution['title']); ?></h3>
                            <p><strong><?php echo esc_html($solution['subtitle']); ?></strong></p>
                            <p><?php echo esc_html($solution['text']); ?></p>
                            <ul>
                                <?php foreach ($solution['items'] as $item) : ?>
                                    <li><?php echo esc_html($item); ?></li>
                                <?php endforeach; ?>
                            </ul>
                            <em>Resultado: <?php echo esc_html($solution['result']); ?></em>
                            <strong><?php echo esc_html($solution['price']); ?></strong>
                            <a class="pulsar-button" href="<?php echo esc_url($solution['url']); ?>"><?php echo esc_html($solution['button']); ?></a>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="positioning-library">
        <div class="pulsar-shell positioning-library-grid">
            <div>
                <p class="pulsar-eyebrow">Biblioteca de desenvolvimento</p>
                <h2>Recursos para continuar evoluindo.</h2>
                <p>Nem toda transformação começa por um acompanhamento. Algumas vezes o próximo passo é adquirir conhecimento, ganhar clareza ou desenvolver uma habilidade específica antes de avançar para uma solução mais completa.</p>
                <p>Reunimos minicursos, desafios, aulas, checklists, e-books e materiais práticos para fortalecer sua presença, comunicação e posicionamento profissional.</p>
                <a class="pulsar-button" href="<?php echo esc_url($library_url); ?>">Acessar biblioteca</a>
            </div>
            <div class="positioning-library-image">
                <img src="<?php echo esc_url($library_image); ?>" alt="Biblioteca de desenvolvimento da Pulsar">
            </div>
        </div>
    </section>

    <section class="positioning-choice">
        <div class="pulsar-shell positioning-choice-grid">
            <div>
                <p class="pulsar-eyebrow">Qual é o melhor caminho para você?</p>
                <h2>Cada momento exige uma rota diferente.</h2>
            </div>
            <div class="positioning-choice-list">
                <p><strong>Quer parar de improvisar sua comunicação?</strong><span>Operação Perfil</span><small>Estruture seu primeiro perfil estratégico e construa uma base clara para comunicar seu valor.</small></p>
                <p><strong>Sabe o que precisa dizer, mas trava na hora de aparecer?</strong><span>Saia da Toca</span></p>
                <p><strong>Precisa fortalecer sua reputação profissional?</strong><span>LinkedIn Estratégico</span><small>Organização do perfil, posicionamento e produção de conteúdo para ampliar sua reputação profissional.</small></p>
                <p><strong>Precisa de acompanhamento contínuo?</strong><span>Assessoria Estratégica</span><small>Conteúdo, planejamento e acompanhamento contínuo para fortalecer sua presença digital.</small></p>
            </div>
        </div>
    </section>

    <section class="positioning-boundaries">
        <div class="pulsar-shell positioning-boundaries-grid">
            <div>
                <p class="pulsar-eyebrow">O que não fazemos</p>
                <h2>Presença forte não nasce de personagem digital.</h2>
            </div>
            <div class="positioning-no-list">
                <span>Produzir conteúdo sem estratégia</span>
                <span>Copiar tendências sem propósito</span>
                <span>Criar personagens digitais</span>
                <span>Buscar alcance sem posicionamento</span>
                <strong>Construímos presença com direção, coerência e intenção.</strong>
            </div>
        </div>
    </section>

    <section class="positioning-portfolio" id="portfolio-posicionamento">
        <div class="pulsar-shell">
            <div class="positioning-section-title">
                <p class="pulsar-eyebrow">Portfólio</p>
                <h2>Perfis, vitrines e comunicações que ganham direção.</h2>
                <p>Use esta área para mostrar antes e depois de perfis, projetos do Operação Perfil, estruturações de LinkedIn, transformações de comunicação e depoimentos.</p>
            </div>
            <div class="positioning-portfolio-slider" data-positioning-slider>
                <div class="positioning-portfolio-viewport">
                    <div class="positioning-portfolio-track">
                        <?php foreach ($portfolio as $index => $image) : ?>
                            <figure class="positioning-portfolio-slide">
                                <img src="<?php echo esc_url($image); ?>" alt="Projeto de posicionamento <?php echo esc_attr($index + 1); ?>">
                            </figure>
                        <?php endforeach; ?>
                    </div>
                </div>
                <div class="positioning-slider-controls">
                    <button type="button" class="positioning-slider-button" data-positioning-prev aria-label="Ver projetos anteriores">Anterior</button>
                    <div class="positioning-slider-dots" aria-hidden="true">
                        <span class="is-active"></span>
                        <span></span>
                        <span></span>
                    </div>
                    <button type="button" class="positioning-slider-button" data-positioning-next aria-label="Ver próximos projetos">Próximos</button>
                </div>
            </div>
        </div>
    </section>

    <section class="pulsar-diagnostic positioning-final">
        <div class="pulsar-shell pulsar-diagnostic-box">
            <p class="pulsar-eyebrow">Próximo passo</p>
            <h2>Sua comunicação não precisa de mais volume. Precisa de mais direção.</h2>
            <p>O Diagnóstico Estratégico identifica os ajustes necessários para transformar sua presença digital em uma vitrine que gera confiança, autoridade e oportunidades.</p>
            <div class="agents-actions center">
                <a class="pulsar-button" href="<?php echo esc_url($diagnostic_url); ?>">Agendar Diagnóstico Estratégico</a>
                <a class="pulsar-button pulsar-button-light" href="<?php echo esc_url($secondary_url); ?>">Falar com a Pulsar</a>
            </div>
        </div>
    </section>
</main>

<script>
(function () {
    var slider = document.querySelector('[data-positioning-slider]');
    if (!slider) {
        return;
    }

    var track = slider.querySelector('.positioning-portfolio-track');
    var prev = slider.querySelector('[data-positioning-prev]');
    var next = slider.querySelector('[data-positioning-next]');
    var dots = Array.prototype.slice.call(slider.querySelectorAll('.positioning-slider-dots span'));
    var page = 0;
    var pages = 3;

    function visibleCount() {
        return window.matchMedia('(max-width: 760px)').matches ? 1 : 3;
    }

    function update() {
        var perView = visibleCount();
        pages = perView === 1 ? 9 : 3;
        page = Math.max(0, Math.min(page, pages - 1));
        track.style.transform = 'translateX(-' + (page * 100) + '%)';
        dots.forEach(function (dot, index) {
            dot.classList.toggle('is-active', index === Math.floor(page / (perView === 1 ? 3 : 1)));
        });
    }

    if (prev) {
        prev.addEventListener('click', function () {
            page = (page - 1 + pages) % pages;
            update();
        });
    }

    if (next) {
        next.addEventListener('click', function () {
            page = (page + 1) % pages;
            update();
        });
    }

    window.addEventListener('resize', update);
    update();
}());
</script>

<?php get_footer(); ?>