@extends('layouts.survey')

@section('title', 'Select Language — ' . $project->name)

@section('trail')
    <div class="trail-item done">
        <span class="num"><i class="fas fa-check" style="font-size:.55rem;"></i></span>
        <span>Who Are You?</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item active">
        <span class="num">2</span>
        <span>Language</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">3</span>
        <span>Questions</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">4</span>
        <span>Thank You</span>
    </div>
@endsection

@push('styles')
<style>
.lang-card {
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.lang-card-header {
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gray-100);
    display: flex; align-items: center; gap: .75rem;
}
.step-circle {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--green-lt); color: var(--green);
    font-weight: 800; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.lang-card-header h3 { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.lang-card-header p  { font-size: .78rem; color: var(--gray-500); margin-top: .1rem; }
.lang-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    padding: 1.5rem;
}
.lang-btn {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .6rem;
    padding: 2rem 1rem; border-radius: 14px;
    border: 2.5px solid var(--gray-200); background: var(--gray-50);
    text-decoration: none; color: var(--gray-900);
    transition: border-color .15s, background .15s, transform .15s;
    cursor: pointer; text-align: center;
}
.lang-btn:hover {
    border-color: var(--green); background: var(--green-lt);
    transform: translateY(-2px);
    color: var(--gray-900);
}
.lang-flag { font-size: 2.5rem; }
.lang-name { font-size: 1rem; font-weight: 800; }
.lang-sub  { font-size: .75rem; color: var(--gray-500); }

.back-row { margin-top: 1.25rem; text-align: center; }
.back-link {
    font-size: .82rem; color: var(--gray-500); font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.back-link:hover { color: var(--green); }
</style>
@endpush

@section('content')

<div class="lang-card">
    <div class="lang-card-header">
        <div class="step-circle">2</div>
        <div>
            <h3>Choose Your Language</h3>
            <p>আপনার ভাষা বেছে নিন &mdash; Choose the language you prefer.</p>
        </div>
    </div>

    <div class="lang-options">
        <a href="{{ route('public.feedback.questions', [$project->slug, $respondentType->slug, 'en']) }}"
           class="lang-btn">
            <div class="lang-flag">🇬🇧</div>
            <div class="lang-name">English</div>
            <div class="lang-sub">Proceed in English</div>
        </a>

        <a href="{{ route('public.feedback.questions', [$project->slug, $respondentType->slug, 'bn']) }}"
           class="lang-btn">
            <div class="lang-flag">🇧🇩</div>
            <div class="lang-name">বাংলা</div>
            <div class="lang-sub">বাংলায় এগিয়ে যান</div>
        </a>
    </div>
</div>

<div class="back-row">
    <a href="{{ route('public.feedback.respondent', $project->slug) }}" class="back-link">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

@endsection