<?php $title = 'Blog-cv'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Cómo hacer un CV profesional - ContratandoGT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>">

  <!-- Iconos -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <!-- Tu CSS -->
  <link rel="stylesheet" href="<?= base_url('css/style.css') ?>">
</head>

<body>

<!-- NAVBAR -->
<?= view('partials/header') ?>

<!-- HERO -->
<section class="hero hero-recursos text-center">
  <div class="container">
    <h1 class="fw-bold">Cómo hacer un CV profesional</h1>
    <p class="text-muted">Guía práctica para destacar y conseguir empleo</p>
  </div>
</section>

<!-- CONTENIDO -->
<section class="section">
  <div class="container">

    <div class="row justify-content-center">
      <div class="col-lg-8">

        <div class="card p-4 shadow-sm border-0">

          <img src="<?= base_url('img/recursos/hacer_un_cv_profesional.png') ?>" class="img-fluid rounded mb-4" alt="CV">

          <p>
            Un currículum vitae (CV) es tu carta de presentación ante las empresas. 
            Un buen CV puede marcar la diferencia entre conseguir una entrevista o ser ignorado.
          </p>

          <h5 class="fw-bold mt-4">1. Información personal clara</h5>
          <p>
            Incluye tu nombre completo, número de teléfono y correo electrónico profesional.
          </p>

          <h5 class="fw-bold mt-4">2. Perfil profesional</h5>
          <p>
            Agrega un pequeño resumen sobre quién eres, tus habilidades y tu objetivo laboral.
          </p>

          <h5 class="fw-bold mt-4">3. Experiencia laboral</h5>
          <ul>
            <li>Nombre de la empresa</li>
            <li>Puesto desempeñado</li>
            <li>Fecha</li>
            <li>Logros importantes</li>
          </ul>

          <h5 class="fw-bold mt-4">4. Educación</h5>
          <p>
            Detalla tus estudios, cursos y certificaciones relevantes.
          </p>

          <h5 class="fw-bold mt-4">5. Habilidades</h5>
          <p>
            Incluye habilidades técnicas y blandas (trabajo en equipo, liderazgo, etc.).
          </p>

          <h5 class="fw-bold mt-4">6. Diseño limpio</h5>
          <p>
            Usa un diseño simple, profesional y fácil de leer. Evita colores excesivos.
          </p>

          <h5 class="fw-bold mt-4">7. Errores comunes</h5>
          <ul>
            <li>Faltas de ortografía</li>
            <li>Información innecesaria</li>
            <li>Formato desordenado</li>
          </ul>

          <h5 class="fw-bold mt-4">Conclusión</h5>
          <p>
            Un buen CV debe ser claro, directo y destacar tus fortalezas. 
            Dedica tiempo a crearlo correctamente.
          </p>

          <div class="text-center mt-4">
            <a href="<?= base_url('empleo') ?>" class="btn btn-primary">Buscar empleos</a>
          </div>

        </div>

      </div>
    </div>

  </div>
</section>

<!-- FOOTER -->
<?= view('partials/footer') ?>

<script src="<?= base_url('js/bootstrap.bundle.min.js') ?>"></script>

<!-- ========================================================== -->
<!-- MODAL: LOGIN                                                -->
<!-- ========================================================== -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <h3 class="fw-bold">Bienvenido de nuevo</h3>
          <p class="text-muted">Accede a las mejores ofertas</p>
        </div>

        <button class="btn btn-outline-dark w-100 mb-3 d-flex align-items-center justify-content-center py-2">
          <img src="<?= base_url('img/logo_google.png') ?>" style="width: 18px;" class="me-2">
          Continuar con Google
        </button>

        <div class="text-center my-3 text-muted small">o con tu correo</div>

        <form id="formLogin"  action="<?= base_url('login') ?>" method="POST">
          <?= csrf_field() ?>
          <div class="mb-3">
            <input type="email" name="email" class="form-control py-2" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" name="password" class="form-control py-2" placeholder="Contraseña">
          </div>
          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Entrar</button>
        </form>

        

        <div class="text-center">
          <p class="text-muted small mb-1">¿No tienes cuenta?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#registroModal">Regístrate como postulante</a>
          </p>
          <p class="text-muted small mb-0">¿Necesitas contratar?
            <a href="#" class="text-success text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#empresaModal">Ingresa como empresa</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ========================================================== -->
