<x-layout :title="$service['title']" :description="$service['tagline']">

    @push('schema')
    <script type="application/ld+json">
    {!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'Service',
        'name' => $service['title'],
        'description' => $service['summary'],
        'provider' => ['@type' => 'Organization', 'name' => 'Brokam International Ltd'],
        'areaServed' => 'Worldwide',
        'serviceType' => $service['title'],
    ], JSON_UNESCAPED_SLASHES) !!}
    </script>
    @endpush

    <x-page-hero :kicker="'Service ' . $service['number']"
                 :title="$service['title']"
                 :subtitle="$service['tagline']"
                 :image="$service['image'] ?? null"
                 :crumbs="['Home' => route('home'), 'Services' => route('services.index'), $service['title'] => null]">
        <div class="mt-8 flex flex-wrap gap-3">
            <a href="{{ route('quote') }}?service={{ $service['slug'] }}" class="btn btn-primary">Request a quote for this service <x-icon name="arrow" class="w-4 h-4"/></a>
            <a href="{{ route('contact') }}" class="btn btn-outline-light">Ask a question</a>
        </div>
    </x-page-hero>

    <section class="section">
        <div class="shell grid lg:grid-cols-[1.3fr_0.7fr] gap-14">
            <div>
                <div class="grid place-items-center w-16 h-16 rounded-2xl bg-brand-50 text-brand-600 mb-7">
                    <x-icon :name="$service['icon']" class="w-8 h-8"/>
                </div>
                <h2 class="text-2xl font-semibold text-slate-ink mb-4">What we deliver</h2>
                <p class="text-lg text-slate-700 leading-relaxed">{{ $service['summary'] }}</p>

                <h3 class="text-xl font-semibold text-slate-ink mt-10 mb-5">Key offerings</h3>
                <div class="grid sm:grid-cols-2 gap-4">
                    @foreach ($service['offerings'] as $offer)
                        <div class="card p-5 flex items-start gap-3">
                            <x-icon name="check" class="w-5 h-5 text-brand-500 mt-0.5 shrink-0"/>
                            <span class="text-slate-700">{{ $offer }}</span>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Sidebar --}}
            <aside class="space-y-6">
                <div class="theme-dark card p-7 bg-night text-white">
                    <p class="kicker mb-3">Single accountable partner</p>
                    <p class="text-white/80 leading-relaxed text-sm">We manage specification, sourcing, importation, logistics, installation, and integration — so the final system simply works.</p>
                    <a href="{{ route('quote') }}?service={{ $service['slug'] }}" class="btn btn-primary w-full mt-6 text-sm">Request a Quote</a>
                </div>

                <div class="card p-7">
                    <h3 class="font-semibold text-slate-ink mb-4">Other services</h3>
                    <ul class="space-y-1">
                        @foreach (config('brokam.services') as $other)
                            @continue($other['slug'] === $service['slug'])
                            <li>
                                <a href="{{ route('services.show', $other['slug']) }}" class="flex items-center gap-3 py-2 text-sm text-slate-600 hover:text-brand-600 transition">
                                    <x-icon :name="$other['icon']" class="w-5 h-5 text-brand-500"/> {{ $other['title'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="card p-7">
                    <h3 class="font-semibold text-slate-ink mb-2">Industries we serve</h3>
                    <div class="flex flex-wrap gap-2 mt-3">
                        @foreach ($industries as $ind)
                            <span class="text-xs font-medium bg-paper-200 text-slate-600 px-3 py-1.5 rounded-full">{{ $ind['name'] }}</span>
                        @endforeach
                    </div>
                </div>
            </aside>
        </div>
    </section>

    {{-- Related projects --}}
    @if ($related->isNotEmpty())
        <section class="section bg-paper-200">
            <div class="shell">
                <p class="kicker mb-4">Related work</p>
                <h2 class="text-3xl font-semibold tracking-tight mb-10">{{ $service['title'] }} in practice</h2>
                <div class="grid md:grid-cols-3 gap-6">
                    @foreach ($related as $project)
                        <x-project-card :project="$project"/>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Next service --}}
    <section class="section">
        <div class="shell">
            <a href="{{ route('services.show', $next['slug']) }}" class="card group flex items-center justify-between p-8 hover:border-brand-500/40">
                <div>
                    <p class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Next service</p>
                    <p class="text-2xl font-semibold text-slate-ink group-hover:text-brand-600 transition-colors mt-1">{{ $next['title'] }}</p>
                </div>
                <span class="grid place-items-center w-12 h-12 rounded-full bg-brand-50 text-brand-600 group-hover:bg-brand-500 group-hover:text-white transition">
                    <x-icon name="arrow" class="w-6 h-6"/>
                </span>
            </a>
        </div>
    </section>

    <x-cta-band :title="'Need a ' . $service['title'] . ' solution?'"/>
</x-layout>
