react-demo.php

<?php
require_once __DIR__ . '/src/Bootstrap.php';
\SoftEdge\Env::load(__DIR__);
\SoftEdge\Bootstrap::init();
include 'components/header.php';
?>

<!-- REACT DEMO PAGE -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
  <!-- Background -->
  <div class="absolute inset-0 -z-10">
    <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div>
    <div class="absolute inset-0 opacity-30">
      <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div>
      <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
    </div>
  </div>

  <!-- Content -->
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <div class="text-center space-y-12">

      <!-- Badge -->
      <div class="inline-block px-4 py-2 bg-cyan-500/10 rounded-full border border-cyan-500/20 backdrop-blur-sm">
        <span class="text-cyan-400 text-sm font-semibold uppercase tracking-wider">
          ⚛️ React Integration Demo
        </span>
      </div>

      <!-- Title -->
      <div class="space-y-6">
        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">
          <span class="block text-white mb-2">React + PHP</span>
          <span class="block bg-linear-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">
            Integração Completa
          </span>
        </h1>

        <p class="text-base sm:text-lg md:text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
          Demonstração da integração perfeita entre React e PHP no SoftEdge Corporation website.
          <br class="hidden sm:block">
          Componentes modulares, estado compartilhado e performance otimizada.
        </p>
      </div>

      <!-- React App Container -->
      <div class="max-w-4xl mx-auto">
        <div class="relative">
          <div class="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 rounded-3xl blur-3xl"></div>

          <div class="relative bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-3xl p-8">
            <!-- React App will be mounted here -->
            <div id="root" class="min-h-[400px] flex items-center justify-center">
              <div class="text-center space-y-4">
                <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mx-auto animate-pulse">
                  <i data-lucide="loader-2" class="w-8 h-8 text-cyan-400 animate-spin"></i>
                </div>
                <p class="text-gray-400">Carregando aplicação React...</p>
              </div>
            </div>

            <!-- Fallback for when React is not loaded -->
            <noscript>
              <div class="text-center py-8">
                <i data-lucide="alert-triangle" class="w-16 h-16 text-yellow-400 mx-auto mb-4"></i>
                <h3 class="text-xl font-bold text-white mb-2">JavaScript Necessário</h3>
                <p class="text-gray-400">Esta página requer JavaScript para funcionar corretamente.</p>
              </div>
            </noscript>
          </div>
        </div>
      </div>

      <!-- Info Cards -->
      <div class="grid sm:grid-cols-3 gap-6 lg:gap-8 mt-16 max-w-4xl mx-auto">
        <!-- Info 1 -->
        <div class="text-center">
          <div class="w-12 h-12 bg-cyan-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
            <i data-lucide="zap" class="w-6 h-6 text-cyan-400"></i>
          </div>
          <h3 class="text-white font-semibold mb-2">Performance</h3>
          <p class="text-gray-400 text-sm">Componentes otimizados com lazy loading</p>
        </div>

        <!-- Info 2 -->
        <div class="text-center">
          <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
            <i data-lucide="code-2" class="w-6 h-6 text-blue-400"></i>
          </div>
          <h3 class="text-white font-semibold mb-2">Modular</h3>
          <p class="text-gray-400 text-sm">Componentes reutilizáveis e manuteníveis</p>
        </div>

        <!-- Info 3 -->
        <div class="text-center">
          <div class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
            <i data-lucide="refresh-cw" class="w-6 h-6 text-purple-400"></i>
          </div>
          <h3 class="text-white font-semibold mb-2">Dinâmico</h3>
          <p class="text-gray-400 text-sm">Estado reativo e interações fluidas</p>
        </div>
      </div>

      <!-- Back to Home -->
      <div class="pt-12">
        <a href="index.php" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 transition-colors group">
          <i data-lucide="arrow-left" class="w-5 h-5 group-hover:-translate-x-1 transition-transform"></i>
          <span>Voltar ao início</span>
        </a>
      </div>

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

<!-- Load React App -->
<script>
  // Load React app when DOM is ready
  document.addEventListener('DOMContentLoaded', function() {
    // Check if React bundle exists
    fetch('/dist/main.js')
      .then(response => {
        if (response.ok) {
          // Load React bundle
          const script = document.createElement('script');
          script.src = '/dist/main.js';
          script.onload = function() {
            console.log('React app loaded successfully');
          };
          script.onerror = function() {
            console.error('Failed to load React app');
            showFallback();
          };
          document.head.appendChild(script);
        } else {
          console.warn('React bundle not found, showing fallback');
          showFallback();
        }
      })
      .catch(error => {
        console.error('Error checking React bundle:', error);
        showFallback();
      });
  });

  function showFallback() {
    const root = document.getElementById('root');
    if (root) {
      root.innerHTML = `
        <div class="text-center space-y-4">
          <div class="w-16 h-16 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto">
            <i data-lucide="alert-triangle" class="w-8 h-8 text-yellow-400"></i>
          </div>
          <h3 class="text-xl font-bold text-white">React App Indisponível</h3>
          <p class="text-gray-400 text-sm">O aplicativo React não foi carregado. Execute <code class="bg-slate-800 px-2 py-1 rounded text-xs">npm run build</code> para gerar os arquivos.</p>
        </div>
      `;
    }
  }
</script>

<?php include 'components/footer.php'; ?>

<!-- SCRIPTS -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Initialize Lucide icons
    lucide.createIcons();
  });
</script>

<style>
  /* Custom styles for React integration */
  #root {
    transition: opacity 0.3s ease;
  }

  #root.fade-in {
    opacity: 1;
  }

  /* Loading animation */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  /* Gradient animation */
  @keyframes gradient-shift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .bg-linear-to-r {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }
</style>