@extends('public.layouts.guest')

@section('title', 'About Us — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('nav_about', 'text-teal-700 font-semibold')

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Our Story</p>
        <h1 class="text-4xl font-bold text-white">{{ $about['title'] ?? 'About Us' }}</h1>
    </div>
</div>

<div class="py-16 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">

        {{-- Main content --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start mb-16">
            <div>
                <p class="text-gray-600 leading-relaxed text-base whitespace-pre-line">{{ $about['content'] ?? '' }}</p>
            </div>
            <div class="rounded-2xl overflow-hidden bg-gray-100 aspect-video flex items-center justify-center">
                @if(!empty($about['image']))
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($about['image']) }}"
                         alt="About us" class="w-full h-full object-cover">
                @else
                    <div class="text-center p-8">
                        <div class="w-16 h-16 bg-teal-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-2 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                            </svg>
                        </div>
                        <p class="text-gray-400 text-sm">Upload a photo via Website CMS</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Vision & Mission --}}
        @if(!empty($about['vision']) || !empty($about['mission']))
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
            @if(!empty($about['vision']))
            <div class="bg-teal-50 border-[0.5px] border-teal-100 rounded-2xl p-8">
                <div class="w-10 h-10 bg-teal-600 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-gray-900 mb-3">Our Vision</h3>
                <p class="text-gray-600 text-sm leading-relaxed">{{ $about['vision'] }}</p>
            </div>
            @endif
            @if(!empty($about['mission']))
            <div class="bg-gray-50 border-[0.5px] border-gray-200 rounded-2xl p-8">
                <div class="w-10 h-10 bg-gray-700 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-gray-900 mb-3">Our Mission</h3>
                <p class="text-gray-600 text-sm leading-relaxed">{{ $about['mission'] }}</p>
            </div>
            @endif
        </div>
        @endif

        {{-- Stats --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @php $propName = \App\Models\Setting::get('property_name','Parkview Hotel CDO'); @endphp
            <div class="text-center p-6 bg-gray-50 rounded-2xl border-[0.5px] border-gray-100">
                <p class="text-4xl font-bold text-teal-600 mb-1">63</p>
                <p class="text-gray-500 text-xs font-medium">Guest Rooms</p>
            </div>
            <div class="text-center p-6 bg-gray-50 rounded-2xl border-[0.5px] border-gray-100">
                <p class="text-4xl font-bold text-teal-600 mb-1">4</p>
                <p class="text-gray-500 text-xs font-medium">Floors</p>
            </div>
            <div class="text-center p-6 bg-gray-50 rounded-2xl border-[0.5px] border-gray-100">
                <p class="text-4xl font-bold text-teal-600 mb-1">16</p>
                <p class="text-gray-500 text-xs font-medium">Room Types</p>
            </div>
            <div class="text-center p-6 bg-gray-50 rounded-2xl border-[0.5px] border-gray-100">
                <p class="text-4xl font-bold text-teal-600 mb-1">24/7</p>
                <p class="text-gray-500 text-xs font-medium">Front Desk</p>
            </div>
        </div>
    </div>
</div>

@endsection