@extends('admin.layout')
@section('title', 'About Section')
@section('page-title', 'About Section')

@section('content')
<div class="max-w-5xl mx-auto">
    @if($about)
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-bold text-white flex items-center gap-2">
                    <i class="fas fa-info-circle text-indigo-400 text-sm"></i>
                    About Content
                </h3>
                <a href="{{ route('admin.about.edit', $about) }}" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all flex items-center gap-2">
                    <i class="fas fa-edit text-xs"></i> Edit
                </a>
            </div>

            <div class="space-y-4">
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <p class="text-xs text-gray-500 mb-1">Title</p>
                    <p class="text-white font-medium">{{ $about->title }}</p>
                </div>
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <p class="text-xs text-gray-500 mb-1">Company Story</p>
                    <p class="text-gray-300 text-sm leading-relaxed">{{ $about->story }}</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-800/50 rounded-xl p-4">
                        <p class="text-xs text-gray-500 mb-1">Mission</p>
                        <p class="text-gray-300 text-sm">{{ $about->mission }}</p>
                    </div>
                    <div class="bg-gray-800/50 rounded-xl p-4">
                        <p class="text-xs text-gray-500 mb-1">Vision</p>
                        <p class="text-gray-300 text-sm">{{ $about->vision }}</p>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-4">
                    <div class="bg-gray-800/50 rounded-xl p-4 text-center">
                        <p class="text-2xl font-black text-white">{{ $about->years_experience }}</p>
                        <p class="text-xs text-gray-500">Years Exp.</p>
                    </div>
                    <div class="bg-gray-800/50 rounded-xl p-4 text-center">
                        <p class="text-2xl font-black text-white">{{ $about->projects_completed }}</p>
                        <p class="text-xs text-gray-500">Projects</p>
                    </div>
                    <div class="bg-gray-800/50 rounded-xl p-4 text-center">
                        <p class="text-2xl font-black text-white">{{ $about->clients_served }}</p>
                        <p class="text-xs text-gray-500">Clients</p>
                    </div>
                    <div class="bg-gray-800/50 rounded-xl p-4 text-center">
                        <p class="text-2xl font-black text-white">{{ $about->team_members }}</p>
                        <p class="text-xs text-gray-500">Team</p>
                    </div>
                </div>
            </div>
        </div>
    @else
        @include('admin.partials.empty-state', [
            'icon' => 'fas fa-info-circle',
            'title' => 'No About Content',
            'description' => 'Add your company story and statistics.',
            'actionRoute' => route('admin.about.create'),
            'actionText' => 'Create About Section',
        ])
    @endif
</div>
@endsection