✏️ Editing: star4hire-visual-builder-blocks.php

<?php
/**
 * Plugin Name: STAR4Hire Visual Builder Blocks
 * Description: Native editable STAR4Hire blocks for the WordPress Site Editor. Includes a dynamic video/image hero that avoids block validation errors.
 * Version: 1.3.0
 * Author: STAR4Hire
 * Requires at least: 6.3
 * Requires PHP: 7.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function s4h_vbb_register_assets() {
    wp_register_script(
        's4h-vbb-editor',
        plugins_url( 'assets/editor.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-block-editor', 'wp-i18n' ),
        '1.3.0',
        true
    );

wp_register_style(
        's4h-vbb-style',
        plugins_url( 'assets/style.css', __FILE__ ),
        array(),
        '1.3.0'
    );

wp_register_style(
        's4h-vbb-editor-style',
        plugins_url( 'assets/editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        '1.3.0'
    );
}
add_action( 'init', 's4h_vbb_register_assets', 5 );

function s4h_vbb_highlight_word( $text, $word ) {
    $text = (string) $text;
    $word = trim( (string) $word );
    if ( '' === $word ) {
        return esc_html( $text );
    }

$quoted = preg_quote( $word, '/' );
    $parts  = preg_split( '/(' . $quoted . ')/iu', $text, 2, PREG_SPLIT_DELIM_CAPTURE );
    if ( ! is_array( $parts ) || count( $parts ) < 3 ) {
        return esc_html( $text );
    }

return esc_html( $parts[0] ) . '<span class="s4h-vbb-hero__accent">' . esc_html( $parts[1] ) . '</span>' . esc_html( $parts[2] );
}

function s4h_vbb_render_video_hero( $attributes ) {
    $defaults = array(
        'mediaUrl'      => '',
        'mediaType'     => '',
        'posterUrl'     => '',
        'eyebrow'       => 'THE WORLD IS YOURS',
        'heading'       => 'Where Could Your Career Take You?',
        'accentWord'    => 'Career',
        'description'   => 'Temukan langkah yang tepat untukmu. Bangun skill, pengalaman, dan karier global yang membuka lebih banyak pilihan.',
        'primaryText'   => 'Discover My Global Path →',
        'primaryUrl'    => '/career-assessment/',
        'secondaryText' => 'See how it works',
        'secondaryUrl'  => '#how',
        'proofCount'    => '10,000+',
        'proofText'     => 'young talents have started their journey',
        'overlay'       => 58,
        'minHeight'     => 760,
    );
    $a = wp_parse_args( $attributes, $defaults );

$overlay = max( 0, min( 90, intval( $a['overlay'] ) ) );
    $height  = max( 520, min( 1000, intval( $a['minHeight'] ) ) );

$wrapper_attributes = get_block_wrapper_attributes( array(
        'class' => 's4h-vbb-hero alignfull',
        'style' => '--s4h-vbb-overlay:' . $overlay . '%;--s4h-vbb-height:' . $height . 'px;',
    ) );

ob_start();
    ?>
    <section <?php echo $wrapper_attributes; ?>>
        <div class="s4h-vbb-hero__media" aria-hidden="true">
            <?php if ( ! empty( $a['mediaUrl'] ) && 'video' === $a['mediaType'] ) : ?>
                <video class="s4h-vbb-hero__video" autoplay muted loop playsinline preload="metadata"<?php echo ! empty( $a['posterUrl'] ) ? ' poster="' . esc_url( $a['posterUrl'] ) . '"' : ''; ?>>
                    <source src="<?php echo esc_url( $a['mediaUrl'] ); ?>" type="video/mp4">
                </video>
            <?php elseif ( ! empty( $a['mediaUrl'] ) ) : ?>
                <img class="s4h-vbb-hero__image" src="<?php echo esc_url( $a['mediaUrl'] ); ?>" alt="" loading="eager" fetchpriority="high">
            <?php endif; ?>
        </div>
        <div class="s4h-vbb-hero__overlay"></div>
        <div class="s4h-vbb-hero__inner">
            <div class="s4h-vbb-hero__content">
                <?php if ( ! empty( $a['eyebrow'] ) ) : ?>
                    <div class="s4h-vbb-hero__eyebrow"><?php echo esc_html( $a['eyebrow'] ); ?></div>
                <?php endif; ?>
                <h1 class="s4h-vbb-hero__title"><?php echo s4h_vbb_highlight_word( $a['heading'], $a['accentWord'] ); ?></h1>
                <p class="s4h-vbb-hero__description"><?php echo esc_html( $a['description'] ); ?></p>
                <div class="s4h-vbb-hero__actions">
                    <?php if ( ! empty( $a['primaryText'] ) ) : ?>
                        <a class="s4h-vbb-btn s4h-vbb-btn--primary" href="<?php echo esc_url( $a['primaryUrl'] ); ?>"><?php echo esc_html( $a['primaryText'] ); ?></a>
                    <?php endif; ?>
                    <?php if ( ! empty( $a['secondaryText'] ) ) : ?>
                        <a class="s4h-vbb-btn s4h-vbb-btn--secondary" href="<?php echo esc_url( $a['secondaryUrl'] ); ?>"><?php echo esc_html( $a['secondaryText'] ); ?></a>
                    <?php endif; ?>
                </div>
                <?php if ( ! empty( $a['proofCount'] ) || ! empty( $a['proofText'] ) ) : ?>
                    <div class="s4h-vbb-hero__proof"><strong><?php echo esc_html( $a['proofCount'] ); ?></strong><span><?php echo esc_html( $a['proofText'] ); ?></span></div>
                <?php endif; ?>
            </div>
        </div>
    </section>
    <?php
    return ob_get_clean();
}

function s4h_vbb_register_blocks() {
    register_block_type( 'star4hire/video-hero', array(
        'api_version'     => 3,
        'title'           => 'STAR4Hire Video / Image Hero',
        'description'     => 'Editable full-width STAR4Hire hero with background MP4 or image.',
        'category'        => 'star4hire',
        'icon'            => 'format-video',
        'editor_script'   => 's4h-vbb-editor',
        'style'           => 's4h-vbb-style',
        'editor_style'    => 's4h-vbb-editor-style',
        'render_callback' => 's4h_vbb_render_video_hero',
        'attributes'      => array(
            'mediaId'       => array( 'type' => 'number', 'default' => 0 ),
            'mediaUrl'      => array( 'type' => 'string', 'default' => '' ),
            'mediaType'     => array( 'type' => 'string', 'default' => '' ),
            'posterId'      => array( 'type' => 'number', 'default' => 0 ),
            'posterUrl'     => array( 'type' => 'string', 'default' => '' ),
            'eyebrow'       => array( 'type' => 'string', 'default' => 'THE WORLD IS YOURS' ),
            'heading'       => array( 'type' => 'string', 'default' => 'Where Could Your Career Take You?' ),
            'accentWord'    => array( 'type' => 'string', 'default' => 'Career' ),
            'description'   => array( 'type' => 'string', 'default' => 'Temukan langkah yang tepat untukmu. Bangun skill, pengalaman, dan karier global yang membuka lebih banyak pilihan.' ),
            'primaryText'   => array( 'type' => 'string', 'default' => 'Discover My Global Path →' ),
            'primaryUrl'    => array( 'type' => 'string', 'default' => '/career-assessment/' ),
            'secondaryText' => array( 'type' => 'string', 'default' => 'See how it works' ),
            'secondaryUrl'  => array( 'type' => 'string', 'default' => '#how' ),
            'proofCount'    => array( 'type' => 'string', 'default' => '10,000+' ),
            'proofText'     => array( 'type' => 'string', 'default' => 'young talents have started their journey' ),
            'overlay'       => array( 'type' => 'number', 'default' => 58 ),
            'minHeight'     => array( 'type' => 'number', 'default' => 760 ),
        ),
        'supports'        => array(
            'align'           => array( 'full' ),
            'anchor'          => true,
            'html'            => false,
            'customClassName' => true,
        ),
    ) );
}
add_action( 'init', 's4h_vbb_register_blocks', 20 );

/**
 * Editable Global Header block (v1.1.0)
 */
