@extends('layouts.app')
@section('title', $service->name . ' — Rukay\'s Hairdo & Beauty')
@section('content')
<style>
.service-detail-hero { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; padding:4rem 0; }
.service-detail-hero h1 { font-size:2.4rem; margin-bottom:.75rem; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:4rem 0; align-items:start; }
.detail-img { width:100%; border-radius:1rem; aspect-ratio:4/3; object-fit:cover; }
.detail-img-placeholder { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#8B3252,#C9956C); border-radius:1rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:5rem; }
.detail-meta { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; }
.detail-meta-item { background:#fdf0f5; border-radius:.5rem; padding:.75rem 1.25rem; }
.detail-meta-item .label { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#7A6058; margin-bottom:.25rem; }
.detail-meta-item .value { font-size:1.1rem; font-weight:700; color:#8B3252; }
@media(max-width:768px) { .detail-grid { grid-template-columns:1fr; } }
</style>
<div class="service-detail-hero">
    <div class="container">
        <div style="font-size:.85rem;opacity:.7;margin-bottom:.75rem;"><a href="{{ route('home') }}" style="color:#fff">Home</a> › <a href="{{ route('services') }}" style="color:#fff">Services</a> › {{ $service->name }}</div>
        <h1>{{ $service->name }}</h1>
        <span style="background:rgba(255,255,255,.2);padding:.25rem .75rem;border-radius:9999px;font-size:.85rem;">{{ $service->category }}</span>
    </div>
</div>
<div class="container">
    <div class="detail-grid">
        <div>
            @if($service->image_url)
                <img src="{{ $service->image_url }}" alt="{{ $service->name }}" class="detail-img">
            @else
                <div class="detail-img-placeholder">✂</div>
            @endif
        </div>
        <div>
            <h2 style="font-size:2rem;color:#8B3252;margin-bottom:1rem;">{{ $service->name }}</h2>
            <p style="color:#7A6058;line-height:1.8;font-size:1.05rem;margin-bottom:1.5rem;">{{ $service->description }}</p>
            <div class="detail-meta">
                <div class="detail-meta-item"><div class="label">Price</div><div class="value">₵{{ number_format($service->price,2) }}</div></div>
                <div class="detail-meta-item"><div class="label">Duration</div><div class="value">{{ $service->duration_minutes }} min</div></div>
                @if($service->requires_deposit)<div class="detail-meta-item"><div class="label">Deposit</div><div class="value">{{ $service->deposit_percent }}%</div></div>@endif
            </div>
            <a href="{{ route('booking.index') }}?service={{ $service->id }}" class="btn btn-primary" style="font-size:1.05rem;padding:.85rem 2rem;">Book This Service</a>
        </div>
    </div>
    @if($related->count())
    <div style="padding-bottom:4rem;">
        <h2 style="font-size:1.75rem;color:#8B3252;margin-bottom:1.5rem;">Related Services</h2>
        <div class="grid-3">
            @foreach($related as $r)
            <a href="{{ route('service.detail',$r->id) }}" style="display:block;">
                <div class="card" style="padding:1.25rem;transition:box-shadow .2s;" onmouseover="this.style.boxShadow='0 8px 24px rgba(139,50,82,.1)'" onmouseout="this.style.boxShadow=''">
                    <div style="font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#8B3252;font-weight:600;margin-bottom:.35rem;">{{ $r->category }}</div>
                    <h3 style="font-size:1rem;margin-bottom:.5rem;">{{ $r->name }}</h3>
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="font-weight:700;color:#8B3252;">₵{{ number_format($r->price,2) }}</span>
                        <span style="font-size:.8rem;color:#7A6058;">{{ $r->duration_minutes }} min</span>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection