<?php
/**
 * page-como-funciona.php
 * Template Name: Como Funciona
 */
get_header();

$url_buscar   = esc_url( home_url( '/buscar/' ) );
$url_download = esc_url( home_url( '/download/' ) );
$url_cad_cli  = esc_url( add_query_arg( array( 'modo' => 'cadastro', 'tipo' => 'cliente' ), home_url( '/entrar/' ) ) );
$url_cad_pro  = esc_url( add_query_arg( array( 'modo' => 'cadastro', 'tipo' => 'profissional' ), home_url( '/entrar/' ) ) );
$url_cad_adv  = esc_url( add_query_arg( array( 'modo' => 'cadastro', 'tipo' => 'anunciante' ), home_url( '/entrar/' ) ) );
?>

<div class="cf-page page-wrapper">
  <section class="cf-hero" aria-label="Como funciona o Pacto">
    <div class="cf-hero__bg" aria-hidden="true">
      <span class="cf-hero__orb cf-hero__orb--1"></span>
      <span class="cf-hero__orb cf-hero__orb--2"></span>
      <span class="cf-hero__orb cf-hero__orb--3"></span>
    </div>
    <div class="container cf-hero__inner">
      <div class="section-badge" data-animate>Como Funciona</div>
      <h1 class="cf-hero__title" data-animate data-animate-delay="1">
        Simples para quem contrata.<br>
        <span class="text-gradient">Poderoso para quem trabalha.</span>
      </h1>
      <p class="cf-hero__sub" data-animate data-animate-delay="2">
        Do primeiro clique ao pagamento na conta. Escolha seu perfil e veja o passo a passo.
      </p>
      <div class="cf-hero__chips" data-animate data-animate-delay="3">
        <span class="cf-chip">Agende em 30s</span>
        <span class="cf-chip">Pagamento protegido</span>
        <span class="cf-chip">Avaliacoes reais</span>
      </div>
    </div>
  </section>

  <section class="cf-tabs-section" aria-label="Passo a passo por perfil">
    <div class="container">
      <div class="cf-tabs" role="tablist" aria-label="Escolha seu perfil" data-animate>
        <button type="button" class="cf-tab is-active" role="tab" id="cf-tab-cliente" aria-selected="true" aria-controls="cf-panel-cliente" data-cf-tab="cliente">
          <span class="cf-tab__label">Sou Cliente</span>
        </button>
        <button type="button" class="cf-tab" role="tab" id="cf-tab-anunciante" aria-selected="false" aria-controls="cf-panel-anunciante" data-cf-tab="anunciante">
          <span class="cf-tab__label">Sou Anunciante</span>
        </button>
        <button type="button" class="cf-tab" role="tab" id="cf-tab-profissional" aria-selected="false" aria-controls="cf-panel-profissional" data-cf-tab="profissional">
          <span class="cf-tab__label">Sou Profissional</span>
        </button>
      </div>

      <div class="cf-panel is-active" id="cf-panel-cliente" role="tabpanel" aria-labelledby="cf-tab-cliente" data-cf-panel="cliente">
        <header class="cf-panel__head" data-animate>
          <h2 class="cf-panel__title">Contrate servicos em minutos</h2>
          <p class="cf-panel__sub">Busque, compare, agende e pague pelo celular ou navegador.</p>
        </header>
        <ol class="cf-timeline">
          <li class="cf-step" data-animate><span class="cf-step__num">1</span><div class="cf-step__body"><h3 class="cf-step__title">Acesse o marketplace</h3><p class="cf-step__desc">Entre em /buscar pelo site ou baixe o app.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">2</span><div class="cf-step__body"><h3 class="cf-step__title">Encontre o profissional</h3><p class="cf-step__desc">Filtre por categoria, distancia, avaliacao e preco.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">3</span><div class="cf-step__body"><h3 class="cf-step__title">Escolha data e horario</h3><p class="cf-step__desc">Agenda em tempo real com confirmacao instantanea.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">4</span><div class="cf-step__body"><h3 class="cf-step__title">Pague com seguranca</h3><p class="cf-step__desc">PIX ou cartao com valor protegido na plataforma.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">5</span><div class="cf-step__body"><h3 class="cf-step__title">Avalie e pronto</h3><p class="cf-step__desc">Apos o atendimento, avalie com nota e comentario.</p></div></li>
        </ol>
        <div class="cf-panel__cta" data-animate>
          <a href="<?php echo $url_buscar; ?>" class="btn btn--primary">Buscar profissionais</a>
          <a href="<?php echo $url_download; ?>" class="btn btn--ghost">Baixar o app</a>
        </div>
      </div>

      <div class="cf-panel" id="cf-panel-anunciante" role="tabpanel" aria-labelledby="cf-tab-anunciante" data-cf-panel="anunciante" hidden>
        <header class="cf-panel__head" data-animate>
          <h2 class="cf-panel__title">Gerencie seu negocio</h2>
          <p class="cf-panel__sub">Vitrine, equipe, agenda e financeiro num so lugar.</p>
        </header>
        <ol class="cf-timeline">
          <li class="cf-step" data-animate><span class="cf-step__num">1</span><div class="cf-step__body"><h3 class="cf-step__title">Crie conta de negocio</h3><p class="cf-step__desc">Cadastre-se como anunciante e configure a empresa.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">2</span><div class="cf-step__body"><h3 class="cf-step__title">Monte seu catalogo</h3><p class="cf-step__desc">Publique servicos com fotos, precos e duracao.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">3</span><div class="cf-step__body"><h3 class="cf-step__title">Monte sua equipe</h3><p class="cf-step__desc">Vincule profissionais e defina comissoes.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">4</span><div class="cf-step__body"><h3 class="cf-step__title">Receba agendamentos</h3><p class="cf-step__desc">Clientes reservam online no painel.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">5</span><div class="cf-step__body"><h3 class="cf-step__title">Receba na carteira</h3><p class="cf-step__desc">Pagamentos liberados apos o servico com saque PIX.</p></div></li>
        </ol>
        <div class="cf-panel__cta" data-animate>
          <a href="<?php echo $url_cad_adv; ?>" class="btn btn--primary">Cadastrar negocio</a>
          <a href="<?php echo $url_download; ?>" class="btn btn--ghost">Baixar o app</a>
        </div>
      </div>

      <div class="cf-panel" id="cf-panel-profissional" role="tabpanel" aria-labelledby="cf-tab-profissional" data-cf-panel="profissional" hidden>
        <header class="cf-panel__head" data-animate>
          <h2 class="cf-panel__title">Sua agenda profissional</h2>
          <p class="cf-panel__sub">Gerencie horarios, atendimentos e ganhos.</p>
        </header>
        <ol class="cf-timeline">
          <li class="cf-step" data-animate><span class="cf-step__num">1</span><div class="cf-step__body"><h3 class="cf-step__title">Cadastre-se</h3><p class="cf-step__desc">Crie conta e monte seu portfolio.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">2</span><div class="cf-step__body"><h3 class="cf-step__title">Configure disponibilidade</h3><p class="cf-step__desc">Defina dias, horarios e bloqueios.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">3</span><div class="cf-step__body"><h3 class="cf-step__title">Aceite solicitacoes</h3><p class="cf-step__desc">Confirme ou recuse em segundos.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">4</span><div class="cf-step__body"><h3 class="cf-step__title">Valide atendimento</h3><p class="cf-step__desc">Use o codigo do dia para confirmar presenca.</p></div></li>
          <li class="cf-step" data-animate><span class="cf-step__num">5</span><div class="cf-step__body"><h3 class="cf-step__title">Receba ganhos</h3><p class="cf-step__desc">Valor creditado na carteira apos conclusao.</p></div></li>
        </ol>
        <div class="cf-panel__cta" data-animate>
          <a href="<?php echo $url_cad_pro; ?>" class="btn btn--primary">Comecar como profissional</a>
          <a href="<?php echo $url_download; ?>" class="btn btn--ghost">Baixar o app</a>
        </div>
      </div>
    </div>
  </section>

  <section class="cf-trust" aria-label="Garantias do Pacto">
    <div class="container">
      <div class="cf-trust__grid">
        <article class="cf-trust__card" data-animate>
          <h3 class="cf-trust__title">Escrow financeiro</h3>
          <p class="cf-trust__desc">Nenhum centavo sai antes da conclusao do servico.</p>
        </article>
        <article class="cf-trust__card" data-animate>
          <h3 class="cf-trust__title">Identidade verificada</h3>
          <p class="cf-trust__desc">Profissionais passam por validacao antes de atender.</p>
        </article>
        <article class="cf-trust__card" data-animate>
          <h3 class="cf-trust__title">Suporte humanizado</h3>
          <p class="cf-trust__desc">Mediacao disponivel se algo nao sair como combinado.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="cf-final-cta" aria-label="Comece agora">
    <div class="container cf-final-cta__inner" data-animate>
      <h2 class="cf-final-cta__title">Pronto para experimentar?</h2>
      <p class="cf-final-cta__sub">Gratuito para comecar. Sem cartao para explorar.</p>
      <div class="cf-final-cta__btns">
        <a href="<?php echo $url_buscar; ?>" class="btn btn--primary btn--lg">Explorar marketplace</a>
        <a href="<?php echo $url_cad_cli; ?>" class="btn btn--ghost btn--lg">Criar conta gratis</a>
      </div>
    </div>
  </section>
</div>

<script>
(function () {
  'use strict';
  var tabs = document.querySelectorAll('[data-cf-tab]');
  var panels = document.querySelectorAll('[data-cf-panel]');
  function activateTab(name) {
    tabs.forEach(function (t) {
      var on = t.getAttribute('data-cf-tab') === name;
      t.classList.toggle('is-active', on);
      t.setAttribute('aria-selected', on ? 'true' : 'false');
    });
    panels.forEach(function (p) {
      var on = p.getAttribute('data-cf-panel') === name;
      p.classList.toggle('is-active', on);
      if (on) { p.removeAttribute('hidden'); } else { p.setAttribute('hidden', ''); }
    });
  }
  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () { activateTab(tab.getAttribute('data-cf-tab')); });
  });
  document.querySelectorAll('.cf-page [data-animate]').forEach(function (el) { el.classList.add('is-visible'); });
})();
</script>

<?php get_footer(); ?>