@extends('layouts.site')

@section('meta_title')
    {{ locale_field($article, 'title') }} — {{ __('site.nav_blog') }}
@endsection

@section('title')
    {{ locale_field($article, 'title') }}
@endsection

@section('content')
    @if ($article->category_id)
        <x-site.lead-context
            :category-id="$article->category_id"
            :subject="locale_field($article, 'title')"
            source-type="general"
        />
    @endif
    @php
        $locale = app()->getLocale();
        $card = \App\Support\Cards\ArticleCardPresenter::from($article);
        $hasGallery = isset($gallery) && ! $gallery->isEmpty()
            && ($gallery->images->isNotEmpty() || $gallery->videos->isNotEmpty());
        $body = locale_field($article, 'summary');
        $excerpt = locale_field($article, 'excerpt');
        $title = locale_field($article, 'title');
    @endphp

    <div class="eca-reading-progress" data-reading-progress aria-hidden="true"></div>

    <x-site.engage-shell :engage-type="$engageType" :engage-id="$engageId" :engagement="$engagement" class="site-article-page site-container pb-24">
        <article class="site-article" data-reveal="page">
            <div class="site-article-page__card">
                <nav class="site-article-page__breadcrumb" aria-label="Breadcrumb" data-reveal="soft">
                    <a class="site-article-page__breadcrumb-link" href="{{ route('site.home', ['locale' => $locale]) }}">{{ __('site.nav_home') }}</a>
                    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" class="site-article-page__breadcrumb-icon">
                        <path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <a class="site-article-page__breadcrumb-link" href="{{ route('site.blog.index', ['locale' => $locale]) }}">{{ __('site.nav_blog') }}</a>
                    @if ($article->category)
                        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" class="site-article-page__breadcrumb-icon">
                            <path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <a class="site-article-page__breadcrumb-link" href="{{ route('site.blog.index', ['locale' => $locale, 'category_id' => $article->category_id]) }}">{{ locale_category_name($article->category) }}</a>
                    @endif
                    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" class="site-article-page__breadcrumb-icon">
                        <path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="site-article-page__breadcrumb-current">{{ $title }}</span>
                </nav>

                @if ($article->image)
                    <figure class="site-article-hero__cover site-progressive-media" data-progressive-media>
                        <x-site.responsive-img
                            :path="$article->image"
                            context="content"
                            :alt="$title"
                            class="site-article-hero__cover-img"
                            loading="eager"
                            fetchpriority="high"
                            data-progressive-image
                        />
                    </figure>
                @endif

                <div class="site-article-page__inner">
                    <header class="site-article-hero" data-reveal="section">
                        <div class="site-article-hero__meta">
                            @if ($article->category)
                                <span class="site-detail-chip site-detail-chip--accent">{{ locale_category_name($article->category) }}</span>
                            @else
                                <span class="site-detail-chip">{{ __('site.nav_blog') }}</span>
                            @endif
                            @if ($card['featured'])
                                <span class="site-detail-chip">{{ __('site.featured') }}</span>
                            @endif
                        </div>

                        <h1 class="site-article-hero__title">{{ $title }}</h1>

                        <div class="site-article-hero__facts">
                            @if ($card['date'])
                                <time class="site-article-hero__fact" datetime="{{ $card['date_iso'] ?? $card['date'] }}">{{ $card['date_label'] ?? $card['date'] }}</time>
                            @endif
                            <span class="site-article-hero__fact">{{ __('site.card_reading_time', ['min' => $card['reading_time']]) }}</span>
                        </div>

                        <div class="site-article-hero__stats">
                            <x-site.engagement.stats-bar :engagement="$engagement" variant="article" />
                        </div>
                    </header>

                    @if ($hasGallery)
                        <div class="site-article-gallery" data-reveal="soft">
                            <x-site.image-gallery
                                :gallery="$gallery"
                                :alt="$title"
                                mode="service"
                            />
                        </div>
                    @endif

                    <div class="site-article-body" data-reveal="section">
                        @if ($excerpt)
                            <p class="site-article-body__lead">{{ $excerpt }}</p>
                        @endif

                        @if ($body)
                            <div class="site-article-body__content eca-detail-prose prose prose-sm max-w-none" data-article-body>
                                {!! nl2br(e($body)) !!}
                            </div>
                        @endif

                        @feature('repair_services')
                        <aside class="site-article-inline-cta" data-reveal="soft">
                            <div>
                                <p class="site-article-inline-cta__title">{{ __('site.article_cta_title') }}</p>
                                <p class="site-article-inline-cta__sub">{{ __('site.article_cta_sub') }}</p>
                            </div>
                            <div class="site-detail-cta">
                                <button type="button" class="site-btn-primary" data-assistant-open data-intent="repair">
                                    {{ __('site.cta_request') }}
                                </button>
                                <a href="{{ site_whatsapp_url() }}" target="_blank" rel="noopener" class="site-btn-outline">
                                    {{ __('site.cta_whatsapp') }}
                                </a>
                            </div>
                        </aside>
                        @endfeature
                    </div>
                </div>
            </div>

            <div class="site-article-page__below">
                <div class="site-detail-process">
                    <x-site.home-repair-process lazy />
                </div>

                @include('partials.site.related-rail', ['rail' => $relatedRail ?? null])

                @feature('repair_services')
                <div class="site-article-assistant-cta" data-reveal="section">
                    <div>
                        <p class="site-article-assistant-cta__title">{{ __('site.article_assistant_title') }}</p>
                        <p class="site-article-assistant-cta__sub">{{ brand_trans('site.article_assistant_sub') }}</p>
                    </div>
                    <button type="button" class="site-btn-primary" data-assistant-open data-intent="repair">
                        {{ __('site.cta_request') }}
                    </button>
                </div>
                @endfeature
            </div>
        </article>
    </x-site.engage-shell>
@endsection