@extends('layouts.app')

@section('titulo', $modulo->nombre ?? ucfirst($slug))
@section('subtitulo', $modulo->descripcion ?? 'Módulo del sistema')

@section('contenido')
<div class="bg-white rounded-2xl p-10 shadow-sm shadow-slate-200/60 text-center max-w-2xl mx-auto mt-6">
    <div class="mx-auto h-16 w-16 rounded-2xl bg-brand-50 text-brand-500 flex items-center justify-center">
        @include('partials.icon', ['name' => $modulo->icono ?? 'cube', 'class' => 'h-8 w-8'])
    </div>
    <h2 class="mt-5 text-xl font-bold text-slate-800">{{ $modulo->nombre ?? ucfirst($slug) }}</h2>
    <p class="mt-2 text-slate-500">{{ $modulo->descripcion ?? 'Este módulo está habilitado para tu institución.' }}</p>

    <div class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-amber-600 bg-amber-50 px-4 py-2 rounded-xl">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
        Pantalla en construcción — listo para desarrollar la funcionalidad
    </div>

    <div class="mt-8 text-left grid sm:grid-cols-2 gap-3">
        <div class="rounded-xl border border-slate-100 p-4">
            <p class="text-xs font-semibold uppercase text-slate-400">Grupo</p>
            <p class="font-medium text-slate-700">{{ $modulo->grupo ?? '—' }}</p>
        </div>
        <div class="rounded-xl border border-slate-100 p-4">
            <p class="text-xs font-semibold uppercase text-slate-400">Tipo</p>
            <p class="font-medium text-slate-700">{{ ($modulo->nucleo ?? true) ? 'Núcleo común' : 'Módulo opcional' }}</p>
        </div>
    </div>

    <a href="{{ route('dashboard') }}" class="mt-8 inline-flex items-center gap-2 text-brand-600 font-medium hover:underline">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        Volver al dashboard
    </a>
</div>
@endsection