pflores.linkedcorp.net/frontend/lumina-cv-theme/front-page.php

<?php

declare(strict_types=1);

get_header();

$cv             = function_exists('pflores_get_cv_data') ? pflores_get_cv_data() : lumina_cv_data();
$hero           = $cv['hero'];
$metrics        = $cv['metrics'];
$highlights     = $cv['highlights'];
$summary        = $cv['summary'];
$impact         = $cv['impact'];
$experience     = $cv['experience'];
$education      = $cv['education'];
$certifications = $cv['certifications'];
$competencies   = $cv['competencies'];
$volunteer      = $cv['volunteer'];
$additional     = $cv['additional'];

$qrImage      = get_template_directory_uri() . '/assets/images/patricia-flores-qr.png';
$publicUrl    = 'https://pflores.linkedcorp.net';

$heroName     = $hero['name'];
$heroRole     = $hero['role'];
$heroIntro    = $hero['intro'];
$heroLocation = $hero['location'];
$heroEmail    = $hero['email'];
$heroPhone    = $hero['phone'];
$heroCtaLabel = 'Ver trayectoria';
$heroCtaUrl   = '#experiencia';
$linkedin     = $hero['linkedin'];
$acfPhoto     = $cv['photo'] ?? '';
$profileImage = $acfPhoto ?: get_template_directory_uri() . '/assets/images/patricia-flores-profile.jpeg';
$cvFile       = get_template_directory_uri() . '/assets/docs/CV_Patricia_Flores_Sanchez_ES_FINAL.docx';
?>

<!-- ================================================
     HERO — gradiente teal centrado, foto circular
     ================================================ -->
<section class="lm-hero">
    <div class="lm-hero__bg-pattern" aria-hidden="true"></div>

    <div class="lm-hero__center">
        <div class="lm-hero__avatar">
            <img
                src="<?php echo esc_url($profileImage); ?>"
                alt="<?php echo esc_attr($heroName); ?>"
                class="lm-hero__photo"
            >
        </div>

        <p class="lm-eyebrow lm-eyebrow--light"><?php echo esc_html($hero['eyebrow']); ?></p>
        <h1 class="lm-hero__name"><?php echo esc_html($heroName); ?></h1>
        <p class="lm-hero__role"><?php echo esc_html($heroRole); ?></p>
        <p class="lm-hero__intro"><?php echo esc_html($heroIntro); ?></p>

        <div class="lm-hero__chips">
            <span class="lm-chip lm-chip--hero">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <?php echo esc_html($heroLocation); ?>
            </span>
            <?php if ($heroEmail) : ?>
                <a class="lm-chip lm-chip--hero" href="mailto:<?php echo esc_attr(antispambot($heroEmail)); ?>">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    <?php echo esc_html($heroEmail); ?>
                </a>
            <?php endif; ?>
            <?php if ($heroPhone) : ?>
                <a class="lm-chip lm-chip--hero" href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $heroPhone)); ?>">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.41 2 2 0 0 1 3.6 1.25h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.96a16 16 0 0 0 6.02 6.02l.96-.96a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg>
                    <?php echo esc_html($heroPhone); ?>
                </a>
            <?php endif; ?>
            <?php if ($linkedin) : ?>
                <a class="lm-chip lm-chip--hero" href="<?php echo esc_url($linkedin); ?>" target="_blank" rel="noreferrer">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
                    LinkedIn
                </a>
            <?php endif; ?>
        </div>

        <div class="lm-hero__actions">
            <a class="lm-btn lm-btn--amber" href="<?php echo esc_url($heroCtaUrl); ?>">
                <?php echo esc_html($heroCtaLabel); ?>
            </a>
            <a class="lm-btn lm-btn--white" href="<?php echo esc_url(home_url('/?cv_pdf=1')); ?>">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                <?php esc_html_e('Descargar CV PDF', 'lumina'); ?>
            </a>
            <button class="lm-btn lm-btn--ghost-light" type="button" data-lumina-print>
                <?php esc_html_e('Versión imprimible', 'lumina'); ?>
            </button>
        </div>
    </div>

    <!-- Métricas strip -->
    <div class="lm-hero__metrics">
        <?php foreach ($metrics as $metric) : ?>
            <div class="lm-metric">
                <strong><?php echo esc_html($metric['value']); ?></strong>
                <span><?php echo esc_html($metric['label']); ?></span>
            </div>
        <?php endforeach; ?>
    </div>

    <!-- Wave decorativa -->
    <div class="lm-hero__wave" aria-hidden="true">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z" fill="var(--lm-bg)"/></svg>
    </div>
</section>

<!-- ================================================
     HIGHLIGHTS — 4 números de impacto
     ================================================ -->
