<script setup>
import { computed } from 'vue'
import { Head, router, usePage } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'

defineOptions({ layout: AppLayout })

const page = usePage()

const isAuthenticated = computed(() => {
  return page.props.auth?.user != null
})

const userInfo = computed(() => {
  const user = page.props.auth?.user
  if (!user) return null

  const parts = []
  if (user.job_title) parts.push(user.job_title)
  if (user.company_name) {
    if (parts.length > 0) {
      parts.push('at', user.company_name)
    } else {
      parts.push(user.company_name)
    }
  }

  return parts.length > 0 ? parts.join(' ') : null
})

const handleContinue = () => {
  router.post('/screening')
}
</script>

<template>
    <Head title="Welcome" />

    <div class="flex items-center justify-center py-16">
        <div class="text-center max-w-2xl mx-auto px-4">
            <h1 class="text-4xl font-bold text-white mb-4">Go / No Go</h1>
            <p v-if="userInfo" class="text-gray-400 mb-4">
                {{ userInfo }}
            </p>
            <p class="text-gray-400 mb-4 text-lg">
                Baker Tilly International Go/No Go Checklist
            </p>
            <p class="text-gray-400 mb-8">
                This tool helps you evaluate business opportunities through a structured assessment process.
                You will first complete a short pre-screening questionnaire, followed by a detailed category-specific checklist
                to determine whether to pursue (Go), decline (No Go), or escalate (Consult Leadership) an opportunity.
            </p>
            <AppButton v-if="isAuthenticated" size="lg" @click="handleContinue" data-cy="start-screening">
                Continue
            </AppButton>
            <AppButton v-else size="lg" href="/login" external>
                Log in
            </AppButton>
        </div>
    </div>
</template>
