@model clivelancaster.Models.ContactFormModel
@{
    ViewData["Title"] = "Contact";
    Layout = "~/Views/Shared/_PageLayout.cshtml";
}

<partial name="_PartialPageNavigation" />

<header class="pt-32 pb-12 bg-slate-50 text-center px-6">
    <h1 class="text-4xl md:text-5xl font-bold text-slate-900 mb-4">Let's Start a Conversation</h1>
    <p class="text-lg text-slate-600 max-w-2xl mx-auto">Whether you have a product idea to validate or need expert consulting for your enterprise, I'm here to help.</p>
</header>

<main class="flex-grow max-w-7xl mx-auto px-6 py-12 w-full">
    <div class="grid lg:grid-cols-2 gap-16">

        <div>
            <div class="mb-10">
                <h2 class="text-2xl font-bold text-slate-900 mb-6">Get in Touch</h2>
                <p class="text-slate-600 mb-8 leading-relaxed">
                    I am currently accepting new roles and consulting opportunities. Please fill out the form, and I will get back to you within 24 hours.
                </p>

                <div class="space-y-6"> 
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 text-xl mr-4 flex-shrink-0">
                            <a href="/img/CV_Clive_Lancaster.pdf" target="_blank"><i class="fas fa-download"></i></a>
                        </div>
                        <div>
                            <h3 class="font-bold text-slate-900">Download</h3>
                            <p class="text-slate-600">CV availble for <a href="/img/CV_Clive_Lancaster.pdf" target="_blank"><u>download</u></a>.</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 text-xl mr-4 flex-shrink-0">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-slate-900">Location</h3>
                            <p class="text-slate-600">Based in Sydney, Australia.<br>Available for remote work globally.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="border-t border-slate-200 pt-8">
                <h3 class="font-bold text-slate-900 mb-4">Frequently Asked Questions</h3>
                <div class="space-y-4">
                    <details class="group bg-slate-50 p-4 rounded-lg cursor-pointer">
                        <summary class="flex justify-between items-center font-medium list-none text-slate-800">
                            <span>Are you actively searching for a new role?</span>
                            <span class="transition group-open:rotate-180"><i class="fas fa-chevron-down text-sm"></i></span>
                        </summary>
                        <p class="text-slate-600 text-sm mt-3 leading-relaxed">Yes, I am always open to opportunities where I can add meaningful value and make a positive impact.</p>
                    </details>
                    <details class="group bg-slate-50 p-4 rounded-lg cursor-pointer">
                        <summary class="flex justify-between items-center font-medium list-none text-slate-800">
                            <span>Do you have a preference for full-time permanent or contract roles?</span>
                            <span class="transition group-open:rotate-180"><i class="fas fa-chevron-down text-sm"></i></span>
                        </summary>
                        <p class="text-slate-600 text-sm mt-3 leading-relaxed">Permanent roles are preferred, though I am open to contract opportunities.</p>
                    </details>
                    <details class="group bg-slate-50 p-4 rounded-lg cursor-pointer">
                        <summary class="flex justify-between items-center font-medium list-none text-slate-800">
                            <span>Do you have full working rights in Australia or UK?</span>
                            <span class="transition group-open:rotate-180"><i class="fas fa-chevron-down text-sm"></i></span>
                        </summary>
                        <p class="text-slate-600 text-sm mt-3 leading-relaxed">Yes, I have full working rights in Australia & UK.</p>
                    </details>
                </div>
            </div>
        </div>

        <div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100">
            @if (@ViewBag.Message != null)
            {

                <h2 class="text-2xl font-bold text-blue-600">Thank you for getting in touch!</h2>
                <p class="text-slate-600 mb-8 leading-relaxed">We’ve received your message and will get back to you as soon as possible.</p>
                <a href="/Home" class="px-8 py-4 bg-white text-slate-700 border border-slate-200 font-semibold rounded-lg hover:bg-slate-50 transition text-center">Back to Home<i class="fas fa-home ml-2"></i></a>
            }
            else {
            <form asp-action="Index" method="post" id="contactForm" class="space-y-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label asp-for="Name" class="incognito-field"></label>
                        <input asp-for="Name" class="form-control incognito-field" autocomplete="off" tabindex="-1" />
                            <label asp-for="NameIncognito" class="block text-sm font-semibold text-slate-700 mb-2"></label>
                        <input asp-for="NameIncognito" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="John Doe" />
                    </div>
                    <div>
                            <label asp-for="Email" class="block text-sm font-semibold text-slate-700 mb-2"></label>
                        <input asp-for="Email" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="john@example.com" />
                        <span asp-validation-for="Email" class="text-danger"></span>
                    </div>
                </div>
                <div>
                    <label asp-for="Subject" class="incognito-field"></label>
                    <input asp-for="Subject" class="form-control incognito-field" autocomplete="off" tabindex="-1" />
                        <label asp-for="SubjectIncognito" class="block text-sm font-semibold text-slate-700 mb-2"></label>
                        <select asp-for="SubjectIncognito" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition bg-white">
                        <option>General Inquiry</option>
                        <option>Job Opportunity</option>
                        <option>Software Development</option>
                        <option>Product Strategy Consulting</option>
                        <option>Speaking Opportunity</option>
                        </select>
                </div>
                <div>
                    <label asp-for="Message" class="incognito-field"></label>
                    <textarea asp-for="Message" class="form-control incognito-field" autocomplete="off" tabindex="-1"></textarea>
                        <label asp-for="MessageIncognito" for="message" class="block text-sm font-semibold text-slate-700 mb-2"></label>
                    <textarea asp-for="MessageIncognito" rows="5" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="Tell me a bit about your project..."></textarea>
                </div>
                    <button type="submit" class="w-full bg-blue-600 text-white font-bold py-4 rounded-lg hover:bg-blue-700 transition shadow-lg transform active:scale-95 flex items-center justify-center">Send Message<i class="fas fa-paper-plane ml-2"></i></button>
            </form>
            }
        </div>
     </div>
</main>