function s4h_vbb_render_global_header( $attributes ) {
    $defaults = array(
        'logoUrl' => '', 'logoAlt' => 'STAR4Hire', 'logoHref' => '/',
        'exploreText' => 'Explore', 'exploreUrl' => '/#goals',
        'passportText' => 'Career Passport', 'passportUrl' => '/career-assessment/',
        'englishText' => 'Free English Test', 'englishUrl' => '/english-level-test/',
        'opportunitiesText' => 'Opportunities', 'opportunitiesUrl' => '/opportunities/',
        'eventsText' => 'Events', 'eventsUrl' => '/events/',
        'aboutText' => 'About Us', 'aboutUrl' => '/about-us/',
        'ctaText' => 'Start Your Journey →', 'ctaUrl' => '/career-assessment/',
        'languageUrl' => '#', 'showLanguage' => false, 'menuLabel' => 'Menu',
    );
    $a = wp_parse_args( $attributes, $defaults );
    $items = array(
        array( $a['exploreText'], $a['exploreUrl'] ),
        array( $a['passportText'], $a['passportUrl'] ),
        array( $a['englishText'], $a['englishUrl'] ),
        array( $a['opportunitiesText'], $a['opportunitiesUrl'] ),
        array( $a['eventsText'], $a['eventsUrl'] ),
        array( $a['aboutText'], $a['aboutUrl'] ),
    );
    $wrapper = get_block_wrapper_attributes( array( 'class' => 's4h-vbb-header alignfull' ) );
    ob_start(); ?>
    <header <?php echo $wrapper; ?>>
      <div class="s4h-vbb-header__bar">
        <div class="s4h-vbb-header__brand">
          <a href="<?php echo esc_url( $a['logoHref'] ); ?>" aria-label="<?php echo esc_attr( $a['logoAlt'] ); ?>">
            <?php if ( ! empty( $a['logoUrl'] ) ) : ?>
              <img src="<?php echo esc_url( $a['logoUrl'] ); ?>" alt="<?php echo esc_attr( $a['logoAlt'] ); ?>">
            <?php else : ?>
              <strong>STAR<span style="color:#ed008c">4</span>HIRE</strong>
            <?php endif; ?>
          </a>
        </div>
        <nav class="s4h-vbb-header__nav" aria-label="Primary">
          <?php foreach ( $items as $item ) : if ( '' === trim( (string) $item[0] ) ) continue; ?>
            <a href="<?php echo esc_url( $item[1] ); ?>"><?php echo esc_html( $item[0] ); ?></a>
          <?php endforeach; ?>
        </nav>
        <div class="s4h-vbb-header__actions">
          <?php if ( ! empty( $a['showLanguage'] ) ) : ?><a class="s4h-vbb-header__lang" href="<?php echo esc_url( $a['languageUrl'] ); ?>" aria-label="Language">◎</a><?php endif; ?>
          <?php if ( ! empty( $a['ctaText'] ) ) : ?><a class="s4h-vbb-header__cta" href="<?php echo esc_url( $a['ctaUrl'] ); ?>"><?php echo esc_html( $a['ctaText'] ); ?></a><?php endif; ?>
          <details class="s4h-vbb-header__mobile-menu">
            <summary><?php echo esc_html( $a['menuLabel'] ); ?> <span aria-hidden="true">☰</span></summary>
            <nav class="s4h-vbb-header__mobile-panel" aria-label="Mobile">
              <?php foreach ( $items as $item ) : if ( '' === trim( (string) $item[0] ) ) continue; ?>
                <a href="<?php echo esc_url( $item[1] ); ?>"><?php echo esc_html( $item[0] ); ?></a>
              <?php endforeach; ?>
            </nav>
          </details>
        </div>
      </div>
    </header>
    <?php return ob_get_clean();
}

