@extends('layouts.app-mobile')
@section('title', $service->name . ' — Befikreyy App')
@section('apptitle', '')
@section('appheaderright')
<a href="{{ route('app.services') }}" class="ah-back" aria-label="Back">‹</a>
@endsection

@section('content')

{{-- Hero image --}}
@if($service->image)
<div class="app-detail-hero" style="background-image: url('/{{ $service->image }}');"></div>
@endif

<div class="app-section app-pad">
    <div class="cat-pill">{{ $service->category->name ?? '' }}</div>
    <h1 class="app-detail-title">{{ $service->name }}</h1>
    <p class="app-detail-tag">{{ $service->tagline }}</p>

    <div class="app-detail-stats">
        <div><span>★</span> 4.8 <small>(120)</small></div>
        <div><span>⏱</span> {{ $service->duration_minutes }} min</div>
        <div><span>✓</span> Verified</div>
    </div>

    <h3 class="app-detail-h3">About this service</h3>
    <p class="app-detail-text">{{ $service->description }}</p>

    @if($service->whats_included && count($service->whats_included))
    <h3 class="app-detail-h3">What's included</h3>
    <ul class="app-list-checks">
        @foreach($service->whats_included as $item)
            <li><span class="ck">✓</span> {{ $item }}</li>
        @endforeach
    </ul>
    @endif

    <h3 class="app-detail-h3">How it works</h3>
    <ol class="app-list-steps">
        <li><strong>Pick area &amp; partner</strong><span>Local verified partner assigned</span></li>
        <li><strong>Choose date &amp; slot</strong><span>Today or any day that suits you</span></li>
        <li><strong>Pay &amp; confirm</strong><span>Online payment, GST invoice</span></li>
        <li><strong>Track &amp; rate</strong><span>Live photos, OTP start, rate after</span></li>
    </ol>
</div>

{{-- Sticky bottom action --}}
<div class="app-sticky-cta">
    <div class="asc-price">
        <strong>₹{{ number_format($service->price_rupees, 0) }}</strong><small>/mo</small>
        @if($service->original_price_paise)
            <small class="strike">₹{{ number_format($service->original_rupees, 0) }}</small>
        @endif
    </div>
    <a href="{{ route('book.show', $service) }}" class="btn-app btn-app-primary">Book now →</a>
</div>

@if($related->count())
<div class="app-section app-pad">
    <h3 class="app-detail-h3">Related services</h3>
    <div class="svc-app-scroll">
        @foreach($related as $r)
            <a href="{{ route('app.service', $r->slug) }}" class="svc-app-card">
                <div class="svc-app-img">
                    @if($r->image)<img src="/{{ $r->image }}" alt="{{ $r->name }}">@endif
                </div>
                <div class="svc-app-body">
                    <strong>{{ $r->name }}</strong>
                    <span class="svc-app-tag">{{ $r->tagline }}</span>
                    <div class="svc-app-price">₹{{ number_format($r->price_rupees, 0) }}<small>/mo</small></div>
                </div>
            </a>
        @endforeach
    </div>
</div>
@endif

@endsection