@extends('layouts.app')

@section('title', 'Help Center')
@section('nav_help', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')
<div class="max-w-3xl">

    <div class="mb-6">
        <h1 class="text-lg font-bold text-gray-800">Help Center</h1>
        <p class="text-gray-400 text-sm mt-0.5">
            A guided path through the whole system — read the topics in order like a course,
            or jump straight to the one you need. Each topic links to the related ones and to the real screen.
        </p>
    </div>

    <script>function helpIndexData() {
        var read = [];
        try { read = JSON.parse(localStorage.getItem('pms-help-read') || '[]'); } catch (e) {}
        return { read: read, isRead: function (slug) { return this.read.indexOf(slug) !== -1; } };
    }</script>

    <div x-data="helpIndexData()" class="bg-white border-[0.5px] border-gray-200 rounded-xl divide-y divide-gray-50">
        @foreach ($topics as $i => $topic)
        <a href="{{ route('help.show', $topic['slug']) }}"
           class="flex items-start gap-4 px-5 py-4 hover:bg-teal-50/30 transition-colors group">
            <div class="flex-shrink-0 mt-0.5 w-7 h-7 rounded-full text-xs font-bold flex items-center justify-center border-[0.5px]"
                 :class="isRead('{{ $topic['slug'] }}')
                            ? 'bg-teal-600 text-white border-teal-600'
                            : 'bg-gray-50 text-gray-500 border-gray-200 group-hover:border-teal-300 group-hover:text-teal-700'">
                <span x-show="!isRead('{{ $topic['slug'] }}')">{{ $i + 1 }}</span>
                <svg x-show="isRead('{{ $topic['slug'] }}')" x-cloak class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-semibold text-gray-800 group-hover:text-teal-700 transition-colors">{{ $topic['title'] }}</p>
                <p class="text-xs text-gray-400 mt-0.5">{{ $topic['summary'] }}</p>
            </div>
            <svg class="w-4 h-4 text-gray-300 group-hover:text-teal-500 flex-shrink-0 mt-1 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </a>
        @endforeach
    </div>

    <p class="text-[11px] text-gray-400 mt-3">
        Topics you have opened are ticked on this device. Looking for the interactive walkthrough instead?
        Use the <span class="font-semibold">?</span> menu in the top bar to replay the guided tour.
    </p>
</div>
@endsection