<script lang="ts">
  import { currentStep } from '$lib/stores.js';

  function startWizard() {
    currentStep.set(1); // Move to auth step
  }
</script>

<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
  <div class="container mx-auto max-w-2xl bg-white p-8 rounded-lg shadow-lg text-center">
    <div class="mb-8">
      <!-- ESN Logo placeholder -->
      <div class="mx-auto mb-6 w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center">
        <span class="text-white text-2xl font-bold">ESN</span>
      </div>
      
      <h1 class="mb-6 text-3xl font-bold text-gray-800">
        ESN Card Generator
      </h1>
      
      <p class="text-lg text-gray-700 leading-relaxed mb-6">
        Transform your Google Sheets into professional ESN membership cards with photos.
        Privacy-first: all processing happens in your browser.
      </p>
      
      <div class="text-sm text-gray-500 mb-8">
        <p class="mb-2">✓ Import data from Google Sheets</p>
        <p class="mb-2">✓ Automatic face detection and cropping</p>
        <p class="mb-2">✓ Generate text and photo PDFs</p>
        <p>✓ No data stored on our servers</p>
      </div>
    </div>
    
    <button
      on:click={startWizard}
      class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
    >
      Start Creating Cards
    </button>
  </div>
</div>
