@extends('layouts.public')

@section('title', $service->name . ' - ' . config('app.name'))
@section('meta_description', $service->description)

@section('content')
<x-page-hero
    :title="$service->name"
    :subtitle="Str::limit($service->description, 160)"
    :image="$service->image_path"
    compact
/>

<section class="section-spacing bg-firm-surface border-t border-slate-200">
    <div class="firm-container max-w-4xl">
        <article class="firm-card">
            <div class="prose-firm text-lg mb-8">{{ $service->description }}</div>

            @if($service->conditions_treated)
            <div class="firm-card-accent bg-white mb-6">
                <h2 class="font-serif text-xl font-bold text-firm-ink mb-3">Matters Covered</h2>
                <div class="text-slate-600 whitespace-pre-line">{{ $service->conditions_treated }}</div>
            </div>
            @endif

            @if($service->duration)
            <p class="text-slate-600 mb-8">Typical consultation length: <strong>{{ $service->duration }} minutes</strong></p>
            @endif

            <a href="{{ route('book.index', ['service' => $service->id]) }}" class="btn-primary">Request a Consultation</a>
        </article>
    </div>
</section>
@endsection