function s4h_vbb_register_global_header_block() {
    register_block_type( 'star4hire/global-header', array(
        'api_version' => 3,
        'title' => 'STAR4Hire Global Header',
        'description' => 'Editable STAR4Hire minimal header with replaceable logo, Start Your Journey CTA and Menu drawer on desktop/tablet/mobile.',
        'category' => 'star4hire',
        'icon' => 'menu-alt3',
        'editor_script' => 's4h-vbb-editor',
        'style' => 's4h-vbb-style',
        'editor_style' => 's4h-vbb-editor-style',
        'render_callback' => 's4h_vbb_render_global_header',
        'attributes' => array(
            'logoId' => array( 'type'=>'number','default'=>0 ),
            'logoUrl' => array( 'type'=>'string','default'=>'' ),
            'logoAlt' => array( 'type'=>'string','default'=>'STAR4Hire' ),
            'logoHref' => array( 'type'=>'string','default'=>'/' ),
            'exploreText' => array( 'type'=>'string','default'=>'Explore' ), 'exploreUrl' => array( 'type'=>'string','default'=>'/#goals' ),
            'passportText' => array( 'type'=>'string','default'=>'Career Passport' ), 'passportUrl' => array( 'type'=>'string','default'=>'/career-assessment/' ),
            'englishText' => array( 'type'=>'string','default'=>'Free English Test' ), 'englishUrl' => array( 'type'=>'string','default'=>'/english-level-test/' ),
            'opportunitiesText' => array( 'type'=>'string','default'=>'Opportunities' ), 'opportunitiesUrl' => array( 'type'=>'string','default'=>'/opportunities/' ),
            'eventsText' => array( 'type'=>'string','default'=>'Events' ), 'eventsUrl' => array( 'type'=>'string','default'=>'/events/' ),
            'aboutText' => array( 'type'=>'string','default'=>'About Us' ), 'aboutUrl' => array( 'type'=>'string','default'=>'/about-us/' ),
            'ctaText' => array( 'type'=>'string','default'=>'Start Your Journey →' ), 'ctaUrl' => array( 'type'=>'string','default'=>'/career-assessment/' ),
            'languageUrl' => array( 'type'=>'string','default'=>'#' ), 'showLanguage' => array( 'type'=>'boolean','default'=>false ),
            'menuLabel' => array( 'type'=>'string','default'=>'Menu' ),
        ),
        'supports' => array( 'align'=>array('full'), 'anchor'=>true, 'html'=>false, 'customClassName'=>true ),
    ) );
}
add_action( 'init', 's4h_vbb_register_global_header_block', 21 );

