<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Servicios y Contacto - ITPLOT Style</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('css/fonts.css') }}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" id="main-styles-link">
    <style>
        /* --- CONFIGURACIÓN BASE --- */
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, sans-serif; }
        body { background-color: #f4f7f9; color: #333; line-height: 1.6; }
        .container { 
            max-width: 1200px; 
            margin: 40px auto; 
            display: flex; 
            flex-wrap: wrap; 
            gap: 30px; 
            padding: 0 20px; 
        }

        /* --- SECCIÓN PRINCIPAL (IZQUIERDA) --- */
        .main-content { 
            flex: 2; 
            min-width: 320px; 
            background: white; 
            padding: 30px; 
            border-radius: 12px; 
            box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
        }
        
        .main-image { 
            width: 100%; 
            border-radius: 8px; 
            margin-bottom: 25px; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        h1 { font-size: 2.2rem; color: #111; margin-bottom: 15px; font-weight: 700; }
        .description { color: #555; font-size: 1.1rem; margin-bottom: 20px; }

        /* --- BARRA LATERAL (DERECHA) --- */
        .sidebar { flex: 1; min-width: 320px; }

        .widget-title { 
            font-size: 1.4rem; 
            margin-bottom: 20px; 
            position: relative; 
            padding-bottom: 12px; 
            color: #1a1a1a;
            font-weight: 700;
        }
        .widget-title::after { 
            content: ''; position: absolute; left: 0; bottom: 0; 
            width: 40px; height: 4px; background: #e31e24; border-radius: 2px;
        }

        /* Menú de Servicios */
        .services-list { list-style: none; margin-bottom: 35px; }
        .services-list li { margin-bottom: 12px; }
        .services-list a {
            display: flex; justify-content: space-between; align-items: center;
            padding: 16px 20px; background: #ffffff; color: #444;
            text-decoration: none; font-weight: 600; border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
            border: 1px solid #eee;
        }
        .services-list a.active { background: #e31e24; color: white; border-color: #e31e24; }
        .services-list a:hover:not(.active) { background: #fdfdfd; border-color: #e31e24; transform: translateX(5px); }

        /* --- FORMULARIO DE COMENTARIOS (NATURAL STYLE) --- */
        .comment-box { 
            background: white; 
            padding: 30px; 
            border-radius: 12px; 
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
            border: 1px solid #f0f0f0;
        }
        
        .form-subtitle { font-size: 0.9rem; color: #888; margin-bottom: 25px; }

        .input-wrapper { position: relative; margin-bottom: 18px; }
        .input-wrapper i {
            position: absolute; left: 15px; top: 16px;
            color: #adb5bd; font-size: 0.9rem; transition: 0.3s;
        }

        .form-control { 
            width: 100%; 
            padding: 14px 15px 14px 45px; 
            border: 1px solid #e9ecef; 
            background-color: #f8f9fa; 
            border-radius: 8px; 
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }
        .form-control:focus { 
            background-color: #fff; border-color: #e31e24; 
            box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1); outline: none; 
        }
        .form-control:focus + i { color: #e31e24; }
        textarea.form-control { min-height: 120px; resize: vertical; }

        .btn-submit { 
            width: 100%; background: #e31e24; color: white; border: none; 
            padding: 16px; font-weight: 600; border-radius: 8px; cursor: pointer;
            display: flex; justify-content: center; align-items: center; gap: 10px;
            transition: all 0.3s;
        }
        .btn-submit:hover { background: #c21a1f; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(227, 30, 36, 0.3); }

        /* --- RESPONSIVE DESIGN --- */

        /* Tablets (Mantenemos columnas pero ajustamos proporciones) */
        @media (min-width: 768px) and (max-width: 1024px) {
            .container { flex-wrap: nowrap; gap: 20px; }
            .main-content { flex: 1.4; }
            .sidebar { flex: 1; }
            h1 { font-size: 1.8rem; }
        }

        /* Celulares */
        @media (max-width: 767px) {
            .container { flex-direction: column; margin: 20px auto; }
            .main-content, .sidebar { flex: 100%; }
            h1 { font-size: 1.6rem; }
            .btn-submit { padding: 14px; }
        }
    </style>
</head>
<body>
<header class="section page-header">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-minimal" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-fixed" data-lg-stick-up-offset="46px" data-xl-stick-up-offset="46px" data-xxl-stick-up-offset="46px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <!-- RD Navbar Panel-->
                <div class="rd-navbar-panel">
                  <!-- RD Navbar Toggle-->
                  <button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
                  <!-- RD Navbar Brand--><a class="rd-navbar-brand" href="{{ url('/Chiriuchutxt') }}"><img src="{{ asset('img/logoheader.jpg') }}" alt="" class="logo"/></a>
                </div>
                <div class="rd-navbar-main-element">
                  <div class="rd-navbar-nav-wrap" id="rd-navbar-nav-wrap-1">
                    <!-- RD Navbar Nav-->
                    <ul class="rd-navbar-nav">
                      <li class="rd-nav-item active"><a class="rd-nav-link" href="{{ url('/Chiriuchutxt') }}">Inicio</a></li>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="{{ url('/chiriuchutxt.com/blog') }}">Blog</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="{{ url('/chiriuchutxt.com/servicios') }}">Servicios</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="">Redes</a>
                        <!-- RD Navbar Dropdown-->
                        <ul class="rd-menu rd-navbar-dropdown">
                          <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="https://pe.linkedin.com/company/chiri-uchu-txt">LinkedIn</a></li>
                          <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="https://www.instagram.com/chiriuchutxt/">Instagram</a></li>
                          <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="https://www.facebook.com/ChiriUchuTXT">Facebook</a></li>
                        </ul>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="https://wa.me/51980809521?text=Hola,%20vengo%20de%20tu%20página%20web%20y%20quiero%20información" 
   target="_blank">Contactanos</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </header>
<div class="container">
    <div class="main-content">
        <img src="https://wp.ditsolution.net/itplot/wp-content/uploads/2023/04/service-details-1.jpg" alt="UX Design" class="main-image">
        <h1>Traducción</h1>
        <p class="description">
           ¿Buscando una traducción confiable y hermosa?
        </p>
        <p>Ofrecemos traducciones de calidad debido a nuestra pasión por los idiomas, la literatura y la interculturalidad. Podemos ayudarte con cualquier tipo de traducción simple y, en el caso del quechua peruano, también con traducciones validadas por un traductor oficial del Ministerio de Cultura. Trabajamos con todas las variantes del quechua y con otros idiomas originarios del Perú, así como con una gran variedad de idiomas del mundo. ¿Qué nos hace diferentes del resto? Nuestro servicio incluye CONTROL DE CALIDAD (corrección de estilo) realizado por un segundo profesional. Cada cliente tiene necesidades diferentes, así que contáctanos para hacerte llegar una cotización personalizada. WhatsApp Facebook Instagram e-mail Chiri Uchu TXT, conectando las lenguas del mundo con nuestros idiomas originarios.</p>
    </div>

    <div class="sidebar">
        <h3 class="widget-title">Otros Servicios</h3>
        <ul class="services-list">
            <li><a href="{{ route('servicios.show', 'correccion') }}">Correción de Estilo<i class="fas fa-chevron-right"></i></a></li>
            <li><a href="{{ route('servicios.show', 'transcripcion') }}">Transcripción<i class="fas fa-chevron-right"></i></a></li>
            <li><a href="{{ route('servicios.show', 'locucion') }}">Locución Profecional<i class="fas fa-chevron-right"></i></a></li>
        </ul>

        <!-- Cargar librería de Google Identity Services -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

<div class="comment-box">
    <h3 class="widget-title">Déjanos un Mensaje</h3>
    <p class="form-subtitle">Inicia sesión con Google para comentar con tu perfil real.</p>

    <!-- Previsualización del usuario una vez autenticado con Google -->
    <div id="user-google-info" style="display: none; align-items: center; gap: 12px; margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e2e8f0;">
        <img id="user-avatar-preview" src="" alt="Avatar" style="width: 42px; height: 42px; border-radius: 50%; object-fit: cover;">
        <div>
            <strong id="user-name-preview" style="display: block; font-size: 14px; color: #333;"></strong>
            <span id="user-email-preview" style="font-size: 12px; color: #666;"></span>
        </div>
    </div>

    <!-- Botón de Inicio de Sesión con Google -->
    <div id="google-btn-wrapper" style="margin-bottom: 15px;">
        <div id="g_id_onload"
             data-client_id="544170772931-sn6u21c3vsa534vdtclcfedn16g8vagk.apps.googleusercontent.com"
             data-callback="handleCredentialResponse"
             data-auto_prompt="false">
        </div>
        <div class="g_id_signin"
             data-type="standard"
             data-size="large"
             data-theme="outline"
             data-text="sign_in_with"
             data-shape="rectangular"
             data-logo_alignment="left">
        </div>
    </div>

    <!-- Formulario de envío -->
    <form id="form-comentarios" action="{{ route('comentarios.store') }}" method="POST">
        @csrf
        <!-- Campos ocultos rellenados por la API de Google -->
        <input type="hidden" name="nombre" id="input-nombre">
        <input type="hidden" name="email" id="input-email">
        <input type="hidden" name="avatar" id="input-avatar">

        <div class="input-wrapper">
            <textarea name="mensaje" class="form-control" placeholder="¿En qué podemos ayudarte?" required></textarea>
            <i class="fas fa-comment-dots"></i>
        </div>

        <!-- Botón deshabilitado por defecto hasta que el usuario se autentique en Google -->
        <button type="submit" class="btn-submit" id="btn-enviar-comentario" disabled style="opacity: 0.5; cursor: not-allowed;">
            <span>Enviar Mensaje</span>
            <i class="fas fa-paper-plane"></i>
        </button>
    </form>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // Callback llamado por la API de Google tras un login exitoso
    function handleCredentialResponse(response) {
        // Decodificar el token JWT recibido de Google
        const payload = JSON.parse(atob(response.credential.split('.')[1]));

        // Asignar los valores reales a los inputs ocultos
        document.getElementById('input-nombre').value = payload.name;
        document.getElementById('input-email').value = payload.email;
        document.getElementById('input-avatar').value = payload.picture;

        // Mostrar el perfil del usuario autenticado
        document.getElementById('user-avatar-preview').src = payload.picture;
        document.getElementById('user-name-preview').innerText = payload.name;
        document.getElementById('user-email-preview').innerText = payload.email;
        document.getElementById('user-google-info').style.display = 'flex';

        // Ocultar botón de Google y activar botón de envío
        document.getElementById('google-btn-wrapper').style.display = 'none';
        const btnSubmit = document.getElementById('btn-enviar-comentario');
        btnSubmit.disabled = false;
        btnSubmit.style.opacity = '1';
        btnSubmit.style.cursor = 'pointer';
    }

    // Envío AJAX con jQuery + SweetAlert2
    window.onload = function() {
        if (window.jQuery) {
            $('#form-comentarios').on('submit', function(e) {
                e.preventDefault(); 
                
                var form = $(this);
                var btn = form.find('.btn-submit');
                
                // Deshabilitar botón para evitar envíos dobles
                btn.prop('disabled', true).css('opacity', '0.7');

                $.ajax({
                    type: "POST",
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function(response) {
                        // Muestra la alerta de éxito con la frase solicitada
                        Swal.fire({
                            icon: 'success',
                            title: 'Comentario enviado',
                            text: response.message || 'Tu comentario ha sido publicado exitosamente.',
                            confirmButtonColor: '#e31e24'
                        });

                        form[0].reset();
                        
                        // Restablecer los valores de los inputs ocultos
                        $('#input-nombre').val('');
                        $('#input-email').val('');
                        $('#input-avatar').val('');
                        
                        // Restablecer la vista de autenticación
                        $('#user-google-info').hide();
                        $('#google-btn-wrapper').show();
                        btn.prop('disabled', true).css({'opacity': '0.5', 'cursor': 'not-allowed'});
                    },
                    error: function(xhr) {
                        var errorMsg = "Hubo un error al enviar el comentario.";
                        if(xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg
                        });
                        btn.prop('disabled', false).css({'opacity': '1', 'cursor': 'pointer'});
                    }
                });
            });
        }
    };
</script>
</div>
    </div>
</div>
<footer class="section footer-linked bg-gray-700">
       
        <div class="footer-linked-aside">
          <div class="container">
            <!-- Rights-->
            <p class="rights"><span>&copy;&nbsp;</span><span class="copyright-year"></span><span>&nbsp;</span><span>chiriuchutxt.com.</span><span>&nbsp;</span><br class="d-sm-none"/><a href="privacy-policy.html">Todos los Derechos Reservados.</a></p>
          </div>
        </div>
      </footer>
<!-- ARCHIVOS JS NECESARIOS PARA INICIALIZAR EL HEADER -->
    <script src="{{ asset('js/core.min.js') }}"></script>
    <script src="{{ asset('js/script.js') }}"></script>
    <script>
    fetch('/update-view-data/blog', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });
</script>
</body>
</html>
