// Frontend entry point
// This is where your application logic starts

const app = document.getElementById('app');

if (app) {
  app.innerHTML = `
    <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
      <div class="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">NewApproach</h1>
        <p class="text-gray-600 mb-6">Full-stack TypeScript + Hono + TailwindCSS</p>
        
        <button 
          id="fetchBtn" 
          class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition"
        >
          Fetch API Info
        </button>
        
        <div id="result" class="mt-6 p-4 bg-gray-50 rounded hidden">
          <pre id="resultContent" class="text-sm text-gray-700 whitespace-pre-wrap"></pre>
        </div>
      </div>
    </div>
  `;

  // temporary: basic API integration example
  document.getElementById('fetchBtn').addEventListener('click', async () => {
    try {
      const response = await fetch('/api/info');
      const data = await response.json();
      
      const resultDiv = document.getElementById('result');
      const resultContent = document.getElementById('resultContent');
      
      resultContent.textContent = JSON.stringify(data, null, 2);
      resultDiv.classList.remove('hidden');
    } catch (error) {
      console.error('Error fetching API:', error);
    }
  });
}