@extends('layouts.notifications')

@section('content')
    <!-- Logo -->
    <div style="text-align: center; margin-bottom: 30px;">
        <img src="{{ url('images/totem/boratti.png') }}" alt="Logo Portal del Paciente" style="max-width: 180px; height: auto; margin: 0 auto;">
    </div>

    <!-- Título -->
    <h2 style="color: #034ea2; font-size: 26px; font-weight: 700; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 3px solid #034ea2; text-align: center;">
        {{ $title }}
    </h2>
    
    <!-- Cuerpo del mensaje -->
    <div style="background: linear-gradient(to right, #f8fafc, #f1f5f9); padding: 25px; border-radius: 12px; border-left: 5px solid #034ea2; margin: 25px 0; white-space: pre-line; font-size: 16px; line-height: 1.9; color: #334155; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
        {{ $body }}
    </div>

    <!-- Botón de acción -->
    <div style="text-align: center; margin: 35px 0;">
        <a href="{{ $action }}" style="display: inline-block; background: linear-gradient(135deg, #034ea2 0%, #0563c7 100%); color: white !important; padding: 16px 45px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 17px; box-shadow: 0 5px 18px rgba(3, 78, 162, 0.35); letter-spacing: 0.3px;">
            🔐 {{ $label }}
        </a>
    </div>

    <!-- Mensaje adicional -->
    <div style="background-color: #fef3c7; border-left: 4px solid #f59e0b; padding: 15px 20px; border-radius: 8px; margin: 25px 0;">
        <p style="margin: 0; color: #92400e; font-size: 14px; line-height: 1.6;">
            <strong>💡 Importante:</strong> Guarde estas credenciales en un lugar seguro. Le recomendamos cambiar su contraseña al ingresar por primera vez.
        </p>
    </div>

    <!-- Footer -->
    <div style="margin-top: 35px; padding-top: 25px; border-top: 2px solid #e2e8f0; text-align: center;">
        <p style="margin: 8px 0; color: #64748b; font-size: 15px;">
            <strong style="color: #334155; font-size: 16px;">Equipo del Portal del Paciente</strong>
        </p>
        <p style="margin: 8px 0; color: #94a3b8; font-size: 13px;">
            Sanatorio Boratti - Posadas, Misiones
        </p>
    </div>
@endsection