/**
 * Header logo override (v1.1.2)
 * Lets sites keep the existing custom HTML header and replace only the visual logo.
 */
function s4h_vbb_logo_override_register_setting() {
    register_setting( 's4h_vbb_logo_override', 's4h_vbb_logo_override_id', array(
        'type'              => 'integer',
        'sanitize_callback' => 'absint',
        'default'           => 0,
    ) );
}
add_action( 'admin_init', 's4h_vbb_logo_override_register_setting' );

function s4h_vbb_logo_override_menu() {
    add_theme_page(
        'STAR4Hire Logo',
        'STAR4Hire Logo',
        'edit_theme_options',
        's4h-vbb-logo',
        's4h_vbb_logo_override_page'
    );
}
add_action( 'admin_menu', 's4h_vbb_logo_override_menu' );

function s4h_vbb_logo_override_page() {
    if ( ! current_user_can( 'edit_theme_options' ) ) {
        return;
    }
    $id  = absint( get_option( 's4h_vbb_logo_override_id', 0 ) );
    $url = $id ? wp_get_attachment_image_url( $id, 'full' ) : '';
    ?>
    <div class="wrap">
        <h1>STAR4Hire Header Logo</h1>
        <p>Replace only the logo while keeping the current header HTML, menu, CTA, spacing and mobile behavior unchanged.</p>
        <form method="post" action="options.php">
            <?php settings_fields( 's4h_vbb_logo_override' ); ?>
            <input type="hidden" name="s4h_vbb_logo_override_id" id="s4h_vbb_logo_override_id" value="<?php echo esc_attr( $id ); ?>">
            <div style="background:#fff;border:1px solid #ddd;border-radius:12px;padding:24px;max-width:720px;margin:20px 0;">
                <img id="s4h-vbb-logo-preview" src="<?php echo esc_url( $url ); ?>" alt="Logo preview" style="<?php echo $url ? '' : 'display:none;'; ?>max-width:280px;max-height:90px;object-fit:contain;background:#f7f7f7;padding:14px;border-radius:8px;">
                <p>
                    <button type="button" class="button button-primary" id="s4h-vbb-choose-logo"><?php echo $url ? 'Replace Logo' : 'Choose Logo'; ?></button>
                    <button type="button" class="button" id="s4h-vbb-remove-logo" style="<?php echo $url ? '' : 'display:none;'; ?>">Remove Override</button>
                </p>
                <p class="description">Recommended: transparent PNG/WebP or SVG already supported by your WordPress setup, horizontal logo, around 500–900 px wide.</p>
            </div>
            <?php submit_button( 'Save Logo' ); ?>
        </form>
    </div>
    <?php
}

