@extends('layouts.marketing')

@section('title', 'Help Center — Inventino')
@section('canonical', route('help.index'))
@section('og_title', 'Inventino Help Center')
@section('og_description', 'Find guides, FAQs, and tutorials to help you get the most out of Inventino.')
@section('description', 'Find answers, guides, and support for Inventino. Browse FAQs, step-by-step user guides, video tutorials, and troubleshooting articles.')

@section('content')

<!-- ─── HERO ─────────────────────────────────────────────────────────── -->
<section class="pt-32 pb-16 hero-bg">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-flex items-center gap-2 badge-green text-xs font-semibold px-3 py-1.5 rounded-full mb-5">Support</div>
        <h1 class="text-4xl md:text-5xl font-black tracking-tight mb-4">How can we help you?</h1>
        <p class="text-slate-400 text-lg max-w-xl mx-auto">Browse our documentation, watch tutorials, or search for the answer you need.</p>

        <!-- Global search -->
        <div class="mt-10 max-w-xl mx-auto">
            <div class="relative">
                <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
                </svg>
                <input
                    type="text"
                    id="help-search"
                    placeholder="Search all help articles…"
                    class="w-full pl-12 pr-4 py-4 bg-slate-800/60 border border-slate-700 rounded-2xl text-base text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition-colors shadow-lg"
                    autocomplete="off"
                >
            </div>
            <p id="search-hint" class="text-xs text-slate-600 mt-2">Press Enter to search FAQs, guides &amp; troubleshooting articles</p>
        </div>
    </div>
</section>

