@extends('layouts.app')

@section('content')

<div style="max-width:1100px;margin:auto;">

    <!-- CONTEXT -->
    <div style="margin-bottom:25px;">
        <p style="font-size:15px;color:#555;">
            Manage infrastructure, upgrades, and facility resources
        </p>
    </div>

    <div class="panel">
        <div style="display:flex;gap:40px;flex-wrap:wrap;">

            @php
                $circle = "
                    width:110px;
                    height:110px;
                    border-radius:50%;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    margin:auto;
                    font-size:32px;
                ";
            @endphp

            <!-- CREATE -->
            <a href="{{ route('admin.facilities.create') }}" style="text-decoration:none;color:inherit;">
                <div style="width:180px;text-align:center;">
                    <div style="{{ $circle }} background:#e3f2fd;">➕</div>
                    <h3 style="margin-top:12px;">Create</h3>
                    <p style="font-size:13px;color:#666;">Register new facility</p>
                </div>
            </a>

            <!-- MANAGE -->
            <a href="{{ route('admin.facilities.index') }}" style="text-decoration:none;color:inherit;">
                <div style="width:180px;text-align:center;">
                    <div style="{{ $circle }} background:#fff3e0;">🏥</div>
                    <h3 style="margin-top:12px;">Manage</h3>
                    <p style="font-size:13px;color:#666;">View facilities</p>
                </div>
            </a>

            <!-- UPGRADE -->
            <div style="width:180px;text-align:center;opacity:0.5;">
                <div style="{{ $circle }} background:#f3e5f5;">⬆️</div>
                <h3 style="margin-top:12px;">Upgrade</h3>
                <p style="font-size:13px;color:#666;">Coming soon</p>
            </div>

            <!-- RESOURCES -->
            <div style="width:180px;text-align:center;opacity:0.5;">
                <div style="{{ $circle }} background:#e6f4ea;">🧰</div>
                <h3 style="margin-top:12px;">Resources</h3>
                <p style="font-size:13px;color:#666;">Coming soon</p>
            </div>

        </div>
    </div>

</div>

@endsection