<?php
$features = [
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
        "title" => "Gestão de Vendas",
        "desc" => "Automatize seu funil de vendas, crie propostas em segundos e feche mais negócios."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 10h20"/></svg>',
        "title" => "Controle Financeiro",
        "desc" => "Fluxo de caixa em tempo real, emissão de notas e controle de inadimplência integrado."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
        "title" => "Gestão de Clientes",
        "desc" => "CRM completo para acompanhar o histórico de cada cliente e aumentar a retenção."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>',
        "title" => "Controle de Estoque",
        "desc" => "Evite rupturas. Inventário sincronizado com suas vendas e alertas automáticos."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>',
        "title" => "Relatórios Inteligentes",
        "desc" => "Decisões baseadas em dados. Gere relatórios complexos com apenas um clique."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>',
        "title" => "Dashboard em Tempo Real",
        "desc" => "Acompanhe os principais KPIs da sua empresa em uma tela moderna e intuitiva."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
        "title" => "Multiusuário & Segurança",
        "desc" => "Controle de acesso granular, logs de auditoria e segurança de nível bancário."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
        "title" => "Automação",
        "desc" => "Reduza o trabalho manual com workflows automatizados de ponta a ponta."
    ],
    [
        "icon" => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83M22 12A10 10 0 0 0 12 2v10z"/></svg>',
        "title" => "Analytics Preditivo",
        "desc" => "Antecipe tendências de mercado e comportamento do consumidor com IA."
    ]
];
?>

<section id="funcionalidades" class="section" style="background: var(--graphite-light); position: relative; overflow: hidden;">
  <div class="container">
    
    <div class="text-center reveal" style="max-width: 800px; margin: 0 auto 5rem auto;">
      <h2 style="margin-bottom: 1rem;">Tudo o que você precisa em <span class="highlight">um só lugar</span></h2>
      <p>Substitua dezenas de ferramentas desconexas por uma plataforma all-in-one poderosa e elegante.</p>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2rem;">
      
      <?php foreach($features as $index => $feature): ?>
      <div class="glass-panel feature-card reveal" style="padding: 2rem; transition-delay: <?php echo $index * 0.1; ?>s;">
        <div class="feature-icon" style="width: 50px; height: 50px; border-radius: 12px; background: var(--neon-green-dim); color: var(--neon-green); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: all var(--transition-fast);">
          <?php echo $feature['icon']; ?>
        </div>
        <h3 style="font-size: 1.25rem; margin-bottom: 1rem;"><?php echo $feature['title']; ?></h3>
        <p style="font-size: 0.95rem; margin-bottom: 0; line-height: 1.5;"><?php echo $feature['desc']; ?></p>
      </div>
      <?php endforeach; ?>

    </div>
  </div>

  <style>
    .feature-card:hover .feature-icon {
      background: var(--neon-green);
      color: var(--deep-black);
      transform: scale(1.1) rotate(5deg);
      box-shadow: var(--glow-neon);
    }
  </style>
</section>
