{% extends "base.html" %}

{% block title %}NaRégua · Sua barbearia na régua sem responder WhatsApp o dia todo{% endblock %}

{% block head %}
<style>
  .gradient-hero-glow {
    background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.12) 0%, rgba(12, 13, 14, 0) 70%);
  }
  .card-glow:hover {
    box-shadow: 0 0 35px -10px rgba(245, 158, 11, 0.25);
  }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-dark-bg text-stone-100 flex flex-col selection:bg-brand selection:text-black">

  <!-- Topo / Navbar do Site Institucional -->
  <header class="border-b border-dark-border/80 bg-dark-bg/90 backdrop-blur-md sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
      
      <!-- Logo da Plataforma -->
      <a href="/" class="flex items-center gap-3 group">
        <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand-600 to-amber-500 text-black flex items-center justify-center font-black shadow-lg shadow-brand/20 group-hover:scale-105 transition-transform">
          <i data-lucide="scissors" class="w-5 h-5"></i>
        </div>
        <div>
          <span class="font-black text-xl text-white tracking-tight flex items-center gap-0.5">
            Na<span class="text-brand">Régua</span>
          </span>
          <span class="text-[10px] text-stone-400 font-semibold block -mt-1 tracking-wider uppercase">Sistema para Barbearias</span>
        </div>
      </a>

      <!-- Menu Desktop -->
      <nav class="hidden md:flex items-center gap-8 text-sm font-semibold text-stone-300">
        <a href="#como-funciona" class="hover:text-brand transition-colors">Como Funciona</a>
        <a href="#vantagens" class="hover:text-brand transition-colors">Vantagens</a>
        <a href="#recursos" class="hover:text-brand transition-colors">Recursos</a>
        <a href="#planos" class="hover:text-brand transition-colors">Preços</a>
        <a href="#duvidas" class="hover:text-brand transition-colors">Dúvidas</a>
      </nav>

      <!-- Ações do Topo -->
      <div class="flex items-center gap-3">
        <a href="/admin" class="px-4 py-2 rounded-xl text-xs font-bold text-stone-300 hover:text-white hover:bg-dark-card border border-transparent hover:border-dark-border transition-all">
          Entrar no Sistema
        </a>
        <button onclick="openRegisterModal()" class="px-5 py-2.5 rounded-xl bg-brand hover:bg-brand-400 text-black font-extrabold text-xs shadow-lg shadow-brand/20 hover:shadow-brand/30 transition-all active:scale-95">
          Testar Grátis 7 Dias
        </button>
      </div>

    </div>
  </header>

  <!-- 1. HERO SECTION (A Proposta de Valor Brutal) -->
  <section class="relative pt-16 pb-24 md:pt-28 md:pb-36 overflow-hidden gradient-hero-glow">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8 relative z-10">
      
      <!-- Selo Superior -->
      <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand/10 border border-brand/30 text-brand text-xs font-bold tracking-wide uppercase shadow-sm">
        <span class="w-2 h-2 rounded-full bg-brand animate-ping"></span>
        Sua barbearia 100% na régua
      </div>

      <!-- Título Principal -->
      <div class="max-w-4xl mx-auto space-y-4">
        <h1 class="text-4xl sm:text-6xl lg:text-7xl font-black text-white tracking-tight leading-[1.1]">
          Sua barbearia na régua. Agenda cheia sem responder <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand via-amber-300 to-yellow-500">WhatsApp</span> o dia todo.
        </h1>
        <p class="text-lg sm:text-xl text-stone-400 max-w-2xl mx-auto leading-relaxed font-normal">
          Seu cliente marca sozinho pelo seu link em 30 segundos, recebe confirmação no WhatsApp e você vê caixa e comissão na hora. Sem planilhas e sem enrolação.
        </p>
      </div>

      <!-- Botões de Ação Hero -->
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
        <button onclick="openRegisterModal()" class="w-full sm:w-auto px-8 py-4 rounded-2xl bg-brand hover:bg-brand-400 text-black font-black text-base shadow-xl shadow-brand/25 transition-all active:scale-95 flex items-center justify-center gap-2.5">
          <span>Criar Minha Barbearia Grátis</span>
          <i data-lucide="arrow-right" class="w-5 h-5"></i>
        </button>

        <a href="/b/navalha-e-estilo" target="_blank" class="w-full sm:w-auto px-8 py-4 rounded-2xl bg-dark-card hover:bg-dark-cardHover border border-dark-border text-stone-200 font-bold text-sm flex items-center justify-center gap-2 transition-all">
          <i data-lucide="smartphone" class="w-4 h-4 text-brand"></i>
          Ver Demonstração do Cliente
        </a>
      </div>

      <!-- Garantias Rápidas -->
      <div class="flex flex-wrap items-center justify-center gap-6 pt-4 text-xs font-semibold text-stone-400">
        <span class="flex items-center gap-1.5"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> Sem pedir cartão de crédito</span>
        <span class="flex items-center gap-1.5"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> Seu cliente não baixa aplicativo</span>
        <span class="flex items-center gap-1.5"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> Funciona no celular e computador</span>
      </div>

      <!-- Vitrine Visual / Mockup Interativo -->
      <div class="pt-12 max-w-5xl mx-auto relative">
        <div class="p-3 sm:p-5 rounded-3xl bg-dark-card/90 border border-dark-border shadow-2xl relative overflow-hidden backdrop-blur-xl">
          
          <!-- Barra simulada de navegador / app -->
          <div class="flex items-center justify-between pb-4 mb-4 border-b border-dark-border/60 text-xs text-stone-400 px-2">
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full bg-red-500/80"></span>
              <span class="w-3 h-3 rounded-full bg-yellow-500/80"></span>
              <span class="w-3 h-3 rounded-full bg-emerald-500/80"></span>
              <span class="ml-2 font-mono text-[11px] text-stone-500">app.naregua.com.br/admin</span>
            </div>
            <span class="text-emerald-400 font-semibold flex items-center gap-1">
              <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              Ao vivo na barbearia
            </span>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
            
            <!-- Card 1: Agenda em Tempo Real -->
            <div class="p-4 rounded-2xl bg-dark-bg border border-dark-border space-y-3">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-white flex items-center gap-2">
                  <i data-lucide="calendar" class="w-4 h-4 text-brand"></i>
                  Agenda de Hoje
                </span>
                <span class="text-[10px] px-2 py-0.5 rounded bg-brand/10 text-brand font-bold">14 Cortes</span>
              </div>
              <div class="space-y-2 text-xs">
                <div class="p-2.5 rounded-xl bg-dark-card border border-dark-border flex items-center justify-between">
                  <div>
                    <span class="font-bold text-white block">10:00 · Rodrigo Silveira</span>
                    <span class="text-[11px] text-stone-400">Degradê Social · Marcos</span>
                  </div>
                  <span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">Confirmado</span>
                </div>
                <div class="p-2.5 rounded-xl bg-dark-card border border-dark-border flex items-center justify-between">
                  <div>
                    <span class="font-bold text-white block">11:00 · Bruno Carvalho</span>
                    <span class="text-[11px] text-stone-400">Combo Cabelo + Barba · Diego</span>
                  </div>
                  <span class="px-2 py-0.5 rounded bg-purple-500/10 text-purple-400 text-[10px] font-bold">Atendendo</span>
                </div>
              </div>
            </div>

            <!-- Card 2: Lembrete WhatsApp Automático (Guerra às Faltas) -->
            <div class="p-4 rounded-2xl bg-emerald-950/20 border border-emerald-500/30 space-y-3 relative overflow-hidden">
              <div class="flex items-center gap-2 text-emerald-400">
                <i data-lucide="message-circle" class="w-4 h-4"></i>
                <span class="text-xs font-bold uppercase tracking-wider">Antifalta no WhatsApp</span>
              </div>
              <div class="p-3 rounded-xl bg-dark-bg border border-emerald-500/20 text-xs space-y-1.5 shadow-md">
                <div class="flex items-center justify-between text-[10px] text-stone-500 font-medium">
                  <span>WhatsApp da Barbearia</span>
                  <span>Agora</span>
                </div>
                <p class="text-stone-300 leading-relaxed text-[11px]">
                  "Fala Rodrigo! Passando para lembrar do seu horário hoje às 10h com Marcos. Responda <b>1 para confirmar</b>!"
                </p>
                <div class="pt-1.5 border-t border-stone-800 text-right">
                  <span class="text-[10px] text-emerald-400 font-bold">✓✓ Cliente respondeu "1"</span>
                </div>
              </div>
              <p class="text-[11px] text-stone-400">Redução de até 85% nos no-shows (cadeira vazia nunca mais).</p>
            </div>

            <!-- Card 3: Caixa e Comissão Imediata -->
            <div class="p-4 rounded-2xl bg-dark-bg border border-dark-border space-y-3">
              <div class="flex items-center justify-between">
                <span class="text-xs font-bold text-white flex items-center gap-2">
                  <i data-lucide="wallet" class="w-4 h-4 text-emerald-400"></i>
                  Caixa em Tempo Real
                </span>
                <span class="text-[10px] text-stone-400">Hoje</span>
              </div>
              <div class="p-3 rounded-xl bg-dark-card border border-dark-border space-y-2 text-xs">
                <div class="flex justify-between items-center">
                  <span class="text-stone-400">Faturamento do Dia:</span>
                  <span class="text-base font-extrabold text-white">R$ 1.480,00</span>
                </div>
                <div class="flex justify-between items-center text-[11px]">
                  <span class="text-stone-400">Comissão da Equipe:</span>
                  <span class="font-bold text-brand">R$ 740,00</span>
                </div>
                <div class="flex justify-between items-center text-[11px] pt-1 border-t border-dark-border">
                  <span class="text-stone-400">Líquido da Barbearia:</span>
                  <span class="font-bold text-emerald-400">R$ 740,00</span>
                </div>
              </div>
              <p class="text-[11px] text-stone-500">Sem calcular na ponta do lápis à meia-noite.</p>
            </div>

          </div>

        </div>
      </div>

    </div>
  </section>

  <!-- 2. FAIXA DE DIFERENCIAIS RÁPIDOS -->
  <section class="py-10 border-y border-dark-border bg-dark-card/40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
        <div class="space-y-1">
          <div class="text-2xl font-black text-white">3 Toques</div>
          <p class="text-xs text-stone-400">Tempo que seu cliente leva para agendar no link</p>
        </div>
        <div class="space-y-1">
          <div class="text-2xl font-black text-brand">-85% Faltas</div>
          <p class="text-xs text-stone-400">Com lembrete automático e opção de sinal Pix</p>
        </div>
        <div class="space-y-1">
          <div class="text-2xl font-black text-emerald-400">0 Senhas</div>
          <p class="text-xs text-stone-400">Cliente marca só com Nome e WhatsApp</p>
        </div>
        <div class="space-y-1">
          <div class="text-2xl font-black text-purple-400">100% Celular</div>
          <p class="text-xs text-stone-400">Funciona liso na bancada enquanto você corta</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 3. COMO FUNCIONA (A Sequência Real em 3 Passos) -->
  <section class="py-20 md:py-28" id="como-funciona">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
      
      <div class="text-center max-w-3xl mx-auto space-y-3">
        <span class="text-xs font-bold text-brand uppercase tracking-wider">Simples de Começar</span>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">Hoje mesmo sua barbearia recebe horários pelo link.</h2>
        <p class="text-stone-400 text-sm">Sem treinamento difícil, sem complicação de TI. Em 3 minutos está no ar.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
        <!-- Passo 1 -->
        <div class="p-8 rounded-3xl bg-dark-card border border-dark-border space-y-4 relative card-glow transition-all">
          <div class="w-12 h-12 rounded-2xl bg-brand/10 border border-brand/30 text-brand flex items-center justify-center font-black text-lg">
            1
          </div>
          <h3 class="text-xl font-bold text-white">Você cria a barbearia</h3>
          <p class="text-stone-400 text-xs leading-relaxed">
            Cadastra os serviços (Corte, Barba, Combos), os preços e os profissionais da sua equipe. Leva menos de 2 minutos.
          </p>
        </div>

        <!-- Passo 2 -->
        <div class="p-8 rounded-3xl bg-dark-card border border-dark-border space-y-4 relative card-glow transition-all">
          <div class="w-12 h-12 rounded-2xl bg-brand/10 border border-brand/30 text-brand flex items-center justify-center font-black text-lg">
            2
          </div>
          <h3 class="text-xl font-bold text-white">Coloca seu link na bio</h3>
          <p class="text-stone-400 text-xs leading-relaxed">
            Coloque o link no Instagram e na mensagem de ausência do WhatsApp Business. O cliente clica e escolhe o horário livre.
          </p>
        </div>

        <!-- Passo 3 -->
        <div class="p-8 rounded-3xl bg-dark-card border border-dark-border space-y-4 relative card-glow transition-all">
          <div class="w-12 h-12 rounded-2xl bg-brand/10 border border-brand/30 text-brand flex items-center justify-center font-black text-lg">
            3
          </div>
          <h3 class="text-xl font-bold text-white">O horário cai na agenda</h3>
          <p class="text-stone-400 text-xs leading-relaxed">
            Seu cliente recebe a confirmação e lembrete no WhatsApp. Você só abre a agenda e atende na cadeira.
          </p>
        </div>
      </div>

    </div>
  </section>

  <!-- 4. RECURSOS COMPLETOS (O que o sistema faz por você) -->
  <section class="py-20 md:py-28 bg-dark-card/30 border-t border-dark-border" id="recursos">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
      
      <div class="text-center max-w-3xl mx-auto space-y-3">
        <span class="text-xs font-bold text-brand uppercase tracking-wider">Tudo em um só lugar</span>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">O que sua barbearia ganha usando o NaRégua:</h2>
        <p class="text-stone-400 text-sm">Todas as ferramentas que um barbeiro moderno precisa para parar de perder dinheiro.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        
        <!-- Recurso 1 -->
        <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-3 card-glow transition-all">
          <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-brand flex items-center justify-center">
            <i data-lucide="link" class="w-5 h-5"></i>
          </div>
          <h3 class="text-base font-bold text-white">Link Exclusivo de Agendamento</h3>
          <p class="text-xs text-stone-400 leading-relaxed">
            Uma página rápida e bonita com o nome da sua barbearia. O cliente escolhe serviço, profissional e horário sem baixar nada.
          </p>
        </div>

        <!-- Recurso 2 -->
        <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-3 card-glow transition-all">
          <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center">
            <i data-lucide="message-circle" class="w-5 h-5"></i>
          </div>
          <h3 class="text-base font-bold text-white">Lembretes no WhatsApp (Menos Falta)</h3>
          <p class="text-xs text-stone-400 leading-relaxed">
            Mensagens de confirmação automáticas. O cliente responde "1" e confirma o comparecimento, acabando com cadeiras vazias.
          </p>
        </div>

        <!-- Recurso 3 -->
        <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-3 card-glow transition-all">
          <div class="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center">
            <i data-lucide="wallet" class="w-5 h-5"></i>
          </div>
          <h3 class="text-base font-bold text-white">Frente de Caixa (PDV) Descomplicado</h3>
          <p class="text-xs text-stone-400 leading-relaxed">
            Fechamento de comanda com 1 clique: Pix, cartão, dinheiro ou fiado. Adicione produtos de bancada (pomadas, cervejas) na hora.
          </p>
        </div>

        <!-- Recurso 4 -->
        <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-3 card-glow transition-all">
          <div class="w-10 h-10 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center">
            <i data-lucide="percent" class="w-5 h-5"></i>
          </div>
          <h3 class="text-base font-bold text-white">Comissões & Vales em Tempo Real</h3>
          <p class="text-xs text-stone-400 leading-relaxed">
            Divisão transparente calculada na hora. Lance adiantamentos e vales sem precisar somar comprovantes no final da semana.
          </p>
        </div>

        <!-- Recurso 5 -->
        <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-3 card-glow transition-all">
          <div class="w-10 h-10 rounded-xl bg-yellow-500/10 text-yellow-400 flex items-center justify-center">
            <i data-lucide="crown" class="w-5 h-5"></i>
          </div>
          <h3 class="text-base font-bold text-white">Clube de Assinatura Recorrente</h3>
          <p class="text-xs text-stone-400 leading-relaxed">
            Crie planos mensais (o "Netflix" do corte). Tenha receita garantida no início do mês e clientes fiéis o ano todo.
          </p>
        </div>

        <!-- Recurso 6 -->
        <div class="p-6 rounded-2xl bg-dark-card border border-dark-border space-y-3 card-glow transition-all">
          <div class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center">
            <i data-lucide="sparkles" class="w-5 h-5"></i>
          </div>
          <h3 class="text-base font-bold text-white">Máquina de Clientes Sumidos</h3>
          <p class="text-xs text-stone-400 leading-relaxed">
            O sistema identifica clientes que não cortam há mais de 30 dias e gera mensagem com link no WhatsApp para trazer eles de volta.
          </p>
        </div>

      </div>

    </div>
  </section>

  <!-- 5. TABELA DE PREÇOS (Os 3 Planos SaaS) -->
  <section class="py-20 md:py-28" id="planos">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
      
      <div class="text-center max-w-3xl mx-auto space-y-3">
        <span class="text-xs font-bold text-brand uppercase tracking-wider">Planos Transparentes</span>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">Pelo preço de um corte por mês.</h2>
        <p class="text-stone-400 text-sm">Sem taxa de adesão, sem surpresas e sem fidelidade. Cancele quando quiser.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
        
        <!-- Plano Básico -->
        <div class="p-8 rounded-3xl bg-dark-card border border-dark-border space-y-6 flex flex-col justify-between">
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="px-3 py-1 rounded-full text-xs font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">BÁSICO</span>
            </div>
            <div>
              <div class="text-3xl font-black text-white">R$ 49,90<small class="text-xs font-normal text-stone-500">/mês</small></div>
              <p class="text-xs text-stone-400 mt-1">Perfeito para o barbeiro solo que atende na sua própria cadeira.</p>
            </div>
            <ul class="text-xs text-stone-300 space-y-2.5 pt-4 border-t border-dark-border">
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> 1 Profissional / Barbeiro</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Link de Agendamento Ilimitado</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Agenda do Dia Inteligente</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Frente de Caixa Simples</li>
              <li class="flex items-center gap-2 text-stone-500"><i data-lucide="x" class="w-4 h-4 text-stone-600"></i> Sem divisão de comissões</li>
              <li class="flex items-center gap-2 text-stone-500"><i data-lucide="x" class="w-4 h-4 text-stone-600"></i> Sem clube de assinatura</li>
            </ul>
          </div>
          <button onclick="openRegisterModal('basico')" class="w-full py-3.5 px-4 rounded-xl bg-stone-800 hover:bg-stone-700 text-stone-200 font-bold text-xs transition-all border border-stone-700">
            Começar no Básico
          </button>
        </div>

        <!-- Plano Intermediário (Destaque) -->
        <div class="p-8 rounded-3xl bg-gradient-to-b from-dark-card to-dark-bg border-2 border-brand space-y-6 flex flex-col justify-between relative shadow-2xl shadow-brand/10">
          <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-brand text-black font-extrabold text-[11px] uppercase tracking-wider shadow-md">
            Mais Escolhido
          </div>
          <div class="space-y-4 pt-2">
            <div class="flex items-center justify-between">
              <span class="px-3 py-1 rounded-full text-xs font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">INTERMEDIÁRIO</span>
            </div>
            <div>
              <div class="text-3xl font-black text-white">R$ 79,90<small class="text-xs font-normal text-stone-500">/mês</small></div>
              <p class="text-xs text-stone-400 mt-1">Para barbearias com equipe, produtos e clube de corte.</p>
            </div>
            <ul class="text-xs text-stone-300 space-y-2.5 pt-4 border-t border-dark-border">
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> <b>Até 5 profissionais</b> na equipe</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Link de Agendamento Ilimitado</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Divisão de Comissões & Vales</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Venda de Produtos de Bancada</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> <b>Clube de Assinatura Recorrente</b></li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Lembretes no WhatsApp em 1 clique</li>
            </ul>
          </div>
          <button onclick="openRegisterModal('intermediario')" class="w-full py-3.5 px-4 rounded-xl bg-brand hover:bg-brand-400 text-black font-extrabold text-xs transition-all shadow-lg shadow-brand/20">
            Testar Intermediário Grátis
          </button>
        </div>

        <!-- Plano Profissional -->
        <div class="p-8 rounded-3xl bg-dark-card border border-purple-500/30 space-y-6 flex flex-col justify-between">
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="px-3 py-1 rounded-full text-xs font-bold bg-purple-500/10 text-purple-400 border border-purple-500/20">PROFISSIONAL</span>
            </div>
            <div>
              <div class="text-3xl font-black text-white">R$ 119,90<small class="text-xs font-normal text-stone-500">/mês</small></div>
              <p class="text-xs text-stone-400 mt-1">Poder total sem limites para barbearias consolidadas.</p>
            </div>
            <ul class="text-xs text-stone-300 space-y-2.5 pt-4 border-t border-dark-border">
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> <b>Profissionais ILIMITADOS</b></li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> <b>Máquina de Clientes Sumidos</b></li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Tudo do plano Intermediário incluso</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Relatórios executivos de faturamento</li>
              <li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Suporte prioritário VIP</li>
            </ul>
          </div>
          <button onclick="openRegisterModal('profissional')" class="w-full py-3.5 px-4 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-bold text-xs transition-all">
            Começar no Profissional
          </button>
        </div>

      </div>

    </div>
  </section>

  <!-- 6. PERGUNTAS FREQUENTES (Tira Dúvidas) -->
  <section class="py-20 md:py-28 bg-dark-card/30 border-t border-dark-border" id="duvidas">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
      
      <div class="text-center space-y-3">
        <span class="text-xs font-bold text-brand uppercase tracking-wider">Perguntas Rápidas</span>
        <h2 class="text-3xl font-extrabold text-white tracking-tight">Tire suas dúvidas antes de começar:</h2>
      </div>

      <div class="space-y-3 text-sm">
        <details class="p-5 rounded-2xl bg-dark-card border border-dark-border group cursor-pointer">
          <summary class="font-bold text-white flex items-center justify-between list-none">
            <span>Meu cliente precisa baixar aplicativo?</span>
            <i data-lucide="chevron-down" class="w-4 h-4 text-stone-400 group-open:rotate-180 transition-transform"></i>
          </summary>
          <p class="text-xs text-stone-400 mt-3 leading-relaxed">
            Não! Esse é o maior segredo do sistema: ele abre direto no navegador do celular (Safari ou Chrome), sem senha e sem baixar nada na Play Store. O cliente marca em 3 toques.
          </p>
        </details>

        <details class="p-5 rounded-2xl bg-dark-card border border-dark-border group cursor-pointer">
          <summary class="font-bold text-white flex items-center justify-between list-none">
            <span>O teste de 7 dias pede cartão de crédito?</span>
            <i data-lucide="chevron-down" class="w-4 h-4 text-stone-400 group-open:rotate-180 transition-transform"></i>
          </summary>
          <p class="text-xs text-stone-400 mt-3 leading-relaxed">
            Não. Você cria sua barbearia em menos de 1 minuto e testa todas as funções por 7 dias sem colocar nenhum dado de cartão.
          </p>
        </details>

        <details class="p-5 rounded-2xl bg-dark-card border border-dark-border group cursor-pointer">
          <summary class="font-bold text-white flex items-center justify-between list-none">
            <span>Funciona bem no celular do barbeiro?</span>
            <i data-lucide="chevron-down" class="w-4 h-4 text-stone-400 group-open:rotate-180 transition-transform"></i>
          </summary>
          <p class="text-xs text-stone-400 mt-3 leading-relaxed">
            Sim, 100%! O sistema foi desenhado para quem opera com uma mão na tesoura e a outra no celular na bancada: botões grandes, tema escuro que não cansa a vista e carregamento instantâneo.
          </p>
        </details>

        <details class="p-5 rounded-2xl bg-dark-card border border-dark-border group cursor-pointer">
          <summary class="font-bold text-white flex items-center justify-between list-none">
            <span>Como o sistema reduz as faltas de clientes?</span>
            <i data-lucide="chevron-down" class="w-4 h-4 text-stone-400 group-open:rotate-180 transition-transform"></i>
          </summary>
          <p class="text-xs text-stone-400 mt-3 leading-relaxed">
            Através de lembretes automáticos pré-formatados para o WhatsApp onde o cliente responde "1 para confirmar", além da opção de exigir um sinal Pix (ex: R$ 15,00) para garantir a vaga.
          </p>
        </details>

        <details class="p-5 rounded-2xl bg-dark-card border border-dark-border group cursor-pointer">
          <summary class="font-bold text-white flex items-center justify-between list-none">
            <span>Posso cancelar a assinatura quando quiser?</span>
            <i data-lucide="chevron-down" class="w-4 h-4 text-stone-400 group-open:rotate-180 transition-transform"></i>
          </summary>
          <p class="text-xs text-stone-400 mt-3 leading-relaxed">
            Sim! Não temos contrato de fidelidade e nem multa rescisória.
          </p>
        </details>
      </div>

    </div>
  </section>

  <!-- 7. CTA FINAL -->
  <section class="py-20 bg-gradient-to-t from-dark-card to-dark-bg border-t border-dark-border text-center">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
      <h2 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight">Sua barbearia organizada a partir de hoje.</h2>
      <p class="text-stone-400 text-sm max-w-xl mx-auto">
        Crie sua conta em 1 minuto, mande o link para os clientes e nunca mais perca tempo respondendo WhatsApp enquanto deveria estar faturando.
      </p>
      <div class="pt-2">
        <button onclick="openRegisterModal()" class="px-8 py-4 rounded-2xl bg-brand hover:bg-brand-400 text-black font-black text-base shadow-xl shadow-brand/20 transition-all active:scale-95">
          Criar Minha Barbearia Grátis Agora
        </button>
      </div>
    </div>
  </section>

  <!-- Rodapé Institucional -->
  <footer class="border-t border-dark-border py-8 text-xs text-stone-500 bg-dark-bg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
      <div class="flex items-center gap-2">
        <i data-lucide="scissors" class="w-4 h-4 text-brand"></i>
        <span class="font-bold text-stone-300">NaRégua</span>
        <span>© 2026 · Todos os direitos reservados</span>
      </div>
      <div class="flex items-center gap-4 text-stone-400">
        <a href="/entrar" class="hover:text-white transition-colors">Entrar na Barbearia</a>
        <a href="/cadastro" class="hover:text-brand transition-colors text-brand font-medium">Cadastrar Barbearia</a>
      </div>
    </div>
  </footer>

