@extends('layouts.app-layout')

@section('content')
    <section class="py-5 text-center" style="background-color: #f8f9fa;">
        <div class="container">

            <div class="mx-auto mb-3"
                 style="width: 60px; height: 4px; background: linear-gradient(90deg,#2563eb,#3b82f6); border-radius: 10px;">
            </div>

            <h1 class="fw-bold mb-3" style="color:#1e293b;">
                Acerca del Proyecto
            </h1>

            <p class="lead text-secondary mb-0">
                Sistema de gestión desarrollado para Innova Salto.
            </p>

        </div>
    </section>



    <div class="container my-5">

        <h2>Introducción</h2>
        <p>
            Este proyecto fue desarrollado en el marco de los retos académicos de la Universidad Católica del Uruguay,
            cuya consigna establece su realización en un plazo de 2 a 3 semanas. En esta ocasión, se trabajó para la
            Intendencia de Salto, y se abarcaron las áreas de Análisis de Requerimientos, Desarrollo, QA (Testing) y
            Documentación técnica, con el objetivo de entregar una solución funcional, mantenible y de calidad. </p>

        <h2 class="mt-5 text-center">Equipo</h2>
        <div class="row justify-content-center mt-4">
            @foreach($profiles as $persona)

                @php
                    $roleBase = strtolower(trim(preg_split('/[\s\-]+/', $persona['role_key'])[0]));

                    $docenteRoles = ['docente', 'director'];
                    $devRoles = ['desarrollador', 'desarrolladora', 'desarrollo'];
                    $devopsRoles = ['devops'];
                    $testingRoles = ['tester', 'testing'];

                    if (in_array($roleBase, $docenteRoles)) {
                        $badgeClass = 'bg-primary-subtle text-primary';
                    } elseif (in_array($roleBase, $devRoles)) {
                        $badgeClass = 'bg-info-subtle text-info';
                    } elseif (in_array($roleBase, $devopsRoles)) {
                        $badgeClass = 'bg-warning-subtle text-warning';
                    } elseif (in_array($roleBase, $testingRoles)) {
                        $badgeClass = 'bg-success-subtle text-success';
                    } else {
                        $badgeClass = 'bg-secondary-subtle text-secondary';
                    }
                @endphp



                <div class="col-6 col-md-4 col-lg-3 mb-4">
                    <div class="card shadow-sm bg-white text-center p-4 rounded-4 border-0">

                        <img src="{{ asset('assets/avatars/' . $persona['image']) }}"
                             class="rounded-circle mx-auto mb-3 border border-2 border-light"
                             width="110"
                             height="110"
                             style="object-fit: cover;"
                             alt="{{ $persona['name'] }}">

                        <h6 class="fw-semibold mb-1">{{ $persona['name'] }}</h6>

                        <span class="badge {{ $badgeClass }} px-2 py-1 rounded-pill text-wrap">
                    {{ $persona['role'] }}
                </span>

                    </div>
                </div>

            @endforeach
        </div>

    </div>

@endsection