<section class="lm-section lm-highlights-section" id="impacto">
    <div class="lm-container">
        <header class="lm-section-head lm-section-head--center">
            <p class="lm-eyebrow"><?php esc_html_e('Resultados medibles', 'lumina'); ?></p>
            <h2><?php esc_html_e('Impacto ejecutivo con alcance nacional', 'lumina'); ?></h2>
        </header>

        <div class="lm-highlights-grid">
            <?php foreach ($highlights as $h) : ?>
                <article class="lm-highlight-card">
                    <strong><?php echo esc_html($h['value']); ?></strong>
                    <span><?php echo esc_html($h['label']); ?></span>
                </article>
            <?php endforeach; ?>
        </div>

        <div class="lm-impact-row">
            <?php foreach ($impact as $item) : ?>
                <article class="lm-impact-card">
                    <div class="lm-impact-card__icon" aria-hidden="true">
                        <?php if ($item['title'] === 'Transformación digital') : ?>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                        <?php elseif ($item['title'] === 'Automatización crítica') : ?>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49M7.76 7.76a6 6 0 0 0 0 8.49"/></svg>
                        <?php else : ?>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                        <?php endif; ?>
                    </div>
                    <h3><?php echo esc_html($item['title']); ?></h3>
                    <p><?php echo esc_html($item['body']); ?></p>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- ================================================
     CUERPO PRINCIPAL — sidebar izquierdo + contenido
     ================================================ -->