/**
 * v1.3.0 — Editable homepage sections.
 */
function s4h_vbb_default_pathways() {
    return array(
        array('title'=>'GERMANY','subtitle'=>'Skilled Hospitality Career','tag'=>'Language • Qualification • Experience','url'=>'#','mediaUrl'=>'','mediaType'=>'','theme'=>'de','enabled'=>true),
        array('title'=>'UNITED KINGDOM','subtitle'=>'Degree + Career','tag'=>'DreamLeap Beyond','url'=>'#','mediaUrl'=>'','mediaType'=>'','theme'=>'uk','enabled'=>true),
        array('title'=>'UNITED STATES','subtitle'=>'Paid Internship + Study','tag'=>'Experience • Career','url'=>'#','mediaUrl'=>'','mediaType'=>'','theme'=>'us','enabled'=>true),
        array('title'=>'SWITZERLAND','subtitle'=>'Young Professionals','tag'=>'Advanced Career','url'=>'#','mediaUrl'=>'','mediaType'=>'','theme'=>'ch','enabled'=>true),
    );
}
function s4h_vbb_render_pathways( $attributes ) {
    $defaults = array(
        'eyebrow'=>'EXPLORE GLOBAL PATHWAYS',
        'heading'=>'Your future has no borders.',
        'description'=>'Explore destination pathways and understand what you need to build next.',
        'pathways'=>s4h_vbb_default_pathways(),
    );
    $a = wp_parse_args($attributes,$defaults);
    $items = is_array($a['pathways']) ? $a['pathways'] : s4h_vbb_default_pathways();
    $wrapper = get_block_wrapper_attributes(array('class'=>'s4h-vbb-section s4h-vbb-pathways'));
    ob_start(); ?>
    <section <?php echo $wrapper; ?>>
      <div class="s4h-vbb-section__inner">
        <p class="s4h-vbb-eyebrow"><?php echo esc_html($a['eyebrow']); ?></p>
        <h2><?php echo esc_html($a['heading']); ?></h2>
        <p class="s4h-vbb-lead"><?php echo esc_html($a['description']); ?></p>
        <div class="s4h-pathway-rail s4h-vbb-pathway-rail">
        <?php $n=0; foreach($items as $item): if(isset($item['enabled']) && !$item['enabled']) continue; $n++; 
            $theme = isset($item['theme']) ? sanitize_html_class($item['theme']) : 'de';
            $style='';
            if(!empty($item['mediaUrl']) && (!isset($item['mediaType']) || $item['mediaType'] !== 'video')) $style='background-image:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.78)),url('.esc_url($item['mediaUrl']).');background-size:cover;background-position:center;';
        ?>
          <a class="s4h-pathway-card s4h-pathway-card--<?php echo esc_attr($theme); ?> s4h-vbb-pathway-card" href="<?php echo esc_url($item['url'] ?? '#'); ?>" style="<?php echo esc_attr($style); ?>">
            <?php if(!empty($item['mediaUrl']) && isset($item['mediaType']) && $item['mediaType']==='video'): ?><video class="s4h-vbb-card-video" autoplay muted loop playsinline preload="metadata"><source src="<?php echo esc_url($item['mediaUrl']); ?>" type="video/mp4"></video><span class="s4h-vbb-card-shade"></span><?php endif; ?>
            <span class="s4h-vbb-pathway-num"><?php echo esc_html(str_pad((string)$n,2,'0',STR_PAD_LEFT)); ?></span>
            <div class="s4h-vbb-pathway-copy"><strong><?php echo esc_html($item['title'] ?? ''); ?></strong><p><?php echo esc_html($item['subtitle'] ?? ''); ?></p><small><?php echo esc_html($item['tag'] ?? ''); ?></small></div>
          </a>
        <?php endforeach; ?>
        </div>
      </div>
    </section>
    <?php return ob_get_clean();
}