<!-- ─── SECTIONS GRID ─────────────────────────────────────────────────── -->
<section class="py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">

            <!-- FAQs -->
            <a href="{{ route('help.faqs') }}" class="feature-card rounded-2xl p-6 flex flex-col hover:border-blue-500/60 transition-all group">
                <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"/>
                    </svg>
                </div>
                <h2 class="text-base font-bold text-white mb-2 group-hover:text-blue-300 transition-colors">FAQs</h2>
                <p class="text-sm text-slate-400 leading-relaxed flex-1">Quick answers to the most common questions about pricing, features, security, and accounts.</p>
                <div class="mt-4 flex items-center gap-1 text-xs text-blue-400 font-semibold">
                    Browse FAQs
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                </div>
            </a>

            <!-- User Guides -->
            <a href="{{ route('help.user-guides') }}" class="feature-card rounded-2xl p-6 flex flex-col hover:border-purple-500/60 transition-all group">
                <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                </div>
                <h2 class="text-base font-bold text-white mb-2 group-hover:text-purple-300 transition-colors">User Guides</h2>
                <p class="text-sm text-slate-400 leading-relaxed flex-1">Detailed module documentation covering POS, inventory, purchases, customers, reports, and more.</p>
                <div class="mt-4 flex items-center gap-1 text-xs text-purple-400 font-semibold">
                    Browse Guides
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                </div>
            </a>

            <!-- Video Tutorials -->
            <a href="{{ route('help.video-tutorials') }}" class="feature-card rounded-2xl p-6 flex flex-col hover:border-green-500/60 transition-all group">
                <div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/>
                    </svg>
                </div>
                <h2 class="text-base font-bold text-white mb-2 group-hover:text-green-300 transition-colors">Video Tutorials</h2>
                <p class="text-sm text-slate-400 leading-relaxed flex-1">Watch hands-on walkthroughs for every Inventino feature — great for visual learners and new staff.</p>
                <div class="mt-4 flex items-center gap-1 text-xs text-green-400 font-semibold">
                    Watch Tutorials
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                </div>
            </a>

            <!-- Troubleshooting -->
            <a href="{{ route('help.troubleshooting') }}" class="feature-card rounded-2xl p-6 flex flex-col hover:border-orange-500/60 transition-all group">
                <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"/>
                    </svg>
                </div>
                <h2 class="text-base font-bold text-white mb-2 group-hover:text-orange-300 transition-colors">Troubleshooting</h2>
                <p class="text-sm text-slate-400 leading-relaxed flex-1">Step-by-step fixes for common issues — login errors, POS problems, printing, sync failures, and billing.</p>
                <div class="mt-4 flex items-center gap-1 text-xs text-orange-400 font-semibold">
                    Fix Issues
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                </div>
            </a>
        </div>

        <!-- ─── Popular Articles ─────────────────────────────────────── -->
        <div class="mb-16">
            <h2 class="text-xl font-bold text-white mb-6">Popular Articles</h2>
            <div class="grid sm:grid-cols-2 gap-3" id="popular-articles">

                <a href="{{ route('help.faqs') }}#general" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-blue-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-blue-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-blue-300 transition-colors">What is Inventino and how does it work?</p>
                        <p class="text-xs text-slate-500 mt-0.5">General · 2 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.user-guides') }}#getting-started" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-purple-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-purple-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-purple-300 transition-colors">How to set up your first branch and add products</p>
                        <p class="text-xs text-slate-500 mt-0.5">User Guide · 5 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.user-guides') }}#pos" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-green-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-green-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-green-300 transition-colors">How to process a sale using the POS terminal</p>
                        <p class="text-xs text-slate-500 mt-0.5">User Guide · 4 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.troubleshooting') }}#printing" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-orange-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-orange-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-orange-300 transition-colors">Receipt not printing — troubleshooting steps</p>
                        <p class="text-xs text-slate-500 mt-0.5">Troubleshooting · 3 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.faqs') }}#pricing" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-blue-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-blue-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-blue-300 transition-colors">Can I upgrade or downgrade my plan at any time?</p>
                        <p class="text-xs text-slate-500 mt-0.5">Pricing & Billing · 1 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.troubleshooting') }}#login" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-orange-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-orange-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-orange-300 transition-colors">I can't log in — Invalid credentials error</p>
                        <p class="text-xs text-slate-500 mt-0.5">Troubleshooting · 2 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.user-guides') }}#reports" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-purple-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-purple-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-purple-300 transition-colors">How to generate and export sales reports</p>
                        <p class="text-xs text-slate-500 mt-0.5">User Guide · 3 min read</p>
                    </div>
                </a>

                <a href="{{ route('help.faqs') }}#features" class="popular-article flex items-start gap-3 feature-card rounded-xl px-4 py-3.5 hover:border-blue-500/50 transition-all group">
                    <svg class="w-4 h-4 text-slate-500 flex-shrink-0 mt-0.5 group-hover:text-blue-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-white group-hover:text-blue-300 transition-colors">Does Inventino support multi-branch operations?</p>
                        <p class="text-xs text-slate-500 mt-0.5">Features · 2 min read</p>
                    </div>
                </a>

            </div>
        </div>

        <!-- ─── Contact Support Banner ────────────────────────────────── -->
        <div class="feature-card rounded-2xl p-8 text-center">
            <div class="w-14 h-14 rounded-2xl bg-blue-500/20 flex items-center justify-center mx-auto mb-5">
                <svg class="w-7 h-7 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Still need help?</h3>
            <p class="text-slate-400 text-sm mb-6 max-w-md mx-auto">Our support team typically responds within a few hours on business days.</p>
            <a href="{{ route('contact') }}" class="btn-primary inline-flex items-center gap-2 px-6 py-3 rounded-xl text-white font-semibold text-sm">
                Contact Support
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
                </svg>
            </a>
        </div>

    </div>
</section>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('help-search');
    const hint  = document.getElementById('search-hint');

    const destinations = [
        { route: '{{ route("help.faqs") }}',              keywords: ['faq','question','pricing','billing','plan','account','password','security','data'] },
        { route: '{{ route("help.user-guides") }}',       keywords: ['guide','how to','setup','configure','inventory','pos','purchase','report','export','import','branch','staff','role'] },
        { route: '{{ route("help.video-tutorials") }}',   keywords: ['video','watch','tutorial','walkthrough','demo'] },
        { route: '{{ route("help.troubleshooting") }}',   keywords: ['error','fix','problem','issue','login','print','receipt','sync','slow','crash','fail'] },
    ];

    input.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        const q = this.value.trim().toLowerCase();
        if (!q) return;

        // Score each destination by keyword matches
        let best = null, bestScore = 0;
        destinations.forEach(d => {
            const score = d.keywords.filter(k => q.includes(k) || k.includes(q)).length;
            if (score > bestScore) { bestScore = score; best = d; }
        });

        // Default to FAQs if no match found
        window.location.href = best ? best.route : '{{ route("help.faqs") }}';
    });

    input.addEventListener('input', function () {
        hint.textContent = this.value.trim()
            ? 'Press Enter to search'
            : 'Press Enter to search FAQs, guides & troubleshooting articles';
    });
});
</script>
@endpush