<?php
require_once __DIR__ . '/../includes/config.php';
$pdo = getDB();
$plans = $pdo->query("SELECT * FROM plans WHERE is_active = 1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$seoTitle = "BarberFlow - Sistema para Barbearia";
$seoDescription = "Sistema completo para barbearias. Agendamento online, controle financeiro, gestao de clientes.";
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $seoTitle; ?></title>
<meta name="description" content="<?php echo $seoDescription; ?>">
<meta name="keywords" content="sistema para barbearia, software barbearia, gestao barbearia, agendamento">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $seoTitle; ?>">
<meta property="og:description" content="<?php echo $seoDescription; ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script>
<style>
:root{--gold:#CCA43B;--bg-dark:#0A0A0A;--bg-darker:#050505;--bg-card:#151515;--text-primary:#FFF;--text-secondary:#B0B0B0;--text-muted:#707070;--success:#22C55E;--border:rgba(255,255,255,0.1);--gradient-gold:linear-gradient(135deg,#CCA43B 0%,#FFD700 50%,#CCA43B 100%)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg-dark);color:var(--text-primary);line-height:1.6}
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 2rem;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:800;color:var(--text-primary);text-decoration:none}
.logo iconify-icon{color:var(--gold)}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;text-decoration:none;transition:all .3s;cursor:pointer;border:none;font-size:1rem}
.btn-primary{background:var(--gradient-gold);color:#000}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(204,164,59,0.3)}
.btn-outline{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#000}
.btn-large{padding:1rem 2.5rem;font-size:1.1rem}
.hero{min-height:100vh;display:flex;align-items:center;padding:8rem 2rem 4rem;background:radial-gradient(ellipse at top right,rgba(204,164,59,0.15) 0%,transparent 50%),var(--bg-dark)}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(204,164,59,0.15);border:1px solid rgba(204,164,59,0.3);padding:.5rem 1rem;border-radius:50px;font-size:.875rem;color:var(--gold);margin-bottom:1.5rem}
.hero h1{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem}
.hero h1 span{background:var(--gradient-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem;max-width:500px}
.hero-buttons{display:flex;gap:1rem;margin-bottom:3rem}
.hero-stats{display:flex;gap:3rem}
.stat-value{font-size:2rem;font-weight:800;color:var(--gold)}
.stat-label{font-size:.875rem;color:var(--text-muted)}
.hero-mockup{background:var(--bg-card);border-radius:20px;padding:1.5rem;border:1px solid var(--border);box-shadow:0 50px 100px rgba(0,0,0,0.5);animation:float 3s ease-in-out infinite}
.mockup-header{display:flex;gap:.5rem;margin-bottom:1rem}
.mockup-dot{width:12px;height:12px;border-radius:50%}
.mockup-dot.red{background:#FF5F56}.mockup-dot.yellow{background:#FFBD2E}.mockup-dot.green{background:#27CA40}
.mockup-content{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mockup-card{background:rgba(255,255,255,0.05);padding:1rem;border-radius:12px;text-align:center}
.mockup-card iconify-icon{font-size:2rem;color:var(--gold);margin-bottom:.5rem}
.mockup-card span{font-size:.75rem;color:var(--text-muted);display:block}
.section{padding:6rem 2rem}
.section-dark{background:var(--bg-darker)}
.container{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:4rem}
.section-tag{display:inline-block;background:rgba(204,164,59,0.15);color:var(--gold);padding:.5rem 1rem;border-radius:50px;font-size:.875rem;font-weight:600;margin-bottom:1rem}
.section-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem}
.section-subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;transition:all .3s}
.feature-card:hover{border-color:rgba(204,164,59,0.3);transform:translateY(-5px)}
.feature-icon{width:60px;height:60px;background:rgba(204,164,59,0.15);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}
.feature-icon iconify-icon{font-size:1.75rem;color:var(--gold)}
.feature-card h3{font-size:1.25rem;margin-bottom:.75rem}
.feature-card p{color:var(--text-secondary);font-size:.95rem}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:start}
.pricing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative;transition:all .3s}
.pricing-card:hover{transform:translateY(-10px);border-color:rgba(204,164,59,0.3)}
.pricing-card.featured{border:2px solid var(--gold);transform:scale(1.05);z-index:10}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-gold);color:#000;padding:.4rem 1.25rem;border-radius:50px;font-size:.75rem;font-weight:700;text-transform:uppercase}
.pricing-header{text-align:center;padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.pricing-name{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.pricing-desc{font-size:.875rem;color:var(--text-muted);margin-bottom:1rem}
.pricing-price{display:flex;align-items:baseline;justify-content:center;gap:.25rem}
.pricing-currency{font-size:1.25rem;color:var(--text-secondary)}
.pricing-value{font-size:3rem;font-weight:800;color:var(--gold)}
.pricing-period{font-size:1rem;color:var(--text-muted)}
.pricing-yearly{font-size:.8rem;color:var(--success);margin-top:.5rem}
.pricing-features{list-style:none;margin-bottom:2rem}
.pricing-features li{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;font-size:.9rem;color:var(--text-secondary)}
.pricing-features iconify-icon{color:var(--success);font-size:1.25rem}
.pricing-card .btn{width:100%;justify-content:center}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem}
.testimonial-stars{color:var(--gold);font-size:1.25rem;margin-bottom:1rem}
.testimonial-text{font-size:1rem;color:var(--text-secondary);margin-bottom:1.5rem;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:1rem}
.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;color:#000}
.testimonial-info h4{font-size:1rem;margin-bottom:.25rem}
.testimonial-info span{font-size:.85rem;color:var(--text-muted)}
.cta{background:var(--gradient-gold);padding:5rem 2rem;text-align:center}
.cta h2{font-size:2.5rem;font-weight:800;color:#000;margin-bottom:1rem}
.cta p{font-size:1.25rem;color:rgba(0,0,0,0.7);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
.cta .btn{background:#000;color:var(--gold)}
.footer{background:var(--bg-darker);padding:4rem 2rem 2rem;border-top:1px solid var(--border)}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{color:var(--text-muted);font-size:.9rem;margin-top:1rem;max-width:300px}
.footer-title{font-weight:700;margin-bottom:1.5rem}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.75rem}
.footer-links a{color:var(--text-muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--text-muted)}
.social-links{display:flex;gap:1rem}
.social-links a{color:var(--text-muted);font-size:1.5rem;transition:color .2s}
.social-links a:hover{color:var(--gold)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:1024px){.pricing-grid{grid-template-columns:repeat(2,1fr)}.pricing-card.featured{transform:none}}
@media(max-width:768px){.nav-links{display:none}.hero-inner{grid-template-columns:1fr;text-align:center}.hero h1{font-size:2.5rem}.hero p{margin:0 auto 2rem}.hero-buttons{justify-content:center;flex-wrap:wrap}.hero-stats{justify-content:center}.hero-image{order:-1}.features-grid,.testimonials-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-brand p{margin-left:auto;margin-right:auto}.footer-bottom{flex-direction:column;gap:1rem}}
</style>
</head>
<body>
<header class="header">
<div class="header-inner">
<a href="/" class="logo"><iconify-icon icon="solar:scissors-bold"></iconify-icon>BarberFlow</a>
<nav class="nav-links">
<a href="#recursos">Recursos</a>
<a href="#precos">Precos</a>
<a href="#depoimentos">Depoimentos</a>
<a href="/pages/superadmin/login.php" class="btn btn-outline">Entrar</a>
<a href="#precos" class="btn btn-primary">Comecar Gratis</a>
</nav>
</div>
</header>
<section class="hero">
<div class="hero-inner">
<div class="hero-content">
<div class="hero-badge"><iconify-icon icon="solar:star-bold"></iconify-icon>+500 barbearias ja usam</div>
<h1>Sua barbearia no <span>proximo nivel</span></h1>
<p>Sistema completo para gestao de barbearias e saloes. Agendamentos, financeiro, clientes e muito mais em um so lugar.</p>
<div class="hero-buttons">
<a href="#precos" class="btn btn-primary btn-large"><iconify-icon icon="solar:rocket-bold"></iconify-icon>Comecar Gratis</a>
<a href="#recursos" class="btn btn-outline btn-large">Ver Recursos</a>
</div>
<div class="hero-stats">
<div class="stat"><div class="stat-value">500+</div><div class="stat-label">Barbearias</div></div>
<div class="stat"><div class="stat-value">50k+</div><div class="stat-label">Agendamentos/mes</div></div>
<div class="stat"><div class="stat-value">4.9</div><div class="stat-label">Avaliacao</div></div>
</div>
</div>
<div class="hero-image">
<div class="hero-mockup">
<div class="mockup-header"><span class="mockup-dot red"></span><span class="mockup-dot yellow"></span><span class="mockup-dot green"></span></div>
<div class="mockup-content">
<div class="mockup-card"><iconify-icon icon="solar:calendar-bold"></iconify-icon><span>Agendamentos</span></div>
<div class="mockup-card"><iconify-icon icon="solar:users-group-rounded-bold"></iconify-icon><span>Clientes</span></div>
<div class="mockup-card"><iconify-icon icon="solar:wallet-bold"></iconify-icon><span>Financeiro</span></div>
<div class="mockup-card"><iconify-icon icon="solar:chart-bold"></iconify-icon><span>Relatorios</span></div>
<div class="mockup-card"><iconify-icon icon="solar:bell-bold"></iconify-icon><span>Notificacoes</span></div>
<div class="mockup-card"><iconify-icon icon="solar:smartphone-bold"></iconify-icon><span>WhatsApp</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="section section-dark" id="recursos">
<div class="container">
<div class="section-header">
<span class="section-tag">Recursos</span>
<h2 class="section-title">Tudo que voce precisa para crescer</h2>
<p class="section-subtitle">Ferramentas profissionais para gerenciar sua barbearia de forma eficiente e aumentar seus lucros.</p>
</div>
<div class="features-grid">
<article class="feature-card"><div class="feature-icon"><iconify-icon icon="solar:calendar-mark-bold"></iconify-icon></div><h3>Agendamento Online</h3><p>Seus clientes agendam 24h pelo celular. Reduza faltas em ate 80% com lembretes automaticos.</p></article>
<article class="feature-card"><div class="feature-icon"><iconify-icon icon="solar:wallet-money-bold"></iconify-icon></div><h3>Controle Financeiro</h3><p>Entradas, saidas, comissoes e relatorios. Saiba exatamente quanto voce esta lucrando.</p></article>
<article class="feature-card"><div class="feature-icon"><iconify-icon icon="solar:users-group-two-rounded-bold"></iconify-icon></div><h3>Gestao de Clientes</h3><p>Historico completo, preferencias e fidelizacao. Conheca cada cliente e ofereca atendimento VIP.</p></article>
<article class="feature-card"><div class="feature-icon"><iconify-icon icon="solar:chat-round-dots-bold"></iconify-icon></div><h3>WhatsApp Integrado</h3><p>Confirmacoes e lembretes automaticos. Comunique-se com clientes sem esforco.</p></article>
<article class="feature-card"><div class="feature-icon"><iconify-icon icon="solar:graph-up-bold"></iconify-icon></div><h3>Relatorios Inteligentes</h3><p>Metricas de faturamento, servicos mais vendidos e performance da equipe em tempo real.</p></article>
<article class="feature-card"><div class="feature-icon"><iconify-icon icon="solar:smartphone-rotate-angle-bold"></iconify-icon></div><h3>App para Clientes</h3><p>Sua barbearia na palma da mao. Clientes agendam, pagam e avaliam pelo celular.</p></article>
</div>
</div>
</section>
<section class="section" id="precos">
<div class="container">
<div class="section-header">
<span class="section-tag">Precos</span>
<h2 class="section-title">Escolha o plano ideal</h2>
<p class="section-subtitle">Comece gratis e evolua conforme sua barbearia cresce. Sem surpresas, sem taxas escondidas.</p>
</div>
<div class="pricing-grid">
<?php foreach ($plans as $plan):
$features = json_decode($plan['features'], true);
if (!is_array($features)) $features = [];
$isFeatured = !empty($plan['is_featured']);
$price = floatval($plan['price_monthly']);
$priceYearly = floatval($plan['price_yearly']);
$economy = $price > 0 ? round((($price * 12) - $priceYearly) / ($price * 12) * 100) : 0;
$featureLabels = array('dashboard'=>'Painel de controle','basic_reports'=>'Relatorios basicos','reports'=>'Relatorios completos','advanced_reports'=>'Relatorios avancados','whatsapp_integration'=>'Integracao WhatsApp','whatsapp'=>'Integracao WhatsApp','api'=>'Acesso a API','custom_domain'=>'Dominio personalizado','all_features'=>'Todos os recursos','dedicated_support'=>'Suporte dedicado','white_label'=>'White Label');
$defaultFeatures = array();
if (!empty($plan['max_products'])) $defaultFeatures[] = "Ate ".$plan['max_products']." produtos";
if (!empty($plan['max_orders_per_month'])) $defaultFeatures[] = "Ate ".$plan['max_orders_per_month']." pedidos/mes";
if (!empty($plan['max_staff_users'])) $defaultFeatures[] = "Ate ".$plan['max_staff_users']." usuarios";
if (empty($plan['max_products']) && $plan['id'] !== 'free') $defaultFeatures[] = "Produtos ilimitados";
if (empty($plan['max_staff_users']) && $plan['id'] !== 'free') $defaultFeatures[] = "Usuarios ilimitados";
?>
<div class="pricing-card <?php echo $isFeatured ? 'featured' : ''; ?>">
<?php if ($isFeatured): ?><div class="pricing-badge">Mais Popular</div><?php endif; ?>
<div class="pricing-header">
<div class="pricing-name"><?php echo htmlspecialchars($plan['name']); ?></div>
<div class="pricing-desc"><?php echo htmlspecialchars($plan['description'] ?? ''); ?></div>
<div class="pricing-price">
<span class="pricing-currency">R$</span>
<span class="pricing-value"><?php echo $price == 0 ? '0' : number_format($price, 0, ',', '.'); ?></span>
<span class="pricing-period">/mes</span>
</div>
<?php if ($economy > 0): ?><div class="pricing-yearly">Anual: R$ <?php echo number_format($priceYearly, 2, ',', '.'); ?> (<?php echo $economy; ?>% off)</div><?php endif; ?>
</div>
<ul class="pricing-features">
<?php foreach ($defaultFeatures as $f): ?><li><iconify-icon icon="solar:check-circle-bold"></iconify-icon><?php echo $f; ?></li><?php endforeach; ?>
<?php foreach ($features as $f): ?><li><iconify-icon icon="solar:check-circle-bold"></iconify-icon><?php echo isset($featureLabels[$f]) ? $featureLabels[$f] : ucfirst(str_replace('_', ' ', $f)); ?></li><?php endforeach; ?>
</ul>
<a href="/pages/register.php?plan=<?php echo $plan['id']; ?>" class="btn <?php echo $isFeatured ? 'btn-primary' : 'btn-outline'; ?>"><?php echo $price == 0 ? 'Comecar Gratis' : 'Assinar Agora'; ?></a>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="section section-dark" id="depoimentos">
<div class="container">
<div class="section-header">
<span class="section-tag">Depoimentos</span>
<h2 class="section-title">O que nossos clientes dizem</h2>
<p class="section-subtitle">Mais de 500 barbearias ja transformaram seus negocios com o BarberFlow.</p>
</div>
<div class="testimonials-grid">
<article class="testimonial-card">
<div class="testimonial-stars">*****</div>
<p class="testimonial-text">"Antes eu perdia clientes por falta de organizacao. Com o BarberFlow meus agendamentos aumentaram 40% e nao perco mais nenhum horario."</p>
<div class="testimonial-author"><div class="testimonial-avatar">RM</div><div class="testimonial-info"><h4>Ricardo Mendes</h4><span>Barbearia do Rico - SP</span></div></div>
</article>
<article class="testimonial-card">
<div class="testimonial-stars">*****</div>
<p class="testimonial-text">"O controle financeiro mudou minha vida. Agora sei exatamente quanto cada barbeiro fatura e minhas comissoes estao sempre corretas."</p>
<div class="testimonial-author"><div class="testimonial-avatar">JS</div><div class="testimonial-info"><h4>Joao Santos</h4><span>Barber Kings - RJ</span></div></div>
</article>
<article class="testimonial-card">
<div class="testimonial-stars">*****</div>
<p class="testimonial-text">"A integracao com WhatsApp reduziu minhas faltas em 80%. Os clientes recebem lembrete automatico e quase ninguem mais falta."</p>
<div class="testimonial-author"><div class="testimonial-avatar">CA</div><div class="testimonial-info"><h4>Carlos Almeida</h4><span>Studio CA Barber - MG</span></div></div>
</article>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Pronto para transformar sua barbearia?</h2>
<p>Junte-se a mais de 500 barbearias que ja estao lucrando mais com o BarberFlow. Comece gratis hoje mesmo!</p>
<a href="#precos" class="btn btn-large"><iconify-icon icon="solar:rocket-bold"></iconify-icon>Comecar Gratuitamente</a>
</div>
</section>
<footer class="footer">
<div class="footer-grid">
<div class="footer-brand"><a href="/" class="logo"><iconify-icon icon="solar:scissors-bold"></iconify-icon>BarberFlow</a><p>Sistema completo para gestao de barbearias e saloes. Simplifique sua operacao e aumente seus lucros.</p></div>
<div><h4 class="footer-title">Produto</h4><ul class="footer-links"><li><a href="#recursos">Recursos</a></li><li><a href="#precos">Precos</a></li><li><a href="#depoimentos">Depoimentos</a></li></ul></div>
<div><h4 class="footer-title">Empresa</h4><ul class="footer-links"><li><a href="#">Sobre nos</a></li><li><a href="#">Blog</a></li><li><a href="#">Contato</a></li></ul></div>
<div><h4 class="footer-title">Legal</h4><ul class="footer-links"><li><a href="#">Termos de Uso</a></li><li><a href="#">Privacidade</a></li></ul></div>
</div>
<div class="footer-bottom">
<span>&copy; <?php echo date('Y'); ?> BarberFlow. Todos os direitos reservados.</span>
<div class="social-links">
<a href="#" aria-label="Instagram"><iconify-icon icon="mdi:instagram"></iconify-icon></a>
<a href="#" aria-label="Facebook"><iconify-icon icon="mdi:facebook"></iconify-icon></a>
<a href="#" aria-label="YouTube"><iconify-icon icon="mdi:youtube"></iconify-icon></a>
</div>
</div>
</footer>
<script>document.querySelectorAll('a[href^="#"]').forEach(a=>a.addEventListener('click',function(e){e.preventDefault();const t=document.querySelector(this.getAttribute('href'));if(t)t.scrollIntoView({behavior:'smooth',block:'start'})}))</script>
</body>
</html>