function s4h_vbb_default_assets() {
    return array(
        array('icon'=>'🎓','label'=>'EDUCATION'),array('icon'=>'✦','label'=>'SKILL'),array('icon'=>'◉','label'=>'LANGUAGE'),array('icon'=>'💼','label'=>'EXPERIENCE'),array('icon'=>'◎','label'=>'NETWORK'),array('icon'=>'★','label'=>'QUALIFICATION'),array('icon'=>'✺','label'=>'REPUTATION'),array('icon'=>'$','label'=>'INCOME')
    );
}
function s4h_vbb_render_career_assets( $attributes ) {
    $defaults=array(
        'eyebrow'=>'FUTURE MILLIONAIRE MINDSET',
        'headingTop'=>"Don't just chase income.",
        'headingAccent'=>'Build career assets.',
        'description'=>'Setiap aset yang kamu bangun hari ini akan membuka lebih banyak pilihan dan kebebasan di masa depan.',
        'resultLabel'=>'THE RESULT?',
        'resultText'=>'MORE CHOICES.',
        'mediaUrl'=>'','mediaType'=>'','assets'=>s4h_vbb_default_assets(),
    );
    $a=wp_parse_args($attributes,$defaults); $assets=is_array($a['assets'])?$a['assets']:s4h_vbb_default_assets();
    $wrapper=get_block_wrapper_attributes(array('class'=>'s4h-vbb-assets-section s4h-future'));
    ob_start(); ?>
    <section <?php echo $wrapper; ?>><div class="s4h-vbb-assets-inner">
      <div class="s4h-vbb-assets-copy"><p class="s4h-vbb-eyebrow"><?php echo esc_html($a['eyebrow']); ?></p><h2><?php echo esc_html($a['headingTop']); ?> <span class="s4h-gradient-text"><?php echo esc_html($a['headingAccent']); ?></span></h2><p><?php echo esc_html($a['description']); ?></p></div>
      <div class="s4h-vbb-assets-visual">
      <?php if(!empty($a['mediaUrl'])): ?>
        <div class="s4h-vbb-assets-media"><?php if(($a['mediaType']??'')==='video'): ?><video autoplay muted loop playsinline preload="metadata"><source src="<?php echo esc_url($a['mediaUrl']); ?>" type="video/mp4"></video><?php else: ?><img src="<?php echo esc_url($a['mediaUrl']); ?>" alt="Career assets visual" loading="lazy"><?php endif; ?></div>
      <?php else: ?>
        <div class="s4h-asset-path s4h-vbb-asset-path"><?php foreach(array_slice($assets,0,8) as $i=>$asset): ?><div class="s4h-asset s4h-asset--<?php echo intval($i+1); ?>"><i><?php echo esc_html($asset['icon']??''); ?></i><b><?php echo esc_html($asset['label']??''); ?></b></div><?php endforeach; ?></div>
        <div class="s4h-more-choices"><small><?php echo esc_html($a['resultLabel']); ?></small><strong><?php $parts=preg_split('/\s+/',trim($a['resultText'])); $last=array_pop($parts); echo esc_html(implode(' ',$parts)); ?> <span><?php echo esc_html($last); ?></span></strong></div>
      <?php endif; ?>
      </div>
    </div></section>
    <?php return ob_get_clean();
}

/**
 * v1.3.0 — Curated Instagram Reel cards.
 * Uses manually selected thumbnails + Reel URLs instead of live Instagram embeds.
 * This keeps the homepage fast and avoids dependency on Meta oEmbed authentication.
 */
