@extends('layouts.app')

@section('title', 'Ver Proyecto')

@section('content')
<div class="max-w-3xl mx-auto bg-white shadow-md rounded-lg p-6">

    {{-- Título del proyecto --}}
    <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ $project->name }}</h1>

    {{-- Imagen destacada del proyecto --}}
    @if($project->image)
        <div class="mb-6">
            <img src="{{ asset('storage/' . $project->image->path) }}"
                 alt="{{ $project->image->alt }}"
                 class="w-full h-64 object-cover rounded border-2 border-blue-600 shadow">
        </div>
    @endif

    {{-- Descripción --}}
    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-500">Descripción:</label>
        <p class="text-gray-700">{{ $project->description ?? 'Sin descripción disponible.' }}</p>
    </div>

    {{-- Ubicación --}}
    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-500">Ubicación:</label>
        <p class="text-gray-700">{{ $project->location ?? 'No especificada.' }}</p>
    </div>

    {{-- Future blocks: Fractionals, Mapa, Propiedades --}}
    {{-- Puedes colocar aquí tabs, componentes, etc. --}}

    {{-- Botón Volver --}}
    <div class="mt-6 flex justify-end">
        <a href="{{ route('projects.index') }}"
           class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm font-semibold">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
            Volver
        </a>
    </div>
</div>
@endsection