@extends('layouts.admin')

@section('title', $title ?? 'Módulo em Construção')

@section('breadcrumb')
    <span class="breadcrumb-current">{{ $title ?? 'Módulo' }}</span>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $title ?? 'Módulo em Construção' }}</h1>
        <p class="page-subtitle">{{ $description ?? 'Estamos finalizando esta área para a próxima fase de desenvolvimento.' }}</p>
    </div>
    <div class="flex gap-sm">
        <a href="{{ route('admin.home') }}" class="btn btn-secondary btn-sm">
            <i data-lucide="arrow-left" style="width:14px;height:14px;"></i>
            Voltar ao Início
        </a>
    </div>
</div>

<div class="empty-state card" style="display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 4rem 2rem;">
    <div class="empty-state-icon" style="background:var(--color-primary-light); color:var(--color-primary); width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-xl);">
        <i data-lucide="{{ $icon ?? 'hammer' }}" style="width:64px;height:64px;"></i>
    </div>
    <h2 class="empty-state-title" style="font-size:var(--text-xl);">Esta página está ganhando vida!</h2>
    <p class="empty-state-description" style="font-size:var(--text-base); max-width:600px; color:var(--color-text-secondary); line-height:1.6;">
        A arquitetura técnica deste módulo já está operando nos bastidores. 
        Nas **próximas fases (Roadmap do PMS)**, esta tela se tornará uma interface completa e 100% funcional integrada ao seu Hotel.
    </p>
    
    <div style="margin-top:var(--space-2xl); display:flex; gap:var(--space-md);">
        <div class="badge badge-success" style="font-size:var(--text-sm); padding:0.5rem 1rem;">
            <i data-lucide="shield-check" style="width:16px;height:16px;margin-right:8px;"></i> Arquitetura Protegida
        </div>
        <div class="badge badge-info" style="font-size:var(--text-sm); padding:0.5rem 1rem;">
            <i data-lucide="git-branch" style="width:16px;height:16px;margin-right:8px;"></i> Rota Ativada
        </div>
    </div>
</div>
@endsection