<?php
session_start();

// Configuración de errores (desactivar en producción)
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', __DIR__ . '/error_log.txt');
error_reporting(E_ALL);

// Generar token CSRF
if (!isset($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Validar idioma
$idiomas_permitidos = ['es', 'en'];
$idioma = isset($_GET['lang']) && in_array($_GET['lang'], $idiomas_permitidos) ? $_GET['lang'] : 'es';

// Textos multiidioma
$lang = [
    'es' => [
        'title' => 'Contáctanos',
        'subtitle' => 'Estamos aquí para responder tus preguntas y escuchar tus ideas. ¡No dudes en escribirnos!',
        'name' => 'Nombre Completo',
        'email' => 'Correo Electrónico',
        'phone' => 'Teléfono (Opcional)',
        'subject' => 'Asunto',
        'message' => 'Mensaje',
        'submit' => 'Enviar Mensaje',
        'success' => '¡Mensaje enviado con éxito! Nos pondremos en contacto contigo pronto.',
        'error' => 'Error al enviar el mensaje. Por favor, verifica los datos e intenta de nuevo.',
        'home' => 'Inicio',
        'select_subject' => 'Seleccione un asunto',
        'info' => 'Información General',
        'membership' => 'Membresía',
        'donations' => 'Donaciones',
        'projects' => 'Proyectos',
        'events' => 'Eventos',
        'other' => 'Otros',
        'invalid_email' => 'El correo electrónico no es válido.',
        'required_field' => 'Todos los campos obligatorios deben estar completos.'
    ],
    'en' => [
        'title' => 'Contact Us',
        'subtitle' => 'We are here to answer your questions and hear your ideas. Don’t hesitate to write to us!',
        'name' => 'Full Name',
        'email' => 'Email Address',
        'phone' => 'Phone (Optional)',
        'subject' => 'Subject',
        'message' => 'Message',
        'submit' => 'Send Message',
        'success' => 'Message sent successfully! We will get back to you soon.',
        'error' => 'Error sending the message. Please check the data and try again.',
        'home' => 'Home',
        'select_subject' => 'Select a subject',
        'info' => 'General Information',
        'membership' => 'Membership',
        'donations' => 'Donations',
        'projects' => 'Projects',
        'events' => 'Events',
        'other' => 'Other',
        'invalid_email' => 'The email address is not valid.',
        'required_field' => 'All required fields must be completed.'
    ]
][$idioma];

$pageTitle = $lang['title'];

// Función para sanitizar datos
function sanitizeInput($data) {
    return htmlspecialchars(strip_tags(trim($data)), ENT_QUOTES, 'UTF-8');
}

// Función para enviar correo
function sendEmail($to, $subject, $data, $email) {
    $htmlContent = '
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>' . htmlspecialchars($subject, ENT_QUOTES, 'UTF-8') . '</title>
        <style>
            :root {
                --azul-primario: #00a2e0;
                --azul-oscuro: #17458f;
                --azul-claro: #b9d9eb;
                --naranja-primario: #f7a81b;
                --naranja-oscuro: #898a8d;
                --gris-primario: #f8f4f4;
                --gris-claro: #d0cfcd;
                --gris-oscuro: #333;
                --blanco: #ffffff;
                --texto: #333;
                --texto-claro: rgba(255, 255, 255, 0.9);
            }
            body {
                font-family: \'Poppins\', Arial, sans-serif;
                background-color: var(--gris-primario);
                color: var(--texto);
                margin: 0;
                padding: 0;
                line-height: 1.6;
            }
            .container {
                width: 100%;
                max-width: 600px;
                margin: 20px auto;
                background: var(--blanco);
                border-radius: 8px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                overflow: hidden;
            }
            .header {
                background-color: var(--azul-primario);
                padding: 20px;
                text-align: center;
            }
            .header img {
                max-width: 200px;
                height: auto;
            }
            .header h1 {
                color: var(--blanco);
                font-size: 24px;
                margin: 10px 0 0;
            }
            .content {
                padding: 30px;
            }
            .content h2 {
                color: var(--azul-primario);
                font-size: 20px;
                margin-bottom: 20px;
                text-align: center;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                font-size: 16px;
            }
            td {
                padding: 10px 5px;
                vertical-align: top;
            }
            td.label {
                width: 40%;
                font-weight: 500;
                color: var(--azul-oscuro);
            }
            td.value {
                color: var(--texto);
            }
            .message-content {
                margin-top: 20px;
                padding: 15px;
                background-color: var(--gris-primario);
                border-radius: 4px;
                font-size: 16px;
                color: var(--texto);
            }
            .footer {
                background-color: var(--gris-oscuro);
                color: var(--texto-claro);
                padding: 20px;
                text-align: center;
                font-size: 14px;
            }
            .footer a {
                color: var(--naranja-primario);
                text-decoration: none;
            }
            .footer a:hover {
                color: var(--azul-primario);
            }
            .social-icons {
                margin-top: 10px;
            }
            .social-icons a {
                color: var(--texto-claro);
                font-size: 16px;
                margin: 0 10px;
                text-decoration: none;
                transition: color 0.3s ease;
            }
            .social-icons a:hover {
                color: var(--naranja-primario);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <!-- Header -->
            <div class="header">
                <img src="https://clubrotariodebarranquilla.com/imagenes/logo_rotary.png" alt="Rotary Club de Barranquilla">
                <h1>Nuevo Mensaje de Contacto</h1>
            </div>
            <!-- Content -->
            <div class="content">
                <h2>Detalles del Mensaje</h2>
                <p>Hemos recibido un nuevo mensaje a través del formulario de contacto del Club Rotario de Barranquilla. A continuación, se presentan los detalles:</p>
                <table>
                    <tr>
                        <td class="label">Nombre Completo:</td>
                        <td class="value">' . htmlspecialchars($data['nombre'], ENT_QUOTES, 'UTF-8') . '</td>
                    </tr>
                    <tr>
                        <td class="label">Correo Electrónico:</td>
                        <td class="value">' . htmlspecialchars($data['email'], ENT_QUOTES, 'UTF-8') . '</td>
                    </tr>
                    <tr>
                        <td class="label">Teléfono:</td>
                        <td class="value">' . (empty($data['telefono']) ? 'N/A' : htmlspecialchars($data['telefono'], ENT_QUOTES, 'UTF-8')) . '</td>
                    </tr>
                    <tr>
                        <td class="label">Asunto:</td>
                        <td class="value">' . htmlspecialchars($data['asunto'], ENT_QUOTES, 'UTF-8') . '</td>
                    </tr>
                </table>
                <div class="message-content">
                    <strong>Mensaje:</strong><br>
                    ' . nl2br(htmlspecialchars($data['mensaje'], ENT_QUOTES, 'UTF-8')) . '
                </div>
                <p>Por favor, revisa la información y responde al remitente lo antes posible. Para cualquier consulta, contáctanos a través de los canales oficiales.</p>
            </div>
            <!-- Footer -->
            <div class="footer">
                <p>Club Rotario de Barranquilla</p>
                <p>
                    <a href="mailto:barranquillaclubrotario@gmail.com">barranquillaclubrotario@gmail.com</a> | 
                    <a href="https://api.whatsapp.com/send?phone=573012345678">WhatsApp: +57 301 234 5678</a>
                </p>
                <div class="social-icons">
                    <a href="https://www.facebook.com/ClubRotariodeBarranquilla/?locale=es_LA" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com/clubrotariodebarranquilla/?hl=es" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="https://twitter.com/Rotary" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="https://www.youtube.com/user/rotary" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                </div>
                <p>© 2025 Club Rotario de Barranquilla. Todos los derechos reservados.</p>
            </div>
        </div>
    </body>
    </html>';

    $headers = "From: noreply@clubrotariodebarranquilla.com\r\n" .
               "Reply-To: $email\r\n" .
               "Content-Type: text/html; charset=UTF-8\r\n" .
               "MIME-Version: 1.0\r\n";

    return mail($to, $subject, $htmlContent, $headers);
}

// Manejo del formulario
$error_messages = [];
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['send_message'])) {
    // Validar CSRF
    if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
        $error_messages[] = $lang['error'];
    } else {
        // Sanitizar y validar datos
        $nombre = sanitizeInput($_POST['nombre'] ?? '');
        $email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
        $telefono = sanitizeInput($_POST['telefono'] ?? '');
        $asunto_key = sanitizeInput($_POST['asunto'] ?? '');
        $mensaje = sanitizeInput($_POST['mensaje'] ?? '');

        // Mapear asunto a texto legible
        $asunto_map = [
            'informacion' => $lang['info'],
            'membresia' => $lang['membership'],
            'donaciones' => $lang['donations'],
            'proyectos' => $lang['projects'],
            'eventos' => $lang['events'],
            'otros' => $lang['other'],
            'info' => $lang['info'],
            'membership' => $lang['membership'],
            'donations' => $lang['donations'],
            'projects' => $lang['projects'],
            'events' => $lang['events'],
            'other' => $lang['other']
        ];
        $asunto = isset($asunto_map[$asunto_key]) ? $asunto_map[$asunto_key] : '';

        // Validaciones
        if (empty($nombre) || !$email || empty($asunto_key) || empty($mensaje)) {
            $error_messages[] = $lang['required_field'];
        }
        if (!$email) {
            $error_messages[] = $lang['invalid_email'];
        }
        if (!array_key_exists($asunto_key, $asunto_map)) {
            $error_messages[] = $lang['error'];
        }

        if (empty($error_messages)) {
            // Preparar datos para el correo
            $data = [
                'nombre' => $nombre,
                'email' => $email,
                'telefono' => $telefono,
                'asunto' => $asunto,
                'mensaje' => $mensaje
            ];

            // Enviar correo
            $subject = 'Nuevo Mensaje de Contacto';
            $email_sent = sendEmail('contacto@clubrotariodebarranquilla.com', $subject, $data, $email);

            if ($email_sent) {
                $success = $lang['success'];
                $_SESSION['csrf_token'] = bin2hex(random_bytes(32)); // Regenerar token
            } else {
                $error_messages[] = $lang['error'];
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="<?php echo htmlspecialchars($idioma, ENT_QUOTES, 'UTF-8'); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php echo $idioma == 'es' ? 'Contacta al Rotary Club de Barranquilla - Estamos listos para responder tus preguntas y escuchar tus ideas' : 'Contact the Rotary Club of Barranquilla - We are ready to answer your questions and hear your ideas'; ?>">
    <meta name="keywords" content="Rotary Club, Barranquilla, contacto, información, unirse, donar">
    <meta name="author" content="Rotary Club de Barranquilla">
    <title><?php echo htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?> | Rotary Club de Barranquilla</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --azul-primario: #00a2e0;
            --azul-oscuro: #17458f;
            --azul-claro: #b9d9eb;
            --naranja-primario: #f7a81b;
            --naranja-oscuro: #898a8d;
            --gris-primario: #f8f4f4;
            --gris-claro: #d0cfcd;
            --gris-oscuro: #333;
            --blanco: #ffffff;
            --texto: #333;
            --texto-claro: rgba(255, 255, 255, 0.9);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body {
            background-color: var(--blanco);
            color: var(--texto);
            line-height: 1.6;
            overflow-x: hidden;
        }
        .top-social-bar {
            background-color: var(--gris-primario);
            padding: 10px 0;
            text-align: center;
        }
        .top-social-container {
            width: 95%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .social-icons {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            flex-wrap: wrap;
        }
        .social-icons a {
            color: var(--azul-oscuro);
            font-size: 15px;
            width: auto;
            height: 30px;
            padding: 0 8px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        .social-icons a:hover {
            color: var(--blanco);
            background-color: var(--azul-primario);
            transform: translateY(-3px);
        }
        .social-icons a i {
            margin-right: 5px;
        }
        header {
            background-color: var(--blanco);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 2px 0;
        }
        .container {
            width: 95%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--azul-primario);
        }
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 21px;
            color: var(--azul-primario);
            cursor: pointer;
        }
        nav {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
        }
        nav > a, .dropdown {
            display: inline-block;
            min-width: 100px;
            text-align: center;
        }
        nav > a, .dropdown-btn {
            color: var(--texto);
            padding: 12px 15px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            border-radius: 4px;
            font-size: 16px;
            font-family: 'Poppins', sans-serif;
            margin: 2px 0;
            border: none;
            background: none;
            cursor: pointer;
            text-align: center;
            display: inline-block;
        }
        nav > a:not(.donate-btn):hover, 
        .dropdown-btn:hover {
            color: var(--azul-primario);
            background-color: rgba(0, 87, 183, 0.05);
        }
        .donate-btn {
            background-color: var(--naranja-primario);
            color: var(--blanco) !important;
            padding: 12px 15px !important;
            margin-left: 5px;
        }
        .donate-btn:hover {
            background-color: var(--naranja-oscuro);
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--blanco);
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-radius: 4px;
            z-index: 1;
            top: 100%;
            left: 0;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        .dropdown:hover .dropdown-content {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        .dropdown-content a {
            color: var(--texto);
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            text-align: left;
            font-size: 15px;
        }
        .dropdown-content a:hover {
            background-color: var(--gris-claro);
            color: var(--azul-primario);
            border-left: 3px solid var(--naranja-primario);
        }
        .contact-section {
            padding: 80px 0;
            background-color: var(--gris-primario);
        }
        .contact-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
        }
        .contact-form {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
        }
        .contact-card {
            background: var(--blanco);
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        h2, h3 {
            color: var(--azul-primario);
            text-align: center;
            margin-bottom: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        label {
            font-weight: 500;
            color: var(--azul-oscuro);
        }
        input, textarea, select {
            padding: 12px 15px;
            border: 1px solid var(--gris-claro);
            border-radius: 4px;
            font-size: 16px;
            transition: all 0.3s ease;
            width: 100%;
        }
        input:focus, textarea:focus, select:focus {
            border-color: var(--azul-primario);
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 162, 224, 0.1);
        }
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        .submit-btn {
            background-color: var(--naranja-primario);
            color: var(--blanco);
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
            width: 100%;
        }
        .submit-btn:hover {
            background-color: var(--naranja-oscuro);
        }
        .error-message, .success-message {
            text-align: center;
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 4px;
        }
        .error-message {
            background-color: #ffebee;
            color: #d32f2f;
        }
        .success-message {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .error-list {
            list-style-type: none;
            padding: 0;
        }
        .error-list li {
            margin-bottom: 5px;
        }
        footer {
            background-color: var(--gris-oscuro);
            color: var(--blanco);
            padding: 50px 0 30px;
        }
        .footer-content {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-column {
            flex: 1;
            min-width: 200px;
        }
        .footer-column h3 {
            color: var(--naranja-primario);
            margin-bottom: 20px;
            font-size: 20px;
        }
        .footer-column p {
            text-align: left;
            color: rgba(255, 255, 255, 0.7);
        }
        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-links a:hover {
            color: var(--naranja-primario);
        }
        .footer-social {
            margin-bottom: 30px;
        }
        .footer-social .social-icons {
            justify-content: center;
        }
        .footer-social .social-icons a {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--blanco);
        }
        .footer-social .social-icons a:hover {
            background-color: var(--naranja-primario);
            color: var(--blanco);
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }
        .footer-bottom p {
            text-align: left;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
        }
        .footer-bottom a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-bottom a:hover {
            color: var(--naranja-primario);
        }
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            nav {
                display: none;
                width: 100%;
                flex-direction: column;
                margin-top: 15px;
            }
            nav > a, .dropdown-btn {
                width: 100%;
                text-align: left;
                padding: 12px 20px;
            }
            .donate-btn {
                margin-left: 0;
                margin-top: 5px;
                text-align: center;
            }
            .dropdown {
                width: 100%;
            }
            .dropdown-content {
                position: static;
                width: 100%;
                box-shadow: none;
                opacity: 1;
                transform: none;
                display: none;
            }
            .dropdown:hover .dropdown-content {
                display: block;
            }
            .contact-container {
                flex-direction: column;
            }
            .contact-form {
                max-width: 100%;
            }
            .contact-card {
                padding: 20px;
            }
        }
        @media (max-width: 480px) {
            .footer-content {
                flex-direction: column;
                gap: 30px;
            }
            .social-icons {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- BARRA SUPERIOR DE REDES SOCIALES -->
    <div class="top-social-bar">
        <div class="top-social-container">
            <div class="social-icons">
                <a href="https://my.rotary.org/es" target="_blank" aria-label="My Rotary"><i class="fa fa-home"></i> My Rotary</a>
                <a href="https://www.facebook.com/ClubRotariodeBarranquilla/?locale=es_LA" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i> Facebook</a>
                <a href="https://www.instagram.com/clubrotariodebarranquilla/?hl=es" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i> Instagram</a>
                <a href="https://twitter.com/Rotary" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i> Twitter</a>
                <a href="https://www.youtube.com/user/rotary" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i> YouTube</a>
                <a href="https://api.whatsapp.com/send?phone=573012345678" target="_blank" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i> WhatsApp</a>
            </div>
        </div>
    </div>
    <!-- ENCABEZADO PRINCIPAL -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo"><img src="https://clubrotariodebarranquilla.com/imagenes/logo_rotary.png" width="200" height="68" alt="Rotary Club de Barranquilla"></div>
                <button class="menu-toggle" aria-label="Menú">
                    <i class="fas fa-bars"></i>
                </button>
                <nav id="main-nav">
                    <a href="index.html">Inicio</a>
                    <div class="dropdown">
                        <button class="dropdown-btn">Sobre Rotary</button>
                        <div class="dropdown-content">
                            <a href="historia.html">Historia</a>
                            <a href="mision-vision.html">Misión y Visión</a>
                            <a href="socios.html">Socios</a>
                            <a href="junta-directiva.html">Junta Directiva y Comités</a>
                            <a href="normatividad.html">Normatividad</a>
                            <a href="tributarios.html">Documentos Tributarios</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropdown-btn">Proyectos</button>
                        <div class="dropdown-content">
                            <a href="areas-interes.html">Áreas de Interés</a>
                            <a href="proyectos-ejecucion.html">Proyectos en ejecución</a>
                            <a href="propuestas.html">Propuestas de Proyectos</a>
                            <a href="proyectos-finalizados.html">Proyectos Finalizados</a>
                            <a href="servicios-a-la-comunidad.html">Servicio en Comunidad</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropdown-btn">Fundación Rotaria</button>
                        <div class="dropdown-content">
                            <a href="junta-fundacion-rotaria.html">Junta Directiva</a>
                            <a href="somos-fundacion-rotaria.html">Quienes Somos</a>
                        </div>
                    </div>
                    <a href="galeria.html">Galería</a>
                    <div class="dropdown">
                        <button class="dropdown-btn">Juventudes Rotarias</button>
                        <div class="dropdown-content">
                            <a href="rotaract.html">Rotaract</a>
                            <a href="interact.html">Interact</a>
                        </div>
                    </div>
                    <a href="contacto.php">Contacto</a>
                    <a href="registros.php" class="donate-btn">Afiliate</a>
                </nav>
            </div>
        </div>
    </header>
    <!-- SECCIÓN DE CONTACTO -->
    <section class="contact-section">
        <div class="container">
            <h2><?php echo htmlspecialchars($lang['title'], ENT_QUOTES, 'UTF-8'); ?></h2>
            <p style="text-align: center;"><?php echo htmlspecialchars($lang['subtitle'], ENT_QUOTES, 'UTF-8'); ?></p>
            <div class="contact-container">
                <div class="contact-form">
                    <div class="contact-card">
                        <h3><?php echo $idioma == 'es' ? 'Envíanos un Mensaje' : 'Send Us a Message'; ?></h3>
                        <?php if (!empty($success)): ?>
                            <div class="success-message"><?php echo htmlspecialchars($success, ENT_QUOTES, 'UTF-8'); ?></div>
                            <a href="index.html" class="submit-btn"><?php echo $lang['home']; ?></a>
                        <?php elseif (!empty($error_messages)): ?>
                            <div class="error-message">
                                <ul class="error-list">
                                    <?php foreach ($error_messages as $error): ?>
                                        <li><?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?></li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endif; ?>
                        <?php if (empty($success)): ?>
                            <form action="contacto.php?lang=<?php echo $idioma; ?>" method="POST">
                                <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token'], ENT_QUOTES, 'UTF-8'); ?>">
                                <div class="form-group">
                                    <label for="nombre"><?php echo $lang['name']; ?></label>
                                    <input type="text" id="nombre" name="nombre" required>
                                </div>
                                <div class="form-group">
                                    <label for="email"><?php echo $lang['email']; ?></label>
                                    <input type="email" id="email" name="email" required>
                                </div>
                                <div class="form-group">
                                    <label for="telefono"><?php echo $lang['phone']; ?></label>
                                    <input type="tel" id="telefono" name="telefono">
                                </div>
                                <div class="form-group">
                                    <label for="asunto"><?php echo $lang['subject']; ?></label>
                                    <select id="asunto" name="asunto" required>
                                        <option value=""><?php echo $lang['select_subject']; ?></option>
                                        <option value="<?php echo $idioma == 'es' ? 'informacion' : 'info'; ?>"><?php echo $lang['info']; ?></option>
                                        <option value="<?php echo $idioma == 'es' ? 'membresia' : 'membership'; ?>"><?php echo $lang['membership']; ?></option>
                                        <option value="<?php echo $idioma == 'es' ? 'donaciones' : 'donations'; ?>"><?php echo $lang['donations']; ?></option>
                                        <option value="<?php echo $idioma == 'es' ? 'proyectos' : 'projects'; ?>"><?php echo $lang['projects']; ?></option>
                                        <option value="<?php echo $idioma == 'es' ? 'eventos' : 'events'; ?>"><?php echo $lang['events']; ?></option>
                                        <option value="<?php echo $idioma == 'es' ? 'otros' : 'other'; ?>"><?php echo $lang['other']; ?></option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="mensaje"><?php echo $lang['message']; ?></label>
                                    <textarea id="mensaje" name="mensaje" required></textarea>
                                </div>
                                <button type="submit" name="send_message" class="submit-btn"><?php echo $lang['submit']; ?></button>
                            </form>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- PIE DE PÁGINA -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Contáctenos</h3>
                    <p>barranquillaclubrotario@gmail.com</p>
                    <p><a href="https://api.whatsapp.com/send?phone=573012345678" target="_blank">WhatsApp: +57 301 234 5678</a></p>
                </div>
                <div class="footer-column">
                    <h3>Enlaces</h3>
                    <div class="footer-links">
                        <a href="index.html">Inicio</a>
                        <a href="historia.html">Historia</a>
                        <a href="contacto.php">Contacto</a>
                        <a href="registros.php">Afiliate</a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Síguenos</h3>
                    <div class="footer-social">
                        <div class="social-icons">
                            <a href="https://www.facebook.com/ClubRotariodeBarranquilla/?locale=es_LA" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.instagram.com/clubrotariodebarranquilla/?hl=es" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="https://twitter.com/Rotary" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="https://www.youtube.com/user/rotary" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>My Rotary</h3>
                    <p><a href="https://my.rotary.org/es" target="_blank">Visita My Rotary</a></p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2025 Rotary Club de Barranquilla. Todos los derechos reservados.</p>
                <div>
                    <a href="politica-privacidad.html">Política de Privacidad</a> | 
                    <a href="terminos-servicio.html">Términos de Servicio</a>
                </div>
            </div>
        </div>
    </footer>
    <script>
        // Menú hamburguesa
        document.querySelector('.menu-toggle').addEventListener('click', function() {
            const nav = document.getElementById('main-nav');
            nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
        });
    </script>
</body>
</html>