@extends('layouts.app')

@section('title', $business->name.' — iiSHEEG')

@section('content')
<section class="bg-navy text-white py-5">
    <div class="container">
        <div class="d-flex align-items-center gap-4">
            <img src="{{ $business->logo_url ?? 'https://placehold.co/96x96?text=ii' }}" alt="{{ $business->name }}" class="business-logo" style="width:96px;height:96px;">
            <div>
                <h1 class="h2 mb-1">
                    {{ $business->name }}
                    @if ($business->featured)
                        <span class="badge badge-featured">Featured</span>
                    @endif
                </h1>
                <span class="badge bg-light text-navy border">{{ $business->category->name }}</span>
                <p class="mb-0 mt-2 text-light-muted"><i class="bi bi-geo-alt text-teal"></i> {{ $business->city->name }}, {{ $business->city->country }}</p>
            </div>
        </div>
    </div>
</section>

<section class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <h2 class="h5 text-navy fw-bold">About</h2>
            <p>{{ $business->description ?: 'No description provided yet.' }}</p>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h2 class="h6 text-navy fw-bold mb-3">Contact details</h2>
                    @if ($business->phone)
                        <p class="mb-2"><i class="bi bi-telephone text-teal me-2"></i>{{ $business->phone }}</p>
                    @endif
                    @if ($business->website)
                        <p class="mb-2"><i class="bi bi-globe text-teal me-2"></i><a href="{{ $business->website }}" target="_blank" rel="noopener">{{ $business->website }}</a></p>
                    @endif
                    @if (! $business->phone && ! $business->website)
                        <p class="text-muted small mb-0">No contact details provided.</p>
                    @endif
                </div>
            </div>
            <a href="{{ route('listing') }}" class="btn btn-outline-teal w-100 mt-3">
                <i class="bi bi-arrow-left"></i> Back to listings
            </a>
        </div>
    </div>
</section>
@endsection