@page
@model ContactModel
@{
    ViewData["Title"] = "Contact";
}

<!-- 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> Get in Touch
            </span>
            <h1 class="text-4xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
                Contact <span class="text-[#1c8098]">Plus Health Tech</span>
            </h1>
            <p class="text-lg text-slate-600">
                Questions about interoperability, product fit, or a live demo — send us a note and we'll get back to you.
            </p>
        </div>
    </div>
</section>

<!-- Contact 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">Message sent</h2>
                <p class="text-slate-600">@Model.Success</p>
                <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>
            </div>
        }
        else
        {
            <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm">
                <form asp-page="/Contact" 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">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="Phone" class="block text-sm font-semibold text-slate-700 mb-1.5">Phone</label>
                            <input asp-for="Phone" type="tel" 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="+1 555 0100" />
                            <span asp-validation-for="Phone" 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">Message *</label>
                        <textarea asp-for="Message" rows="6" 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 what you're trying to solve…"></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">
                            Send message <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 reply to the email address you provide — nothing else is stored.
                        </p>
                    </div>
                </form>
            </div>
        }
    </div>
</section>

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