<div class="lm-body lm-container">

    <!-- SIDEBAR IZQUIERDO -->
    <aside class="lm-sidebar">

        <!-- Perfil rápido -->
        <section class="lm-widget lm-widget--profile" id="resumen">
            <p class="lm-eyebrow"><?php esc_html_e('Perfil profesional', 'lumina'); ?></p>
            <h2><?php echo esc_html($summary['title']); ?></h2>
            <p><?php echo esc_html($summary['body']); ?></p>

            <dl class="lm-quick-info">
                <div>
                    <dt><?php esc_html_e('Disponibilidad', 'lumina'); ?></dt>
                    <dd><?php echo esc_html($hero['availability']); ?></dd>
                </div>
                <div>
                    <dt><?php esc_html_e('Enfoque', 'lumina'); ?></dt>
                    <dd><?php echo esc_html($hero['focus']); ?></dd>
                </div>
            </dl>
        </section>

        <!-- Competencias -->
        <section class="lm-widget lm-widget--skills">
            <p class="lm-eyebrow"><?php esc_html_e('Competencias clave', 'lumina'); ?></p>
            <h2><?php esc_html_e('Capacidades ejecutivas y técnicas', 'lumina'); ?></h2>

            <?php foreach ($competencies as $group => $items) : ?>
                <div class="lm-skill-group">
                    <h3><?php echo esc_html($group); ?></h3>
                    <div class="lm-pills">
                        <?php foreach ($items as $item) : ?>
                            <span class="lm-pill"><?php echo esc_html(is_array($item) ? ($item['name'] ?? '') : $item); ?></span>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </section>

        <!-- Voluntariado -->
        <section class="lm-widget">
            <p class="lm-eyebrow"><?php esc_html_e('Voluntariado', 'lumina'); ?></p>
            <h2><?php echo esc_html($volunteer['title']); ?></h2>
            <p class="lm-widget__year"><?php echo esc_html($volunteer['year']); ?></p>
            <p><?php echo esc_html($volunteer['body']); ?></p>
        </section>

        <!-- Datos adicionales -->
        <section class="lm-widget" id="contacto">
            <p class="lm-eyebrow"><?php esc_html_e('Información adicional', 'lumina'); ?></p>
            <h2><?php esc_html_e('Datos clave del perfil', 'lumina'); ?></h2>

            <dl class="lm-info-list">
                <?php foreach ($additional as $label => $value) : ?>
                    <div>
                        <dt><?php echo esc_html($label); ?></dt>
                        <dd><?php echo esc_html($value); ?></dd>
                    </div>
                <?php endforeach; ?>
            </dl>

            <div class="lm-contact-links">
                <?php echo wp_kses_post(lumina_contact_link('email', $heroEmail)); ?>
                <?php echo wp_kses_post(lumina_contact_link('phone', $heroPhone)); ?>
            </div>
        </section>

        <!-- Tarjeta de presentación -->
        <section class="lm-widget lm-widget--card">
            <p class="lm-eyebrow"><?php esc_html_e('Tarjeta de presentación', 'lumina'); ?></p>
            <h2><?php esc_html_e('Perfil digital', 'lumina'); ?></h2>

            <article class="lm-bcard">
                <div class="lm-bcard__header">
                    <p class="lm-bcard__name"><?php echo esc_html($heroName); ?></p>
                    <p class="lm-bcard__role"><?php echo esc_html($heroRole); ?></p>
                </div>
                <div class="lm-bcard__body">
                    <div class="lm-bcard__qr">
                        <img src="<?php echo esc_url($qrImage); ?>" alt="<?php esc_attr_e('Código QR hacia el perfil web', 'lumina'); ?>">
                    </div>
                    <div class="lm-bcard__info">
                        <p><?php echo esc_html($heroLocation); ?></p>
                        <p><?php echo esc_html($heroPhone); ?></p>
                        <p><?php echo esc_html($heroEmail); ?></p>
                        <a href="<?php echo esc_url($publicUrl); ?>" target="_blank" rel="noreferrer"><?php echo esc_html($publicUrl); ?></a>
                    </div>
                </div>
            </article>
        </section>

    </aside><!-- /.lm-sidebar -->

    <!-- CONTENIDO PRINCIPAL -->
    <div class="lm-content">

        <!-- Experiencia -->
        <section class="lm-section-inner" id="experiencia">
            <header class="lm-section-head">
                <p class="lm-eyebrow"><?php esc_html_e('Experiencia profesional', 'lumina'); ?></p>
                <h2><?php esc_html_e('Trayectoria sólida en banca, operaciones y microfinanzas', 'lumina'); ?></h2>
            </header>

            <div class="lm-timeline">
                <?php foreach ($experience as $job) : ?>
                    <article class="lm-timeline__item">
                        <div class="lm-timeline__marker" aria-hidden="true"></div>
                        <div class="lm-timeline__body">
                            <span class="lm-timeline__period"><?php echo esc_html($job['period']); ?></span>
                            <h3><?php echo esc_html($job['title']); ?></h3>
                            <p class="lm-timeline__meta">
                                <strong><?php echo esc_html($job['company']); ?></strong>
                                &middot; <?php echo esc_html($job['location']); ?>
                            </p>
                            <p class="lm-timeline__lead"><?php echo esc_html($job['lead']); ?></p>
                            <ul class="lm-timeline__bullets">
                                <?php foreach ($job['bullets'] as $bullet) : ?>
                                    <li><?php echo esc_html($bullet); ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </section>

        <!-- Formación -->
        <section class="lm-section-inner" id="formacion">
            <header class="lm-section-head">
                <p class="lm-eyebrow"><?php esc_html_e('Formación académica', 'lumina'); ?></p>
                <h2><?php esc_html_e('Base técnica y formación ejecutiva de alto nivel', 'lumina'); ?></h2>
            </header>

            <div class="lm-edu-grid">
                <?php foreach ($education as $edu) : ?>
                    <article class="lm-edu-card">
                        <span class="lm-edu-card__year"><?php echo esc_html($edu['year']); ?></span>
                        <div>
                            <h3><?php echo esc_html($edu['title']); ?></h3>
                            <p><?php echo esc_html($edu['institution']); ?></p>
                            <?php if ($edu['detail'] !== '') : ?>
                                <p class="lm-edu-card__detail"><?php echo esc_html($edu['detail']); ?></p>
                            <?php endif; ?>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </section>

        <!-- Certificaciones -->
        <section class="lm-section-inner" id="certificaciones">
            <header class="lm-section-head">
                <p class="lm-eyebrow"><?php esc_html_e('Certificaciones relevantes', 'lumina'); ?></p>
                <h2><?php esc_html_e('Actualización continua en gerencia, procesos y analítica', 'lumina'); ?></h2>
            </header>

            <div class="lm-cert-list">
                <?php foreach ($certifications as $cert) : ?>
                    <article class="lm-cert-item">
                        <span class="lm-cert-item__year"><?php echo esc_html($cert['year']); ?></span>
                        <div>
                            <h3><?php echo esc_html($cert['title']); ?></h3>
                            <p><?php echo esc_html($cert['issuer']); ?></p>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </section>

        <!-- Contenido editable de WordPress -->
        <?php while (have_posts()) : the_post(); ?>
            <?php if (trim((string) get_the_content()) !== '') : ?>
                <section class="lm-section-inner">
                    <header class="lm-section-head">
                        <p class="lm-eyebrow"><?php esc_html_e('Contenido adicional', 'lumina'); ?></p>
                        <h2><?php esc_html_e('Bloques editables desde WordPress', 'lumina'); ?></h2>
                    </header>
                    <div class="lm-entry__body">
                        <?php the_content(); ?>
                    </div>
                </section>
            <?php endif; ?>
        <?php endwhile; ?>

    </div><!-- /.lm-content -->

</div><!-- /.lm-body -->

<?php get_footer(); ?>