@extends('layouts.master')

@section('title', 'Parlamentares')

@section('content')

    <div class="container-fluid py-4">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h2 class="display-5 fw-bold mb-3">Mesa Diretora</h2>
                <p class="lead text-muted">Conheça os membros que compõem a direção da Câmara Municipal de Caracol-MS</p>
            </div>
        </div>

        <div class="row justify-content-center g-4">
            <div class="col-lg-3 col-md-6">
                <a href="/servico/marcelo-ovelar-presidente" class="text-decoration-none">
                    <div class="card border-0 shadow-lg h-100 member-card">
                        <div class="position-relative overflow-hidden">
                            <img src="https://www.camaracaracol.ms.gov.br/assets/peoples/1762285919_vereadores_caracol.jpg"
                                class="card-img-top" alt="Marcelo Ovelar - Presidente">
                            <div class="position-absolute top-0 end-0 m-3">
                                <span class="badge bg-primary px-3 py-2">Presidente</span>
                            </div>
                        </div>
                        <div class="card-body text-center p-4">
                            <h5 class="card-title fw-bold text-dark mb-2">Marcelo Ovelar</h5>
                            <p class="text-muted mb-3">Presidente da Câmara</p>
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-outline-primary btn-sm">Ver Perfil</button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6">
                <a href="/servico/meire-leite-vice-presidente" class="text-decoration-none">
                    <div class="card border-0 shadow-lg h-100 member-card">
                        <div class="position-relative overflow-hidden">
                            <img src="https://www.camaracaracol.ms.gov.br/assets/peoples/1762285995_meire_leite.jpg"
                                class="card-img-top" alt="Meire Leite - Vice-presidente">
                            <div class="position-absolute top-0 end-0 m-3">
                                <span class="badge bg-success px-3 py-2">Vice-presidente</span>
                            </div>
                        </div>
                        <div class="card-body text-center p-4">
                            <h5 class="card-title fw-bold text-dark mb-2">Meire Leite</h5>
                            <p class="text-muted mb-3">Vice-presidente da Câmara</p>
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-outline-primary btn-sm">Ver Perfil</button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6">
                <a href="/servico/lidiane-lopes-1-secretaria" class="text-decoration-none">
                    <div class="card border-0 shadow-lg h-100 member-card">
                        <div class="position-relative overflow-hidden">
                            <img src="https://www.camaracaracol.ms.gov.br/assets/peoples/1762286123_default_resize_1742934456.jpg"
                                class="card-img-top" alt="Lidiane Lopes - 1° Secretária">
                            <div class="position-absolute top-0 end-0 m-3">
                                <span class="badge bg-info px-3 py-2">1ª Secretária</span>
                            </div>
                        </div>
                        <div class="card-body text-center p-4">
                            <h5 class="card-title fw-bold text-dark mb-2">Lidiane Lopes</h5>
                            <p class="text-muted mb-3">1ª Secretária da Câmara</p>
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-outline-primary btn-sm">Ver Perfil</button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6">
                <a href="/servico/ronison-tico-2-secretaria" class="text-decoration-none">
                    <div class="card border-0 shadow-lg h-100 member-card">
                        <div class="position-relative overflow-hidden">
                            <img src="https://www.camaracaracol.ms.gov.br/assets/peoples/1762286148_default_resize_1742934619.jpg"
                                class="card-img-top" alt="Ronison (Tico) - 2° Secretário">
                            <div class="position-absolute top-0 end-0 m-3">
                                <span class="badge bg-warning text-dark px-3 py-2">2º Secretário</span>
                            </div>
                        </div>
                        <div class="card-body text-center p-4">
                            <h5 class="card-title fw-bold text-dark mb-2">Ronison (Tico)</h5>
                            <p class="text-muted mb-3">2º Secretário da Câmara</p>
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-outline-primary btn-sm">Ver Perfil</button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <style>
        .member-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
        }

        .member-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15) !important;
        }

        .card-img-top {
            height: 280px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .member-card:hover .card-img-top {
            transform: scale(1.05);
        }

        .badge {
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 20px;
        }

        .btn-outline-primary {
            border-width: 2px;
            font-weight: 500;
            border-radius: 20px;
            padding: 0.375rem 1.25rem;
        }

        .btn-outline-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .card-img-top {
                height: 220px;
            }
        }
    </style>

@endsection