@extends('layouts.public')

@section('title', $content['seo']['title'] ?? ('Services - ' . config('app.name')))
@section('meta_description', $content['seo']['description'] ?? 'Explore our complete study abroad services from admission strategy to post-admission support.')

@push('styles')
@vite('resources/css/services.css')
@endpush

@section('content')
<div class="ssrv-page">
    <section class="ssrv-hero">
        <div class="ssrv-wrap ssrv-hero-grid">
            <div>
                <h1>
                    @php
                        $title = $content['hero']['title'] ?? '';
                        $highlight = $content['hero']['highlight'] ?? '';
                    @endphp
                    {!! str_replace($highlight, '<span class="accent">' . e($highlight) . '</span>', e($title)) !!}
                </h1>
                <p>{{ $content['hero']['text'] ?? '' }}</p>
                <button class="ssrv-btn" type="button" onclick="ApplyModal.open()">{{ $content['hero']['button'] ?? 'Book A Free Consultation' }}</button>
            </div>
            <div class="ssrv-hero-media">
                <img src="{{ str_starts_with($content['hero']['image'] ?? '', 'http') ? $content['hero']['image'] : asset('storage/' . ltrim($content['hero']['image'] ?? '', '/')) }}" alt="Services hero">
            </div>
        </div>
    </section>

    <section class="ssrv-wrap">
        <div class="ssrv-head">
            <h2>{{ $content['offer']['title'] ?? 'What we' }} <span class="accent">{{ $content['offer']['highlight'] ?? '' }}</span></h2>
            <p>{{ $content['offer']['text'] ?? '' }}</p>
        </div>

        <div class="ssrv-cards">
            @foreach(($content['services'] ?? []) as $index => $service)
                <article class="ssrv-service-card">
                    @php $img = $service['image'] ?? ''; @endphp
                    @if($img)
                    <div class="ssrv-service-card-img">
                        <img src="{{ str_starts_with($img, 'http') ? $img : asset('storage/' . ltrim($img, '/')) }}" alt="{{ $service['title'] ?? '' }}">
                    </div>
                    @else
                    <div class="ssrv-service-card-img ssrv-service-card-img--empty">
                        <span>{{ str_pad((string)($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                    </div>
                    @endif
                    <div class="ssrv-service-card-body">
                        <span class="ssrv-num">{{ str_pad((string)($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                        <h3>{{ $service['title'] ?? '' }}</h3>
                        <p>{{ $service['text'] ?? '' }}</p>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="ssrv-final">
            <div>
                <h3>{{ $content['final_cta']['title'] ?? '' }}</h3>
                <p>{{ $content['final_cta']['text'] ?? '' }}</p>
                <div style="margin-top:14px;">
                    <button class="ssrv-btn" type="button" onclick="ApplyModal.open()">{{ $content['final_cta']['button'] ?? 'Book A Free Consultation' }}</button>
                </div>
            </div>
            <img src="{{ str_starts_with($content['final_cta']['image'] ?? '', 'http') ? $content['final_cta']['image'] : asset('storage/' . ltrim($content['final_cta']['image'] ?? '', '/')) }}" alt="Final CTA">
        </div>
    </section>
</div>
@endsection