@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 outreach operations, field runs, and volunteer deployment
        </p>
    </div>

    <!-- MODULES -->
    <div class="panel">
        <div style="
            display:flex;
            gap:40px;
            flex-wrap:wrap;
            justify-content:flex-start;
        ">

            <!-- CAMPS / OUTREACH RUNS -->
            <a href="{{ route('admin.outreach.events.index') }}" style="text-decoration:none; color:inherit;">
                <div style="width:200px; text-align:center;">

                    <div style="
                        width:120px;
                        height:120px;
                        border-radius:50%;
                        background:#fff3e0;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        margin:auto;
                        font-size:34px;
                    ">
                        🏥
                    </div>

                    <h3 style="margin-top:14px;">Camps & Outreach</h3>
                    <p style="font-size:13px; color:#666;">
                        View and manage field runs
                    </p>

                </div>
            </a>

            <!-- VOLUNTEERS -->
            <a href="{{ route('admin.outreach.volunteers.index') }}" style="text-decoration:none; color:inherit;">
                <div style="width:200px; text-align:center;">

                    <div style="
                        width:120px;
                        height:120px;
                        border-radius:50%;
                        background:#f3e5f5;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        margin:auto;
                        font-size:34px;
                    ">
                        🤝
                    </div>

                    <h3 style="margin-top:14px;">Volunteers</h3>
                    <p style="font-size:13px; color:#666;">
                        Approval and assignment pool
                    </p>

                </div>
            </a>

            <!-- COMMUNITY (FUTURE) -->
            <div style="width:200px; text-align:center; opacity:0.5;">

                <div style="
                    width:120px;
                    height:120px;
                    border-radius:50%;
                    background:#e6f4ea;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    margin:auto;
                    font-size:34px;
                ">
                    🌍
                </div>

                <h3 style="margin-top:14px;">Community</h3>
                <p style="font-size:13px; color:#666;">
                    Coming soon
                </p>

            </div>

        </div>
    </div>

</div>

@endsection