<section id="demo" class="section" style="padding-top: 4rem;">
  <div class="container">
    
    <div class="text-center reveal" style="max-width: 800px; margin: 0 auto 4rem auto;">
      <h2 style="margin-bottom: 1rem;">Controle absoluto em uma <span class="highlight">interface linda</span></h2>
      <p>Nosso dashboard foi projetado para fornecer insights profundos sem sobrecarregar sua visão. Dark mode premium por padrão.</p>
    </div>

    <!-- Big Dashboard Mockup -->
    <div class="glass-panel reveal" style="padding: 1rem; border-radius: 20px; box-shadow: var(--shadow-premium), var(--glow-neon-strong); margin: 0 auto; max-width: 1100px;">
      
      <!-- Window Controls -->
      <div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem 1rem 1rem; border-bottom: 1px solid var(--glass-border);">
        <div style="width: 12px; height: 12px; border-radius: 50%; background: #ff5f56;"></div>
        <div style="width: 12px; height: 12px; border-radius: 50%; background: #ffbd2e;"></div>
        <div style="width: 12px; height: 12px; border-radius: 50%; background: #27c93f;"></div>
        <div style="flex: 1; text-align: center; color: var(--text-muted); font-size: 0.8rem; font-family: var(--font-sans);">app.solvion.com/dashboard</div>
      </div>

      <!-- App Interface -->
      <div style="display: flex; height: 600px; background: var(--deep-black); border-radius: 0 0 12px 12px; overflow: hidden;">
        
        <!-- Sidebar -->
        <div style="width: 250px; border-right: 1px solid var(--glass-border); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 2rem;">
          <div style="font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--soft-white);">Solvion<span style="color: var(--neon-green)">.</span></div>
          
          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <div style="padding: 0.8rem 1rem; border-radius: 8px; background: rgba(12,118,54,0.1); color: var(--neon-green); font-weight: 500; display: flex; align-items: center; gap: 0.8rem;">
              <svg width="18" height="18" 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>
              Dashboard
            </div>
            <div style="padding: 0.8rem 1rem; border-radius: 8px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 0.8rem;">
              <svg width="18" height="18" 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>
              Clientes
            </div>
            <div style="padding: 0.8rem 1rem; border-radius: 8px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 0.8rem;">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
              Financeiro
            </div>
            <div style="padding: 0.8rem 1rem; border-radius: 8px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 0.8rem;">
              <svg width="18" height="18" 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>
              Analytics
            </div>
          </div>
        </div>

        <!-- Main Area -->
        <div style="flex: 1; padding: 2rem; overflow-y: auto; background: var(--graphite);">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h3 style="margin: 0;">Visão Geral</h3>
            <div style="padding: 0.5rem 1rem; background: var(--graphite-light); border: 1px solid var(--glass-border); border-radius: 8px; font-size: 0.85rem;">Últimos 30 dias</div>
          </div>

          <!-- Cards Row -->
          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
            <div style="background: var(--graphite-light); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--glass-border);">
              <div style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem;">Receita Recorrente (MRR)</div>
              <div style="font-size: 2rem; font-family: var(--font-display); font-weight: 700; color: var(--soft-white);">84.500 MT</div>
              <div style="color: var(--neon-green); font-size: 0.8rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.2rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg> +12.5% vs mês anterior
              </div>
            </div>
            <div style="background: var(--graphite-light); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--glass-border);">
              <div style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem;">Novos Assinantes</div>
              <div style="font-size: 2rem; font-family: var(--font-display); font-weight: 700; color: var(--soft-white);">142</div>
              <div style="color: var(--neon-green); font-size: 0.8rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.2rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg> +5.2% vs mês anterior
              </div>
            </div>
            <div style="background: var(--graphite-light); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--glass-border);">
              <div style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem;">Churn Rate</div>
              <div style="font-size: 2rem; font-family: var(--font-display); font-weight: 700; color: var(--soft-white);">1.2%</div>
              <div style="color: #ff5f56; font-size: 0.8rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.2rem;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg> -0.4% vs mês anterior
              </div>
            </div>
          </div>

          <!-- Chart Box -->
          <div style="background: var(--graphite-light); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; height: 250px; display: flex; flex-direction: column;">
            <div style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">Crescimento de Receita</div>
            <div style="flex: 1; display: flex; align-items: flex-end; gap: 1rem; padding-top: 2rem;">
               <!-- Bars -->
               <div style="flex: 1; background: var(--graphite-lighter); border-radius: 4px 4px 0 0; height: 30%; position: relative;"></div>
               <div style="flex: 1; background: var(--graphite-lighter); border-radius: 4px 4px 0 0; height: 45%;"></div>
               <div style="flex: 1; background: var(--graphite-lighter); border-radius: 4px 4px 0 0; height: 40%;"></div>
               <div style="flex: 1; background: var(--graphite-lighter); border-radius: 4px 4px 0 0; height: 60%;"></div>
               <div style="flex: 1; background: var(--graphite-lighter); border-radius: 4px 4px 0 0; height: 55%;"></div>
               <div style="flex: 1; background: var(--graphite-lighter); border-radius: 4px 4px 0 0; height: 75%;"></div>
               <div style="flex: 1; background: var(--neon-gradient); box-shadow: var(--glow-neon); border-radius: 4px 4px 0 0; height: 95%;"></div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

  <style>
    @media (max-width: 992px) {
      #demo .glass-panel > div:nth-child(2) {
        flex-direction: column;
        height: auto !important;
      }
      /* Oculta a sidebar no mobile para não quebrar o layout */
      #demo .glass-panel > div:nth-child(2) > div:nth-child(1) {
        display: none !important;
      }
      /* Ajusta o padding da área principal */
      #demo .glass-panel > div:nth-child(2) > div:nth-child(2) {
        padding: 1.5rem !important;
      }
      /* Empilha os KPI Cards em uma coluna */
      #demo .glass-panel > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
        grid-template-columns: 1fr !important;
      }
    }
  </style>
</section>
