@extends('comunidad.layout.master')

@section('title', 'Cuenta Suspendida | Educa Auge')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/index.css') }}" />
    <style>
        .suspended-container {
            max-width: 600px;
            margin: 60px auto;
            padding: 40px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .suspended-icon {
            font-size: 80px;
            color: #d62828;
            margin-bottom: 20px;
        }
        .suspended-title {
            font-size: 28px;
            font-weight: 700;
            color: #d62828;
            margin-bottom: 15px;
        }
        .suspended-message {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 30px;
        }
        .suspended-info {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            text-align: left;
        }
        .suspended-info p {
            margin: 10px 0;
            color: #333;
        }
        .suspended-info strong {
            color: #d62828;
        }
        .contact-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .contact-btn {
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-block;
        }
        .contact-btn-primary {
            background: #1877f2;
            color: #fff;
        }
        .contact-btn-primary:hover {
            background: #1565c0;
            color: #fff;
        }
        .contact-btn-secondary {
            background: #25d366;
            color: #fff;
        }
        .contact-btn-secondary:hover {
            background: #20ba5a;
            color: #fff;
        }
        .back-link {
            margin-top: 30px;
            display: block;
            color: #1877f2;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
@endsection

@section('content')
    <main class="page-main">
        <div class="uk-container principal">
            <div class="suspended-container">
                <div class="suspended-icon">
                    <i class="fas fa-ban"></i>
                </div>
                
                <h1 class="suspended-title">Cuenta Suspendida</h1>
                
                <div class="suspended-message">
                    <p>Tu cuenta en la comunidad ha sido suspendida temporalmente.</p>
                    <p>Para reactivar tu acceso a la comunidad, por favor comunícate con nuestro equipo de soporte.</p>
                </div>

                @if($usuario)
                    <div class="suspended-info">
                        <p><strong>Usuario:</strong> {{ $usuario->nombre_completo }}</p>
                        <p><strong>Email:</strong> {{ $usuario->email }}</p>
                        @if($miembro && $miembro->fecha_ingreso)
                            <p><strong>Fecha de ingreso:</strong> {{ \Carbon\Carbon::parse($miembro->fecha_ingreso)->format('d/m/Y') }}</p>
                        @endif
                    </div>
                @endif

                <div class="contact-buttons">
                    <a href="mailto:soporte@educaauge.com" class="contact-btn contact-btn-primary">
                        <i class="fas fa-envelope"></i> Contactar por Email
                    </a>
                    <a href="https://wa.me/51987654321" target="_blank" class="contact-btn contact-btn-secondary">
                        <i class="fab fa-whatsapp"></i> Contactar por WhatsApp
                    </a>
                </div>

                <a href="{{ url('/') }}" class="back-link">
                    <i class="fas fa-arrow-left"></i> Volver al inicio
                </a>
            </div>
        </div>
    </main>
@endsection