function s4h_vbb_default_reels() {
    return array(
        array('enabled'=>true,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'AFAN','title'=>'USA Journey','badge'=>'Proof of Outcome','url'=>'','accent'=>'pink'),
        array('enabled'=>true,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'TND STUDENT','title'=>'Taiwan Journey','badge'=>'Proof of Journey','url'=>'','accent'=>'cyan'),
        array('enabled'=>true,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'PARENT STORY','title'=>'Why We Trusted STAR4Hire','badge'=>'Proof of Trust','url'=>'','accent'=>'orange'),
        array('enabled'=>true,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'CAREER DAY','title'=>'Global Career Clinic','badge'=>'Community Event','url'=>'','accent'=>'purple'),
        array('enabled'=>false,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'ALUMNI','title'=>'Global Career Story','badge'=>'Alumni Story','url'=>'','accent'=>'pink'),
        array('enabled'=>false,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'EMPLOYER','title'=>'Talent in Action','badge'=>'Employer Proof','url'=>'','accent'=>'cyan'),
        array('enabled'=>false,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'TND STUDENT','title'=>'Asia Journey','badge'=>'Student Story','url'=>'','accent'=>'orange'),
        array('enabled'=>false,'thumbId'=>0,'thumbUrl'=>'','kicker'=>'CAREER GPS','title'=>'Build Your Next Move','badge'=>'Career Coaching','url'=>'','accent'=>'purple'),
    );
}

function s4h_vbb_render_curated_reels( $attributes ) {
    $defaults = array(
        'eyebrow' => 'REAL PEOPLE. REAL JOURNEYS.',
        'heading' => 'Straight from our community',
        'description' => 'Mereka memulai dari satu keputusan. Lihat perjalanan karier mereka sampai hari ini.',
        'buttonText' => 'View more on Instagram →',
        'buttonUrl' => 'https://www.instagram.com/star4hire/',
        'reels' => s4h_vbb_default_reels(),
    );
    $a = wp_parse_args( $attributes, $defaults );
    $reels = is_array( $a['reels'] ) ? $a['reels'] : s4h_vbb_default_reels();
    $wrapper = get_block_wrapper_attributes( array( 'class' => 's4h-vbb-reels-section' ) );
    ob_start(); ?>
    <section <?php echo $wrapper; ?>>
      <div class="s4h-vbb-reels-inner">
        <div class="s4h-vbb-reels-intro">
          <p class="s4h-vbb-eyebrow"><?php echo esc_html( $a['eyebrow'] ); ?></p>
          <h2><?php echo esc_html( $a['heading'] ); ?></h2>
          <p><?php echo esc_html( $a['description'] ); ?></p>
          <?php if ( ! empty( $a['buttonText'] ) && ! empty( $a['buttonUrl'] ) ) : ?>
            <a class="s4h-vbb-reels-profile" href="<?php echo esc_url( $a['buttonUrl'] ); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html( $a['buttonText'] ); ?></a>
          <?php endif; ?>
        </div>
        <div class="s4h-vbb-reels-rail" aria-label="Curated Instagram reels">
          <?php foreach ( $reels as $item ) : if ( empty( $item['enabled'] ) ) continue;
            $url = ! empty( $item['url'] ) ? $item['url'] : '#';
            $accent = in_array( $item['accent'] ?? '', array('pink','cyan','orange','purple'), true ) ? $item['accent'] : 'pink';
          ?>
          <a class="s4h-vbb-reel-card s4h-vbb-reel-card--<?php echo esc_attr( $accent ); ?>" href="<?php echo esc_url( $url ); ?>"<?php echo '#' !== $url ? ' target="_blank" rel="noopener noreferrer"' : ''; ?>>
            <span class="s4h-vbb-reel-card__media">
              <?php if ( ! empty( $item['thumbUrl'] ) ) : ?>
                <img src="<?php echo esc_url( $item['thumbUrl'] ); ?>" alt="<?php echo esc_attr( $item['title'] ?? 'STAR4Hire story' ); ?>" loading="lazy" decoding="async">
              <?php endif; ?>
              <span class="s4h-vbb-reel-card__shade"></span>
              <span class="s4h-vbb-reel-card__play" aria-hidden="true">▶</span>
            </span>
            <span class="s4h-vbb-reel-card__copy">
              <small><?php echo esc_html( $item['kicker'] ?? '' ); ?></small>
              <strong><?php echo esc_html( $item['title'] ?? '' ); ?></strong>
              <?php if ( ! empty( $item['badge'] ) ) : ?><em><?php echo esc_html( $item['badge'] ); ?></em><?php endif; ?>
            </span>
          </a>
          <?php endforeach; ?>
        </div>
      </div>
    </section>
    <?php return ob_get_clean();
}

