<?php

$instituciones = [
    [
        'nombre' => 'EMSaD El Refugio',
        'descripcion' => 'Sistema de asistencia escolar',
        'url' => '/asistencia_refugio/',
        'activo' => true
    ],

    [
        'nombre' => 'EMSaD El Rucio',
        'descripcion' => 'Sistema de asistencia escolar',
        'url' => '#',
        'activo' => false
    ],

    [
        'nombre' => 'EMSaD La Colorada',
        'descripcion' => 'Sistema de asistencia escolar',
        'url' => '#',
        'activo' => false
    ],
];

?>
<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <meta name="description"
          content="Sistema de Asistencia Escolar GREEM">

    <title>Asistencia Escolar | GREEM</title>

    <style>

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        body {
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            background: #f5f5f7;
            color: #333;
        }

        /* =========================
           ENCABEZADO
           ========================= */

        .header {
            background: #431C27;
            color: #fff;

            padding: 42px 20px 38px;

            text-align: center;

            box-shadow:
                0 3px 12px rgba(0, 0, 0, .15);
        }

        .brand {
            font-size: 34px;
            font-weight: 800;
            letter-spacing: 1px;

            margin: 0;
        }

        .subtitle {
            margin: 8px 0 0;

            font-size: 16px;

            opacity: .92;
        }

        /* =========================
           CONTENEDOR
           ========================= */

        .container {
            width: min(1100px, 92%);

            margin: 48px auto;
        }

        .title {
            text-align: center;

            margin-bottom: 35px;
        }

        .title h1 {
            margin: 0;

            color: #431C27;

            font-size: 28px;
            font-weight: 700;
        }

        .title p {
            margin: 10px 0 0;

            color: #666;

            font-size: 15px;
        }

        /* =========================
           TARJETAS
           ========================= */

        .instituciones {

            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(270px, 1fr));

            gap: 24px;
        }

        .card {

            background: #fff;

            border-radius: 16px;

            padding: 30px;

            border: 1px solid #e5e5e5;

            box-shadow:
                0 6px 20px rgba(0, 0, 0, .07);

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .card:hover {

            transform: translateY(-4px);

            box-shadow:
                0 12px 28px rgba(0, 0, 0, .12);
        }

        .icon {

            width: 62px;
            height: 62px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 14px;

            background: #431C27;

            color: #fff;

            font-size: 28px;

            margin-bottom: 22px;
        }

        .card h2 {

            margin: 0 0 8px;

            color: #431C27;

            font-size: 21px;
        }

        .card p {

            margin: 0 0 24px;

            color: #666;

            font-size: 14px;

            line-height: 1.5;
        }

        /* =========================
           BOTONES
           ========================= */

        .btn {

            display: block;

            width: 100%;

            padding: 13px 16px;

            border-radius: 9px;

            text-align: center;

            text-decoration: none;

            font-size: 15px;

            font-weight: 600;

            background: #431C27;

            color: #fff;

            border: 1px solid #431C27;

            transition:
                opacity .2s ease,
                transform .1s ease;
        }

        .btn:hover {

            opacity: .9;
        }

        .btn:active {

            transform: scale(.99);
        }

        .btn-disabled {

            background: #ddd;

            border-color: #ddd;

            color: #888;

            cursor: not-allowed;
        }

        /* =========================
           PIE
           ========================= */

        .footer {

            text-align: center;

            color: #888;

            font-size: 13px;

            padding:
                10px 20px 35px;
        }

        .footer strong {

            color: #431C27;
        }

        /* =========================
           MÓVIL
           ========================= */

        @media (max-width: 600px) {

            .header {
                padding:
                    32px 18px;
            }

            .brand {
                font-size: 30px;
            }

            .subtitle {
                font-size: 14px;
            }

            .container {
                margin:
                    32px auto;
            }

            .title h1 {
                font-size: 24px;
            }

            .card {
                padding: 25px;
            }
        }

    </style>

</head>

<body>

<header class="header">

    <div class="brand">
        GREEM
    </div>

    <div class="subtitle">
        Sistema de Asistencia Escolar
    </div>

</header>


<main class="container">

    <div class="title">

        <h1>
            Selecciona tu institución
        </h1>

        <p>
            Accede al sistema correspondiente
            a tu centro educativo.
        </p>

    </div>


    <section class="instituciones">

        <?php foreach ($instituciones as $institucion): ?>

            <article class="card">

                <div class="icon">
                    🏫
                </div>

                <h2>
                    <?= htmlspecialchars(
                        $institucion['nombre'],
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>
                </h2>

                <p>
                    <?= htmlspecialchars(
                        $institucion['descripcion'],
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>
                </p>


                <?php if ($institucion['activo']): ?>

                    <a
                        class="btn"
                        href="<?= htmlspecialchars(
                            $institucion['url'],
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>"
                    >
                        Entrar al sistema
                    </a>

                <?php else: ?>

                    <span class="btn btn-disabled">
                        Próximamente
                    </span>

                <?php endif; ?>

            </article>

        <?php endforeach; ?>

    </section>

</main>


<footer class="footer">

    <strong>
        GREEM: Internet y Multimedia
    </strong>

    <br>

    Plataforma de gestión escolar

</footer>

</body>

</html>
