ECommerce.Module/Components/Pages/Contact.razor

@page "/contact"
@using Common

<!-- Hero Section -->
<div class="relative w-full h-80 rounded-b-2xl overflow-hidden shadow-2xl mb-12 mt-32 md:mt-36">
    <div class="absolute inset-0 bg-cover bg-center"
        style="background-image: url(https://img.daisyui.com/images/stock/photo-1534536281715-e28d76689b25.webp);">
    </div>
    <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"></div>
    <div class="relative z-10 h-full flex flex-col justify-center items-center text-center text-white py-16 px-6">
        <h1 class="text-5xl md:text-7xl font-extrabold mb-4 tracking-tight">Get in Touch</h1>
        <p class="text-lg md:text-xl text-gray-200 max-w-2xl">We'd love to hear from you. Reach out and we'll respond as soon as possible.</p>
    </div>
</div>

<!-- Contact Content -->
<div class="max-w-7xl mx-auto px-6 lg:px-12 pb-20">

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 mb-20">

        <!-- Contact Info Cards -->
        <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-8 border border-orange-500/10 hover:border-orange-500/30 transition-all">
            <div class="w-14 h-14 rounded-xl bg-orange-500/20 flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">Email Us</h3>
            <p class="text-white/70 text-sm mb-3">For general inquiries and support</p>
            <a href="mailto:support@masstech.com" class="text-primary hover:text-orange-400 font-semibold">support@masstech.com</a>
        </div>

        <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-8 border border-orange-500/10 hover:border-orange-500/30 transition-all">
            <div class="w-14 h-14 rounded-xl bg-orange-500/20 flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">Call Us</h3>
            <p class="text-white/70 text-sm mb-3">Mon-Fri from 9am to 6pm</p>
            <a href="tel:+1234567890" class="text-primary hover:text-orange-400 font-semibold">+1 (234) 567-890</a>
        </div>

        <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-8 border border-orange-500/10 hover:border-orange-500/30 transition-all">
            <div class="w-14 h-14 rounded-xl bg-orange-500/20 flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">Visit Us</h3>
            <p class="text-white/70 text-sm mb-3">Our headquarters</p>
            <p class="text-white font-semibold">123 Innovation Drive<br>Tech District, CA 94025</p>
        </div>
    </div>

    <!-- Contact Form -->
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-10">

        <!-- Form -->
        <div class="lg:col-span-3 bg-base-100/50 backdrop-blur-sm rounded-2xl p-10 border border-orange-500/10">
            <h2 class="text-2xl font-black text-white mb-8">Send Us a Message</h2>

            <EditForm Model="contactForm" OnValidSubmit="HandleSubmit" class="space-y-8">
                <FluentValidationValidator />

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-white mb-2">First Name</label>
                        <InputText @bind-Value="contactForm.FirstName" placeholder="John"
                            class="w-full px-4 py-3 rounded-lg border border-white/10 bg-base-100/50 text-white placeholder-white/40 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all" />
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-white mb-2">Last Name</label>
                        <InputText @bind-Value="contactForm.LastName" placeholder="Doe"
                            class="w-full px-4 py-3 rounded-lg border border-white/10 bg-base-100/50 text-white placeholder-white/40 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all" />
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-white mb-2">Email Address</label>
                    <InputText @bind-Value="contactForm.Email" type="email" placeholder="john@example.com"
                        class="w-full px-4 py-3 rounded-lg border border-white/10 bg-base-100/50 text-white placeholder-white/40 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all" />
                </div>

                <div>
                    <label class="block text-sm font-semibold text-white mb-2">Subject</label>
                    <InputSelect @bind-Value="contactForm.Subject"
                        class="w-full px-4 py-3 rounded-lg border border-white/10 bg-base-100/50 text-white focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                        <option value="">Choose a topic</option>
                        <option value="general">General Inquiry</option>
                        <option value="support">Customer Support</option>
                        <option value="partnership">Partnership / Business</option>
                        <option value="feedback">Feedback</option>
                        <option value="other">Other</option>
                    </InputSelect>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-white mb-2">Your Message</label>
                    <textarea @bind="contactForm.Message" rows="6" placeholder="Tell us what's on your mind..."
                        class="w-full px-4 py-3 rounded-lg border border-white/10 bg-base-100/50 text-white placeholder-white/40 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-none"></textarea>
                </div>

                <button type="submit"
                    class="btn bg-orange-600 hover:bg-orange-700 text-white border-orange-600 btn-lg w-full shadow-xl shadow-orange-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    Send Message
                </button>
            </EditForm>
        </div>

        <!-- FAQ Section -->
        <div class="lg:col-span-2 space-y-4">
            <h2 class="text-2xl font-black text-white mb-4">Quick Answers</h2>

            <div class="bg-base-100/50 backdrop-blur-sm border border-orange-500/10 rounded-2xl p-5">
                <h3 class="text-base font-bold text-white mb-2">How fast is shipping?</h3>
                <p class="text-white/70 text-sm leading-relaxed">Standard shipping takes 3-7 business days. Express shipping (1-3 days) is also available at checkout for most locations.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm border border-orange-500/10 rounded-2xl p-5">
                <h3 class="text-base font-bold text-white mb-2">What's your return policy?</h3>
                <p class="text-white/70 text-sm leading-relaxed">We offer a 30-day money-back guarantee on all unopened items. If you're not satisfied, reach out and we'll make it right.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm border border-orange-500/10 rounded-2xl p-5">
                <h3 class="text-base font-bold text-white mb-2">Do you ship internationally?</h3>
                <p class="text-white/70 text-sm leading-relaxed">Yes! We ship to over 100 countries. International shipping rates and delivery times are calculated at checkout.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm border border-orange-500/10 rounded-2xl p-5">
                <h3 class="text-base font-bold text-white mb-2">Can I track my order?</h3>
                <p class="text-white/70 text-sm leading-relaxed">Absolutely. Once your order ships, you'll receive a tracking number via email so you can monitor your package in real time.</p>
            </div>
        </div>
    </div>
</div>

@code {
    private ContactFormModel contactForm = new();

    private async Task HandleSubmit()
    {
        // In a real app, this would send the message to a backend service
        await Task.CompletedTask;
    }

    public class ContactFormModel
    {
        public string FirstName { get; set; } = "";
        public string LastName { get; set; } = "";
        public string Email { get; set; } = "";
        public string Subject { get; set; } = "";
        public string Message { get; set; } = "";
    }
}