function s4h_vbb_register_section_blocks() {
    $common=array('api_version'=>3,'category'=>'star4hire','editor_script'=>'s4h-vbb-editor','style'=>'s4h-vbb-style','editor_style'=>'s4h-vbb-editor-style','supports'=>array('align'=>array('full'),'anchor'=>true,'html'=>false));
    register_block_type('star4hire/global-pathways',array_merge($common,array(
        'title'=>'STAR4Hire Global Pathways','description'=>'Editable destination pathway cards with optional image/video backgrounds.','icon'=>'location-alt','render_callback'=>'s4h_vbb_render_pathways',
        'attributes'=>array('eyebrow'=>array('type'=>'string','default'=>'EXPLORE GLOBAL PATHWAYS'),'heading'=>array('type'=>'string','default'=>'Your future has no borders.'),'description'=>array('type'=>'string','default'=>'Explore destination pathways and understand what you need to build next.'),'pathways'=>array('type'=>'array','default'=>s4h_vbb_default_pathways()))
    )));
    register_block_type('star4hire/career-assets',array_merge($common,array(
        'title'=>'STAR4Hire Career Assets','description'=>'Editable Future Millionaire career-assets section. Keep the animated asset path or replace it with an image/MP4.','icon'=>'chart-line','render_callback'=>'s4h_vbb_render_career_assets',
        'attributes'=>array('eyebrow'=>array('type'=>'string','default'=>'FUTURE MILLIONAIRE MINDSET'),'headingTop'=>array('type'=>'string','default'=>"Don't just chase income."),'headingAccent'=>array('type'=>'string','default'=>'Build career assets.'),'description'=>array('type'=>'string','default'=>'Setiap aset yang kamu bangun hari ini akan membuka lebih banyak pilihan dan kebebasan di masa depan.'),'resultLabel'=>array('type'=>'string','default'=>'THE RESULT?'),'resultText'=>array('type'=>'string','default'=>'MORE CHOICES.'),'mediaId'=>array('type'=>'number','default'=>0),'mediaUrl'=>array('type'=>'string','default'=>''),'mediaType'=>array('type'=>'string','default'=>''),'assets'=>array('type'=>'array','default'=>s4h_vbb_default_assets()))
    )));
    register_block_type('star4hire/partner-logos',array_merge($common,array(
        'title'=>'STAR4Hire Partner Logos','description'=>'Editable partner logo rail plus trust statements.','icon'=>'groups','render_callback'=>'s4h_vbb_render_partner_logos',
        'attributes'=>array('eyebrow'=>array('type'=>'string','default'=>'TRUSTED BY'),'heading'=>array('type'=>'string','default'=>'Partners in Your Global Journey'),'description'=>array('type'=>'string','default'=>'STAR4Hire bekerja sama dengan institusi pendidikan, employer, dan partner global untuk membantu membuka lebih banyak peluang.'),'partners'=>array('type'=>'array','default'=>s4h_vbb_default_partners()),'stats'=>array('type'=>'array','default'=>s4h_vbb_default_trust_stats()))
    )));
    register_block_type('star4hire/curated-reels',array_merge($common,array(
        'title'=>'STAR4Hire Curated Instagram Reels','description'=>'Editable social-proof cards linked to curated Instagram Reels.','icon'=>'instagram','render_callback'=>'s4h_vbb_render_curated_reels',
        'attributes'=>array('eyebrow'=>array('type'=>'string','default'=>'REAL PEOPLE. REAL JOURNEYS.'),'heading'=>array('type'=>'string','default'=>'Straight from our community'),'description'=>array('type'=>'string','default'=>'Mereka memulai dari satu keputusan. Lihat perjalanan karier mereka sampai hari ini.'),'buttonText'=>array('type'=>'string','default'=>'View more on Instagram →'),'buttonUrl'=>array('type'=>'string','default'=>'https://www.instagram.com/star4hire/'),'reels'=>array('type'=>'array','default'=>s4h_vbb_default_reels()))
    )));
}
add_action('init','s4h_vbb_register_section_blocks',25);

Advanced Web Server Manager