@page "/contact"
@rendermode InteractiveServer

<div class="contact-page-container py-5">
    <header class="contact-header mb-5">
        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Inquiries & Submissions</span>
        <h1 class="contact-main-title fw-bold">Get In Touch</h1>
        <p class="text-muted small font-monospace mt-2">
            Lite Charms (Pty) Ltd t/a Midrand Books &bull; Reader & Author Support Desk
        </p>
    </header>

    <div class="row g-5">
        <div class="col-lg-5">
            <div class="contact-metadata-card p-4 border border-light bg-white mb-4">
                <h3 class="metadata-title mb-4">The Bookshop Desk</h3>

                <div class="meta-item mb-3">
                    <span class="meta-label text-uppercase font-monospace text-muted d-block small">Main Office</span>
                    <span class="meta-value font-monospace small">Corporate Woods, Midrand, Gauteng, 1685, South Africa</span>
                </div>

                <div class="meta-item mb-3">
                    <span class="meta-label text-uppercase font-monospace text-muted d-block small">Email Correspondence</span>
                    <span class="meta-value font-monospace small"><a href="mailto:desk@midrandbooks.co.za" class="contact-link">desk@midrandbooks.co.za</a></span>
                </div>

                <div class="meta-item mb-4">
                    <span class="meta-label text-uppercase font-monospace text-muted d-block small">Authors & Publishers</span>
                    <span class="meta-value font-monospace small text-muted">Are you an independent author or an established brand looking to publish with us? Specify your requirements in the form grid.</span>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="contact-form-panel p-4 border rounded bg-white">
                <h3 class="metadata-title mb-4">Send us a Note</h3>

                @if (HasSubmitted)
                {
                    <div class="submission-success-banner py-4 text-center">
                        <svg class="success-vector-checkmark mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <h4 class="font-monospace text-uppercase tracking-wider fs-6 fw-bold text-dark">Message Sent</h4>
                        <p class="text-muted small mb-0 px-3">
                            Thank you for reaching out. A bookstore representative or publishing helper will respond to you via email shortly.
                        </p>
                    </div>
                }
                else
                {
                    <form @onSubmit="HandleTransmissionSubmit">
                        <div class="mb-3">
                            <label class="form-label font-monospace text-uppercase text-muted extra-small">Your Name</label>
                            <input type="text" class="premium-plaintext-field w-100" required @bind="FormName" placeholder="e.g., Alexander Stone" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label font-monospace text-uppercase text-muted extra-small">Email Address</label>
                            <input type="email" class="premium-plaintext-field w-100" required @bind="FormEmail" placeholder="e.g., alex@domain.co.za" />
                        </div>

                        <div class="mb-4">
                            <label class="form-label font-monospace text-uppercase text-muted extra-small">How can we help you?</label>
                            <textarea class="premium-plaintext-field w-100" rows="5" required @bind="FormMessage" placeholder="Tell us about your book submission, order inquiries, or general publishing ideas..."></textarea>
                        </div>

                        <button type="submit" class="btn btn-premium-action w-100 py-3 d-flex align-items-center justify-content-center gap-2">
                            <span>Send Message</span>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                            </svg>
                        </button>
                    </form>
                }
            </div>
        </div>
    </div>
</div>

@code {
    private string FormName { get; set; } = string.Empty;
    private string FormEmail { get; set; } = string.Empty;
    private string FormMessage { get; set; } = string.Empty;
    private bool HasSubmitted { get; set; } = false;

    private void HandleTransmissionSubmit()
    {
        if (!string.IsNullOrWhiteSpace(FormName) && !string.IsNullOrWhiteSpace(FormEmail))
        {
            HasSubmitted = true;
            StateHasChanged();
        }
    }
}