@extends('layouts.app')

@section('title', $service->seo_title ?? $service->title)
@section('meta_description', $service->seo_description ?? $service->short_description)
@section('meta_image', $service->image_url)

@section('content')
    <div class="site-wrapper">
        <article class="entry-content ssa-page-shell">
            <section class="ssa-service-detail-hero reveal-on-scroll">
                <div>
                    @if(! empty($service->category))
                        <div class="prespa-saas-box ssa-badge">
                            <img src="{{ $service->icon_url }}" alt="{{ $service->title }} icon">
                            <span>{{ $service->category }}</span>
                        </div>
                    @endif

                    <h1>{{ $service->hero_title ?? $service->title }}</h1>
                    <p>{{ $service->short_description }}</p>

                    <div class="ssa-inline-actions">
                        <div class="wp-block-button p-btn-animation-hover-arrow">
                            <a class="wp-block-button__link has-background wp-element-button ssa-gradient-button" href="{{ route('contact', ['intent' => 'pricing', 'service' => $service->title]) }}">
                                Book a Tracking Consultation
                            </a>
                        </div>

                        <div class="wp-block-button p-btn-animation-hover-arrow">
                            <a class="wp-block-button__link has-background wp-element-button ssa-secondary-button" href="{{ route('contact', ['intent' => 'free-audit', 'service' => $service->title]) }}">
                                Request Free Audit
                            </a>
                        </div>
                    </div>
                </div>

                <div class="ssa-detail-image">
                    <img src="{{ $service->image_url }}" alt="{{ $service->title }}">
                </div>
            </section>

            <section class="ssa-service-detail-grid">
                <div class="ssa-rich-copy reveal-on-scroll">
                    {!! $service->long_description !!}

                    @if(! empty($relatedServices) && $relatedServices->isNotEmpty())
                        <div class="ssa-related-services">
                            <div class="ssa-section-heading">
                                <h2>Related services</h2>
                                <p>Explore complementary tracking and reporting services that often fit alongside this implementation.</p>
                            </div>

                            <div class="ssa-related-services__grid">
                                @foreach($relatedServices as $relatedService)
                                    @include('partials.service-card', ['service' => $relatedService])
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <aside class="ssa-service-detail-sidebar reveal-on-scroll">
                    <div class="ssa-sidebar-card">
                        <h2>Benefits</h2>

                        <ul class="ssa-benefit-list">
                            @foreach($service->benefit_items as $benefit)
                                <li>{{ $benefit }}</li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="ssa-sidebar-card">
                        <h2>Need support on this service?</h2>
                        @include('partials.contact-actions', [
                            'service' => $service,
                            'headline' => 'Ask about setup, pricing, or a free audit for ' . $service->title . '.',
                            'compact' => true,
                            'showSupport' => true,
                        ])
                    </div>

                    @if($categories->isNotEmpty())
                        <div class="ssa-sidebar-card">
                            <h2>Service categories</h2>
                            <nav class="ssa-category-nav" aria-label="Service categories">
                                @foreach($categories as $category)
                                    <a href="{{ route('services.index', ['category' => $category->category]) }}" class="{{ $service->category === $category->category ? 'is-active' : '' }}">
                                        <span>{{ $category->category }}</span>
                                        <strong>{{ $category->total }}</strong>
                                    </a>
                                @endforeach
                            </nav>
                        </div>
                    @endif
                </aside>
            </section>
        </article>
    </div>
@endsection
