@extends('learn.layout')
@section('title', 'Help Center')
@section('content')
<div data-filter-root><section class="help-hero"><div class="learn-shell"><p class="learn-kicker">HELP CENTER</p><h1>A little help.<br>A clearer next step.</h1><p>Find guidance on getting started, planning your project, and using this website.</p><label class="learn-search"><span class="visually-hidden">Search help articles</span><input data-filter-search type="search" placeholder="Search for answers…"></label></div></section><div class="learn-shell help-body"><div class="learn-filters" aria-label="Help categories">@foreach(['All','Getting started','Projects','Products','Sourcing','Contact','Learning'] as $category)<button type="button" data-category="{{ $category }}" aria-pressed="{{ $loop->first ? 'true' : 'false' }}">{{ $category }}</button>@endforeach</div><p data-filter-count role="status" class="filter-count"></p><div class="help-grid">@foreach(config('learn.help') as $item)<details class="help-card" data-filter-item data-category="{{ $item[0] }}"><summary><span class="help-icon" aria-hidden="true">{{ ['Getting started'=>'↗','Projects'=>'▤','Products'=>'◇','Sourcing'=>'◎','Contact'=>'✉','Learning'=>'▥'][$item[0]] }}</span><span><small>{{ $item[0] }}</small><strong>{{ $item[1] }}</strong></span><b aria-hidden="true">+</b></summary><div><p>{{ $item[2] }}</p><a href="{{ route($item[3]) }}{{ $item[3] === 'home' ? '#contact' : '' }}">{{ $item[3] === 'home' ? 'Contact us' : 'Explore the resource' }} ↗</a></div></details>@endforeach</div><p data-filter-empty hidden class="filter-empty">No matching answers. Try another term or contact us below.</p><div class="help-contact"><h2>Still have a question?</h2><p>Describe what you need help with in the enquiry form.</p><a class="learn-button" href="{{ route('home', ['service'=>'support']) }}#contact">Get in touch</a></div></div></div>
@endsection