@extends('layouts.main')

@section('title', 'ÓKEA - Novidades')
@section('description', 'Guias práticos sobre execução da produção, indicadores do chão de fábrica e organização da manutenção.')
@section('keywords', 'okea', 'conteúdos', 'novidades', 'indústria 4.0', 'manutenção', 'produção')

@section('navbar')
    @include('components.okea.home.nav')
@endsection

@section('footer')
    @include('components.okea.home.footer')
@endsection

@section('content')

    {{-- HERO --}}
    @php $destaque = $posts->first(); @endphp
    <section class="ast-hero nv-hero {{ $destaque ? 'has-feat' : '' }}">
        <div class="ast-container">
            <div class="nv-hero-grid">
                <div class="nv-hero-copy">
                    <span class="section-label">{{ __('messages.novidades-hero-label') }}</span>
                    <h1 class="nv-hero-title">{{ __('messages.novidades-hero-title') }}</h1>
                    <p class="nv-hero-desc">{{ __('messages.novidades-hero-desc') }}</p>
                </div>

                @if($destaque)
                    <a href="{{ route('novidades.show', $destaque->slug) }}" class="nv-feat">
                        <div class="nv-feat-img" @if($destaque->capa) style="background-image:url('{{ asset('img/uploads/' . $destaque->capa) }}')" @endif>
                            <span class="nv-feat-badge">{{ __('messages.novidades-feat-badge') }}</span>
                        </div>
                        <div class="nv-feat-body">
                            @if($destaque->category)
                                <span class="nv-feat-cat">{{ $destaque->category->name }}</span>
                            @endif
                            <h2 class="nv-feat-title">{{ $destaque->title }}</h2>
                            <p class="nv-feat-desc">{{ \Illuminate\Support\Str::limit(strip_tags($destaque->description), 110) }}</p>
                            <span class="nv-feat-link">{{ __('messages.novidades-feat-link') }}
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0">
                                    <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
                                </svg>
                            </span>
                        </div>
                    </a>
                @endif
            </div>
        </div>
    </section>

    {{-- LISTA + FILTROS --}}
    <section class="akt-section akt-bg-white">
        <div class="ast-container">
            @php $categorias = $posts->pluck('category')->filter()->unique('id')->sortBy('name')->values(); @endphp

            @if($categorias->isNotEmpty())
                <div class="nv-filters">
                    <button type="button" class="nv-tab is-active" data-filter="all">{{ __('messages.novidades-filter-all') }}</button>
                    @foreach($categorias as $cat)
                        <button type="button" class="nv-tab" data-filter="{{ $cat->name }}">{{ $cat->name }}</button>
                    @endforeach
                </div>
            @endif

            @if($posts->isEmpty())
                <p class="nv-empty">{{ __('messages.novidades-empty') }}</p>
            @else
                <div class="nv-grid">
                    @foreach($posts as $post)
                        <a href="{{ route('novidades.show', $post->slug) }}" class="nv-card" data-category="{{ $post->category?->name }}">
                            <div class="nv-card-img" @if($post->capa) style="background-image:url('{{ asset('img/uploads/' . $post->capa) }}')" @endif>
                                @if($post->category)
                                    <span class="nv-pill">{{ $post->category->name }}</span>
                                @endif
                            </div>
                            <div class="nv-card-body">
                                <h3 class="nv-card-title">{{ $post->title }}</h3>
                                <p class="nv-card-desc">{{ \Illuminate\Support\Str::limit(strip_tags($post->description), 120) }}</p>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <script>
        (function () {
            var tabs = document.querySelectorAll('.nv-tab');
            var cards = document.querySelectorAll('.nv-card');
            tabs.forEach(function (tab) {
                tab.addEventListener('click', function () {
                    tabs.forEach(function (t) { t.classList.remove('is-active'); });
                    tab.classList.add('is-active');
                    var f = tab.getAttribute('data-filter');
                    cards.forEach(function (card) {
                        card.style.display = (f === 'all' || card.getAttribute('data-category') === f) ? '' : 'none';
                    });
                });
            });
        })();
    </script>

@endsection