@model PowderCoating.Application.DTOs.Kiosk.SubmitKioskJobDto
@{
    Layout = "~/Views/Shared/_KioskLayout.cshtml";
    ViewData["Title"] = "About Your Project";
    var token = ViewBag.SessionToken as Guid? ?? Guid.Empty;
}

<div class="kiosk-card">
    <h2 class="fw-bold mb-1" style="font-size:1.6rem;">What brings you in?</h2>
    <p class="text-muted mb-4">Tell us a little about what you need coated.</p>

    <form method="post" action="/Kiosk/Intake/@token/Job">
        @Html.AntiForgeryToken()

        <div class="mb-3">
            <label asp-for="JobDescription" class="form-label">Describe your project</label>
            <textarea asp-for="JobDescription" class="form-control" rows="5"
                      placeholder="e.g. Motorcycle frame, two-tone black and chrome, remove old coating first..."
                      style="min-height:160px;resize:none;"></textarea>
            <span asp-validation-for="JobDescription" class="text-danger small"></span>
        </div>

        <div class="mb-4">
            <label asp-for="HowDidYouHearAboutUs" class="form-label">How did you hear about us? <span class="text-muted fw-normal">(optional)</span></label>
            <select asp-for="HowDidYouHearAboutUs" class="form-select">
                <option value="">— Select one —</option>
                <option>Google / Online Search</option>
                <option>Friend or Family Referral</option>
                <option>Social Media</option>
                <option>Drove by the shop</option>
                <option>Returning Customer</option>
                <option>Other</option>
            </select>
        </div>

        <div class="d-flex gap-3">
            <a href="/Kiosk/Intake/@token/Contact" class="btn btn-outline-secondary"
               style="min-height:64px;border-radius:12px;font-size:1.1rem;flex:0 0 auto;padding:0 2rem;">
                <i class="bi bi-arrow-left me-1"></i> Back
            </a>
            <button type="submit" class="btn btn-primary kiosk-btn">
                Continue <i class="bi bi-arrow-right ms-2"></i>
            </button>
        </div>
    </form>
</div>