@extends('layouts.app', [
    'title' => $author->authorProfile->meta_title ?? $author->name . ' - SEO Kenya Author',
    'description' => $author->authorProfile->meta_description,
    'keywords' => $author->authorProfile->keywords,
    'canonical' => url('author/'.$author->authorProfile->slug)
])

@section('content')

{{-- ─── Author hero ──────────────────────────────────────────────────────── --}}
<section class="sk-hero sk-author-hero" role="banner">
    <div class="container">
        <div class="row align-items-center g-4 g-lg-5">

            {{-- Avatar / logo fallback --}}
            <div class="col-md-3 text-center text-md-start">
                @if($author->authorProfile->avatar)
                    <img src="{{ asset('assets/authors/' . $author->authorProfile->avatar) }}"
                         alt="{{ $author->name }}"
                         class="sk-author-hero__avatar"
                         width="200" height="200">
                @else
                    <div class="sk-author-hero__avatar-logo">
                        <img src="{{ asset(config('specialist.brand.logo')) }}"
                             alt="SEO Specialist Kenya"
                             class="sk-author-hero__logo-img"
                             width="160" height="80">
                    </div>
                @endif
            </div>

            {{-- Author meta --}}
            <div class="col-md-9">
                <p class="sk-author-hero__eyebrow mb-1">SEO Kenya Author</p>
                <h1 class="sk-author-hero__name">{{ $author->name }}</h1>
                @if($author->authorProfile->position)
                    <p class="sk-author-hero__position">{{ $author->authorProfile->position }}</p>
                @endif

                @if($author->authorProfile->bio)
                    @php
                        $fullBio     = strip_tags($author->authorProfile->bio);
                        $shortBio    = Str::limit($fullBio, 280);
                        $needsToggle = mb_strlen($fullBio) > 280;
                    @endphp
                    <div class="sk-author-hero__bio-wrap">
                        <p class="sk-author-hero__bio sk-author-hero__bio--short mb-0">{{ $shortBio }}</p>
                        @if($needsToggle)
                            <p class="sk-author-hero__bio sk-author-hero__bio--full mb-0" aria-hidden="true">{{ $fullBio }}</p>
                            <button type="button"
                                    class="sk-author-bio-toggle btn btn-link p-0 mt-1"
                                    data-short="{{ $shortBio }}"
                                    data-full="{{ $fullBio }}">
                                Show more <i class="fas fa-chevron-down small ms-1"></i>
                            </button>
                        @endif
                    </div>
                @endif

                {{-- Social links --}}
                @if($author->authorProfile->facebook_url || $author->authorProfile->twitter_url || $author->authorProfile->linkedin_url)
                    <div class="sk-author-hero__socials">
                        @if($author->authorProfile->facebook_url)
                            <a href="{{ $author->authorProfile->facebook_url }}"
                               class="sk-author-hero__social-link"
                               target="_blank" rel="noopener noreferrer"
                               aria-label="{{ $author->name }} on Facebook">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        @endif
                        @if($author->authorProfile->twitter_url)
                            <a href="{{ $author->authorProfile->twitter_url }}"
                               class="sk-author-hero__social-link"
                               target="_blank" rel="noopener noreferrer"
                               aria-label="{{ $author->name }} on Twitter / X">
                                <i class="fab fa-twitter"></i>
                            </a>
                        @endif
                        @if($author->authorProfile->linkedin_url)
                            <a href="{{ $author->authorProfile->linkedin_url }}"
                               class="sk-author-hero__social-link"
                               target="_blank" rel="noopener noreferrer"
                               aria-label="{{ $author->name }} on LinkedIn">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        @endif
                    </div>
                @endif
            </div>

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

{{-- ─── Author articles ──────────────────────────────────────────────────── --}}
<section class="sk-author-articles">
    <div class="container">
        <h2 class="sk-author-articles__heading">Articles by {{ $author->name }}</h2>

        @forelse($articles as $article)
            @php
                $photo    = $article->photos->first();
                $photoUrl = ($photo && $photo->filename)
                    ? asset('assets/uploads/' . $photo->filename)
                    : \App\Models\Page::blogPlaceholderImageUrl();
            @endphp

            @if($loop->first)<div class="row g-4">@endif

            <div class="col-md-6 col-lg-4">
                <article class="sk-blog-index-card">
                    <a href="{{ url('blog/' . $article->slug) }}" class="sk-blog-index-card__image-link">
                        <img src="{{ $photoUrl }}"
                             class="sk-blog-index-card__image"
                             alt="{{ $article->name }}"
                             width="400" height="220"
                             loading="lazy">
                    </a>
                    <div class="sk-blog-index-card__body">
                        <p class="sk-blog-index-card__meta mb-0">
                            <span class="sk-blog-index-card__category">
                                {{ $article->parent ? $article->parent->name : 'SEO' }}
                            </span>
                            <span class="sk-blog-index-card__date">
                                Updated {{ $article->lastUpdatedLabel() }}
                            </span>
                        </p>
                        <h3 class="sk-blog-index-card__title">
                            <a href="{{ url('blog/' . $article->slug) }}">{{ $article->name }}</a>
                        </h3>
                        <p class="sk-blog-index-card__excerpt mb-0">
                            {{ Str::limit(strip_tags($article->description), 120) }}
                        </p>
                    </div>
                </article>
            </div>

            @if($loop->last)</div>@endif

        @empty
            <p class="sk-author-articles__empty">No articles have been published yet.</p>
        @endforelse

        {{-- Pagination --}}
        @if($articles->hasPages())
            <nav class="sk-blog-index-pagination" aria-label="Author articles pagination">
                <ul class="pagination justify-content-center mb-0">

                    {{-- Prev --}}
                    @if($articles->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link" aria-hidden="true"><i class="fas fa-chevron-left small"></i></span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $articles->previousPageUrl() }}" rel="prev" aria-label="Previous page">
                                <i class="fas fa-chevron-left small"></i>
                            </a>
                        </li>
                    @endif

                    {{-- Page numbers --}}
                    @foreach($articles->getUrlRange(1, $articles->lastPage()) as $page => $url)
                        <li class="page-item {{ $page == $articles->currentPage() ? 'active' : '' }}">
                            @if($page == $articles->currentPage())
                                <span class="page-link">{{ $page }}</span>
                            @else
                                <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                            @endif
                        </li>
                    @endforeach

                    {{-- Next --}}
                    @if($articles->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $articles->nextPageUrl() }}" rel="next" aria-label="Next page">
                                <i class="fas fa-chevron-right small"></i>
                            </a>
                        </li>
                    @else
                        <li class="page-item disabled">
                            <span class="page-link" aria-hidden="true"><i class="fas fa-chevron-right small"></i></span>
                        </li>
                    @endif

                </ul>
            </nav>
        @endif

    </div>
</section>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.sk-author-bio-toggle').forEach(function (btn) {
        var wrap     = btn.closest('.sk-author-hero__bio-wrap');
        var short    = wrap.querySelector('.sk-author-hero__bio--short');
        var full     = wrap.querySelector('.sk-author-hero__bio--full');
        var expanded = false;

        btn.addEventListener('click', function () {
            expanded = !expanded;
            if (expanded) {
                short.hidden = true;
                full.removeAttribute('aria-hidden');
                btn.innerHTML = 'Show less <i class="fas fa-chevron-up small ms-1"></i>';
            } else {
                short.hidden = false;
                full.setAttribute('aria-hidden', 'true');
                btn.innerHTML = 'Show more <i class="fas fa-chevron-down small ms-1"></i>';
            }
        });
    });
});
</script>
@endpush

@endsection