</div>

<!-- Modal Interativo: Criar Barbearia / Testar Grátis -->
<div id="register-modal" class="fixed inset-0 bg-black/85 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
  <div class="bg-dark-card border border-dark-border rounded-3xl max-w-md w-full p-6 sm:p-8 space-y-5 shadow-2xl relative">
    
    <div class="flex items-center justify-between pb-3 border-b border-dark-border">
      <div>
        <h3 class="text-lg font-bold text-white flex items-center gap-2">
          <i data-lucide="scissors" class="w-5 h-5 text-brand"></i>
          Criar Barbearia
        </h3>
        <p class="text-xs text-stone-400">7 dias grátis, sem pedir cartão</p>
      </div>
      <button onclick="closeRegisterModal()" class="text-stone-400 hover:text-white">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>

    <form onsubmit="event.preventDefault(); submitLandingRegister();" class="space-y-4 text-xs">
      <div>
        <label class="block font-medium text-stone-300 mb-1">Nome da Sua Barbearia *</label>
        <input type="text" id="reg_name" required placeholder="Ex: Barbearia do Marcos" oninput="autoRegSlug(this.value)"
               class="w-full px-3.5 py-2.5 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-sm">
      </div>

      <div>
        <label class="block font-medium text-stone-300 mb-1">Seu Link de Agendamento Oficial *</label>
        <div class="flex items-center bg-dark-bg border border-dark-border rounded-xl px-3 py-1">
          <span class="text-stone-500 font-mono text-xs">/b/</span>
          <input type="text" id="reg_slug" required placeholder="barbearia-do-marcos"
                 class="w-full py-2 bg-transparent outline-none text-white font-mono text-xs">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block font-medium text-stone-300 mb-1">WhatsApp da Barbearia *</label>
          <input type="tel" id="reg_phone" required placeholder="(11) 99999-9999"
                 class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
        </div>
        <div>
          <label class="block font-medium text-stone-300 mb-1">Plano Escolhido *</label>
          <select id="reg_plan" class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs font-semibold">
            <option value="basico">🟡 Básico</option>
            <option value="intermediario" selected>🟢 Intermediário</option>
            <option value="profissional">🟣 Profissional</option>
          </select>
        </div>
      </div>

      <div>
        <label class="block font-medium text-stone-300 mb-1">Seu Email (Para entrar no sistema) *</label>
        <input type="email" id="reg_email" required placeholder="seuemail@gmail.com"
               class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
      </div>

      <div>
        <label class="block font-medium text-stone-300 mb-1">Crie uma Senha *</label>
        <input type="password" id="reg_password" required value="123456"
               class="w-full px-3 py-2 rounded-xl bg-dark-bg border border-dark-border focus:border-brand outline-none text-white text-xs">
      </div>

      <button type="submit" id="btn-create-shop" class="w-full py-3.5 px-4 rounded-xl bg-brand hover:bg-brand-400 text-black font-extrabold text-sm transition-all shadow-lg shadow-brand/20 active:scale-95 flex items-center justify-center gap-2 mt-2">
        <span>Criar Barbearia & Acessar Agora</span>
        <i data-lucide="arrow-right" class="w-4 h-4"></i>
      </button>
    </form>

  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  function openRegisterModal(planTier) {
    if (planTier) {
      document.getElementById('reg_plan').value = planTier;
    }
    document.getElementById('register-modal').classList.remove('hidden');
    if (window.lucide) lucide.createIcons();
  }

  function closeRegisterModal() {
    document.getElementById('register-modal').classList.add('hidden');
  }

  function autoRegSlug(text) {
    const slug = text.toLowerCase()
      .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
      .replace(/[^a-z0-9]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "");
    document.getElementById('reg_slug').value = slug;
  }

  async function submitLandingRegister() {
    const payload = {
      name: document.getElementById('reg_name').value.trim(),
      slug: document.getElementById('reg_slug').value.trim(),
      phone: document.getElementById('reg_phone').value.trim(),
      email: document.getElementById('reg_email').value.trim(),
      password: document.getElementById('reg_password').value.trim(),
      plan_tier: document.getElementById('reg_plan').value
    };

    const btn = document.getElementById('btn-create-shop');
    btn.disabled = true;
    btn.innerText = "Criando barbearia...";

    try {
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        alert(`Sua barbearia "${payload.name}" foi criada com sucesso!\nRedirecionando para o seu painel...`);
        window.location.href = data.redirect_url || `/admin?shop_id=${data.shop_id}`;
      } else {
        alert(data.detail || "Erro ao criar barbearia.");
        btn.disabled = false;
        btn.innerText = "Criar Barbearia & Acessar Agora";
      }
    } catch (e) {
      console.error(e);
      alert("Erro ao conectar.");
      btn.disabled = false;
      btn.innerText = "Criar Barbearia & Acessar Agora";
    }
  }
</script>
{% endblock %}