@extends('layouts.marketing')

@section('title', 'Contact Inventino — Get In Touch With Our Team')
@section('description', 'Get in touch with the Inventino team. We are here to help with sales enquiries, technical support, onboarding, and general questions about our inventory software.')
@section('keywords', 'contact Inventino, inventory software support Nigeria, business management software help, Inventino sales')
@section('canonical', route('contact'))
@section('og_title', 'Contact Inventino — We Are Here to Help')
@section('og_description', 'Reach out for sales, support, or onboarding questions. Our team is ready to help your business get started with Inventino.')

@push('schema')
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "ContactPage",
    "@id": "{{ url('/contact') }}#webpage",
    "url": "{{ url('/contact') }}",
    "name": "Contact Inventino",
    "description": "Contact the Inventino team for sales, support, or onboarding questions.",
    "isPartOf": { "@id": "{{ url('/') }}/#website" },
    "publisher": { "@id": "{{ url('/') }}/#organization" }
}
</script>
@endpush

@section('content')

<!-- ─── HERO ────────────────────────────────────────────────────────────── -->
<section class="pt-32 pb-16 hero-bg relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
        <div class="absolute top-20 right-1/4 w-80 h-80 rounded-full opacity-10 blur-3xl" style="background: radial-gradient(circle, #3b82f6, transparent)"></div>
    </div>
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <div class="inline-flex items-center gap-2 badge-blue text-xs font-semibold px-3 py-1.5 rounded-full mb-5">Contact Us</div>
        <h1 class="text-5xl md:text-6xl font-black tracking-tight mb-5 leading-tight">
            We'd Love to<br><span class="gradient-text">Hear From You</span>
        </h1>
        <p class="text-slate-400 text-xl max-w-xl mx-auto">
            Whether you have a question about features, pricing, or want help getting set up — our team is ready.
        </p>
    </div>
</section>

<!-- ─── CONTACT CHANNELS ───────────────────────────────────────────────── -->
<section class="py-12 bg-navy-900">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid sm:grid-cols-3 gap-5">

            <div class="feature-card rounded-2xl p-6 text-center scroll-reveal">
                <div class="w-12 h-12 rounded-2xl mx-auto mb-4 flex items-center justify-center" style="background: rgba(59,130,246,0.15);">
                    <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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="font-bold text-white mb-1">Email Us</h3>
                <p class="text-xs text-slate-500 mb-3">We reply within 24 hours on business days.</p>
                <a href="mailto:hello@inventino.shop" class="text-blue-400 text-sm hover:underline font-medium">hello@inventino.shop</a>
            </div>

            <div class="feature-card rounded-2xl p-6 text-center scroll-reveal scroll-reveal-delay-1">
                <div class="w-12 h-12 rounded-2xl mx-auto mb-4 flex items-center justify-center" style="background: rgba(34,197,94,0.15);">
                    <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                </div>
                <h3 class="font-bold text-white mb-1">WhatsApp</h3>
                <p class="text-xs text-slate-500 mb-3">Chat with support Mon–Fri, 8am–6pm WAT.</p>
                <a href="#" class="text-green-400 text-sm hover:underline font-medium">+234 803 486 7050</a>
            </div>

            <div class="feature-card rounded-2xl p-6 text-center scroll-reveal scroll-reveal-delay-2">
                <div class="w-12 h-12 rounded-2xl mx-auto mb-4 flex items-center justify-center" style="background: rgba(139,92,246,0.15);">
                    <svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <h3 class="font-bold text-white mb-1">Documentation</h3>
                <p class="text-xs text-slate-500 mb-3">Find answers in our detailed help guides.</p>
                <a href="/documentation" class="text-violet-400 text-sm hover:underline font-medium">Browse Docs →</a>
            </div>

        </div>
    </div>
</section>

