@extends('layouts.app', [
    'title'       => $subService->metatitle       ?? $subService->name . ' | ' . config('specialist.brand.name'),
    'description' => $subService->metadescription ?? $subService->short_description,
    'keywords'    => $subService->keywords        ?? '',
    'canonical'   => url('/' . $subService->parent_slug . '/' . $subService->slug),
])

@push('head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Service",
  "serviceType": "{{ $subService->name }}",
  "name": "{{ $subService->name }}",
  "description": "{{ e($subService->short_description) }}",
  "provider": {
    "@type": "Organization",
    "@id": "https://{{ config('specialist.brand.domain') }}/#organization",
    "name": "{{ config('specialist.brand.name') }}",
    "url": "https://seospecialist.co.ke/",
    "telephone": "+254704043466"
  },
  "areaServed": { "@type": "Country", "name": "Kenya" },
  "url": "{{ url('/' . $subService->parent_slug . '/' . $subService->slug) }}"
}
</script>
@endpush

@section('content')

    <section class="sk-hero sk-hero--subservice" role="banner">
        <div class="container">
            <div class="row align-items-center g-4 g-lg-5">
                <div class="col-lg-8">
                    <p class="mb-2">
                        <a href="{{ url($parent['url']) }}" class="sk-hero__parent-link">{{ $parent['name'] }}</a>
                    </p>
                    <h1 class="sk-hero__headline">{{ $subService->name }}</h1>
                    @if($subService->short_description)
                        <p class="sk-hero__lead mb-4">{{ $subService->short_description }}</p>
                    @endif
                    <div class="sk-hero__actions">
                        <a class="btn btn-primary btn-lg px-4"
                           href="{{ url('/book-consultation') }}"
                           aria-label="Book a free consultation about {{ $subService->name }}">
                            Get a Free Proposal
                        </a>
                        <a class="btn btn-outline-primary btn-lg px-4"
                           href="https://wa.me/254704043466?text=Hi%20SEO%20Kenya%2C%20I%20need%20help%20with%20{{ urlencode($subService->name) }}"
                           target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-whatsapp me-2" aria-hidden="true"></i>Talk to an Expert
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 d-none d-lg-block">
                    <div class="sk-hero__proof-card">
                        <p class="sk-hero__proof-card-title mb-0">Why SEO Specialist Kenya</p>
                        <div class="sk-hero__proof-stat">
                            <span class="sk-hero__proof-stat-value">650+</span>
                            <span class="sk-hero__proof-stat-label">Kenya businesses optimized</span>
                        </div>
                        <div class="sk-hero__proof-stat">
                            <span class="sk-hero__proof-stat-value">4.9 / 5</span>
                            <span class="sk-hero__proof-stat-label">Average client rating</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="sk-subservice-detail">
        <div class="container">
            <div class="row g-4 g-lg-5">
                <div class="col-lg-8">
                    @if($subService->body)
                        <section class="sk-subservice-detail__section">
                            <div class="sk-subservice-detail__content blog-content">
                                {!! $subService->body !!}
                            </div>
                        </section>
                    @endif
                </div>

                <aside class="col-lg-4">
                    <div class="sk-subservice-sidebar sticky-top sk-career-sticky">
                        @if($siblings->count())
                        <div class="sk-subservice-sidebar__block">
                            <h2 class="sk-subservice-sidebar__title">More {{ $parent['name'] }}</h2>
                            <ul class="sk-subservice-sidebar__list list-unstyled mb-0">
                                @foreach($siblings as $sibling)
                                <li>
                                    <a href="{{ url('/' . $sibling->parent_slug . '/' . $sibling->slug) }}">
                                        {{ $sibling->name }}
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                        <div class="sk-subservice-sidebar__block sk-subservice-sidebar__block--cta">
                            <h2 class="sk-subservice-sidebar__cta-title">Ready to get started?</h2>
                            <p class="sk-subservice-sidebar__cta-text">Tell us your goals and we will send a proposal within 24 hours.</p>
                            <a href="{{ url('/book-consultation') }}" class="btn btn-primary w-100 mb-2">
                                Book a Free Consultation
                            </a>
                            <a href="{{ url($parent['url']) }}" class="btn btn-outline-primary w-100">
                                Back to {{ $parent['name'] }}
                            </a>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>

    <section class="sk-cta sk-cta--compact" aria-label="Call to action">
        <div class="container">
            <div class="sk-cta__inner">
                <h2 class="sk-cta__title" id="sk-subservice-cta-heading">
                    Let Us Handle Your
                    <span class="sk-cta__accent">{{ $subService->name }}</span>
                </h2>
                <p class="sk-cta__text">
                    We run this as part of a monthly SEO engagement tailored to your Kenya business. No lock-in surprises, just a clear scope and measurable results.
                </p>
                <div class="sk-cta__actions">
                    <a href="{{ url('/book-consultation') }}" class="btn btn-primary btn-lg px-5">
                        Book a Free Consultation
                    </a>
                    <a href="https://wa.me/254704043466?text=Hi%20SEO%20Kenya%2C%20I%20need%20help%20with%20{{ urlencode($subService->name) }}"
                       class="btn btn-outline-primary btn-lg px-4"
                       target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-whatsapp me-2" aria-hidden="true"></i>Talk to an Expert First
                    </a>
                </div>
                <p class="sk-cta__note mb-0">No obligation. We respond within 2 business hours.</p>
            </div>
        </div>
    </section>

@endsection