<?php
$modules = [
    [
        "icon" => '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
        "title" => "Solvion ERP Core",
        "desc" => "O coração da sua empresa. Gestão centralizada de inventário, compras, vendas e parceiros."
    ],
    [
        "icon" => '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>',
        "title" => "Ponto de Venda (POS)",
        "desc" => "Frente de caixa ultrarrápida, funciona online e offline com sincronização em tempo real."
    ],
    [
        "icon" => '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',
        "title" => "Contabilidade",
        "desc" => "Fechamentos automáticos, conciliação bancária, balanços e integração fiscal direta."
    ],
    [
        "icon" => '<svg width="28" height="28" 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" => "E-commerce",
        "desc" => "Sua loja virtual integrada ao estoque físico. Venda em múltiplos canais sem esforço."
    ],
    [
        "icon" => '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
        "title" => "Manufatura (MRP)",
        "desc" => "Planejamento de produção, ordens de serviço, roteamento e controle de chão de fábrica."
    ],
    [
        "icon" => '<svg width="28" height="28" 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="7.5 4.21 12 6.81 16.5 4.21"/><polyline points="7.5 19.79 7.5 14.6 3 12"/><polyline points="21 12 16.5 14.6 16.5 19.79"/><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" => "Assistente IA",
        "desc" => "Inteligência Artificial que prevê rupturas de estoque, sugere preços e analisa seu crescimento."
    ],
    [
        "icon" => '<svg width="28" height="28" 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" => "RH & Folha de Pagamento",
        "desc" => "Gestão de talentos, controle de ponto, emissão de recibos e avaliações de desempenho."
    ],
    [
        "icon" => '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
        "title" => "CRM Avançado",
        "desc" => "Relacionamento com cliente completo. Pipeline de vendas, campanhas e tickets de suporte."
    ]
];
?>

<section id="modulos" class="section" style="background: var(--deep-black); padding: 6rem 0; position: relative;">
  <div class="container">
    
    <div class="text-center reveal" style="max-width: 800px; margin: 0 auto 4rem auto;">
      <h2 style="margin-bottom: 1rem;">Um ecossistema de <span class="highlight">Módulos Poderosos</span></h2>
      <p>Construa o sistema perfeito para o seu negócio. Ative ou desative módulos com um clique e pague apenas pelo que usar.</p>
    </div>

    <!-- Modulos Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem;">
      
      <?php foreach($modules as $index => $mod): ?>
      <div class="glass-panel module-card reveal" style="padding: 2rem; border-radius: 20px; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 1rem; transition-delay: <?php echo ($index % 4) * 0.1; ?>s; position: relative; overflow: hidden;">
        
        <!-- Hover Glow Blob -->
        <div class="module-glow" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(12,118,54,0.1), transparent 60%); opacity: 0; transition: opacity var(--transition-normal);"></div>

        <div style="width: 56px; height: 56px; border-radius: 14px; background: var(--graphite-lighter); border: 1px solid var(--glass-border); color: var(--soft-white); display: flex; align-items: center; justify-content: center; z-index: 2; transition: all var(--transition-fast);" class="module-icon">
          <?php echo $mod['icon']; ?>
        </div>
        
        <h3 style="font-size: 1.2rem; margin: 0.5rem 0 0 0; z-index: 2;"><?php echo $mod['title']; ?></h3>
        <p style="font-size: 0.9rem; margin: 0; line-height: 1.6; z-index: 2; flex: 1;"><?php echo $mod['desc']; ?></p>

        <!-- Toggle Switch UI (Mock) -->
        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); z-index: 2;">
          <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 1px;">Módulo</span>
          <div style="width: 44px; height: 24px; border-radius: 50px; background: <?php echo ($index < 4) ? 'var(--neon-green)' : 'var(--graphite-lighter)'; ?>; position: relative; transition: all 0.3s ease; display: flex; align-items: center;">
             <div style="width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; left: <?php echo ($index < 4) ? '23px' : '3px'; ?>; transition: left 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2);"></div>
          </div>
        </div>

      </div>
      <?php endforeach; ?>

    </div>
  </div>

  <style>
    .module-card {
      cursor: pointer;
    }
    .module-card:hover {
      transform: translateY(-5px);
      border-color: rgba(12, 118, 54, 0.3);
    }
    .module-card:hover .module-glow {
      opacity: 1;
    }
    .module-card:hover .module-icon {
      background: var(--neon-green);
      color: var(--deep-black);
      border-color: var(--neon-green);
      box-shadow: var(--glow-neon);
    }
  </style>
</section>