<!-- ─── CONTACT FORM + SIDEBAR ─────────────────────────────────────────── -->
<div class="section-divider"></div>
<section class="py-16 bg-navy-900">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-5 gap-12">

            <!-- Form (3/5) -->
            <div class="lg:col-span-3 scroll-reveal">
                <h2 class="text-2xl font-black text-white mb-6">Send Us a Message</h2>
                <form id="contact-form" class="space-y-5" onsubmit="handleContactSubmit(event)">

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Full Name <span class="text-red-400">*</span></label>
                            <input type="text" name="name" required placeholder="Emeka Okonkwo"
                                class="w-full px-4 py-3 rounded-xl text-white placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all contact-input">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Email Address <span class="text-red-400">*</span></label>
                            <input type="email" name="email" required placeholder="emeka@mybusiness.com"
                                class="w-full px-4 py-3 rounded-xl text-white placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all contact-input">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Phone Number</label>
                        <input type="tel" name="phone" placeholder="+234 803 486 7050"
                            class="w-full px-4 py-3 rounded-xl text-white placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all contact-input">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Subject <span class="text-red-400">*</span></label>
                        <select name="subject" required
                            class="w-full px-4 py-3 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all contact-input appearance-none">
                            <option value="" class="bg-slate-900 text-slate-400">Select a topic...</option>
                            <option value="sales" class="bg-slate-900">Sales Enquiry / Pricing</option>
                            <option value="support" class="bg-slate-900">Technical Support</option>
                            <option value="onboarding" class="bg-slate-900">Onboarding Help</option>
                            <option value="billing" class="bg-slate-900">Billing & Subscription</option>
                            <option value="partnership" class="bg-slate-900">Partnership / Reseller</option>
                            <option value="other" class="bg-slate-900">Other</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Business Name</label>
                        <input type="text" name="business" placeholder="Your Business Name (optional)"
                            class="w-full px-4 py-3 rounded-xl text-white placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all contact-input">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Message <span class="text-red-400">*</span></label>
                        <textarea name="message" required rows="5" placeholder="Tell us how we can help..."
                            class="w-full px-4 py-3 rounded-xl text-white placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all contact-input resize-none"></textarea>
                    </div>

                    <button type="submit" id="submit-btn"
                        class="btn-primary w-full py-3.5 rounded-xl text-white font-bold text-sm flex items-center justify-center gap-2 transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>

                    <!-- Success message (hidden by default) -->
                    <div id="form-success" class="hidden rounded-xl p-4 text-sm text-green-400 text-center font-semibold" style="background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);">
                        ✓ Your message has been sent! We'll get back to you within 24 hours.
                    </div>

                    <!-- Error message (hidden by default) -->
                    <div id="form-error" class="hidden rounded-xl p-4 text-sm text-red-400 text-center font-semibold" style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);"></div>

                </form>
            </div>

            <!-- Sidebar (2/5) -->
            <div class="lg:col-span-2 space-y-6 scroll-reveal scroll-reveal-delay-2">

                <div>
                    <h3 class="text-lg font-bold text-white mb-5">Frequently Asked</h3>
                    <div class="space-y-4">
                        <div class="rounded-xl p-4" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);">
                            <p class="text-white font-semibold text-sm mb-1">What's the quickest way to get help?</p>
                            <p class="text-slate-500 text-xs leading-relaxed">WhatsApp is fastest — our team responds in under an hour during business hours.</p>
                        </div>
                        <div class="rounded-xl p-4" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);">
                            <p class="text-white font-semibold text-sm mb-1">Do you offer implementation support?</p>
                            <p class="text-slate-500 text-xs leading-relaxed">Yes. All Enterprise customers receive a dedicated onboarding specialist.</p>
                        </div>
                        <div class="rounded-xl p-4" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);">
                            <p class="text-white font-semibold text-sm mb-1">Can I request a demo?</p>
                            <p class="text-slate-500 text-xs leading-relaxed">Absolutely. Choose "Sales Enquiry" in the form above and mention you'd like a live demo. We'll schedule a 30-minute session.</p>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl p-6" style="background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15);">
                    <h3 class="font-bold text-white mb-2 text-sm">Office Hours</h3>
                    <div class="space-y-1.5">
                        <div class="flex justify-between text-xs">
                            <span class="text-slate-400">Monday – Friday</span>
                            <span class="text-white font-medium">8:00 AM – 5:00 PM WAT</span>
                        </div>
                        <div class="flex justify-between text-xs">
                            <span class="text-slate-400">Saturday</span>
                            <span class="text-white font-medium">9:00 AM – 2:00 PM WAT</span>
                        </div>
                        <div class="flex justify-between text-xs">
                            <span class="text-slate-400">Sunday</span>
                            <span class="text-slate-500">Closed</span>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl p-6" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);">
                    <h3 class="font-bold text-white mb-3 text-sm">Also Reach Us On</h3>
                    <div class="space-y-2">
                        <a href="#" class="flex items-center gap-3 text-sm text-slate-400 hover:text-white transition-colors">
                            <svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                            <span>Facebook</span>
                        </a>
                        <a href="#" class="flex items-center gap-3 text-sm text-slate-400 hover:text-white transition-colors">
                            <svg class="w-4 h-4 text-sky-400" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                            <span>Twitter / X</span>
                        </a>
                        <a href="#" class="flex items-center gap-3 text-sm text-slate-400 hover:text-white transition-colors">
                            <svg class="w-4 h-4 text-pink-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                            <span>Instagram</span>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
    .contact-input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .contact-input:focus {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(59, 130, 246, 0.4);
    }
</style>
@endpush

@push('scripts')
<script>
    function handleContactSubmit(e) {
        e.preventDefault();
        const btn     = document.getElementById('submit-btn');
        const success = document.getElementById('form-success');
        const error   = document.getElementById('form-error');
        const form    = document.getElementById('contact-form');

        btn.disabled = true;
        btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg> Sending...';

        const data = new FormData(form);

        fetch('{{ route("contact.submit") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: data,
        })
        .then(async (res) => {
            if (res.ok) {
                form.querySelectorAll('input, select, textarea').forEach(el => el.value = '');
                btn.style.display = 'none';
                success.classList.remove('hidden');
                error.classList.add('hidden');
            } else {
                const json = await res.json().catch(() => ({}));
                const msg = json.message || (json.errors ? Object.values(json.errors).flat().join(' ') : 'Something went wrong. Please try again.');
                error.textContent = msg;
                error.classList.remove('hidden');
                success.classList.add('hidden');
                btn.disabled = false;
                btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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';
            }
        })
        .catch(() => {
            error.textContent = 'Network error. Please check your connection and try again.';
            error.classList.remove('hidden');
            btn.disabled = false;
            btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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';
        });
    }
</script>
@endpush