<?php
/**
 * About page content.
 *
 * @package ALFASMART
 */

$video_file  = alfasmart_get_image_url(alfasmart_get_about_field('about_video_file'), 'video.mp4');
$video_cover = alfasmart_get_image_url(alfasmart_get_about_field('about_video_cover'), 'about-video-bg.webp');
$hero_highlight_color = alfasmart_get_about_field('about_hero_highlight_color', '#f5b400');
?>
<section class="as-inner-hero" aria-labelledby="as-about-page-title">
    <div class="video-shape" aria-hidden="true">
        <video class="as-inner-hero-video" src="<?php echo esc_url(alfasmart_img('breadcrumb.mp4')); ?>" autoplay muted loop playsinline></video>
    </div>
    <div class="container as-section-container">
        <div class="as-inner-hero-content as-reveal">
            <p class="as-section-kicker"><?php echo esc_html(alfasmart_get_about_field('about_hero_kicker')); ?></p>
            <h1 class="as-inner-title" id="as-about-page-title" style="--as-inner-highlight-color: <?php echo esc_attr($hero_highlight_color); ?>;"><?php echo alfasmart_highlight_text(alfasmart_get_about_field('about_hero_title'), alfasmart_get_about_field('about_hero_highlight_text')); ?></h1>
            <p class="as-inner-start-para"><?php echo esc_html(alfasmart_get_about_field('about_hero_description')); ?></p>
        </div>
        <div class="as-who-we-are as-reveal">
            <h2><?php echo esc_html(alfasmart_get_about_field('about_who_title')); ?></h2>
            <p><?php echo alfasmart_html(alfasmart_get_about_field('about_who_description')); ?></p>
        </div>
    </div>
</section>

<?php get_template_part('template-parts/pages/AboutAlphaSmart'); ?>

<section class="as-inner-video-section" aria-label="<?php esc_attr_e('Company video', 'alfasmart'); ?>">
    <div class="container as-section-container">
        <a class="as-video-frame as-reveal" href="<?php echo esc_url($video_file); ?>" data-fancybox="about-company-video" data-type="html5video" aria-label="<?php esc_attr_e('Play company video', 'alfasmart'); ?>">
            <img src="<?php echo esc_url($video_cover); ?>" alt="Modern architecture building exterior">
            <span class="as-play-button" aria-hidden="true"><i class="fa-solid fa-play"></i></span>
        </a>
    </div>
</section>

<section class="as-about-details-section" aria-labelledby="as-about-details-title">
    <div class="container as-section-container">
        <div class="row as-card-row">
            <?php foreach ((array) alfasmart_get_about_field('about_info_cards') as $card) : ?>
                <div class="col-12 col-lg-6">
                    <article class="as-about-info-card <?php echo esc_attr($card['style_class'] ?? ''); ?> as-reveal">
                        <?php alfasmart_render_icon($card['icon_type'] ?? 'icon', $card['icon'] ?? '', $card['icon_image'] ?? null, '', 'fa-solid fa-arrow-trend-up'); ?>
                        <h2><?php echo esc_html($card['title'] ?? ''); ?></h2>
                        <p class="as-about-info-para"><?php echo esc_html($card['description'] ?? ''); ?></p>
                        <span class="as-about-info-watermark" aria-hidden="true"><i class="<?php echo esc_attr(alfasmart_normalize_icon_class($card['icon'] ?? '') ?: 'fa-solid fa-arrow-trend-up'); ?>"></i></span>
                    </article>
                </div>
            <?php endforeach; ?>
        </div>

        <article class="as-about-do-card as-reveal" id="as-about-details-title">
            <div>
                <h2><?php echo esc_html(alfasmart_get_about_field('about_what_title')); ?></h2>
                <p><?php echo esc_html(alfasmart_get_about_field('about_what_description')); ?></p>
            </div>
            <div class="as-about-tags" aria-label="<?php esc_attr_e('Business areas', 'alfasmart'); ?>">
                <?php foreach ((array) alfasmart_get_about_field('about_business_areas') as $area) : ?>
                    <span><?php echo esc_html($area['label'] ?? ''); ?></span>
                <?php endforeach; ?>
            </div>
        </article>

        <div class="row as-card-row">
            <?php foreach ((array) alfasmart_get_about_field('about_text_cards') as $text_card) : ?>
                <div class="col-12 col-lg-6">
                    <article class="as-about-text-card as-about-growth-card as-reveal">
                        <h2><?php echo esc_html($text_card['title'] ?? ''); ?></h2>
                        <p><?php echo esc_html($text_card['description'] ?? ''); ?></p>
                    </article>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="as-about-light-cta-section" aria-labelledby="as-about-light-cta-title">
    <div class="container as-section-container">
        <div class="as-about-light-cta as-reveal">
            <h2 id="as-about-light-cta-title"><?php echo esc_html(alfasmart_get_about_field('about_cta_title')); ?></h2>
            <p><?php echo esc_html(alfasmart_get_about_field('about_cta_description')); ?></p>
            <div>
                <a href="<?php echo esc_url(alfasmart_get_about_field('about_cta_primary_url')); ?>" class="as-primary-button as-magnetic"><?php echo esc_html(alfasmart_get_about_field('about_cta_primary_text')); ?> <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                <a href="<?php echo esc_url(alfasmart_get_about_field('about_cta_secondary_url')); ?>" class="as-outline-button as-magnetic"><?php echo esc_html(alfasmart_get_about_field('about_cta_secondary_text')); ?></a>
            </div>
        </div>
    </div>
</section>

<section class="as-core-values-section" aria-labelledby="as-core-values-title">
    <div class="container as-section-container">
        <h2 class="as-core-values-title as-reveal" id="as-core-values-title"><?php echo esc_html(alfasmart_get_about_field('about_values_title')); ?></h2>
        <div class="row as-card-row">
            <?php foreach ((array) alfasmart_get_about_field('about_values') as $value) : ?>
                <div class="col-12 col-md-6 col-lg-4">
                    <article class="as-core-value-card as-reveal">
                        <h3><?php echo esc_html($value['title'] ?? ''); ?></h3>
                        <p><?php echo esc_html($value['description'] ?? ''); ?></p>
                    </article>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php get_template_part('template-parts/home/HomeCTA'); ?>
