<template>
  <div class="max-w-6xl mx-auto p-6">
    <h1 class="text-4xl font-bold text-center mb-4 text-slate-900">Welcome to Service Finder</h1>
    <p class="text-lg text-slate-600 text-center mb-12 max-w-2xl mx-auto">
      Choose your experience based on how you use vehicles. Your selection will customize the dashboard and features.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
      <!-- Private Garage Card - Vibrant gradient border & playful -->
      <div 
        class="relative rounded-3xl p-8 cursor-pointer transition-all duration-300 hover:scale-[1.02] active:scale-95 bg-gradient-to-br from-white to-slate-50/80 backdrop-blur-sm border border-slate-200/60"
        :class="{ 
          'selected shadow-2xl ring-4 ring-opacity-30 ring-amber-400/50': isPrivateGarage,
          'private-garage': true 
        }"
        @click="selectMode('private_garage')"
      >
        <!-- Vibrant gradient border effect -->
        <div v-if="isPrivateGarage" class="absolute -inset-0.5 bg-gradient-to-r from-amber-400 via-orange-400 to-pink-400 rounded-3xl blur-sm opacity-70 -z-10"></div>
        
        <div class="mb-6 p-4 rounded-2xl inline-flex bg-gradient-to-br from-amber-100 to-orange-100 text-amber-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
        </div>
        <h2 class="text-2xl font-bold mb-4 text-slate-900">Private Garage</h2>
        <p class="text-slate-700 mb-6 leading-relaxed">
          Perfect for individual vehicle owners. Track expenses, maintenance, and get personalized recommendations for your personal cars, motorcycles, or recreational vehicles.
        </p>
        <ul class="mb-8 space-y-3 card-features-private">
          <li class="flex items-center text-sm text-slate-700">Personal vehicle management</li>
          <li class="flex items-center text-sm text-slate-700">Expense tracking & budgeting</li>
          <li class="flex items-center text-sm text-slate-700">Maintenance reminders</li>
          <li class="flex items-center text-sm text-slate-700">Fuel efficiency analytics</li>
        </ul>
        <div class="flex justify-between items-center">
          <span class="px-3 py-1.5 rounded-full text-xs font-semibold bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 border border-amber-200/60">For Individuals</span>
          <button 
            class="px-6 py-2.5 rounded-lg font-medium transition-all duration-200 bg-gradient-to-r from-amber-500 to-orange-500 text-white hover:from-amber-600 hover:to-orange-600 active:scale-95 shadow-md hover:shadow-lg"
            :class="{ 'ring-2 ring-amber-300 ring-offset-2': isPrivateGarage }"
          >
            {{ isPrivateGarage ? '✓ Selected' : 'Select' }}
          </button>
        </div>
      </div>

      <!-- Corporate Fleet Card - Minimalist sharp design -->
      <div 
        class="relative rounded-3xl p-8 cursor-pointer transition-all duration-300 hover:scale-[1.02] active:scale-95 bg-gradient-to-br from-white to-slate-50/80 backdrop-blur-sm border border-slate-200/60"
        :class="{ 
          'selected shadow-2xl ring-4 ring-opacity-30 ring-blue-400/50': isCorporateFleet,
          'corporate-fleet': true 
        }"
        @click="selectMode('corporate_fleet')"
      >
        <!-- Sharp business accent line -->
        <div v-if="isCorporateFleet" class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-t-3xl"></div>
        
        <div class="mb-6 p-4 rounded-2xl inline-flex bg-gradient-to-br from-blue-50 to-cyan-50 text-blue-700 border border-blue-200/40">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
          </svg>
        </div>
        <h2 class="text-2xl font-bold mb-4 text-slate-900">Corporate Fleet</h2>
        <p class="text-slate-700 mb-6 leading-relaxed">
          Designed for fleet managers and businesses. Monitor multiple vehicles, optimize TCO (Total Cost of Ownership), and manage service schedules across your entire fleet.
        </p>
        <ul class="mb-8 space-y-3 card-features-corporate">
          <li class="flex items-center text-sm text-slate-700">Multi-vehicle fleet management</li>
          <li class="flex items-center text-sm text-slate-700">TCO & ROI analytics</li>
          <li class="flex items-center text-sm text-slate-700">Driver assignment & reporting</li>
          <li class="flex items-center text-sm text-slate-700">Bulk service scheduling</li>
        </ul>
        <div class="flex justify-between items-center">
          <span class="px-3 py-1.5 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-800 border border-blue-200/60">For Businesses</span>
          <button 
            class="px-6 py-2.5 rounded-lg font-medium transition-all duration-200 bg-gradient-to-r from-blue-600 to-cyan-600 text-white hover:from-blue-700 hover:to-cyan-700 active:scale-95 shadow-md hover:shadow-lg"
            :class="{ 'ring-2 ring-blue-300 ring-offset-2': isCorporateFleet }"
          >
            {{ isCorporateFleet ? '✓ Selected' : 'Select' }}
          </button>
        </div>
      </div>
    </div>

    <div class="flex flex-col md:flex-row justify-between items-center p-6 border-t border-slate-200/60">
      <p class="text-sm text-slate-500">
        You can change this later from the header menu.
      </p>
      <button 
        class="mt-4 md:mt-0 px-8 py-3.5 bg-gradient-to-r from-blue-600 to-cyan-600 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center shadow-lg hover:shadow-xl active:scale-95"
        @click="continueToDashboard"
        :disabled="!mode"
      >
        Continue to Dashboard
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useAppModeStore } from '@/stores/appModeStore'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'

const appModeStore = useAppModeStore()
const router = useRouter()

const { mode, isPrivateGarage, isCorporateFleet } = storeToRefs(appModeStore)

function selectMode(newMode) {
  appModeStore.setMode(newMode)
}

function continueToDashboard() {
  console.log('ProfileSelector: Continuing to dashboard with mode', mode.value)
  try {
    router.push('/')
    console.log('ProfileSelector: Redirect to dashboard successful')
  } catch (error) {
    console.error('ProfileSelector: Failed to redirect to dashboard:', error)
  }
}
</script>

<style scoped>
/* Keep only pseudo-element and media query styles */
.card-features-private li::before,
.card-features-corporate li::before {
  content: '✓';
  margin-right: 0.5rem;
  font-weight: bold;
}

.card-features-private li::before {
  color: #f59e0b; /* amber-500 */
}

.card-features-corporate li::before {
  color: #06b6d4; /* cyan-500 */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid {
    gap: 1.5rem;
  }
  
  .rounded-3xl.p-8 {
    padding: 1.5rem;
  }
  
  .flex.flex-col.md\:flex-row {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>