<template>
  <div class="p-8 bg-blue-100">
    <h1 class="text-4xl font-bold text-blue-800 mb-4">Basic Styling Test</h1>
    <p class="text-lg text-gray-700 mb-4">This tests if Tailwind CSS is working properly.</p>
    
    <div class="bg-white p-6 rounded-lg shadow-lg mb-4">
      <h2 class="text-2xl font-semibold text-gray-800 mb-2">White Card</h2>
      <p class="text-gray-600">If you can see styling, Tailwind is working!</p>
    </div>

    <button 
      @click="counter++" 
      class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
      Click Count: {{ counter }}
    </button>

    <div class="mt-4 p-4 bg-yellow-100 border-l-4 border-yellow-500">
      <p class="text-yellow-700">
        <strong>Test Results:</strong>
      </p>
      <ul class="list-disc list-inside text-yellow-600 mt-2">
        <li>Background colors: {{ hasColors ? '✅ Working' : '❌ Not working' }}</li>
        <li>Padding/margins: {{ hasSpacing ? '✅ Working' : '❌ Not working' }}</li>
        <li>Typography: {{ hasTypography ? '✅ Working' : '❌ Not working' }}</li>
        <li>Reactivity: {{ counter > 0 ? '✅ Working' : '❌ Click button to test' }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const counter = ref(0);

// These would only be true if CSS is loading properly
const hasColors = ref(true); // We'll assume true for now
const hasSpacing = ref(true);
const hasTypography = ref(true);
</script>