<!-- MODAL: REGISTRO POSTULANTE                                  -->
<!-- ========================================================== -->
<div class="modal fade" id="registroModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <i class="bi bi-person-circle fs-1 text-primary"></i>
          <h3 class="fw-bold mt-2">Crear cuenta</h3>
          <p class="text-muted">Empieza a postular hoy mismo</p>
        </div>

        <form id="formRegistro" action="<?= base_url('registro') ?>" method="POST">
            <?= csrf_field() ?>
          <div class="mb-3">
            <input type="text" class="form-control py-2" name="nombre" placeholder="Nombre completo">
          </div>
          <div class="mb-3">
            <input type="text" class="form-control py-2" name="apellidos" placeholder="Apellidos completos">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control py-2" name="email" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" class="form-control py-2" name="password" placeholder="Crear contraseña">
          </div>
          <div class="mb-3">
            <select class="form-select py-2" name="puesto_deseado">
              <option selected disabled value="">Puesto deseado</option>
              <optgroup label="Tecnología">
                <option value="Frontend Developer">Frontend Developer</option>
                <option value="Backend Developer">Backend Developer</option>
                <option value="Fullstack Developer">Fullstack Developer</option>
                <option value="Soporte Técnico / IT">Soporte Técnico / IT</option>
                <option value="Analista de Datos">Analista de Datos</option>
              </optgroup>
              <optgroup label="Administración y Ventas">
                <option value="Administrador de Empresas">Administrador de Empresas</option>
                <option value="Asistente Administrativo">Asistente Administrativo</option>
                <option value="Vendedor / Ejecutivo de Ventas">Vendedor / Ejecutivo de Ventas</option>
                <option value="Servicio al Cliente">Servicio al Cliente</option>
              </optgroup>
              <optgroup label="Salud y Otros">
                <option value="Enfermería">Enfermería</option>
                <option value="Farmacéutico">Farmacéutico</option>
                <option value="Perito Mecánico">Perito Mecánico</option>
                <option value="Diseñador Gráfico / UI">Diseñador Gráfico / UI</option>
              </optgroup>
            </select>
          </div>
          <div class="mb-3">
            <select class="form-select py-2" name="departamento">
              <option selected disabled value="">Selecciona tu departamento</option>
              <option>Alta Verapaz</option><option>Baja Verapaz</option>
              <option>Chimaltenango</option><option>Chiquimula</option>
              <option>El Progreso</option><option>Escuintla</option>
              <option>Guatemala</option><option>Huehuetenango</option>
              <option>Izabal</option><option>Jalapa</option>
              <option>Jutiapa</option><option>Petén</option>
              <option>Quetzaltenango</option><option>Quiché</option>
              <option>Retalhuleu</option><option>Sacatepéquez</option>
              <option>San Marcos</option><option>Santa Rosa</option>
              <option>Sololá</option><option>Suchitepéquez</option>
              <option>Totonicapán</option><option>Zacapa</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Crear Cuenta</button>
        </form>

        <hr class="my-4">
        <div class="text-center">
          <p class="text-muted small mb-1">¿Ya tienes cuenta?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#loginModal">Inicia sesión</a>
          </p>
          <p class="text-muted small mb-0">¿Necesitas contratar?
            <a href="#" class="text-success text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#empresaModal">Regístrate como empresa</a>
          </p>
        </div>
        <p class="text-center text-muted small mt-3">
          Al registrarte, aceptas nuestros términos y condiciones.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- ========================================================== -->
<!-- MODAL: REGISTRO EMPRESA                                     -->
<!-- ========================================================== -->
<div class="modal fade" id="empresaModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <i class="bi bi-building fs-1 text-success"></i>
          <h3 class="fw-bold mt-2">Registrar empresa</h3>
          <p class="text-muted">Publica empleos y encuentra talento</p>
        </div>

        <form id="formEmpresa">
          <div class="mb-3">
            <input type="text" class="form-control py-2" id="emp_nombre_empresa" placeholder="Nombre de la empresa">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control py-2" id="emp_email" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" class="form-control py-2" id="emp_password" placeholder="Crear contraseña">
          </div>
          <div class="mb-3">
            <input type="text" class="form-control py-2" id="emp_sitio_web" placeholder="Sitio web (opcional)">
          </div>
          <div class="mb-3">
            <select class="form-select py-2" id="emp_ubicacion">
              <option selected disabled value="">Departamento donde opera</option>
              <option>Alta Verapaz</option><option>Baja Verapaz</option>
              <option>Chimaltenango</option><option>Chiquimula</option>
              <option>El Progreso</option><option>Escuintla</option>
              <option>Guatemala</option><option>Huehuetenango</option>
              <option>Izabal</option><option>Jalapa</option>
              <option>Jutiapa</option><option>Petén</option>
              <option>Quetzaltenango</option><option>Quiché</option>
              <option>Retalhuleu</option><option>Sacatepéquez</option>
              <option>San Marcos</option><option>Santa Rosa</option>
              <option>Sololá</option><option>Suchitepéquez</option>
              <option>Totonicapán</option><option>Zacapa</option>
            </select>
          </div>
          <button type="submit" class="btn btn-success w-100 py-2 fw-bold shadow-sm">Crear cuenta empresa</button>
        </form>

        <hr class="my-4">
        <div class="text-center">
          <p class="text-muted small mb-1">¿Ya tienes cuenta?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#loginModal">Inicia sesión</a>
          </p>
          <p class="text-muted small mb-0">¿Buscas empleo?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#registroModal">Regístrate como postulante</a>
          </p>
        </div>
        <p class="text-center text-muted small mt-3">
          Al registrarte, aceptas nuestros términos y condiciones.
        </p>
      </div>
    </div>
  </div>
</div>


</body>
</html>