@page
@model RequestDemoModel
@{
    ViewData["Title"] = "Request Demo";
}

<!-- Hero Section -->
<section class="relative overflow-hidden pt-16 pb-16 lg:pt-24 lg:pb-20 bg-gradient-to-b from-white via-slate-50 to-brand-light/30">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="max-w-3xl mx-auto space-y-4 text-center">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-light text-brand text-xs font-bold uppercase tracking-wider">
                <i class="fa-solid fa-circle-nodes"></i> See It In Action
            </span>
            <h1 class="text-4xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
                Request a <span class="text-[#1c8098]">Live Demo</span>
            </h1>
            <p class="text-lg text-slate-600">
                See how interoperable Clinical Decision Support, Patient Management, and Veterinary platforms fit your practice — in a walkthrough tailored to your team.
            </p>
            <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 pt-2 text-sm text-slate-600 font-medium">
                <span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-brand"></i> FHIR®-ready interoperability</span>
                <span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-brand"></i> 24/7 clinical support</span>
                <span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-brand"></i> 99.9% system uptime</span>
            </div>
        </div>
    </div>
</section>

<!-- Request Demo Form -->
<section class="pb-24 bg-slate-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        @if (Model.Error != null)
        {
            <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-red-800 text-sm flex items-start gap-3">
                <i class="fa-solid fa-circle-exclamation mt-0.5"></i>
                <span>@Model.Error</span>
            </div>
        }

        @if (Model.Success != null)
        {
            <div class="bg-white p-8 rounded-2xl border border-emerald-200 shadow-sm text-center space-y-4">
                <div class="w-14 h-14 mx-auto rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl">
                    <i class="fa-solid fa-check"></i>
                </div>
                <h2 class="text-xl font-bold text-slate-900">Demo request sent</h2>
                <p class="text-slate-600">@Model.Success</p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
                    <a href="/" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:underline">
                        <i class="fa-solid fa-arrow-left text-xs"></i> Back to home
                    </a>
                    <a href="/Contact" class="inline-flex items-center gap-1 text-slate-600 font-semibold text-sm hover:text-brand hover:underline">
                        Prefer to talk? Visit the Contact page <i class="fa-solid fa-arrow-right text-xs"></i>
                    </a>
                </div>
            </div>
        }
        else
        {
            <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm">
                <form asp-page="/RequestDemo" method="post">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label asp-for="Name" class="block text-sm font-semibold text-slate-700 mb-1.5">Full name *</label>
                            <input asp-for="Name" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="Dr. Jane Smith" />
                            <span asp-validation-for="Name" class="mt-1 block text-xs text-red-600"></span>
                        </div>
                        <div>
                            <label asp-for="Email" class="block text-sm font-semibold text-slate-700 mb-1.5">Work email *</label>
                            <input asp-for="Email" type="email" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="jane@clinic.org" />
                            <span asp-validation-for="Email" class="mt-1 block text-xs text-red-600"></span>
                        </div>
                        <div>
                            <label asp-for="Organization" class="block text-sm font-semibold text-slate-700 mb-1.5">Organization *</label>
                            <input asp-for="Organization" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="Acme Health" />
                            <span asp-validation-for="Organization" class="mt-1 block text-xs text-red-600"></span>
                        </div>
                        <div>
                            <label asp-for="PracticeType" class="block text-sm font-semibold text-slate-700 mb-1.5">Practice type</label>
                            <select asp-for="PracticeType" asp-items="Model.PracticeTypeOptions" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"></select>
                            <span asp-validation-for="PracticeType" class="mt-1 block text-xs text-red-600"></span>
                        </div>
                        <div>
                            <label asp-for="ProductsOfInterest" class="block text-sm font-semibold text-slate-700 mb-1.5">Products of interest</label>
                            <select asp-for="ProductsOfInterest" asp-items="Model.ProductsOfInterestOptions" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"></select>
                            <span asp-validation-for="ProductsOfInterest" class="mt-1 block text-xs text-red-600"></span>
                        </div>
                    </div>

                    <div class="mt-5">
                        <label asp-for="Message" class="block text-sm font-semibold text-slate-700 mb-1.5">Anything you'd like us to know?</label>
                        <textarea asp-for="Message" rows="5" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="Tell us about your setup, go-live timeline, or anything you'd like to see…"></textarea>
                        <span asp-validation-for="Message" class="mt-1 block text-xs text-red-600"></span>
                    </div>

                    <div class="mt-6 flex flex-col sm:flex-row items-center gap-4">
                        <button type="submit" class="w-full sm:w-auto bg-[#1c8098] hover:bg-[#145f72] text-white font-semibold px-8 py-3.5 rounded-xl shadow-sm shadow-brand/20 transition-all">
                            Request demo <i class="fa-solid fa-arrow-right ml-2"></i>
                        </button>
                        <p class="text-xs text-slate-500 flex items-center gap-2">
                            <i class="fa-solid fa-shield-halved text-brand"></i>
                            We'll only use your details to schedule your demo.
                        </p>
                    </div>
                </form>
            </div>
        }

        <!-- Secondary CTA -->
        <div class="mt-8 text-center">
            <p class="text-sm text-slate-500">
                Prefer to talk?
                <a href="/Contact" class="text-brand font-semibold hover:underline">Visit the Contact page</a>
                <i class="fa-solid fa-arrow-right text-xs inline-block"></i>
            </p>
        </div>
    </div>
</section>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}